ワイヤーフレームという言葉を聞いたことがありますか？知っている方も少なくないでしょう。
この言葉はWeb制作において大変大事な役割を担っています。

ワイヤーフレームとは？

家を建てるときに設計図があるように、Webサイトを作るときにも設計図があります。ワイヤーフレームとはこの設計図のことです。
しっかりした家を作るためには綿密に書き上げられた設計図が必要なように、ワイヤーフレームの完成度がWebサイトの完成度に直結すると考えてください。

Webサイト制作には、クライアント、広告代理店、Web制作会社など多くの人や組織が関わります。ワイヤーフレームは、Webサイトの設計に関して共通認識を得ていくために使います。
ワイヤーフレームを元にWebサイト制作を進めることで、スムーズに確認をしながら情報共有をしていくことができます。

Webサイト制作時にはデザインカンプを作りますが、デザインカンプとワイヤーフレームはあくまでも別のものです。並行して作業するものではありますが、出来上がったワイヤーフレームに、デザインカンプで服を着させるようなイメージです。
カンプを作るデザイナーは、ワイヤーフレームの内容を見ながら、どの情報をデザインに入れなければいけないのかを確認しながらカンプを作ります。

ワイヤーフレームはどのようなツールで作るの？

ワイヤーフレームはこれで作らなければいけないというルールはありません。
個人の好みによりますが、MicrosoftのPowerPointやExcel、AdobeのIllustratorを使う人もいますし、プロトタイピングやモックアップ制作に特化したPrototyperというアプリケーションで作る人もいます。
最近ではインターネット上で使える、CacooやMoqupsといったWebアプリケーションを使う事例も増えてきています。

近年では、スマートフォーンアプリのPOPというものがあり、手書きのワイヤーフレームをデジタル化してくれるサービスもあるので、これからもツールは増えていくでしょう。こういったものにも目を光らせているといいかと思います。

注意！
しかし、あくまでも大切なのはどのツールを使うかではなく、ワイヤーフレームの中身です。
これらは助けるツールに過ぎないので、そこにこだわりすぎないようにしましょう。

ワイヤーフレーム作成

では実際にワイヤーフレームの作成方法を見ていきましょう。
今回は例としてコーポレートサイトを想定して作成していきます。

Step1

ワイヤーフレーム作成の第一ステップ。それはページに入れる情報を集めることです。
Webサイトには多くのページがあります。全ての情報が１つのページに収まるのではなく、この情報はこのページといった形で、どの情報をどのページに入れるかを決めます。
情報を削ぎ落すことは簡単ですが、忘れることはしてはいけません。ここでは、まず自分が考えうる限りの入れるべき情報を全てあげてみましょう。

Step2

次に、Step1で集取した情報を今度は似た情報同士でまとめてみましょう。
例えば、商品に関する情報は商品情報としてまとめられますし、会社に入る情報は会社情報としてまとめられます。
このように分類しておくことで、ユーザーがWebサイトを閲覧する際に、似た情報がまとまっている見やすいサイトを作ることができます。

Step3

上記のステップが終わったら情報をレイアウトしていきます。
サイト制作にもいくつかのパターンがあります。対象商品と競合となる商品のサイトや、最近のトレンドなどを考慮し、レイアウトの大枠を決めましょう。

ここでは典型的なワイヤーフレームを使いながら解説します。

どのサイトにも、ヘッダー、フッター、グローバルナビゲーション、サイドバーといったほぼ共通の要素があります。

a.ヘッダー

Webサイトの上部です。
ロゴやスローガンなどの商品や企業の情報が入ります。

b.フッター

フッターは、サイト下部です。簡単なサイトディレクトリや、コピーライトの情報などが入ります。

c.グローバルナビゲーション

これはWebサイトのどのページにも共通して設置されているナビゲーションのことを示します。閲覧者に見てもらいたい情報への入り口を必ずここに残すようにしましょう。

d.サイドバー

近年はこのサイドバーに広告や、関連情報が掲載されている場合が多いです。
サイトによってはこのサイドバーがない場合もあるのですが、概ね、カテゴライズされた情報への入り口や、過去の情報への入り口となっています。

User Interface (ユーザーインターフェイス、以下UI)という言葉を知っていますか？UIとは、閲覧者への情報提供方法、提示の仕方のことを言います。
使いやすいUIとは、情報がわかりやすくグルーピングされていて、サイト内の導線が理解しやすいことを意味します。
上記のヘッダーやフッターなどのまとめ方は、このUIの良し悪しが左右される大変重要な部分です。

Step4

最後のステップです。Step3で作った大枠に整理した情報を入れていきます。
サイトで実際に使うコピー（見出しやキャッチコピー、本文など、実際に使用するテキストそのもの）ではなく、その簡易版として、どのような入り口名でどういった情報がはいるのかがわかるようにしましょう。

サイト制作にはもう１つUser Experience (ユーザーエクスペリエンス、以下UX)という言葉が使われます。UXとは、そのサイトを通じて閲覧者がどのような体験ができるのかを表す言葉です。
デザインやフォントから作られる雰囲気や、通販サイトであれば注文までの流れのスムーズさなどです。UXも合わせて考えながらワイヤーフレームを作りましょう。

ここまでのステップが終われば、ワイヤーフレームの完成です。

まとめ

ワイヤーフレームの作り方はご理解いただけましたか？
ワイヤーフレームは最初から完璧なものを作れるわけではありません。何度か作ることでだんだんと慣れて上達していくので、最初にできなかったからといって挫折を感じる必要はありません。

デザインの勉強と同様、Webサイトを見るときに、そのWebサイトのワイヤーフレームを想像してみるなど、分析的な視点を持つと良いトレーニングになるかもしれません。