新コンテンツ「めしろぐ。」公開

Web制作の練習として作っているページの第一弾ができあがりました。
うちでおいしくできた料理のレシピを記録しつつおすそ分けするページ、題して「めしろぐ」ですー。
www001.upp.so-net.ne.jp

HTMLをいちから書いたのは5年ぶり！
とはいえ制作環境などもろもろの状況が進歩していたおかげで、特に苦労することなく楽しく作れました。

いまのところCMS化（ブログ化）はしていないものの、継続的に更新できるようには作ってあるので、時々内容を増やしていけたらそれもまた楽しいかな。

めしろぐの使い方。

カレンダーの鍋アイコンがついた日をクリックすると、その日作った料理に移動します。右下のTOPアイコンをクリックするとカレンダーに戻ります。
10月になったら、カレンダーに月を移動する矢印アイコンがつきます（つけます）（今は隠してあります）。

もし作ってみたいレシピがあれば印刷もおすすめです。料理以外の要素（ロゴやカレンダーなど）は印刷されないように作ってあります（印刷プレビューで確認できます）。

ちなみに、スマホやタブレットで読むと縦並びですが、PCでウィンドウを横に広げると2日分が横に並ぶレイアウトになります。

がんばったところ。

フリー素材に頼らず、欲しい画像はすべてIllustratorで作りました。フリー素材は探すのに時間がかかるうえに、100%イメージ通りのものがこの世に存在しなくてどうしても妥協が入ってしまうので、未熟でもいいから作ろうと。結果的に、ストレスが少なくクオリティも上がって、いいことしかなかったです。ちなみにロゴのフォントは「~~やさしさゴシック~~しあさって」。

デザイン全体に関して言うと、一度「できた！」と思ったけど一晩寝かせた次の日には「いやこれはダサい！」とセルフダメ出しが発動したので練り直しました。まだまだ趣味クオリティですが、最初よりはマシになってるほうです。ゆるい・かわいい・なごむ雰囲気を出したいならなおさら、整えるべき要所をしっかり整えてトータルの完成度を磨くことが大事な気がします。次回作ではもう少し整える方面を意識したいですね。

作業期間は構想からここまで10日ほど。時間でいうと37時間でした（勉強や調べ物の時間も含む）。

【やや専門的な話】制作の流れについて。

ノートに鉛筆でワイヤーフレーム（というかラフ画）を描いてイメージを膨らませたのち、Illustratorを使ってカンプ（完成イメージ）的なものと素材画像を制作。Dreamweaverでコーディングしながら、Chromeの開発者ツールとiPhoneで表示確認と細かい修正をしていきました。

カンプはPhotoshopで作るのが主流らしいですが、Illustrator派のWebデザイナーの方もいらっしゃるようだし、素材画像を作るついでに全体像まで一緒に描いたほうが手っ取り早かろう、と思いまして。
ワークスペースを「Web」に、各単位をピクセルに、ピクセルプレビューをオンに。それでもなおピクセルが小数点になることがあって、こんなもんなのかな……？と疑問に思いつつ、素材として書き出すパーツの寸法を変形パネルで整数に丸めて。選んだ画像を複数のサイズとファイル形式で一括して書き出せる「アセットの書き出し」が便利でした。SVGの書き出しについては「形式の設定」オプションを変える必要があり、文字を「アウトライン化」、レイヤー名がファイルに出力されないようにオブジェクトIDを「最小」に、IE対策としてレスポンシブをオフに。

Retinaディスプレイ上では等倍のPNGよりSVGのほうが明らかにきれいなので、アイコン類はぜんぶSVGを採用してます。タイトルロゴはPNGでsrcset属性でのRetina対応。背景は、まあいっかと思って(笑)普通のPNGです。

Dreamweaverはワークスペースを「デベロッパー」にして使ってみたら、高機能テキストエディタ＋プレビュー機能＋簡易FTPという感じの道具でした。Emmetが便利で感動。SCSS/LESSはこれから覚えるつもり。Gitにも対応はしているけれど、今はわかばちゃんで覚えたSourceTreeのほうで管理してます。失敗を恐れずにコードをいじれて心強いですね。