ワイヤーフレームの目的と作り方5段階まとめ

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

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

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

1:ページのゴール

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

2:ページに必要な要素

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

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

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

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

これをワイヤーフレームに落としてみると下記のようになります。
ワイヤーフレームの目的と作り方5段階まとめ

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

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

やってはいけないこと

  • 色をつける
    ※グレースケールであれば問題なし

やるべきこと

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

#3 要素ごとに詳細を掘り下げる

例えば「ヘッダー」にはロゴのほか、タグラインや検索ボックスが入ってきますし、ボディにはアイキャッチ画像やお知らせなどが入るでしょう。
またナゲーションには「〇〇カフェについて」「メニュー」「店舗情報」「クーポン」「スタッフブログ」などが入るかもしれません。
人は左から右に目線を移動させるので、これらを並べる時には重要な内容から設置することになります。
この際に順位付けが重要になってきます。

ワイヤーフレームの目的と作り方5段階まとめ

上記では、「クーポン」や「スタッフブログ」は付随的な情報としてメインのナビゲーションからは外しました。
サンプルの店舗は店内の雰囲気が良いところなので、店舗内観を優先させています。
アイキャッチ画像にも店舗の雰囲気がわかるものを最初に表示させるのが良さそうです。
このページはトップなので、あくまでも店の雰囲気を伝えられることがメインの目的となりますし、各ページに移れるような導線設計や玄関口として最新情報を見せることも大事になりそうです。

#4 要素に優先順位を付ける

配置した要素に対して、優先順位を付けてみます。
ワイヤーフレーム上では、色の濃淡で表現するのが良いと思います。

ワイヤーフレームの目的と作り方5段階まとめ

タグラインを太字に、予約のCTAと店舗の雰囲気が伝わるアイキャッチ画像部分を目立たせるようにコントラストを付けてみました。
このようにすることで、デザイナーもどこにハイライトを当てるか明確になります。

#5 色をつけてみる

さんざん色は付けるなと説明しましたが、色をつけることでよりイメージを具体化できることもあります。
ちなみに、ワイヤーフレームには下記の2種類があります。

  • Low-definition Wireframe
  • Hi-definition Wireframe

Lowは線や四角、テキストで構成されるものですが、Highになると色や実際のロゴ・写真を入れることがあります。
これにより、どんなイメージでデザインをしていくべきかなどの議論も進めることができるようになるのです。

ワイヤーフレームの目的と作り方5段階まとめ

事例などの参考サイト

最後にワイヤーフレームを作る際の参考サイトをご紹介します。
下記2つは、たくさんの事例が載っています。
I ♥ wireframes
Wireframe Showcase

ブックマークレットで現在見ているページをワイヤーフレーム化してくれるものなんてのもあります。
Wirify – The web as wireframes

また、WEBサイトで使える心理学を見て、人間の行動を読み解きながら
ワイヤーフレームを引いてみてはいかがでしょうか。

howto > ワイヤーフレームの目的と作り方5段階まとめ