ワイヤーフレーム とはWeb製作の情報設計だ！作り方と手順のポイント解説

Webサイト制作に欠かせないワイヤーフレーム。しかし意外にも、作成するディレクターをはじめデザイナーやクライアントにいたるまで、ワイヤーフレームに対するイメージや解釈にバラつきがあるようです。「ワイヤーフレームはデザインラフじゃない！」そう声をあげて言いたくなったので、今回はワイヤーフレームとは何か、その目的や作り方などを解説します。きちんと意図が伝わるワイヤーフレームを作ってWeb制作を円滑に進めていきましょう！

ワイヤーフレームとは？デザインは必要ない！

結論から言うと、ワイヤーフレームを作成する段階でデザイン要素は必要ありません。確かに、ワイヤーフレームはWeb制作の初期段階で作るため「デザインラフでしょ？」と勘違いされがちですが、これこそがワイヤーフレームで陥りやすい落とし穴。

むしろ、デザインの視覚的要素が見る人を惑わせる要因となり、最も重要な「ワイヤーフレームの本質」が相手に伝わりにくいのです。これでは、メンバーそれぞれが別のゴールを目指して開発が進んでしまい兼ねません。

つまり、デザインはあくまでデザイナーが担当する領域であり、ワイヤーフレームに必要な要素ではないのです。

ワイヤーフレームの目的は「情報設計」

まずは、ワイヤーフレームの目的について全メンバーの認識を統一しておく必要があります。

ワイヤーフレームとは、Webサイトを制作する目的に沿って「何を（What）・どこに（Where）・どのように（How）」配置すべきかを図にした情報設計です。

例題として、TOPページのワイヤーフレームを取り挙げてみましょう。

• 何を：会社概要など必要情報を取捨選択して特徴別にグルーピングする
• どこに：キャンペーン情報を上部に配置するなど、優先順位に沿ってレイアウトする
• どのように：ここにCTAを配置することで、どの程度CV率がUPするか予測する

つまり、ワイヤーフレームの作成者はWebデザイナーやクライアントに対し、ナゼこの情報を選びナゼここに配置したのか、全ての要素と配置について明確な根拠を説明できなければなりません。

ワイヤーフレームの役割

ワイヤーフレームは語源である「ワイヤー（線）」と「フレーム（骨組み）」を組み合わせて作ります。一般的にはWebディレクターが担当するケースが多いようですが、会社によってはWebデザイナーが担当するケースもあるようです。

しかし、誰が担当者であろうとどんな情報をどこに配置すべきか「具体的な要素と配置」が一目で伝わる仕様でなければ意味がありません。なぜなら、ワイヤーフレームは下記の役目を一手に担っているからです。

ワイヤーフレームの主な5つの役割

1. 具体的な要素が視覚的に確認できる
2. レイアウトや導線が一目で伝わる
3. 必要な情報が全て含まれているかチェックできる
4. メンバー間で認識のすり合わせができる
5. アイデア出しの「たたき台」として役立つ

具体的な要素と聞くと、ダミー画像やデモを盛り込むべきと連想する方も多いでしょう。しかし、ダミー要素は目的が不明瞭なためおすすめできません。

例えば、アウトドアのサイトであれば「臨場感が伝わる画像」といった具合に、何のために必要な画像なのか目的を明確にしておく方が重要です。

ワイヤーフレームの確認項目は立場によって違う

ワイヤーフレームの目的や役割を見失いそうになった時は、誰に見せるために作っているのかをイメージして下さい。なぜなら、その人の立場によってワイヤーフレームで確認したい項目が異なるからです。

• エンジニア：どんな機能を実装すべきか
• デザイナー：ユーザーにとって分かりやすい動線になるか
• クライアント：サービスや製品がどのように表現され、アクションに繋がりそうか

ワイヤーフレームを受け取ったメンバーは、本格的な開発をスタートさせる前に修正点や内容に過不足がないかを議論しながら完成を目指します。そのためには、少なくとも上記の要素を満たしておく必要があるのです。言い換えれば、相手が確認したい要素さえ含まれていれば、ワイヤーフレームの役目は果たされていると判断できます。

ワイヤーフレームと混合されがちなモノとの違い

Webサイトは多くの要素を組み合わせて完成させますが、中にはワイヤーフレームと混同されがちな要素も少なくありません。この段落では特に混同されやすい下記の3つについて、ワイヤーフレームとの違いを解説します。

• ディレクトリマップ
• サイトマップ
• デザインカンプ

ディレクトリマップとワイヤーフレームの違い

どちらも、どんな情報がどこに配置されているかをまとめるという役割は同じですが、範囲と仕様に違いがあります。

▼範囲と仕様の違い

• ディレクトリマップ：「Webサイト全体」の情報と配置場所をまとめた「一覧表」
• ワイヤーフレーム：「1ページごと」の情報と配置場所をまとめた「レイアウト図」

サイトマップとワイヤーフレームの違い

こちらも情報と配置場所を表すという点は共通していますが、範囲と使用するタイミングが異なります。

▼範囲と使用するタイミングの違い

• サイトマップ：「サイトの全体像」を表し、「制作後のサイト運用時」に使用する
• ワイヤーフレーム：「1ページごと」を表し、「制作作業中」に使用する

デザインカンプとワイヤーフレームの違い

どちらも1ページごとに作成するという点は同じですが、対象者と目的が大きく異なります。

▼対象者と目的の違い

• デザインカンプ：「クライアント」に完成イメージを伝える「デザイン完成見本」
• ワイヤーフレーム：「関係者全員」に情報の種類とレイアウトを伝える「設計図」

ワイヤーフレームを作る時の手順

ワイヤーフレームの作成には、少なくとも3段階のプロセスが必要です。

1. 掲載する情報のピックアップとグルーピング
2. 優先順位に沿ってレイアウトを選択する
3. レイアウトに情報を配置する

では早速、実際にワイヤーフレームを作る時の手順について見ていきましょう。

掲載する情報のピックアップとグルーピング

情報のピックアップと言っても、住所や電話番号などを単純に書き出すだけでは十分とは言えません。情報漏れによる手戻りを防ぐためにも、「準備→ピックアップ→グルーピング→ラベル付け→確認」の順に沿って進めていきましょう。

▼具体的な手順とポイント

• 準備：何を伝えたいか、Webページの目的を明確にしておく
• ピックアップ：伝えたい情報とユーザーニーズの両面から必要な情報を書き出す
• グルーピング：「ロゴと会社名」「メニューと料金」などカテゴリー別に分類する
• ラベル：カテゴリーごとに「イベント情報」「アクセス」などのラベルを決定する
• 確認：漏れがないかチェックし、手元にない情報はクライアントにリクエストする

優先順位に沿ってレイアウトを選択する

大量にあるレイアウトの中からどれを選ぶべきか、そのヒントとなるのが情報のランキングです。なぜなら、Webページに掲載する情報は優先順位によって適切な場所に配置すべきだからです。

例えば、優先順位の高い情報が少なければ1カラム（縦1列）でも対応できるでしょうが、優先順位の高い項目が多ければ対応しきれません。

その点、サイドバーのある2カラムのレイアウトならサイドバーの上部をヘッダーの代役として活用できるため、優先順位の高い情報をより多く掲載することができるのです。

同様に、順位が似かよっているカテゴリーが複数ある場合はグローバルナビゲーションが存在するレイアウトが、明らかに優先順位が異なる場合は複数のロー（横ライン）が存在するレイアウトが有力な選択肢になります。

レイアウトに情報を配置する

ほとんどのWebサイトでは、会社やサイトの顔である「ロゴ」が左上に表示されています。なぜなら、人には左から右に視線を動かす性質があり、最初に視線が集まる左上に最も優先順位の高いロゴを表示することで、認知度を高める効果が期待できるからです。

一方、クライアントから「営業中の問い合わせは電話よりメールが理想的」とリクエストされた場合は、住所や電話番号を目立たないフッターに配置し、メールフォームにリンクさせた「問い合わせ」ボタンを目立つ位置に配置した方が良いでしょう。

つまり、情報をレイアウトに配置する時には制作スタッフだけでなくクライアントの意向も確認しておく必要があるのです。

ワイヤーフレームの作成に役立つツール2つ

ワイヤーフレームの形式に決まりはありません。手書きや使い慣れているツールを代用するなど、会社やプロジェクトチームによって自由に選択できます。

例えば、ExcelやPowerPointはクライアントでも使える人が多いため修正のやり取りがしやすい反面、仕上がりが事務的になりがちです。一方、Webデザイナーが作成する場合はIllustratorなどのデザイン制作ツールに頼りたくなるでしょう。しかし、Webデザイナーがデザイン制作ツールを使用する場合、ついついデザインにこだわりすぎてワイヤーフレームの目的を見失うリスクがあります。

手書きは面倒だけど適切なツールが見つからないという時は、下記の便利ツールを活用してみるのも一つの方法です。

figma

出典：figma

場所を選ばず作業できるブラウザ完結のツール。ワイヤーフレーム以外にもサイトマップやデザインカンプといったWeb制作に欠かせない工程が、これ1つで作れてしまう優れモノです。最大の魅力は、プレビュー画面を共有しているプロジェクトメンバーからのコメントが、画面上に表示される点でしょう。

cacco

出典：cacco

メンバーが多いプロジェクトにおすすめのツール。ソフトをインストールしなくても使えるオンライン形式なので、複数のメンバーとの同時編集が可能です。グラフや表が手軽に作図できるうえ、100種類もの豊富なテンプレートが用意されています。

チーム円満！伝わるワイヤーフレームのポイント

1つのWebサイトをチームで作成する場合、ワイヤーフレームの作り方にも工夫が必要です。一体、どうしたらチーム作業が円滑に進むのでしょうか？

ルールを決めておく

ワイヤーフレームは、誰が見ても内容が一目で把握できなければなりません。そのためには、いちいち説明しなくても意図が伝わるように下記のようなルールを事前に決定し、全メンバーで共有しておきましょう。

▼ルールの例

• 重要なテキスト：太文字にする
• 画像を入れるスペース：グレーのマーカーを付ける
• ボタン：背景をブラックにする
• テキストリンク：アンダーバーにする

どこまで作り込むべきか？

案件やチームメンバーにもよりますが、あくまで情報設計というワイヤーフレームの目的を見失わないように気を付けて下さい。基本的にUI・UXデザインはUIデザイナーが、ビジュアル部分はWebデザイナーが担当すべき作業です。作り込み過ぎたワイヤーフレームは、下記のようなリスクに繋がり兼ねません。

• 担当外のメンバーまで時間を無駄にしてしまう
• イテレーションが際限なく繰り返される
• ミーティングの延長により予算がオーバーしてしまう
• 専門外の知識まで求められる
• 今は必要ないが、将来的に必要になる要素まで含めてしまう

つまり、ワイヤーフレームの見た目を作り込む必要はなく、むしろ単色カラースケールでシンプルな図形に仕上げた方が正確な意図が伝わりやすいのです。

ただし、クライアントによっては綺麗に作った方が喜ばれるケースもあります。そんな時は、「デザインが完成したらもっと良くなりそう」と期待してもらえるようなワイヤーフレームを心掛けましょう。プロジェクトのモチベーションも上がって一石二鳥です。

まとめ

ワイヤーフレームの制作で煮詰まった時は、下記のポイントを見直してみましょう。

• 情報設計が表現できているか
• デザインを除外したシンプル設計になっているか
• 似たような工程と混同していないか
• 手順を守っているか
• 不適切なツールを使っていないか
• ルールやゴールの認識が、全メンバーで統一されているか

ワイヤーフレームはデザインの下書きでもなければ、完成図でもありません。あくまで情報設計を表現するために作っているのです。