ワイヤーフレームの作成

サイトの構造を考えるではサイト全体を構造化するために「遷移図」を作っていましたが、ワイヤーフレームではサイト全体から各記事ページの構造化を行なう作業になります。

ワイヤーフレームは単にサイトの構造を視覚化していくだけではなく、漠然としていたサイトの構造を明確になっていきますし、忘れていた要素も見つけることができるので、サイト構築を行なう際には行ったほうがいい作業です。

また、デザインをするにあたってもワイヤーフレームがしっかりと完成していると変更修正が最小限になるため、デザインを起こすのもとても楽になります。

ワイヤーフレームという言葉だけではイメージができないと思いますので、東池袋カレーマップで作ったワイヤーフレームを見てみます。

トップページ

各記事ページ

見てもらうと分かるように、ワイヤーフレームでは装飾を一切省いた状態で、ページ内に「各要素」を配置していくものです。これを行なうことで、全体のバランスを見るとともに、情報に過不足がないか確認することができます。

今回は経験則からある程度の方向性が見えていたため、ワイヤーフレームの時点でもそれほど詳しく詰めてはいませんが、中にはもっと細かく作りこんでいく人もいます。この辺のバランスは作るサイトの内容と各自の経験から考えていいところだと思います。

また、ワイヤーフレームは表に出るものではないため、作成に関して厳密なルールはありませんので手書きでもOKです。

＜余談＞
サイト制作を受託するような場合は、クライアントにイメージを確認するためワイヤーフレームを提出したり、見ながら打ち合わせを行なうことがあります。その場合はワイヤーフレームの形式も意識する必要はあります。

手書きで格好いいワイヤーフレームを書ける人もいますが、自分の場合は手書きが大の苦手で人に見せられる物が書けないので、今回はWeb上で簡単にワイヤーフレームが作れるcacooというサービスを利用しました。

ツールを使うメリットとしては、書いたり消したりが楽なことはもちろんですが、手書きだと各要素の縦横比や縮尺がバラバラになってしまい、デザインを起こした際にバランスがおかしくなってしまうことがありますが、ツールで縮尺を完全に合わせておけばそういったトラブルは避けられます。

また、cacooでは今回のように画像としてアウトプットすることもできるため、印刷して赤入れ（ITっぽくないですが、印刷物にすると気がつくことは多いです）をすることもできますし、デザインを起こす前の段階でも人に相談することも簡単にできます。

自分のように手書きが苦手で書いていると余計に頭が混乱してしまうようなタイプの人は是非ワイヤーフレームツールを活用してみてはいかがでしょうか。

あっ、、、、、この書き方だと完全にツールで作業をしているように見えますが、現実的には［手書きでラフ起こし］→［ワイヤーフレームツールに移行］→［印刷して修正］→［ワイヤーフレームツールで清書］のように行ったりきたりしています^^

＜使用ツール＞
cacoo