ワイヤーフレームとは？作り方とデザインカンプとの違い・発注側の確認範囲を解説

ワイヤーフレームは、Webサイトの各ページに何をどの順で置くかを線と枠だけで描いた設計図です。色や写真を入れないため、レイアウトと情報の優先順位だけを先に確定できます。この記事では、デザインカンプ・サイトマップ・プロトタイプとの違い、要素の洗い出しからレビューまでの作り方、FigmaとAdobe XDの現在の提供状況を踏まえたツールの選び分けを順に整理しました。あわせて、制作会社に発注する側がワイヤーフレームの段階で何を検収すべきか、どんな案件なら簡略化してよいかまで踏み込みます。

まとめ：ワイヤーフレームで決める範囲と発注側が検収すべき記載事項

ワイヤーフレームで決めるのは、ページに載せる要素・その並び順・要素どうしの大きさの関係、そして各ボタンの遷移先です。色やフォント、写真の選定はデザインカンプ以降の仕事で、この段階で議論すると論点が混ざります。線と枠だけの見た目は素っ気ないものの、それは意図的な制約です。装飾を外すことで、決裁者も制作者も情報の並びだけを見て判断できます。

発注側が検収すべき記載事項は四つあります。各ブロックのおおよその文字量、ボタンやリンクの遷移先、フォームの入力項目、そしてスマートフォン表示での並び順です。この四点が書かれていないワイヤーフレームは、デザイン工程に進んでから原稿量の超過や画面の追加が発覚し、そのぶん見積りが動きます。逆に、テンプレートを使う小規模サイトや1ページ単位の改修では、ワイヤーフレームを簡略化しても手戻りはほとんど起きません。会員機能や三層以上の情報構造、複数部門の合意が絡む案件では省略しないでください。

ワイヤーフレームの定義と役割｜画面設計で決まる情報の優先順位

ワイヤーフレーム（wireframe）は、直訳すると「針金の枠組み」です。Web制作では、ページを構成する要素をグレースケールの矩形と文字だけで並べた設計図を指します。3DCGでも同じ語が使われますが、そちらは立体を線分の集合で表示する描画方式で、Web制作の用法とは別物です。

線と枠だけで描く画面設計図｜色と写真を意図的に外して判断する理由

ワイヤーフレームでは、配色・フォント・写真・イラストを扱いません。ヘッダー、メインビジュアル、見出し、本文、画像の入る位置、ボタンといった要素を、グレーの矩形と最小限のテキストで並べます。理由は判断の混線を避けるためです。色や写真が入った画面を見せると、レビューの指摘は「この写真は硬い」「青が企業カラーと違う」といった見た目の話に流れ、肝心の「この情報が3スクロール目にあってよいのか」という議論が後回しになります。装飾を外した状態でレイアウトを確定させておけば、デザイン工程では表現だけを論点にできます。

ワイヤーフレームで決まる情報の優先順位と、後工程で生じる手戻りの費用

ワイヤーフレームが実質的に決めているのは、ページ内の優先順位です。ファーストビューに何を置くか、問い合わせボタンをどの高さに固定するか、事例と料金のどちらを先に見せるか。この判断はサイトの成果に直結する一方、後から変えるほど費用がかさみます。

手戻りの費用は工程が進むほど増えます。ワイヤーフレームの段階なら矩形を動かすだけで済む変更が、デザインカンプ後にはカンプの描き直しへ、実装後にはHTMLとCSSの修正へ広がります。公開後であれば表示確認の範囲も加わるため、1画面の要素追加が三工程分の作業になることも珍しくありません。レイアウトの合意はこの段階で終わらせておくのが安全です。

デザインカンプ・プロトタイプ・サイトマップとの違いと作る順序

画面設計の周辺には似た用語が並びます。混同すると、レビューの場で「どこまで決まった状態なのか」が共有できません。それぞれの役割と、作る順序を整理します。

デザインカンプとの違い｜色と写真が入る段階で決裁者を巻き込む理由

デザインカンプ（design comprehensive layout）は、完成見本にあたる成果物です。ワイヤーフレームで確定した配置に、実際の写真・コピー・配色・フォントを流し込み、公開後の画面に近い状態まで作り込みます。両者の差は精度ではなく、決める対象の違いにあります。

決裁者にはデザインカンプで判断してもらうほうが通りやすい一方、その前にワイヤーフレームで並び順の承認を取っておかないと、カンプのレビューで構成の話が蒸し返されます。ありがちな失敗は、決裁者がワイヤーフレームのレビューに参加せず、カンプが出てから「事例を先に見せたい」と要望が入るパターンです。この差し戻しはカンプ全ページの描き直しになるため、ワイヤーフレーム承認の会議には最終決裁者を必ず同席させてください。

サイトマップ・ディレクトリマップとの役割分担と作成の前後関係

サイトマップはサイト全体のページ構成を階層で示した一覧、ディレクトリマップはそこにURL・ページ名・meta情報などを加えた管理表です。どちらもサイト単位の設計図で、ワイヤーフレームはその下のページ単位の設計図にあたります。順序はサイトマップが先です。

ページ一覧が固まらないうちにワイヤーフレームを描き始めると、あとからページが増減するたびに描き直しが発生します。画面遷移図やER図といった設計図面との担当範囲は、要件定義と設計で作る7つの図の整理でまとめています。全ページ分を作る必要はなく、トップ・一覧・詳細・フォームのように型が違うページだけを描き、同型のページはひな型を流用する進め方が現実的です。

プロトタイプとの違い｜画面遷移と操作の検証を分けて実施する境界

プロトタイプは、画面を実際にクリック・タップして遷移や動きを確かめられる試作です。ワイヤーフレームが静止した1枚の設計図であるのに対し、プロトタイプは画面と画面のつながりを検証します。Figmaなどのツールではワイヤーフレームの矩形にリンクを設定するだけでプロトタイプ化できるため、両者は地続きです。

分けて考える基準は、検証したい対象がレイアウトか操作かという点にあります。会員登録やEC購入のように複数画面をまたぐ手順があるなら、ワイヤーフレーム承認後にプロトタイプで通し操作を試す価値があります。逆に、コーポレートサイトのように遷移が単純な案件でプロトタイプまで作ると、工数が増えるわりに得られる発見が少ないため見送って構いません。試作そのものの位置づけはプロトタイピングの定義と進め方で詳しく扱っています。

ワイヤーフレーム作成の進め方｜要素の洗い出しからレビュー完了まで

作成の手順は制作会社によって呼び方が変わりますが、実質的な工程は四つに収まります。要素の洗い出し、優先順位づけとレイアウト選定、ツールでの清書、レビューと承認です。

掲載要素の洗い出し｜要件定義で決めた成果指標から逆算する手順

最初に、そのページで達成したい成果を1つに決めます。資料請求のフォーム送信なのか、求人応募なのかで、載せる要素も並び順も変わるためです。成果が決まったら、読者がその行動に至るまでに必要な情報を書き出します。サービスの概要、料金、導入事例、対応範囲、よくある質問、会社概要といった単位で構いません。

この洗い出しは、要件定義で決めた内容を引き継ぐ作業です。目的・ターゲット・KPI・掲載範囲が曖昧なままワイヤーフレームに入ると、レイアウトの議論が好みの応酬になります。発注側がどこまで決めておくべきかはWeb制作の要件定義で決める項目にまとめました。要素は多めに出しておき、次の工程で削ります。

優先順位づけとレイアウト選定｜シングルカラムと2カラムの使い分け

書き出した要素に順位をつけます。判断軸は「その情報が無いと次の行動に進めないか」の一点で、担当者の思い入れではありません。上位3〜4項目がファーストビューから1スクロール目に入る配置になります。

レイアウトは大きく二系統です。シングルカラムは上から順に読ませる構成で、LPやスマートフォン主体のサイトに向きます。2カラムはサイドバーに一覧や絞り込みを置く構成で、記事数の多いメディアや商品一覧に向きます。迷ったらシングルカラムを選んでください。スマートフォンでは2カラムが縦積みになるため、そもそもカラム構成の差が消えます。この縦積みの順序まで含めて設計する考え方はレスポンシブデザインの仕組みとスマホ対応方式で扱っています。

手書きラフからツール清書への移行｜精度を上げすぎない見極め方

最初から作図ツールを開かず、紙かホワイトボードにラフを描くほうが速く進みます。矩形の位置を10案試すのに、紙なら数分で足ります。ツールで清書するのは、社内で方向性が固まってからです。

清書では作り込みすぎないよう線を引いてください。影・角丸・ブランドカラー・実写画像を入れ始めると、レビューの論点がデザインへ移ります。仮テキストの扱いにも注意が要ります。ダミー文のまま提出すると実際の原稿量とのずれが見えないため、見出しは実文に近い文言で、本文は想定する行数分のダミーで置いてください。

レビューと承認の回し方｜差し戻しを二巡以内に収める合意の作り方

レビューは、参加者と論点を先に宣言してから始めます。「今日は配置と並び順だけを決め、色と写真は次回」と冒頭で共有するだけで、指摘の質が変わります。参加者には最終決裁者を必ず含めてください。

差し戻しが三巡以上になる案件には共通点があります。決裁者が二巡目から登場する、原稿が未確定のまま配置を議論する、部門ごとに別々の要望が出て調整役がいない、という三つです。回避策は単純で、ワイヤーフレーム承認を一度の会議で完結させる合意を先に取り付けること、そして原稿担当者を工程表に明記することに尽きます。

作成ツールの選び分け｜Figmaと表計算ソフト・手書きの使い分け基準

ツール選びで迷う相談は多いものの、判断材料は「関係者が何人で見るか」と「その後デザインまで同じファイルで進めるか」の二つに絞れます。2026年9月時点の提供状況を踏まえて整理します。

Figmaの無料枠と席種別課金｜社内共有で費用が発生する境目

Web制作の現場ではFigmaが事実上の標準になっています。ブラウザで動き、複数人が同じファイルを同時に編集でき、そのままデザインカンプとプロトタイプまで一つのファイルで続けられるためです。

費用の境目は共有方法にあります。無料のStarterプランは個人のドラフトが無制限である一方、チームのプロジェクトで共有できるファイル数には上限があり、公式ヘルプではFigma DesignとFigJamの合計で3ファイルとされています（2026年9月時点）。有料のProfessionalは2025年3月のアップデートで席種別の課金に変わりました。公式の料金ページでは月払いのFull seatが月16ドル、Dev seatが月12ドル、Collab seatが月3ドルです。閲覧とコメントだけの社内関係者はCollab seatで足りるため、全員分をFull seatで契約しないでください。

Adobe XDのメンテナンスモード｜新規案件で選ばない判断とその根拠

ワイヤーフレーム作成ツールとしてAdobe XDを挙げる解説記事は今も多く残っていますが、新規案件での採用は見送ってください。Adobeは2023年6月に単体プランの新規販売を終了し、2024年初頭には今後の機能開発へ投資しない方針を示しました。現在はメンテナンスモードに入っており、公式サポートページでもバグ修正とセキュリティ・プライバシー関連の更新を継続する旨が案内されています。

実務上の影響は二点あります。Creative Cloudコンプリートプランの契約者しか使えないため、制作会社と発注側でファイルを共有しづらいこと。そして新機能が追加されないため、共同編集やプロトタイプの面でFigmaとの差が開き続けることです。既存のXDファイル資産がある場合も、次のリニューアルのタイミングでFigmaへ移す前提で計画を立ててください。

表計算ソフトと紙で足りる条件｜ページ数と関係者数から決める線引き

ExcelやPowerPointでワイヤーフレームを作る現場も残っています。セルを方眼にして矩形を並べる方式で、社内に既存のファイルがあり、関係者が作図ツールに不慣れな場合には現実的な選択です。ただし修正のたびに版が枝分かれしやすく、スマートフォン版とPC版を並べて管理しづらい弱点があります。

制作会社に外注する案件でFigmaを避ける理由はほとんどありません。閲覧だけなら共有リンクで確認できるため、発注側が新しいツールを覚える負担も小さく済みます。

発注側がワイヤーフレームで検収すべき記載事項と差し戻しの基準

ここからは制作会社に発注する側の視点です。ワイヤーフレームは見た目の確認ではなく、後工程の見積りと納期を固定するための検収資料として扱ってください。

検収時に見る記載事項｜文字量・遷移先・入力項目が書かれているか

承認する前に、次の項目が書き込まれているかを確認してください。

• 各ブロックのおおよその文字量（見出しは実文、本文は想定行数のダミー）
• ボタンとリンクの遷移先ページ名
• フォームの入力項目と必須・任意の区別
• 一覧ページの1画面あたり表示件数とページ送りの方式
• スマートフォン表示での要素の縦並び順

抜けやすいのは最後の二つです。一覧の表示件数はデータベース設計と実装工数に直結し、スマートフォンの並び順はPC版とは別の判断が要ります。PCで右側にあった問い合わせボタンがスマートフォンでは最下部に落ちる、という事故はこの確認漏れから起きます。件数と縦並び順の指定が無いワイヤーフレームは、差し戻して構いません。

制作会社へ確認すべき事項｜修正回数の上限と原稿作成の担当範囲

見積書に書かれていないことが多い割に、後で揉めるのがこの二点です。ワイヤーフレームの修正回数に上限があるのか、上限を超えた場合の単価はいくらか。そして原稿となるテキストと写真を誰がいつまでに用意するのか。契約前にこの二つを文書で確認してください。

原稿の担当は特に事故が起きやすい部分です。制作会社の見積りは原稿が発注側からの支給である前提に立つことが多く、発注側がそれに気づかないまま進むと、ワイヤーフレーム承認後に原稿待ちで数週間止まります。原稿が未確定のまま公開日だけを決めると、納期は原稿の提出日に引きずられます。ワイヤーフレーム承認と同じ会議で、原稿の担当者と提出期限まで決めてしまうのが安全です。

ワイヤーフレームを簡略化できる案件と、省略すると失敗する条件

すべての案件でフルセットのワイヤーフレームが要るわけではありません。作る枚数と精度は、ページ構成の複雑さと、合意形成に関わる人数で決めてください。

簡略化してよい案件｜テンプレート利用と1ページ単位の改修での判断

既製テンプレートを使う小規模なコーポレートサイトでは、ワイヤーフレームを1枚も描かずに進めて問題ありません。テンプレート側でレイアウトが決まっており、判断できるのはどのブロックを使いどの順に並べるかだけだからです。この場合はテンプレートのデモページに番号を振り、並び順を指定した一覧表で代替できます。

既存サイトの1ページ改修や、記事詳細ページへのブロック追加も同様です。既存レイアウトの制約が強く、描いても既存画面のスクリーンショットへの書き込みと変わりません。手書きの赤入れで足ります。ただし1ページだけのつもりが複数ページへ波及する改修は、この判断から外してください。

省略すると失敗する条件｜会員機能・多階層サイト・多部門の合意

逆に、次の条件に当てはまる案件でワイヤーフレームを省くと、ほぼ手戻りが起きます。会員登録やマイページのようにログイン前後で表示が変わる画面がある場合、階層が三層以上あり一覧と詳細の関係が入り組む場合、そして掲載内容の決裁が複数部門にまたがる場合です。

とくに三つ目は見落とされがちです。人事・広報・営業がそれぞれ掲載したい情報を持つ採用サイトやサービスサイトでは、レイアウトの合意そのものが成果物になります。線と枠だけの画面は誰でも指摘できるため、部門横断の調整装置として機能するものです。情報設計と画面設計をまとめて任せたい場合は、UI/UXデザインの支援で、要件の整理からワイヤーフレーム・デザインカンプまでを一貫して引き受けています。

生成AIで作るワイヤーフレームの現状｜任せられる範囲と残る作業

生成AIに画面構成を出させる方法は、たたき台づくりの範囲なら実用段階に入りました。BtoB向けサービス紹介ページのワイヤーフレームを提案するよう指示すれば、一般的なブロック構成が数十秒で返ってきます。定石を確認する用途であれば十分です。

一方で、生成物をそのまま承認資料にはできません。AIが出す構成は業界の平均形であり、自社の強みがどこにあるか、どの事例を先に見せるべきかという判断が入らないためです。掲載する原稿量の実測値も反映されません。生成物を出発点にして、優先順位づけとレビューは人が担う。この分担が2026年9月時点の現実的な線です。

よくある質問

ワイヤーフレームについて、Web制作の相談時に受けることの多い質問をまとめました。

ワイヤーフレームは誰が作るのですか？

制作会社に依頼する場合は、Webディレクターが作成するのが一般的です。デザイナーが兼務する体制もあります。発注側が描く必要はありませんが、掲載したい情報の一覧と、ページごとに達成したい成果は発注側で決めておいてください。自社で作る場合は、サイト全体を見渡せる担当者が一人で描いたほうが早く進みます。

ワイヤーフレームはエクセルやパワーポイントでも作れますか？

表計算ソフトやプレゼンソフトでの作成も可能です。セルを方眼にして矩形を並べる方式で、10ページ前後までの案件なら実務に耐えます。ただし同時編集ができず、修正のたびにファイルの版が枝分かれしやすい弱点があります。制作会社と共同で進める案件や、PC版とスマートフォン版を並べて管理したい案件ではFigmaを選んでください。

ワイヤーフレームは全ページ分を作る必要がありますか？

必要ありません。トップページ、一覧ページ、詳細ページ、フォームのように構造の型が異なるページだけを描き、同じ型のページはひな型を流用します。30ページのサイトでも、実際に描くのは5〜7枚程度に収まることが多いです。ただし料金表や診断フォーム、会員マイページのように他と構造が違うページは個別に描いてください。

3DCGのワイヤーフレームとWeb制作のワイヤーフレームは同じ意味ですか？

別の概念です。3DCGのワイヤーフレームは、立体モデルを頂点と辺の線分だけで表示する描画方式を指し、モデリング作業中の形状確認に使われます。Web制作のワイヤーフレームは、ページの要素配置を決める設計図です。共通するのは線だけで骨組みを示すという語源で、実務上の用途は重なりません。検索結果には両方の意味が混ざるため、社内で用語を使うときは文脈を添えてください。

ワイヤーフレームの作成費用は制作費に含まれますか？

多くの制作会社では、ディレクション費または設計費に含める形で見積られます。単独の項目として金額が出ないことも珍しくありません。見積書を受け取ったら、ワイヤーフレームの作成枚数と修正回数の上限がどの項目に含まれるかを確認してください。含まれない場合、後から別途費用として請求される余地が残ります。

関連記事

• UI/UXとは？UIデザインの基本とUXとの違い・設計の進め方を解説：ワイヤーフレームの前提になるUI設計とUXの考え方を整理しています。
• 企業サイト制作の流れと各フェーズにおける具体的な作業内容：ワイヤーフレームが制作工程全体のどこに入るかを確認できます。
• デザインシステムとは？構成要素・作り方とデザインガイドラインとの違いを解説：ページ数が増えたときに配置ルールを再利用する仕組みを扱っています。
• サイト設計におけるローカルナビゲーションの種類とよくあるパターン：ワイヤーフレームで決めるナビゲーション配置の定石をまとめています。
• 業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定：Webサイトではなく業務システムの画面設計を検討する場合の実装視点です。