制作の振り返り【ダム紹介サイト】

出かけたダムを紹介するサイトを作りました。

dam.becolomochi.com

以前作った写真集をWebに見れる形で直そうと思ったのがきっかけで、たてよこWebアワードという縦書きサイトのコンテストに出品しています。

名づけの理由とかは前回記事に書きました。

しろくまというリポジトリのこと2 と健康とダムのこと - べこのツボ

この記事では思考や作業を時系列順に撮っておいた画像を並べて解説をだらっと書いていきます。主に自分の振り返り記事です。目まぐるしく作業していた時期もあったので忘れてることが多い印象。

2/8 思考の整理のためのマインドマップ作成

直接この作品とは関係ない部分だけど、ざっくり自分の頭の中を整理するため好きなものをまとめたマインドマップを作っていた。

いい大人が真面目にこういうこと言うのどうなんだろう…って思うけど、好きなものを見たときに自分の感情は「ﾓｹｰ!!!」と「ふぁ〜〜〜」に分かれることがわかった。逆に「ワクワク」とか「スリルさ」みたいなエキサイティングなもの？は感情が動きにくいらしい。例えば、ゲームのTVCMにあるような「人は戦いが好きだ」みたいなフレーズは「？？？？」となってしまう。

2/13 デザイン案1

このタイミングでレイアウトなどがだいたい決まっていた様子。

マインドマップやラフはA3サイズくらいのクロッキー帳を使ってる。机が狭いので次はもう少し小さいサイズを買おうと思っている。

マルマン maruman スケッチブック クロッキー帳 白クロッキー紙 ブルー SL-02

2/14 実作業 HTML

寝る時間がせまっていたのでとりあえずトップのHTMLだけガッと勢いで。

たしかこのタイミングで開発環境もちょっと直したんだと思う。慣れないので時間がかかる。

2/16 実作業 書体選定

縦書きのスタイルを用意して、書体を試してみていた。

Googleフォントで用意されている「はんなり明朝」……微調整で対応したらどれくらい時間がかかるんだろう。※横書きなら全く問題なく綺麗に見えます。

Macにある「ヒラギノ明朝」にしてみたり。ヒラギノの安定感にほっとするものの、Windowsにはない書体なのでどうしようかなーと思っていたのですが、最終的にたてよこWebアワードのサイトでも使っているFONTPLUSに。6ヶ月無料トライアル版。書体は「F+UD-筑紫明朝 R」縦書きも美しい。

2/20 実作業 CSSアニメーション

リンクにアニメーションを適用するテスト。

マウスホバーでエリアが広がって説明が出る。 タッチパネルだと解説出ないので優しくないUIです（あとで直そう…）

2/23昼 技術のなさに振り回される。レイアウト変更。

アワードの締切が2月末で焦り始める。スクロールの調整に泣かされる。泣く泣くレイアウト変更。ボックスを横並びにする。横に長く続くサイトは見づらいって思ってたのに自分でそういうの作ってしまった…。

2/23夜 コンセプトをまとめる。

応募フォームに3か所くらいコンセプトやアピールポイントなどを書く欄があったので内容をまとめた。

PCと向き合って考え始めたものの、つまづいて動けなくなってしまった。

これまで作った作品や解説文を見直してマインドマップで整理。すぐPC作業に入らないほうが良かったかもしれないな。

その後

ラストスパートをかけて締切に間に合わせました。

まとめ

あれやりたいなー→どうやるんだろう→調べる→これ使えそう→他と組み合わせると動かなくなる→他ので代用しよう→調整…という作業にだいぶ時間を取られてしまった。 デザイン力×技術力の組み合わせよ……がんばろ。