Webサイトを新しく作る場合や大幅にリニューアルする場合、デザインカンプを作る前の段階で何を決めておけばよいか迷うことがあります。レイアウトや色を決める前に、ページ上に何を載せ、どの順番で並べるかを整理する工程が必要です。その工程で使われるのがワイヤーフレームです。
ワイヤーフレームとは何か、どのような場面で使われるのか、どんな情報を確認するために作るのかを順に説明します。制作会社への依頼を検討している方や、社内でサイト改善を進める担当者の方にも参考にしていただける内容です。
ワイヤーフレームの目的と対象
ワイヤーフレームとは、Webページの骨組みを図式化したものです。色やフォント、写真などの視覚的な表現を省き、ページ上に置く要素の種類・位置・大きさだけをシンプルな図で示します。建築で言えば設計図のような役割を担い、完成形のイメージではなく構造の確認を目的として作られます。
主な対象は、ページに含めるコンテンツの配置とナビゲーションの構造です。ヘッダー・フッター・メインコンテンツ・サイドバーなどの領域分けや、ボタンやフォームの位置も含まれます。デザインや色の好みとは切り離して、情報設計の妥当性だけを先に確認できる点が最大の特徴です。
制作会社とクライアントが共通の認識を持つための資料としても使われます。言葉だけのやり取りでは伝わりにくい画面構成を、図として共有することで認識のずれを早期に発見できます。
ワイヤーフレームで確認する内容の判断基準
ワイヤーフレームを使って何を確認するかは、プロジェクトの目的によって変わります。新規サイト制作の場合は、ページ全体の情報階層と導線が判断の中心になります。リニューアルの場合は、既存の課題と照らし合わせて改善すべき箇所が優先されます。
主に確認する内容は次の3点です。
- ページ内の情報の優先順位が意図通りに反映されているかどうかを確認します。
- ユーザーが目的のページや行動に到達できる導線が確保されているかどうかを確認します。
- 必要なコンテンツ要素（見出し、本文、画像領域、CTAボタン、フォームなど）が網羅されているかどうかを確認します。
デザインやテキストの最終形は後工程で決まるため、ワイヤーフレームの段階ではレイアウトと構造に集中することが効率的です。色や書体への意見はデザインカンプの段階に持ち越すと、確認の焦点がぶれにくくなります。
ワイヤーフレーム作成の進め方
ワイヤーフレームは、コンテンツの整理から始めて図の作成・レビューへと進めるのが一般的な流れです。作業の規模や関係者の人数によって詳細は異なりますが、大まかな手順は共通しています。
- ページ一覧の確認：サイトマップまたはページ一覧を先に決め、ワイヤーフレームが必要なページを洗い出します。トップページ、カテゴリページ、詳細ページなど、構造が異なるページをそれぞれ別に作成します。
- コンテンツの棚卸し：各ページに載せる要素をリストアップします。テキスト、画像、動画、フォーム、ボタンなど、種類と数量を把握してから配置を考えます。
- スケッチまたはツールで下書き：紙にラフを描く方法と、専用ツールを使う方法があります。Figma、Adobe XD、Cacoo、Balsamiqなどのツールが広く使われています。修正のしやすさを重視するならツールが便利です。
- 関係者によるレビュー：作成した図を担当者・制作会社・承認者で確認し、抜け漏れや認識のずれを修正します。この段階で確定させることで、後工程の手戻りを減らせます。
- デザイン工程への引き渡し：確定したワイヤーフレームをもとに、デザインカンプの作成へ進みます。
ステップを細かく踏むほど修正コストが下がる傾向にあります。特に関係者が複数いるプロジェクトでは、レビューの回数と承認者を事前に決めておくと進行がスムーズです。
ワイヤーフレーム作成時の注意点とリスク
ワイヤーフレームは構造の確認に特化した資料です。そのため、完成イメージとしての見栄えは意図的に省かれています。この点を関係者全員が理解していないと、ワイヤーフレームを見た時点で完成形のデザインと誤解してしまうリスクがあります。
承認者に対してワイヤーフレームを共有する際は、あらかじめ目的と確認範囲を説明しておくことが大切です。デザインの仕上がりではなくレイアウトと情報構造だけを確認する段階であることを伝えると、フィードバックが的確になります。
また、ワイヤーフレームの確認が不十分なままデザイン工程へ進むと、レイアウトの根本的な変更が必要になり、作業が大幅に後戻りするケースがあります。ワイヤーフレームの段階で合意を得ることは、プロジェクト全体のコストと期間の管理にも直結します。
スマートフォン表示のワイヤーフレームを別途作成しているかどうかも確認が必要です。PCとスマートフォンではレイアウトが大きく異なるため、主要なページについては両方を作成しておくと後工程の認識ずれを防ぎやすくなります。
ワイヤーフレームに関するよくある疑問
ワイヤーフレームはプロトタイプと同じものですか
ワイヤーフレームとプロトタイプは目的が異なります。ワイヤーフレームは静的な図であり、ページの要素配置と情報構造を示すことが主な目的です。プロトタイプはリンクやアニメーションを含む動作確認用の模型で、ユーザーが実際に操作して流れを体験できるものを指します。プロトタイプはワイヤーフレームをもとに作成されることが多く、工程としては後に位置づけられます。
ワイヤーフレームは必ず専用ツールで作る必要がありますか
専用ツールが必須というわけではありません。紙に手書きしたラフスケッチでも、Excelやスライドツールをもとにしたものでも、目的が果たせれば形式は問いません。ただし、複数人で修正を繰り返す場合や、デザイナーへの引き渡しが必要な場合は、FigmaやAdobe XDなど共有・編集しやすいツールを使う方が効率的です。プロジェクトの規模と体制に合わせて選ぶのが現実的です。
どのページにワイヤーフレームが必要ですか
構造が異なるページにはそれぞれワイヤーフレームが必要です。トップページ、一覧ページ、詳細ページ、問い合わせフォームページのように、レイアウトのパターンが変わるたびに個別に作成します。同じテンプレートを使い回すページは1種類を代表として作れば十分です。
ワイヤーフレームを確認する前のチェックリスト
ワイヤーフレームのレビューを始める前に、以下の項目を確認しておくと確認作業が効率的に進みます。
- 確認するのはレイアウトと情報構造であり、デザインや文章の最終形ではないことが、関係者全員に共有されています。
- サイトマップまたはページ一覧が確定しており、作成対象のページが明確になっています。
- 各ページに載せるコンテンツ要素（見出し・画像・ボタン・フォームなど）の洗い出しが終わっています。
- PCとスマートフォンそれぞれのワイヤーフレームが用意されているか、または共通化の根拠が関係者間で合意されています。
- 承認者が決まっており、レビュー後に確定させるフローが合意されています。
- 修正が発生した場合の対応範囲と期限が明確になっています。
ワイヤーフレームは、情報設計の段階で方向性のずれを修正するための重要な工程です。この段階を丁寧に進めることで、デザインや開発に入ってからの手戻りを減らせます。ホームページ制作サービスの詳細や、制作の流れについてはサービスページでご確認いただけます。ワイヤーフレームを含む制作の進め方について知りたい場合は、お問い合わせからご相談いただくことも可能です。また、関連する用語の意味をまとめて確認したい場合はWeb用語集もご活用ください。
