Making

テーマを決める

まずテーマを決めて、ざっとどういうページにするか考えます。靴やメガネのページはシングルページ、今回の食べ物のページは下層ページありのページ構成といった感じに、ある程度ボリュームを決めます。

イメージビジュアル仮作成

仮のスクリーンショットを使用して、イメージビジュアルを作成します。特集のキーになる画像で、ヒーローイメージ（トップに配置する巨大な画像）として使用します。
ここで使用するスクリーンショットは仮撮影したもので後で差し替えることを前提としますが、大きくイメージがずれないようにある程度雰囲気を決めて撮影します。

ここで大体のイメージが決まってくるので、いろんなサイトや雑誌などのデザインを参考にしています。好みもありますが、スクリーンショットをいかせるように、デザインは主張しすぎないようにシンプルになるように心がけています。

スクリーンショット撮影

本番用のスクリーンショットを撮影します。特にシングルページの場合は、単調にならないように色々な場所で撮影しましたが、野外の場合は天候や時間もあるので結構時間がかかります。
メガネの特集ページはモデルとして他の方にお願いしたので、あらかじめロケハンやテスト撮影をしました。

スペースが埋まらなかった時のためや、うまく撮れていなかった時のために、なるべく多めに撮るようにしています。

デザインカンプ作成&コーディング

実際にWebページにするためのデザインカンプ（デザイン案）を制作します。ここでイメージビジュアルのスクリーンショットも差し替えて、完成させます。
一番慣れているのと、イメージ（スクリーンショット）の加工も一緒にできるので、全部Photoshopで作っています。

デザインは最後まで作りきらずに、ある程度できたら実際にコーディングして、Web上でうまく見えるか確認してから残りのデザインを作ります。
このサイトはレスポンシブ（PCやタブレット、スマートフォンも単一のページで対応）前提で作ってあるので、PCだけでなくスマートフォンでの見栄えも確認します。
この段階でイマイチならデザインの手直しをすることも。結構手戻りが多いですｗ業務でこういうやり方はなかなかできないと思いますが、趣味なので納得いくまで繰り返しますｗ

最終的には、これくらい長いカンプが出来上がります。

ブラウザチェック＆完成

実際にブラウザでチェックしてうまくできていない部分を修正して、またチェックを繰り返して完成です！
技術的にあまり難しいことはしていないのですが、毎回新しい試みをしようとして結構時間がかかっていますｗ

サイトによりますが、大抵の場合半分以上スマートフォンからの閲覧になるので、PCでもスマートフォンでも（タブレットでも）うまく見られるようにするのが一番大変かもしれません。
細かく対応しようとすると結構難しいので、デザインの段階である程度柔軟性があるようにするのが楽ですね。このサイトの場合は、PC版のデザインカンプだけ作ってスマートフォン版のデザインは頭の中だけで終わっています。
一から自分で作ろうとすると大変ですが、TumblrやWordpressは綺麗なテンプレートも多いので、それらを利用すると楽で綺麗に作れるかもしれませんね！