Webサイトの制作において、いきなりデザインに取りかかるのはリスクの高い進め方です。完成イメージが共有されないまま制作を進めると、「思っていたのと違う」という手戻りが発生し、時間も労力も無駄になってしまいます。
そこで活用するのがワイヤーフレームです。ワイヤーフレームとは、Webページのレイアウトや要素の配置を線と枠で表現した設計図のことです。色や装飾を一切使わず、「どこに何を置くか」だけをシンプルに示します。
この記事では、ワイヤーフレームの基本から具体的な作成手順、活用できるツールまでを丁寧に解説します。初めてワイヤーフレームを作る方でも迷わず進められる内容になっています。
ワイヤーフレームとは何か
ワイヤーフレームの役割
ワイヤーフレームは、Webサイト制作における「設計図」です。建築でいう間取り図のようなもので、完成形をイメージするための最初のステップとして機能します。
ワイヤーフレームが果たす主な役割は以下の3つです。
- 情報設計の可視化：ページに掲載する情報の優先順位と配置を視覚的に整理できる
- 関係者間の認識合わせ：クライアント・デザイナー・エンジニアの間で完成イメージを共有し、認識のズレを防ぐ
- 手戻りの削減：デザインやコーディングに入る前の段階で構成を確定させることで、後工程での大幅な修正を防ぐ
ワイヤーフレームの3つのレベル
ワイヤーフレームには精度によって3つのレベルがあります。
- ローファイ（Low-fidelity）：手書きやシンプルな図形だけで構成を示す。最も粗い段階で、ブレインストーミングや初期の方向性確認に使う
- ミッドファイ（Mid-fidelity）：ツールを使って要素のサイズや間隔をある程度正確に表現する。最も一般的なワイヤーフレームのレベル
- ハイファイ（High-fidelity）：実際のテキストや画像を配置し、完成形に近い状態まで作り込む。プロトタイプに近い精度
プロジェクトの規模や目的に応じて使い分けますが、一般的なWebサイト制作ではミッドファイレベルのワイヤーフレームが最も活用される場面が多いです。
ワイヤーフレームと混同されやすいものに「モックアップ」と「プロトタイプ」があります。モックアップは色やフォントなどのビジュアルデザインを含んだ静的な完成イメージ、プロトタイプはクリックやスクロールなどのインタラクションを再現できる動的なモデルです。ワイヤーフレーム→モックアップ→プロトタイプの順に精度が上がっていきます。
ワイヤーフレームの作成手順
ステップ1：サイトマップを作成する
ワイヤーフレームを作る前に、まずサイト全体の構成を「サイトマップ」として整理します。サイトマップとは、サイト内のページ一覧とその階層関係を示した図です。
例えば、コーポレートサイトであれば以下のような構成が一般的です。
- トップページ
- 会社概要
- サービス紹介（サービスA / サービスB / サービスC）
- 実績・事例
- ブログ・お知らせ
- お問い合わせ
サイトマップが整理されていれば、ワイヤーフレームを作るべきページが明確になり、ページ間の遷移関係も把握できます。
ステップ2：ページごとに掲載情報を洗い出す
各ページに「何を載せるか」をリストアップします。この段階ではレイアウトを考える必要はなく、テキストで箇条書きにするだけで問題ありません。
例えば、トップページであれば以下のような要素が考えられます。
- メインビジュアル（キャッチコピー＋画像）
- サービスの概要（3〜4つの特徴を簡潔に）
- 実績・導入事例のハイライト
- お客様の声
- 最新のお知らせ・ブログ記事
- CTA（お問い合わせボタン）
ステップ3：情報の優先順位を決める
洗い出した情報に対して、優先順位をつけます。Webサイトではファーストビュー（スクロールせずに見える領域）に最も重要な情報を配置するのが鉄則です。
ユーザーがそのページに訪れた目的を考え、最も知りたい情報から順番に配置していきます。「あれもこれも見せたい」という気持ちを抑えて、情報に優先順位をつけることが質の高いワイヤーフレームの鍵です。
ステップ4：レイアウトパターンを決める
掲載情報と優先順位が決まったら、レイアウトのパターンを選びます。Webサイトで使われる代表的なレイアウトは以下の通りです。
- シングルカラム：コンテンツを1列で縦に並べるレイアウト。LPやブログ記事に多い。スマートフォンとの相性が良い
- 2カラム：メインコンテンツ＋サイドバーの構成。ブログやニュースサイトに多い
- グリッド：コンテンツをカード状に並べるレイアウト。ECサイトやポートフォリオに使われる
- フルスクリーン：画面全体を使うレイアウト。ビジュアル重視のサイトに効果的
ステップ5：ワイヤーフレームを作成する
ここまでの準備が整ったら、実際にワイヤーフレームを作成します。作成時のポイントは以下の通りです。
- 色は使わない：グレースケールで作成する。色を入れるとデザインの議論に発展してしまい、構成の確認に集中できなくなる
- 実際のテキストに近い文章を入れる：「ダミーテキスト」の多用は避け、実際に掲載する文章に近い内容を入れた方が、情報量やスペースの感覚がつかめる
- 画像はプレースホルダーで表示する：グレーの長方形に「×」印を入れたものを配置し、画像が入る場所とサイズを示す
- 余白のサイズを意識する：要素間の余白は統一感を持たせる。余白が適切でないと、完成デザインの段階で調整が必要になる
ステップ6：フィードバックをもらって修正する
作成したワイヤーフレームをクライアントやチームメンバーに共有し、フィードバックをもらいます。この段階で構成の問題点を洗い出せれば、デザインやコーディングの段階での手戻りを大幅に削減できます。
フィードバックを依頼する際は「ここで確認したいのは情報の配置と優先順位であり、デザインの議論は次のステップで行います」と伝えておくとスムーズです。
ワイヤーフレーム作成におすすめのツール
Figma
Figmaは、現在のWebデザイン業界において最も広く使われているデザインツールです。ブラウザ上で動作するクラウドベースのツールで、リアルタイムでの共同編集が可能です。
ワイヤーフレーム作成に関しては、コンポーネント機能（ボタンやヘッダーなどのパーツを再利用できる機能）やオートレイアウト機能（要素の配置を自動調整する機能）が便利です。無料プランでも3つのプロジェクトまで利用でき、個人や小規模チームであれば十分に対応できます。
Whimsical
Whimsicalは、ワイヤーフレーム、フローチャート、マインドマップをシンプルに作成できるツールです。Figmaほどの自由度はありませんが、ワイヤーフレーム専用のパーツ（ボタン、テキスト、画像プレースホルダーなど）がプリセットで用意されているため、素早くワイヤーフレームを組み立てられます。
Canva
Canvaは、SNS投稿やプレゼン資料の作成で広く知られていますが、ワイヤーフレームのテンプレートも用意されています。デザインツールに慣れていない方が簡易的なワイヤーフレームを作る用途には適していますが、プロの制作現場では機能面で物足りなさを感じる場合があります。
手書き（紙とペン）
最もシンプルで手軽な方法が、紙とペンによる手書きです。特に初期段階のラフなアイデア出しや、クライアントとの対面打ち合わせでは、ツールを立ち上げるよりも手書きの方がスピーディです。
手書きのワイヤーフレームをスマートフォンで撮影し、チャットツールで共有するという使い方も実務では一般的です。ただし、修正や共有の効率を考えると、正式なワイヤーフレームはツールで作成するのが望ましいといえます。
Adobe XDは以前ワイヤーフレーム作成ツールとして人気がありましたが、現在はメンテナンスモードに移行しています。新規でツールを選ぶ場合は、Figmaを選択するのが安全です。既存のAdobe XDユーザーも、早めにFigmaへの移行を検討することをおすすめします。
ワイヤーフレーム作成でよくある失敗
デザインを作り込みすぎる
ワイヤーフレームの段階で色やフォント、装飾にこだわりすぎるのは典型的な失敗です。ワイヤーフレームの目的は「構成の確認」であり、ビジュアルデザインは次のステップで行います。色やフォントの議論が始まってしまうと、本来確認すべき情報設計の議論が後回しになってしまいます。
ユーザーの行動を考慮していない
見た目の構成だけを考えて、ユーザーがどのようにページを閲覧するかを考慮していないワイヤーフレームは機能しません。「ユーザーはこのページに何を求めて訪れるのか」「どの情報を見た後にどのアクションを取るのか」というユーザーの行動フローを意識しながら作成しましょう。
スマートフォン版を後回しにする
多くのWebサイトでスマートフォンからのアクセスが過半数を超えている現状を考えると、モバイル版のワイヤーフレームは後回しにすべきではありません。PC版とモバイル版のワイヤーフレームはセットで作成するのが理想的です。
よくある質問（Q&A）
Q：ワイヤーフレームは全ページ分作る必要がありますか？
A：必ずしも全ページ分作る必要はありません。トップページ、主要な下層ページ（サービス紹介、会社概要など）、フォームページなど、レイアウトが異なるページのみ作成すれば十分です。同じレイアウトのページは1パターン作っておけば使い回せます。
Q：ワイヤーフレームの作成にどのくらい時間がかかりますか？
A：ページの複雑さやプロジェクトの規模によりますが、1ページあたり30分〜2時間が目安です。情報の洗い出しや優先順位付けの準備がしっかりできていれば、ワイヤーフレーム自体の作成は比較的短時間で完了します。
Q：クライアントにワイヤーフレームを見せるタイミングはいつですか？
A：デザインに入る前の段階で必ず確認をもらいましょう。ワイヤーフレームの段階で「思っていたのと違う」と言われれば修正は容易ですが、デザインやコーディングまで進んでからの修正は工数が何倍にも膨れ上がります。
Q：ワイヤーフレームにダミーテキストを使ってもいいですか？
A：初期段階ではダミーテキストを使っても構いませんが、なるべく早い段階で実際に近い文章に差し替えましょう。ダミーテキストのままだと、テキストの量がデザインに与える影響を正確に把握できません。見出しやCTAの文言は、できればワイヤーフレームの段階で仮決定しておくのが理想的です。
Q：ワイヤーフレームの作成スキルはどうやって身につけますか？
A：好きなWebサイトの構成を模写するのが効果的な練習方法です。実際のWebサイトを見ながら、「このページはどんなワイヤーフレームから作られたか」を逆算して再現してみましょう。ニジボックスの解説記事など、実例付きのチュートリアルも参考になります。
まとめ
ワイヤーフレームは、Webサイト制作の品質と効率を大きく左右する重要な工程です。サイトマップの作成、掲載情報の洗い出し、優先順位の決定、レイアウトパターンの選定という手順を踏むことで、迷いなくワイヤーフレームを作成できます。
ツールはFigmaを基本として、初期のラフ段階では手書きも活用するのが実践的な進め方です。ワイヤーフレームの段階で構成をしっかり固めておけば、デザインとコーディングの工程をスムーズに進められます。
