こんにちは！新人森田です。
本日ハレノヒ周辺は雨模様な予感。
傘を忘れた私は非常にドキドキしております。

今回からこのハレノヒブログを素材として、実際にデザインを進めていく様子もお送りしていきます。森田がこのブログを劇的変身させます！（予定）

[森田]
いよいよデザイン！！どうやってハレノヒっぽくしようかなー

[山形師匠のお言葉]
Webデザインを始める前に、作るものの情報を整理して視覚化したものをワイヤーフレームと言います。サイトの設計図のようなものです。要件を満たし、ユーザーが使いやすいサイトをデザインするために沢山ワイヤーフレームを書きましょう。

[森田]
ふむふむ、デザインの前にワンステップあるんですね。確かに設計図がないととんでもないものを作り出してしまいそうです。ハレノヒブログのワイヤーフレーム、書いてみます！

要素を書き出す

デザインは、ただかっこよさげにレイアウトすればいいというものではありません。伝えたいものを出来るだけ伝えたい通りに伝える為にデザインするんだと思っています。

では、そもそも「伝えたいもの」とは一体何なのか？
まずはレイアウトに必要な要素を書き出してみることにします。

140108-01

上記のように、ハレノヒブログを構成する要素は計９個でした。

構成を考える

次に、書き出した要素を配置して全体の構成を考えます。ですがその前に重要なポイントがひとつあります。
「webページを閲覧するのはパソコンだけではない」ということです。

スマホ・タブレットを持っていることは2014年の今、もう普通のことになってきました。しかもそれらの方がパソコンより断然お手軽です。電車内でスマホやタブレットをいじって時間をつぶす人の多さを見ていると、これからモバイル端末のアクセスが増えていくことを予感させます。というか今まさにしてますねきっと。

そういうわけで、スマホ・タブレット・パソコンのどれからアクセスしても見やすいサイトを目指していきたいと思います。
そしてこういう仕組みのデザインを「レスポンシブデザイン」といいます。ちなみに師匠からの受け売りです。

とはいえ全部を同時進行で考えられる頭は私にはありません。
スマホ版から発展させる「モバイルファースト」というやりかたもありますが、ここではパソコンベースのオーソドックスなレイアウトから、他の端末へのアレンジを考えてみます。

140108-04

横幅が小さくなった時にどうなるかも検証して、横に表示されていたカラムを下にしたりと見やすい工夫を。

ブログの大体の枠組みが見えてきました！
ワイヤーフレームによってイメージの共有や指示がしやすくなりそうです。チームでもの作りをする上では必需品ですね。

さあハレノヒブログの設計図が出来ました。次はいよいよデザインか？！どこから手を付けよう？？！と期待に胸を膨らませながら今回の修行はここまでです。押忍！