ワイヤーフレームとは？目的、作り方、ポイントをわかりやすく解説

「ワイヤーフレームってなに？」
「ワイヤーフレームの作り方を知りたい」

上記のような疑問や悩みをお持ちではありませんか？

ワイヤーフレームは、Webページの構成を線や枠で表した設計図のことです。レイアウトの決定や完成イメージの共有などを目的として作成されるもので、Webサイト制作では欠かせない資料の1つです。

しかし、似たような用語との違いや具体的な作り方がわからないという方も多いのではないでしょうか。

そこでこの記事では、ワイヤーフレームについて以下5つのポイントに絞って解説していきます。

初心者にもわかりやすく解説していますので、最後まで読んでワイヤーフレームへの理解を深めてください。

ワイヤーフレームとは

ワイヤーフレームとは、Webページの設計図のことで「ワイヤー」「WF」などと表現されることもあります。線（wire）と枠（frame）を使って「何を、どこに、どうやって配置するのか」をシンプルに表しているのが特徴です。

各ページの情報設計を表す資料となるため、複数のページからなるWebサイトでも、単一ページであるランディングページでも必ず作成されます。

いつ作るのか

一般的なWebサイトの制作手順は下記の通りで、要件定義とサイトマップの作成後にワイヤーフレームが作られます。

まずは目的や機能などを取り決め、要件定義を行います。その後、Webサイト全体のコンテンツを階層状に表したサイトマップを作成します。指針や全体構成がまとまったら、ページ単体の設計図となるワイヤーフレームを作り、デザインやコーディングへ進むという流れです。

誰が作るのか

一般的には、Web制作のプロジェクト管理や進行を担うディレクターが主導で作ることが多いです。クライアントへのヒアリングを担当したディレクターなら、要望やビジネスへの理解を深めた上でワイヤーフレームを作れます。ただしチーム編成によっては、プランナーやデザイナーが作ることもあります。

外注する場合は基本的に制作会社が作りますが、具体的なイメージが固まっているときはクライアント側で作成するのも1つの方法です。制作会社に細かな要望が伝わりやすく、スムーズに制作が進められます。

ワイヤーフレームを作成する目的

ワイヤーフレームを作成する目的は以下3つです。

1つずつくわしく解説します。

レイアウトを決めるため

ワイヤーフレームを作らずにデザインに着手すると、仕上がったデザインに合わせてコンテンツをはめ込むことになります。そのため後の工程で、必要な情報を載せられない、修正が必要になるなどのトラブルが発生して、コストや工数に大きな影響を与えかねません。

ワイヤーフレームを作成すれば、必要な情報やレイアウトなど情報設計を明確にした上でデザインを作れるため、後々トラブルが発生するリスクを抑えられます。ワイヤーフレームは、抜け漏れのないWebページを、滞りなく制作するために欠かせない資料なのです。

完成イメージを共有するため

ワイヤーフレームを作成すれば、関係者内で完成イメージを共有できるため、スムーズな制作が可能です。

Webサイトの制作は、クライアントはもちろん、ライターやデザイナー、エンジニアなど複数人で行います。関わる人数が多い分、各々のイメージが統一されていないと認識のズレが起こり、理想とは異なるWebサイトになる恐れがあります。

そこで役立つのがワイヤーフレームです。ワイヤーフレームがあれば、関係者内で情報設計の確認や設計意図のすり合わせができます。1つの完成イメージをもとにして制作を進められるため、認識のズレを防ぎ、デザインやコーディングなどの後の工程で修正が発生するリスクも抑えられます。

ページ内容について意見を出し合うため

線と枠だけで構成されたシンプルなワイヤーフレームは、ページ内容を議論する際の「たたき台」に最適です。ただし、見た目にこだわってワイヤーフレームを作るとデザインに目が向いてしまうため、議論の幅が狭まる可能性があります。

ワイヤーフレームの段階で議論すべきことは「情報設計」です。活発な議論を生むためには、デザインを施さず、シンプルに作成することが大切です。関係者から新たなアイデアやフィードバックを得て、より良いワイヤーフレームへブラッシュアップしていきましょう。

ワイヤーフレームと混同されやすい用語との違い

ここでは、ワイヤーフレームと混同されやすい3つの用語との違いを解説します。

ディレクトリマップ

ディレクトリマップとは、Webサイトのタイトル・内容・URL・階層構造などをまとめた一覧表で、サイトの全体像を把握するのに役立ちます。

ワイヤーフレームがページ単体の設計図であるのに対し、ディレクトリマップは全ページの構造を詳細にまとめた資料です。関係者内で情報を共有するために作成され、進捗管理などにも活用されます。

デザインカンプ・モックアップ

デザインカンプは、ワイヤーフレームに色や装飾などを加えたデザインの「完成見本図」です。Web制作の現場では、モックアップも同様の意味で使われています。

情報設計を確認するワイヤーフレームに対し、デザインカンプはビジュアル面を確認するために用いられます。

プロトタイプ

プロトタイプは「試作品」を意味します。デザインカンプに動的要素を追加したもので、Webサイトの操作性や機能性を評価するために用いられます。

ワイヤーフレームの作り方

ワイヤーフレームは、下記の流れに沿って作成します。

1つずつ順番に解説します。

必要な要素を洗い出す

まずは、Webページに必要な要素をピックアップします。会社名やロゴ、企業情報など、情報の抜け漏れがないように思いつく全ての要素を洗い出しましょう。

「ユーザーにどんな行動を起こして欲しいのか」「何を理解してもらうのか」など、ページの目的に沿って考えると、必要な要素がピックアップしやすくなります。具体的な要素が思い浮かばないときは、競合サイトを参考にするのも1つの方法です。

グルーピングする

次に、ピックアップした中で関連する要素をグルーピングします。たとえば「社名とロゴ」「住所と電話番号」のように、似ている性質同士をまとめていきます。

グルーピングした要素をワイヤーフレーム上で近くに配置することで、情報の分散を防ぎ、まとまりの良いWebページの制作が可能です。

要素の優先度を決める

次に、各グループの優先順位を決めます。一般的に、Webページは下部に行くほど閲覧されにくくなります。そのため、優先度の高い情報から目立つ位置に配置できるよう、要素の順位付けをするのです。

また、この段階で優先度が低いと判断された要素は、本当に掲載すべきかどうかを見直し、情報の取捨選択をしておくと無駄のないWebページが制作できます。

ページのリニューアルをする際は、Webサイト上のユーザー行動を可視化できるヒートマップツールを活用して優先度を判断するのもおすすめです。熟読されている箇所やよくクリックされている箇所、離脱されている箇所などのデータをもとに、優先度を決定できます。

レイアウトを決める　

次に、どんなレイアウトにするのかを決めます。代表的なレイアウトには以下4つがあります。

Webサイトの種類によって最適なレイアウトは変わってくるため、それぞれの特徴を理解した上で選択してください。

シングルカラムレイアウト（1カラムレイアウト）

シングルカラムレイアウトは、全要素を縦一列に並べた最もシンプルなレイアウトです。レスポンシブデザインに適応させやすい、どのデバイスでも統一感のある表示にできるなどのメリットがあります。メインのコンテンツに注目を集めやすい反面、他のページへのリンクが見つかりにくいため、回遊率を上げるには工夫が必要です。

マルチカラムレイアウト

マルチカラムレイアウトは2列以上で構成されたレイアウトのことです。代表的なものに2列からなる2カラムレイアウト、3列からなる3カラムレイアウトがあります。1ページに多くの要素を表示できるため、探したい情報が見つかりやすく、回遊率の向上が期待できます。ただし、ページ内で目移りしやすいというデメリットがあるため、じっくりと読んでもらいたいコンテンツには向いていません。

グリッドレイアウト

グリッドレイアウトとは、要素を格子状に配置したレイアウトのことです。多くの情報を整理して表示できるため、統一感を出せる、デザイン性を高められるなどのメリットがあります。一方で、要素ごとに強弱をつけるのが難しいため、ユーザーはどの情報から見れば良いのか判断しにくいというデメリットもあります。

フルスクリーンレイアウト

フルスクリーンレイアウトとは、メインとなるキャッチコピーやキービジュアルを画面いっぱいに表示させるレイアウトです。伝えたいメッセージを際立たせるために、ナビゲーションやフッターは控えめに配置します。見る人に強いインパクトを与えられますが、盛り込める情報が少なく、回遊率は低くなる傾向があります。

ラフ案を書く

レイアウトが決まったら手書きのラフ案を作成します。決定したレイアウトでページを分割し、事前に決めた優先度をもとにして要素を配置していきます。この工程で大切なことは、大まかな構成のイメージを掴むことです。精度にこだわらずラフに作りましょう。

ツールで清書する

ラフ案ができたらオンラインツールで清書します。オンラインツールには、共有しやすい、修正が容易にできるなどのメリットがあり、効率的に作業を進められます。

さまざまなツールがありますが、選ぶ際は自分と関係者が使用しているデバイスを考慮した上で、使いやすいものを選ぶと良いでしょう。多くのOSに対応しているツールならトラブルを防げます。

ワイヤーフレームの作成ツールには、下記のようなものがあります。

ワイヤーフレームを作成するときに押さえるべき6つのポイント

効果的なワイヤーフレームを作るためには、以下6つのポイントを押さえる必要があります。

1つずつくわしく解説します。

重要なページのみ作成する

全てのページのワイヤーフレームを作ると、費用や工数がかかってしまいます。効率よくWebサイトの制作を進めるためには、重要なページに絞ってワイヤーフレームを作る必要があります。どのページを作れば良いかわからないという場合は、以下を参考にしてみてください。

競合サイトを分析してから作る

必要な要素や最適なレイアウトがわからないときは、競合サイトを参考にすると良いでしょう。いくつか見ているうちに、業界の傾向や具体的な構成のイメージが掴めてきます。事例を参考にする際は、MUUUUU.ORGやSANKOU!などのギャラリーサイトを活用すると効率良く探せます。

明確な理由をもとに要素や配置を決定する

ワイヤーフレームは、明確な設計意図をもとに作成してください。初心者が作る際に多いのが「ワイヤーフレームを完成させること」に意識が向いてしまい、なんとなく要素やレイアウトを決めてしまうことです。これでは適切な情報設計ができず、本末転倒になってしまいます。

Webサイトの目的やユーザー視点を考慮し「なぜこの情報を掲載したのか」「なぜここに配置したのか」など、設計意図を明確にすると、効果的なワイヤーフレームが作れます。

スマホ版とPC版で分けて作る

PC版のWebサイトをスマホで表示すると文字が小さくなってしまうように、端末によって見え方は異なります。読みにくいページはユーザーの離脱を招きかねません。端末ごとに表示を最適化できるよう、ワイヤーフレームはスマホ版とPC板で別々に作成しましょう。

シングルカラムレイアウトの場合はそれほどデザインは変わりませんが、マルチカラムレイアウトの場合は、ハンバーガーメニューを追加するなど新たな要素を追加することも多いです。

作り込み過ぎないようにする

ワイヤーフレームは情報設計を表す資料のため、線と図でシンプルに作ることが大切です。

初心者や高機能ツールを使用する場合に陥りがちなのが、配色やフォントにまでこだわって作り込みすぎてしまうことです。デザイン要素を含めると、議論の際にビジュアル面に意識が向いてしまい、肝心な情報設計に関しての意見が出にくくなってしまいます。

ワイヤーフレームにデザイン要素は必要ありません。「何を、どこに、どのように配置すれば良いのか」を表す役割であることを忘れないようにしましょう。

できるだけ実際のテキストを挿入する

精度の高いワイヤーフレームを作るためには「テキストが入ります」などのダミーテキストの使用は極力控えましょう。ダミーテキストでは、実際に載せる情報や文字量がわかりにくく、完成イメージと乖離してしまう可能性があります。後の工程で修正が発生するリスクもあるため、できるだけ実際に挿入するテキストに近いものを用意することをおすすめします。

ワイヤーフレームを作る目的を理解し、Webサイトの制作に役立てよう！

ワイヤーフレームは、Webページの構成や骨組みを表す設計図です。適切に作成すれば、関係者内で完成イメージの共有をしたり、議論のたたき台にしたりと、サイト制作の現場で効果的に活用できます。作成する際に大切なのは、デザイン要素を加えずシンプルに仕上げることです。この記事を参考に、ワイヤーフレームの役割を理解し、Webサイト制作に役立ててください。