最低限知っておきたい「ワイヤーフレーム」の目的と作り方5段階まとめ

サイトを制作する時にディレクターがワイヤーフレームを作ることが多いかと思います。
要素の抜け漏れや機能の過不足がないように画面設計を可視化する事が目的です。
これによりサイト全体の設計が関係者全体で事前に共有できるようになり、ゴールがぶれなくなります。
今回は、ワイヤーフレームの作り方について、カフェのサイトを例に5段階で順を追って、考えてみたいと思います。

#1 最低限あるべき構成要素を洗い出す

ワイヤーフレームを作成する前に以下の2点を考えてみましょう。

1：ページのゴール

WEBサイトはスクロールしていけば無限に要素を配置させることが可能ですが、目標が定まらなくなりユーザーが迷子になってしまいます。
これを回避するためにも、1つのページには1つの目的しか訴求しないことが基本になります。
この訴求点を明確にし、ゴールを定めましょう。

2：ページに必要な要素

1にもとづきページには何が必要なのかを確認します。
「店舗概要」であれば、所在地や席数などでしょうし、「メニュー」であれば、メニュー一覧やそれぞれの写真が必要になるでしょう。

#2 大枠の要素を書き出す

下記の5点はどんなサイトでもある大枠の要素だと思います。

• ロゴ
• ヘッダー
• ナビゲーション
• ボディ
• フッター

これをワイヤーフレームに落としてみると下記のようになります。
http://skan.in/wp-content/uploads/2014/10/wireframe1.jpg

サイトの全体感がイメージできてきました。
ここでもナビゲーションは上部なのか、サイドにするのかといった議論が生じるかもしれません。
こういった議論をするためにもワイヤーフレームが必要なことがわかります。

なお、ご覧いただいてもわかるように、ワイヤーフレームはモノクロでデザイン要素を抜くことが標準的となっています。
色やデザインを入れてしまうと、人はそちらにばかり目がいってしまい、本来の目的であるサイト設計への観点が疎かになってしまうからです。

やってはいけないこと

• 色をつける

やるべきこと

• ゴールの明確化
• 要素の洗い出し
• 順位付け

下記はhttp://skan.in/2014/10/09/howto-make-wireframe/ で。
#3 要素ごとに詳細を掘り下げ
#4 要素に優先順位を付け
#5 色をつけてみる