ワイヤーフレームとは？目的や作り方を基礎から解説

Webサイト制作時に用いる資料のひとつであるワイヤーフレーム。今回はそんなワイヤーフレームについて理解を深めたい方に向けて、その定義や作り方、さらに実際の現場の声なども交えてご紹介いたします。

ワイヤーフレームとは

ワイヤーフレームとは、その名の通り「線（wire）」と「枠（frame）」で構成された概略図や設計図のことです。3次元モデルなど、さまざまなインターフェースやアプリケーションの設計で用いられますが、本稿ではWebサイトの設計時に用いられるワイヤーフレームに絞って解説します。

Webサイトにおけるワイヤーフレームの定義については、米国政府関連のWebサイトでは（Usability.gov）以下のように記されています。

要約するとワイヤーフレームは「どの情報をページ内のどこに配置するのかを記載し、Webサイトの"骨格"を示すもの」だと言えるでしょう。

ワイヤーフレームを作成するのは誰？

ワイヤーフレームは、Webディレクターやプロジェクトマネージャーなど、主にプロジェクトの設計を行う人が作成します。ただ、案件によって状況が異なるため、誰が作るかという決まりは厳密にはありません。企業の方針やプロジェクトによっては、UIデザイナーや企画（プランナー）が作成することもあります。クライアントワークでは、クライアント側・制作会社側のどちらがワイヤーフレームを作るのかケースバイケースですが、いずれにせよ、Web制作において上流工程に携わる人が作ることは共通しています。

ワイヤーフレームが必要な理由

Webサイトの骨格として重要なワイヤーフレームですが、プロジェクトを進行するうえでも重要な役割を果たします。

ここではワイヤーフレームがWebサイトを制作するうえでなぜ必要とされるのか、その理由について解説しましょう。

クライアントやプロジェクトメンバーとの合意形成を図るため

Web制作をするうえでは各所との「合意形成」が重要です。合意形成とは、互いの認識を合わせ、意見の一致を図ることです。

もし制作工程において、クライアントやプロジェクトメンバーとの間に認識のズレがあった場合、「こんなはずじゃなかった」「イメージと違う」といったトラブルに発展しかねません。

ワイヤーフレームを作成することで企画の完成イメージを共有し、互いの合意が得られれば、"認識違いによる手戻り"を防ぐことができるので、スムーズな進行が期待できるでしょう。

企画を可視化し共有するため

ワイヤーフレームは、Webサイトの骨格であり、全体のレイアウトやコンテンツの内容を示す設計図として、企画を可視化する役割があります。

ですから「企画意図がユーザーに伝わるか」「表現すべき要素が漏れなく反映できているか」などといった点が落とし込まれていなければなりません。

またワイヤーフレームには、Webサイトの制作前に操作性や機能について関係者同士で確認する、コミュニケーションツールとしての役割もあります。チームやクライアントで共有することで、要素の抜け漏れチェックや、新たなアイデアの創出も期待できるでしょう。

ユーザー体験の優先順位を明確にするため

ワイヤーフレームがあることで、実際のレイアウトやコンテンツの内容をもとに、ユーザー体験のシミュレーションができます。つまり「ボタンの大きさなど、位置はユーザーにとって使いやすいものか」といったUI（ユーザーインターフェース）の観点や、「この文章を読んでからお問合せに飛ぶという導線で問題ないか」といったUX（ユーザー体験）の観点から要素をチェックすることができるのです。

レイアウトや要素をビジュアルデザインに紐付けるため

ワイヤーフレームは、レイアウトや要素をビジュアルデザインに紐付ける「設計図」としての役割を持ちます。ワイヤーフレームがあることで、ビジュアルデザインのレイアウトをより具体的にイメージすることができるので、サイト全体の世界観を把握しやすくなるでしょう。

ワイヤーフレームの段階で、どこまで「設計図」として完成させるかは、案件によって異なります。たとえば文章1つとっても、ダミーテキストで進めて実装で入れるのか、設計段階で文章レベルまでFIXさせるのか......など、線引きはさまざまです。

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

ワイヤーフレームの役割についてこれまで述べてきましたが、ここではいよいよその作り方について解説します。

PCとスマートフォンでは画面の大きさや利用シーンが異なるため、それに合わせて、Webサイトのレイアウトや要素を最適化する必要があります。そのため、ワイヤーフレームも閲覧環境ごとに設計することになります。

ページに必要な要素を抽出する

ワイヤーフレームが必要となるページと、そのページに掲載すべき情報を洗い出します。Webサイト全体のページ構成をリスト化した「サイトマップ」や、Webサイト内の全ページのURLやタイトル、記事内容をまとめた「ディレクトリマップ」といった資料を参照することで、情報を漏らさず洗い出すことができます。

抽出した要素の優先順位を決定する

該当するページでは「ユーザーにどういった体験をもたらしたいのか」を考えながら、要素の優先順位を決定します。悩みを抱えたユーザーを最終的に問合せまで誘導したいなら、たとえば、「こんなお悩みありませんか？」といった問いかけから始まり、事例の提示を経て、問合せフォームへと導けるように、情報の配置を設計するのです。

サイトを訪問するユーザーの気持ちになり、どういった情報をどのような順番で出すのが最も効果的かを考えることが大切です。

レイアウトを決定する

要素の優先順位を踏まえ、実際のレイアウトに落とし込みます。以下は、代表的なレイアウトです。

クオリティを追求するため、ブラッシュアップする

ワイヤーフレームは、作って終わりではありません。チーム内やクライアントに確認してもらうことで、気付かなかったミスや、改善点が見つかることも。フィードバックを反映し、ワイヤーフレームをさらにブラッシュアップさせることも重要な作業と言えるでしょう。

ワイヤーフレームの制作ツール

ここではワイヤーフレームの制作ツールについて解説します。

ワイヤーフレームは作ること自体が目的ではなく、クライアントとの合意形成を得るために必要なものです。そのためツールについては正解がひとつに決まっているわけではなく、制作フローやクライアントの指定など、案件によって変わることも珍しくありません。

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

ここではワイヤーフレームと混同されやすいものについて紹介し、ワイヤーフレームと何が違うのかについて説明します。

デザインカンプ

デザインカンプ（カンプ）とは、デザインやレイアウトの仕上がりを具体的に示した完成見本です。ワイヤーフレームが「設計図」であるのに対し、デザインカンプはビジュアルも含めた「完成見本図」であるという違いがあります。

プロトタイプ／モック

プロトタイプやモックは「試作品」「模型」という意味を持ち、見た目だけでなくクリックによる画面遷移といった動きも再現した成果物です。厳密にはワイヤーフレームとは異なりますが、近年はAdobeXDやFigmaといったツールの発達により、ワイヤーフレームとプロトタイプを兼ねる成果物が生まれる場合もあります。

ワイヤーフレームに関する代表的な悩み

ここからは実際にSNS上で見られるワイヤーフレームに関する悩みや、質問について、監修者が回答していきます。

まとめ

Webサイト制作におけるワイヤーフレームは、レイアウトや要素の骨格を示すだけでなく、クライアントとの合意形成を得るうえでも重要なツールです。制作上のルールや担当者、使用ツールなどは案件によってさまざまですが、「なぜワイヤーフレームが必要なのか」という軸を理解すれば、柔軟に対応することができるでしょう。ワイヤーフレームを活用して、Webサイト制作をよりスムーズに進めてみてはいかがでしょうか。