ワイヤーフレームとは？作り方と制作の流れ

01はじめに｜この記事でわかること

要点：この記事は、制作会社からワイヤーフレームを渡された発注側の方に向けて、読み方・確認の観点・修正依頼の伝え方までを一つにまとめたガイドです。作る側ではなく、受け取って判断する側の視点で解説します。

制作会社から「ワイヤーフレームができたのでご確認ください」とPDFが届いた。開いてみたら、白黒の四角と文字が並んでいるだけ。何をどう見ればいいのか分からないまま、とりあえず「大丈夫です」と返してしまった。

ホームページ制作の現場で、いちばんよく起きるすれ違いがこれです。解説記事は世の中にたくさんありますが、そのほとんどはデザイナー向けの「作り方とツールの使い方」。依頼した側が何を見るべきかを書いたものは、意外と多くありません。

この記事では、2000年創業のWeb制作会社ZenWeb Japanが、実際の制作案件で発注側とやりとりしてきた経験をもとに、この図の読み方と直し方をわかりやすく解説します。

本題に入る前に、全体像を短時間でつかめる動画をご紹介します。

02ワイヤーフレームとは？デザインとの違い

要点：ワイヤーフレームとは、ページの中身を線と枠だけで示した設計図のことです。色・写真・書体が決まる前の段階なので、構成そのものを議論できます。実際の制作ではホームページ制作の工程の中で、デザインに入る一つ手前に置かれます。

家を建てるときの間取り図を思い浮かべてください。壁紙の色や家具はまだ決まっていませんが、部屋の数と広さ、動線ははっきり分かります。この図も同じで、見た目の装飾を意図的に外し、中身と並び順だけに集中できるようにしたものです。

Web制作でよく登場する3つの資料は、次のように役割が分かれています。

• サイト構成図。サイト全体にどんなページがあり、どういう階層でつながるかを示した図です。サイト構成図の作り方で詳しく解説しています。
• ワイヤーフレーム。1ページの中身を、上から下へどう並べるかを示した図です。この記事のテーマがここにあたります。
• デザインカンプ。色・写真・書体まで入った完成イメージです。骨組みに服を着せた状態と考えると分かりやすくなります。

順番も決まっていて、構成図 → ワイヤーフレーム → デザインカンプと進みます。前の工程が固まらないまま次に進むと、あとで必ず戻ることになります。

03なぜ発注側もワイヤーフレームを見るべきか

要点：自社の商売を本当に理解しているのは、制作会社ではなく発注側です。だからこそ「何を先に見せるべきか」は依頼した側にしか判断できません。ホームページ制作の流れのなかで、発注側の判断がいちばん効くのがこの工程です。

制作会社は、Webの見せ方には詳しくても、御社のお客様が何で迷い、何で決めるかまでは知りません。「うちのお客様は、まず対応エリアを確認するんです」。こうした情報は、社内の人だけが持っています。

発注側がこの図を見る意味は、大きく3つあります。

• 抜けている情報に気づける。営業の現場で必ず聞かれることが、どこにも入っていない。この見落としは社内の人しか見つけられません。
• 順番の違和感に気づける。「実績より先に料金を見たい人が多い」という肌感覚は、現場からしか出てきません。
• 社内の合意を先に取れる。白黒の図だからこそ、上長も見た目ではなく中身の話をしてくれます。依頼前に準備すべきことを整理しておくと、この段階がぐっと楽になります。

逆に「お任せします」と返してしまうと、完成間近に「思っていたのと違う」となりがちです。そのタイミングでの変更は、費用にも納期にも重くのしかかります。

04工程が進むほど、直す手間はどう増えるか

要点：同じ「順番を入れ替えたい」という要望でも、ワイヤーフレーム段階なら図を描き直すだけで済みます。コーディング後になると、複数ページの作り直しに広がります。費用の考え方はホームページ制作の費用相場もあわせてご覧ください。

「あとから直せばいい」と思われがちですが、直す手間は工程が進むほど急に増えます。同じ内容の変更が工程ごとにどれくらいの手間になるかを整理しました。

倍率そのものより、増え方の形を見てください。コーディングに入った瞬間に跳ね上がるのは、ページの並びを変えるとリンクや共通パーツにも影響が広がるからです。

05ワイヤーフレームの読み方｜図の中身を分解する

要点：白黒の図は、上から「つかみ→内容→行動」の三層で読むと理解できます。トップページに置くべき要素はコーポレートサイトのページ構成もあわせて確認しておくと判断しやすくなります。

この図には独特の書き方があります。まず、そのお約束を押さえましょう。

• 斜線の入った四角は写真。まだ選んでいない画像の置き場所で、サイズと位置だけを示しています。
• グレーの帯や「ダミーテキスト」は仮の文章。実際の原稿はあとから入ります。文字の量の目安だと考えてください。
• 枠に添えられた注記が本体。「ここに実績3件」「電話番号は常時表示」といったメモこそ、制作会社の設計意図です。飛ばさずに読んでください。

そのうえで、ページを縦に三つに区切って読みます。

1. 最初の一画面（ファーストビュー）。スクロールせずに見える範囲です。「誰向けの、何の会社か」が一目で伝わるかを見ます。
2. 本文の並び。サービス、実績、料金、会社案内などが、お客様の知りたい順になっているかを確認します。
3. 行動につなげる部分。問い合わせフォームや電話番号など、連絡の入口の数と置き場所を見ます。

06発注側の初回確認で見落とされやすい項目

要点：初回の確認で指摘が漏れ、あとから戻ってくる論点には偏りがあります。最も多いのは「そのページで何をしてほしいのか」の合意漏れです。ホームページ制作の打ち合わせでは、ここを最初に固めておくと後が楽になります。

初回確認では出てこず、デザイン以降の工程で改めて指摘された論点を分類しました。

上位3つは、いずれも「配置」ではなく「意図」の話です。ボタンの色や文字の大きさは後から変えられますが、目的の取り違えは全体の作り直しにつながります。

07確認するときの5つのチェックポイント

要点：目的・優先順位・導線・スマホ・担当の5点を順に見れば、必要な確認はほぼ尽きます。この観点はホームページリニューアルのときも同じように使えます。

実際にPDFを開いたら、影響の大きい順に次の5点を見ていってください。

1. このページの目的は何か。資料請求なのか、電話なのか、まず知ってもらうことなのか。一つに絞れているかを確認します。
2. いちばん上に置くものは正しいか。お客様が最初に確かめたい情報が最上部にあるか。会社の言いたいことが先に来ていないかを疑ってみてください。
3. 行動する場所は足りているか。長いページなら途中にも問い合わせ先が要ります。最後まで読まないと連絡できない構成になっていないかを見ます。
4. スマホで縦に並べても成立するか。横並びの要素が縦に積まれたとき、順番が不自然にならないかを想像します。
5. 誰が中身を用意するか。写真や原稿の枠ごとに、自社と制作会社のどちらが用意するかを決めます。ここが曖昧だと納期が延びます。

すべてを一人で判断する必要はありません。営業担当と一緒に見ると、2番と3番の精度が一気に上がります。制作会社の選び方でも触れていますが、この確認に付き合ってくれるかどうかは、良い制作会社を見分ける手がかりにもなります。

08スマホ版で扱いが変わる要素

要点：いまや閲覧の中心はスマートフォンです。PC版のワイヤーフレームだけを見て承認すると、実際の見え方とずれます。スマホ版も出してもらえるかは、制作の流れの打ち合わせ時点で聞いておきましょう。

総務省の令和7年版情報通信白書によると、インターネット接続端末としてのスマートフォンの利用率は2024年で74.4%に達しています（総務省「令和7年版 情報通信白書」インターネット接続端末）。多くのお客様は、まずスマホで御社のサイトを開きます。

同じ要素でも、画面幅が変われば扱いが変わります。主なものを並べます。

特に注意したいのが料金表と比較表です。PC版では美しく収まっていても、スマホでは読みづらくなります。この段階で「スマホではどう見せますか」と一言聞いておくと、後の作り直しを防げます。

09修正依頼の伝え方｜3点セットで伝える

要点：「場所」「どうしたいか」「なぜか」の3つをそろえて伝えると、やりとりの往復が一気に減ります。伝え方の型を持っておくと、見積書の見方と同じく、発注側の交渉力が上がります。

修正依頼でいちばん困るのが「なんとなくイメージと違う」という伝え方です。制作会社は何を直せばいいのか分からず、当てずっぽうで直すことになります。

代わりに、次の3点をセットで書いてください。

• 場所。「トップページの3つ目のブロック」のように、図のどこかを特定します。
• どうしたいか。「実績の枠を料金の枠より上に移してほしい」と、動かす方向まで書きます。
• なぜか。「お客様はまず実績を確認してから料金を聞くため」と理由を添えます。

3つ目の理由がいちばん大切です。理由が分かれば、制作会社はもっと良い方法を提案できます。「それなら実績を上に移すより、料金表の中に実績を1件挟むほうが効きます」といった返しが来るようになります。

反対に、避けたい伝え方もあります。

• 社内の意見をそのまま束ねて送る。矛盾した指示が混ざるので、窓口で整理してから渡してください。
• デザインの話を持ち込む。色や書体の要望は、次の工程でまとめて伝えるほうが早く進みます。
• 口頭だけで伝える。あとで「言った・聞いていない」になります。短くても文字で残しましょう。

10ワイヤーフレーム工程にかかる期間の目安

要点：ページ数が増えると、作る時間より発注側が確認する時間のほうが伸びていきます。全体の進み方はホームページ制作の流れとあわせて把握しておくと、社内調整がしやすくなります。

見落とされがちなのが、発注側の確認にかかる日数です。社内で意見をまとめる時間は、意外とかかります。

表の右端に注目してください。1回で完璧を目指すより、2〜3回に分けて詰めていく前提で組むほうが、結果的に早く終わります。

11自社で作るか、制作会社に任せるか

要点：ワイヤーフレームは制作会社が作るのが一般的です。発注側が用意すべきなのは図ではなく、載せたい情報とその優先順位です。判断の考え方は自作と外注の比較にも通じます。

「自分たちでも作ったほうがいいですか」とよく聞かれます。多くの場合、答えは「そこまでしなくてよい」です。図として整えるのは制作会社の仕事だからです。

ただし、自作した図が役に立つ場面もあります。次のように分けて考えてください。

• 手書きのラフは大歓迎。紙に書いた雑な図でも、「この順で見せたい」という意思は正確に伝わります。
• 参考サイトのほうが早い。「この会社のこのページの並びが理想です」と伝えるほうが、図を作るより意図が伝わります。
• 作り込みすぎると逆効果。完成度の高い図を渡すと、制作会社は提案ではなく再現をしてしまい、プロの設計力を使えなくなります。

本当に用意すべきなのは、載せたい情報とその優先順位、そして原稿と写真です。この3つがそろっていれば、制作は驚くほどスムーズに進みます。サイト構成図の段階で全体像を共有しておくと、設計の精度も上がります。

12まとめ｜ワイヤーフレームは発注側の意思表示

要点：ワイヤーフレームとは、ページの中身と並び順を決める設計図です。発注側は、目的・優先順位・導線・スマホ・担当の5点を見て、3点セットで修正を伝える。これだけで制作の質は大きく変わります。

白黒の図が届いたときが、御社の意思をサイトに反映させる最大のチャンスです。色や写真が入ると、どうしても見た目の話に引っ張られます。装飾がない今だからこそ、中身の議論ができます。

むずかしく考える必要はありません。「うちのお客様なら、まずここを見るはずです」。その一言で、机上の図は商売に効く設計図に変わります。ご相談はホームページ制作サービスのページからどうぞ。

13よくある質問

要点：発注側の方からよくいただく5つの質問にお答えします。デザインカンプとの違いや、承認後の修正可否など、判断に迷いやすい点をまとめました。

1. ワイヤーフレームとは何ですか？

Webページの中に「何を・どこに・どの順番で置くか」を、線と枠だけで示した設計図のことです。色や写真、書体はまだ入っていません。家づくりでいえば間取り図にあたり、装飾ではなく中身と並び順を決めるための資料です。

2. ワイヤーフレームとデザインカンプの違いは何ですか？

前者は配置と情報の設計図、後者は色・写真・書体まで入った完成イメージです。工程としては設計図が先で、そこで固めた構成に見た目を載せたものがデザインカンプになります。構成の議論は、必ず前者の段階で済ませてください。

3. ワイヤーフレームは発注側が作る必要がありますか？

必要ありません。図として整えるのは制作会社の役割です。発注側が用意すべきなのは、載せたい情報とその優先順位、そして原稿と写真です。手書きのラフや参考サイトがあれば、それだけで意図は十分に伝わります。

4. 確認にはどのくらい時間をかけるべきですか？

10ページ程度なら3〜5日、30ページ規模なら1週間ほどが目安です。社内の関係者に回して意見をまとめる時間も含めて見積もってください。着手前に「誰がいつ見るか」を決めておくと、確認期間が理由で納期が延びることを防げます。

5. 承認した後でも修正できますか？

修正はできますが、工程が進むほど手間と費用が増えます。デザイン段階なら比較的軽く済み、コーディング後は大がかりになります。だからこそ、ワイヤーフレームの段階で気になる点をすべて出しきることが、結果的にいちばん早く安く仕上げる方法になります。