ホームページ制作やWebサイトのリニューアルを進める際、「どのようなレイアウトにするか」「どこに何の情報を配置するか」を具体化する工程が「ワイヤーフレーム（Wireframe）の作成」です。ワイヤーフレームは、Webサイトの完成形を共有し、発注者と制作会社の意識をすり合わせるための「設計図」の役割を果たします。
結論として、ワイヤーフレームの作成手順は「①掲載情報の洗い出しと整理」「②画面内の情報優先順位と動線の決定」「③レイアウトパターンの選定」「④テキスト・要素の仮配置」「⑤確認と修正フィードバック」の5ステップで進めるのが最も確実です。ビジュアルデザインに着手する前の段階で情報構造とレイアウトを固めておくことで、制作途中の大幅な後戻りや「完成したけれど成果につながらない」といったトラブルを未然に防ぐことができます。
本記事では、Web制作の編集責任者の視点から、ワイヤーフレームの基礎知識や作成手順、成果を出すための設計ポイント、発注者が確認すべきチェックリストを分かりやすく解説します。
ワイヤーフレームとは？ホームページ制作における役割と重要性
ワイヤーフレーム（Wireframe）とは、Webページ上の要素（ロゴ、ナビゲーション、キャッチコピー、画像、文章、お問い合わせボタンなど）をどこにどう配置するかを線とテキストだけで表現した「画面の骨組み・設計図」です。
家づくりに例えるなら、外観や壁紙の色を決める前の「間取り図」に相当します。骨組みの段階で使い勝手や情報の流れを確定させておかなければ、どれだけ綺麗な装飾を施しても「使いにくい」「知りたい情報が見つからない」サイトになってしまいます。
ワイヤーフレーム・デザインカンプ・仕様書の違い
Web制作の実務では、「ワイヤーフレーム」「デザインカンプ」「仕様書」という言葉が混同されがちです。それぞれの役割と制作順序を整理すると、以下の通りです。
| 資料名 | 概要・目的 | 含まれる情報 | 作成タイミング |
|---|---|---|---|
| 仕様書 | 動作環境、機能要件、セキュリティ仕様、ドメイン構造など | プロジェクト初期（要件定義期） | |
| ワイヤーフレーム | 画面内のレイアウトと情報の優先順位を決める設計図 | 要素の配置、テキスト原稿の構成案、ボタン位置など（モノクロ表示） | 要件定義後〜デザイン前 |
| デザインカンプ | 実際の見栄えや完成イメージを再現した見本（デザイン案） | 配色の指定、フォントスタイル、装飾画像、実際の写真・イラスト | ワイヤーフレーム確定後 |
ワイヤーフレームの段階で機能や導線、レイアウトの合意を形成しておくことが、後のデザイン制作やコーディング工程の円滑な進行につながります。仕様書の詳細な定義方法については、こちらの記事「ホームページ制作における「仕様書」とは？失敗を防ぐ項目と作成・確認手順をプロが解説」も併せてご確認ください。
なぜワイヤーフレームなしでデザインに進んではいけないのか
時折「ワイヤーフレームの工程を省いて、いきなりデザイン案（デザインカンプ）を作ってほしい」という要望をいただくことがありますが、これは大きなリスクを伴います。デザインが施された状態では、視覚的な印象（色やビジュアルの好み）に議論がひっぱられ、本質的な「情報の順番」や「導線の論理性」の検証がおろそかになりやすいからです。
また、デザイン完成後に「やっぱりこの文章を上に入れたい」「ボタンの位置を大きく変えたい」といった変更が発生すると、レイアウト全体をグラフィックから作り直す必要が生じ、追加費用や納期の遅延に直結します。デザインカンプの確認ポイントについては「ホームページ制作におけるデザインカンプ（デザイン案）の確認方法とチェックリスト｜修正トラブルを防ぐプロの確認手順」で解説していますが、その前段階であるワイヤーフレームの確定が極めて重要な前提となります。
ワイヤーフレーム作成の5ステップとプロの実務手順
成果の出るワイヤーフレームを作成するには、論理的な手順を踏むことが不可欠です。現場のWebディレクターや担当者が実践している具体的な5つのステップを説明します。
ステップ1：サイトの目的とターゲット（ペルソナ）・掲載要素の整理
最初に行うべきは、そのページで「誰に」「何を伝え」「どんな行動をとってほしいのか」を明確にすることです。問い合わせを増やすための「お問い合わせページ」なのか、採用応募者を増やすための「採用TOP」なのかによって、掲載すべき要素は全く異なります。
- 問い合わせフォームへの誘導（CTA）
- 製品・サービス強みの説明文章
- 信頼性を担保する導入実績やお客様の声
- FAQ（よくある質問）
- 会社概要やアクセスマップ
上記のように、該当ページに必要な構成要素をまずは箇条書きなどでリストアップします。
ステップ2：各ページの優先順位（情報階層）と動線（CTA）の決定
掲載要素が出揃ったら、ユーザーの閲覧心理に合わせて「どの順番で情報を読ませるか」という優先順位（情報階層）を設定します。一般的に、ユーザーは画面の上から下へと読み進めるため、最も重要度が高い「ファーストビュー（画面を開いた時に最初に目に入る領域）」には、ターゲットの興味を惹きつけるキャッチコピーやメインビジュアルを配置します。
また、ユーザーが納得したタイミングでスムーズにお問い合わせや資料請求などの行動を起こせるよう、コンバージョンボタン（CTA: Call to Action）を適切な位置（ファーストビュー直下、コンテンツの区切り、ページ最下部など）に配置する計画を立てます。適切な導線設計については「ホームページの動線設計（導線設計）の作り方｜離脱を防ぎ問い合わせを増やすUI/UX改善手順」で詳しく解説しています。
ステップ3：レイアウトパターン（グローバルナビ、メイン、サイドバー）の選定
次に、Webサイト全体の構造やページ特性に応じたレイアウトパターンを選定します。代表的なレイアウト構造には以下のような種類があります。
- 1カラムレイアウト：画面幅いっぱいにコンテンツを配置する構造。スマホ表示と親和性が高く、ストーリー立てて情報を読ませたいLP（ランディングページ）やトップページに適しています。
- 2カラムレイアウト（サイドバーあり）：メインコンテンツの隣にサイドナビゲーションを配置する構造。ブログ記事やメディア、多くのカテゴリーが存在するサービスサイトに適しています。
- グリッドレイアウト：カード状の要素を格子状に並べる構造。施工事例や製品カタログ、実績一覧ページなどで視覚的に多数の要素を見せたい場合に有効です。
ステップ4：具体テキスト（原稿案）とマイクロコピーの配置
レイアウトの枠組が決まったら、「ダミーテキスト」ではなく、できる限り実際の原稿に近いテキストやキャッチコピーを枠内に配置します。ダミーテキスト（「ここに説明文が入ります」などの文章）のままで進めてしまうと、実際のテキストを入れた際に「行数が長すぎて見づらい」「想定していたスペースに入り切らない」といったトラブルが発生するためです。
ボタン上の文字（例：「無料資料をダウンロードする」「3分で完了！お問い合わせ」など）といったマイクロコピーも具体的に記述し、ユーザーの行動を促せる文脈になっているかを検証します。
ステップ5：社内確認・制作者との協議とフィードバック
出来上がったワイヤーフレームを関係者間で共有し、レビューを行います。発注者側では、現場の営業担当者や経営層などのチェックを受け、「営業で実際に伝える順番と合致しているか」「必要な情報が漏れていないか」を確認します。修正要望があればこの段階ですべて出し切り、ワイヤーフレームを完全に確定（FIX）させます。
成果を出すワイヤーフレーム設計のポイントと注意点
単に要素を並べるだけでは、成果（問い合わせや採用応募）につながるWebサイトは作れません。プロのWebディレクターが実践している設計のコツを解説します。
スマホ（レスポンシブ）ファーストの視点を取り入れる
現代のWebサイト閲覧の多くはスマートフォンで行われます。BtoBサイトであっても通勤中や外出先でスマホから閲覧される機会が増加しています。そのため、PC表示のワイヤーフレームだけでなく、「スマートフォンで閲覧した際にどう縦に並ぶか」「指でタップしやすいボタンサイズや余白になっているか」を考慮して設計する必要があります。
PCでは横並びに3つ並んでいた要素が、スマホでは縦に3つスクロール表示されるため、スマホ画面でのファーストビューに何が表示されるかを常に意識することが重要です。
デザイン要素（色・装飾）に気を取られない「モノクロ」構築
ワイヤーフレームは基本的に白・黒・グレーのモノクロや、シンプルな線画で作成するのが鉄則です。初期段階で色付けやフォントの装飾を行ってしまうと、確認者の関心が「色が派手すぎる」「フォントが好みではない」といったデザイン表現に向いてしまい、肝心の「レイアウトや構成の良し悪し」についての議論が深まらなくなるためです。
視線誘導の法則（Zの法則・Fの法則）を意識する
人間の目が画面を追う際のパターンには、一定の法則が存在します。これらを意識して要素を配置することで、ストレスのない閲覧体験を提供できます。
- Zの法則：紙媒体やシンプルWebページで、視線が「左上→右上→左下→右下」とアルファベットの「Z」を描くように動く法則。トップページなどに適用されます。
- Fの法則：テキスト主体のWebページで、視線が「左上→右上」へ動いた後、少し下がって「左→右」、さらに下がって「縦に滑り降りる」ようにアルファベットの「F」を描く法則。記事ページやサービス詳細などで意識されます。
重要なロゴやキャッチコピーは左上に、コンバージョンボタンや重要な案内は視線が留まりやすい右側やスクロールの終点に配置するのが定石です。
発注者（クライアント）がワイヤーフレームを確認する際のチェックリスト
制作会社からワイヤーフレームが提出された際、発注者側の担当者はどのような視点で確認すべきでしょうか。後からのトラブルを防ぐためのチェックポイントを整理しました。
チェック1：ターゲットユーザーの行動・心理に沿っているか
自社が伝えたいことだけを詰め込んだ構成になっていないか、訪問したユーザーが抱く疑問（「このサービスは自社の課題を解決できるか？」「信頼できる会社か？」「料金や導入手順はどうなっているか？」）に対して、順を追って答えを提供する構成になっているかを確認します。
チェック2：必要な情報や要素に漏れがないか
法的に必要な表記（プライバシーポリシーへのリンクや特定商取引法に基づく表記など）や、社内で必須とされているコンテンツ（ロゴ、アピールしたい実績数値、認証マークなど）が漏れなく組み込まれているかをチェックします。
チェック3：CMS（WordPress等）での更新エリアが明確か
お知らせ一覧、事例追加、スタッフ紹介など、公開後に自社スタッフで更新（投稿）していく予定のエリアがどこであるかを確認します。運用時の作業効率を考慮した配置になっているか、運用イメージを持った上で確認することが大切です。
よくある質問（FAQ）
ワイヤーフレームはExcelやPowerPointで作っても問題ありませんか？
はい、問題ありません。PowerPointやExcel、Googleスライドなどは、社内での共有や修正が容易であるため、発注者側がイメージを伝える手段として非常に有効です。なお、プロのWeb制作会社では、複数人でのリアルタイム編集やコメント機能、プロトタイプ（動的検証）機能に優れた「Figma（フィグマ）」や「Adobe XD」などの専用ツールを使用することが一般的です。
デザインカンプが出来上がってからワイヤーフレームの変更を依頼しても大丈夫ですか？
デザインカンプ作成後のワイヤーフレーム（レイアウトや構成要素）の大きな変更は、可能な限り避けるべきです。レイアウトを変更すると、デザイナーが組み上げた配色・余白・グラフィックの調整を最初からやり直すことになり、スケジュールの大幅な遅延や追加費用の原因となります。構成に関するご要望は、必ずワイヤーフレームの確認段階ですべて出し切るようにしてください。
ワイヤーフレーム作成は発注者側と制作会社側のどちらが担当すべきですか？
基本的には、Web制作会社（ディレクター）が担当するのが一般的です。発注者側から事業内容、強み、掲載したいテキスト素材やご要望をヒアリングし、プロの視点からWeb集客やUI/UXに最適化したワイヤーフレームを作成して提案します。ただし、発注者側で手書きのスケッチや簡単なパワーポイント等で「このようなイメージ」と初期アイデアを提示していただけると、よりスムーズに制作が進みます。
スマホ用とPC用の両方のワイヤーフレームを作る必要がありますか？
全ページで両方を作るケースと、主要なページ（トップページや重要LPなど）のみ両方を作り、下層ページはPC版をベースにスマホでの並び順ルールを決めて進めるケースがあります。ターゲットユーザーのスマホ閲覧比率が高いサイトや、スマホ特有の複雑な操作（アコーディオンメニューやスライド表示など）が含まれる場合は、主要ページのスマホ版ワイヤーフレームを事前に作成・確認しておくことを推奨します。
まとめ
ワイヤーフレームは、ホームページ制作において「どのような情報を、どの順番で、どこに配置するか」を定義する最重要ステップです。この工程を丁寧に進め、発注者と制作者の間で強固な合意を形成しておくことが、デザインのクオリティを高め、Webサイト運用後の集客やコンバージョン向上といった成果を最大化する鍵となります。
「自社の強みをどのように整理してワイヤーフレームに落とし込めばよいか分からない」「既存サイトのリニューアルで情報設計から相談したい」とお悩みの方は、ぜひお気軽にイノベートスコープ株式会社までご相談ください。貴社のビジネス目標に合わせた最適なWebサイト構築を支援いたします。
CONTACT
Web制作・SEO・AIOについてお気軽にご相談ください
ホームページ制作・リニューアル、WordPress、SEO・AIO対策、 ECサイト、Web集客、保守・セキュリティなど、 Webに関するご相談を承っています。 「何から相談すればよいかわからない」という段階でもお気軽にお問い合わせください。