サイト構成案とワイヤーフレームの違い｜発注前にどこまで自分で決めるか 2026

「サイト構成案とワイヤーフレーム、どちらを先に外注先に渡せばいいんでしょうか」。ホームページ制作の依頼を検討している方から、こういうご相談をよく受けます。似た言葉なのに指しているものが違う。この違いを知らないまま見積もりを取ると、思っていたより高い金額を提示されたり、逆に必要な工程が抜け落ちたまま契約してしまったりします。大丈夫です。この記事を読めば、構成案とワイヤーフレームの役割の違い、費用相場、そして発注前にあなた自身がどこまで決めておくべきかがはっきり分かります。

サイト制作の発注で構成案とワイヤーフレームが混同されやすい理由

Webサイト制作を外部に依頼する個人事業主や中小企業の担当者は年々増えています。中小企業庁の調査でも、デジタル化投資に取り組む中小企業の割合は上昇傾向にあり、ホームページのリニューアルや新規開設は多くの事業者にとって身近な投資項目になりました。ところが、いざ制作会社やフリーランスに見積もりを依頼すると、「構成案作成費」「ワイヤーフレーム作成費」という項目が別々に立っていて戸惑う方が少なくありません。

この混同が起きる理由は大きく3つあります。1つ目は、どちらも「サイトが完成する前の設計資料」であり、完成後には表に出てこない中間成果物であること。2つ目は、資料の見た目がどちらも簡素な線画や箇条書きで、パッと見た印象が似ていること。3つ目は、制作会社によって呼び方や作業範囲の切り分け方にばらつきがあり、ある会社では「構成案」に含まれる作業が、別の会社では「ワイヤーフレーム」の工程として請求されることです。

発注する側からすると、この曖昧さがそのまま見積もり比較の難しさにつながります。A社は構成案とワイヤーフレームを一括りにして20万円、B社は分けて構成案5万円プラスワイヤーフレーム10万円、というように、同じ作業量でも表示のされ方が違うと単純比較ができません。だからこそ、発注者自身が「構成案とは何を決める工程で、ワイヤーフレームとは何を決める工程なのか」を理解しておく必要があるのです。

構成案とは何か。サイトの「中身」を整理する設計図

構成案とは、サイト全体にどんなページが存在し、それぞれのページにどんな情報を載せるか、ページ同士がどうつながるかを整理した設計図です。トップページ、会社概要、サービス紹介、料金ページ、お問い合わせページといった具合に、サイトマップに近い形で全体構造を可視化します。

構成案の段階でよく決めるのは次のような項目です。

・必要なページの種類と数 ・各ページに掲載する情報の優先順位 ・グローバルナビゲーションの項目 ・ページ間の遷移(どのボタンからどこに飛ぶか) ・SEOを意識したキーワードの割り振り

構成案はいわば「本の目次と各章の要約」に相当します。まだレイアウトや配色は決まっていません。あくまで情報の設計、つまり「何を、どのページに、どんな順番で置くか」を決める工程です。この段階で誤りがあると、後工程のワイヤーフレームやデザインすべてに影響が波及するため、制作全体の中でも特に重要な工程だと位置づけられています。

ワイヤーフレームとは何か。配置を決める「骨組み」

構成案で各ページの中身が固まったら、次にそのページの中で情報をどう配置するかを決めるのがワイヤーフレームです。ワイヤーフレームは白黒の線画で、文字の大きさや色、写真の内容までは決めず、あくまで「見出しはここ」「画像はここ」「ボタンはここ」という配置と優先順位だけを示します。

ワイヤーフレームとデザインカンプは混同されやすい言葉として認識されています。しかし、実際には上記で説明したように、それぞれ特徴が異なるものになります。混同されやすい理由として考えられるのは、どちらもWebサイトやアプリが完成する前の設計資料であること、見た目が似ている場合もあることなどが挙げられます。特にどちらも「完成形をイメージ・共有するための図」として扱われるため、同じ性質の資料と勘違いされる可能性が高いです。 出典: iridge.jp

ワイヤーフレームで決める代表的な要素は次の通りです。

・ヘッダーとフッターの構成 ・ファーストビュー(最初に目に入る領域)に何を置くか ・見出し、本文、画像、ボタンの配置バランス ・情報の優先順位(何を一番目立たせるか) ・スマートフォン表示時のレイアウト崩れの想定

ワイヤーフレームはいわば「本の各ページのレイアウト案」に相当します。構成案が「何を書くか」を決める工程なら、ワイヤーフレームは「どう並べるか」を決める工程です。この段階でも配色やフォントは決まっていません。あくまで骨組みだけを固める作業です。

構成案とワイヤーフレームの違いを一覧で整理する

言葉で説明するより、表で見た方が分かりやすいという方も多いはずです。以下に主な違いをまとめました。

項目	構成案	ワイヤーフレーム
決める対象	サイト全体の情報構造	1ページ内のレイアウト
主な成果物	サイトマップ、ページ一覧、情報の優先順位表	白黒の線画レイアウト
工程の順番	制作の最初期(要件定義の直後)	構成案の後、デザインの前
誰が主導すべきか	発注者側の意思決定が中心	ディレクターやデザイナーが主導
変更のしやすさ	変更コストは比較的低い	途中変更するとデザイン工程に影響しやすい
発注者が見るべきポイント	必要なページが漏れていないか、導線が事業目的と合っているか	情報の優先順位が伝えたい内容と一致しているか

この表からも分かる通り、構成案は「事業として何を伝えたいか」という経営判断に近い工程です。一方でワイヤーフレームは「その判断をどう視覚的に表現するか」という制作技術に近い工程になります。だからこそ、構成案の段階では発注者であるあなた自身が積極的に意見を出すべきですし、ワイヤーフレームの段階ではある程度プロの判断に任せる方が結果的にスムーズに進みます。

モックアップとの違いも押さえておく

構成案とワイヤーフレームの話をすると、必ずと言っていいほど「モックアップ」という言葉も出てきます。混乱を避けるために、ここで整理しておきましょう。

モックアップは、ワイヤーフレームに色、フォント、写真などを適用した、実際の完成図に近いデザイン案です。サイトの雰囲気やブランドイメージが正しく表現されているかを確認する「模型」の役割を果たします。 出典: drama.co.jp

つまり制作工程は、大まかに次の順番で進みます。

1. 構成案(情報の中身と全体構造を決める)
2. ワイヤーフレーム(配置の骨組みを決める)
3. モックアップまたはデザインカンプ(配色やフォントを反映した完成イメージを決める)
4. 実装(コーディングやCMS構築)

このうち構成案とワイヤーフレームは似た言葉で混同されがちですが、モックアップは見た目が明らかに違う(色や写真が入っている)ため区別しやすいと感じる方が多いようです。逆に言えば、構成案とワイヤーフレームの違いこそが最も誤解されやすいポイントだと言えます。

サイト構成案とワイヤーフレームの制作費用相場

発注者として最も気になるのは費用でしょう。相場は制作会社の規模やページ数、業務範囲によって幅がありますが、目安として次のようなレンジで語られることが多いです。

・構成案作成のみ: 3万円〜10万円程度(ページ数10ページ前後の一般的な企業サイトの場合) ・ワイヤーフレーム作成のみ: 5万円〜15万円程度 ・構成案とワイヤーフレームを一括で依頼: 8万円〜20万円程度

この金額は制作会社に依頼した場合の相場感で、代理店を経由するとディレクション費や仲介マージンが上乗せされ、さらに高くなる傾向があります。一方でフリーランスのWebディレクターやデザイナーへ直接依頼すると、同じ作業量でも中間マージンが発生しない分、費用を抑えられるケースが多く見られます。予算を抑えつつ品質を確保したい場合は、構成案とワイヤーフレームだけを切り出してフリーランスに依頼し、実装は別の専門家にお願いするという分業のやり方も選択肢になります。

発注前に自分で決めておくべき範囲

ここが最も重要なポイントです。構成案とワイヤーフレームは外注先が作る資料ですが、その土台になる情報は発注者自身が用意しなければ、質の高い提案は返ってきません。発注前に最低限次の3点は自分の言葉で整理しておきましょう。

サイトの目的とゴール

「問い合わせを増やしたい」「採用応募を増やしたい」「商品を直接販売したい」など、サイトの目的によって必要なページや導線は大きく変わります。目的が曖昧なまま発注すると、外注先は仮説で構成案を作るしかなく、後から「思っていたのと違う」という手戻りが起きやすくなります。

ターゲットとする読者像

誰に向けたサイトなのかによって、載せるべき情報の優先順位が変わります。BtoBの取引先向けなのか、一般消費者向けなのか、採用候補者向けなのかで、トップページに置くべき情報はまったく異なります。

絶対に外せないコンテンツ

会社概要に必ず記載したい情報、サービスページで訴求したい強み、法律上表示が必須な情報(特定商取引法に基づく表記など)は、事前にリスト化しておくとスムーズです。

これらの3点さえ発注者側で用意できていれば、構成案の打ち合わせは驚くほど短時間で終わります。逆にこの3点が曖昧なまま「おまかせします」と丸投げすると、何度も修正のやり取りが発生し、結果的に納期も費用も膨らみやすくなります。

失敗しない外注先の選び方

構成案とワイヤーフレームの作成を外注する際、選び方を誤ると後工程で大きなトラブルになりかねません。以下のポイントを確認しましょう。

過去の制作実績を業種別に確認する

同業種のサイト制作実績があるかどうかは、業界特有の情報構造や訴求ポイントを理解しているかの目安になります。実績サイトを見せてもらい、構成案の段階でどんな工夫がされていたかを質問してみるとよいでしょう。

修正回数の上限を契約前に確認する

構成案もワイヤーフレームも、一発で完成することはほとんどありません。何回まで無料で修正してもらえるのか、それを超えた場合の追加費用はいくらかを、契約前に必ず確認してください。この確認を怠ると、想定外の追加請求でトラブルになるケースがあります。

コミュニケーション手段と返信スピードを確認する

構成案の段階は特に、細かいやり取りが頻繁に発生します。チャットツールで気軽にやり取りできるか、返信までの目安時間はどれくらいかを事前にすり合わせておくと、進行がスムーズになります。

業務範囲を決める際の注意点

見積もりを比較する際に見落としがちなのが、「どこまでが構成案・ワイヤーフレームの範囲で、どこからが別工程か」という業務範囲の線引きです。

・原稿(コピーライティング)は構成案に含まれるか、別料金か ・写真や画像素材の選定は含まれるか ・スマートフォン表示用のワイヤーフレームは別途必要か ・修正対応の回数と期限はいつまでか ・完成した構成案・ワイヤーフレームの著作権は誰に帰属するか

これらは見積書に明記されないまま進んでしまうことも多く、後から「それは別料金です」と言われてトラブルになりやすい部分です。発注前に必ず書面(メールやチャットのログでも可)で確認しておくことをおすすめします。

私自身、フリーランスとして仕事を外注する立場になって初めて、この業務範囲の線引きの重要性を実感しました。以前、自分のオンラインサービスのサイトを作る際、安さだけで比較して発注先を選んだところ、構成案には原稿作成が含まれておらず、追加で原稿執筆費用を請求されて予算をオーバーしてしまったことがあります。見積もりの金額だけでなく、その金額に何が含まれているのかまで確認する重要性を、身をもって学びました。

制作をスムーズに進めるコツ

構成案とワイヤーフレームの工程を円滑に進めるために、発注者側でできる工夫をいくつか紹介します。

・競合サイトや理想に近いサイトのURLを3つ程度用意しておく ・社内の意思決定者を早い段階で巻き込み、後からの大幅な方向転換を避ける ・構成案の段階でページ数の上限をある程度決めておく(後から増やすと費用も納期も膨らむため) ・ワイヤーフレームの確認は担当者一人ではなく、実際にサイトを使う立場の人にも見てもらう

特に「意思決定者を早い段階で巻き込む」は見落とされがちですが、構成案が固まった後に決裁者から大きな方向転換の指示が入ると、ワイヤーフレーム以降の工程がすべてやり直しになりかねません。発注前に社内の合意形成を済ませておくことが、結果的に一番の時間短縮とコスト削減につながります。

無料でできる構成案・ワイヤーフレームの下準備

外注する前に、発注者側で無料でできる下準備もあります。すべてを外注に頼るのではなく、自分でできる部分は自分で準備しておくと、外注費用を抑えられるだけでなく、要望も伝わりやすくなります。

・紙とペンで大まかなページ構成を書き出してみる ・スプレッドシートでページ一覧と掲載情報を整理する ・無料のワイヤーフレーム作成ツールで簡単なラフを描いてみる ・競合サイトのページ構成をスクリーンショットで保存し、良い点・悪い点をメモする

これらの下準備を持って打ち合わせに臨むと、外注先とのコミュニケーションが格段にスムーズになります。ゼロから提案してもらうよりも、たたき台をもとに「ここを直したい」という相談の方が、双方にとって時間の節約になるのです。

独自データ考察。中間マージンと直接依頼の関係

構成案・ワイヤーフレームの制作を外注する際、代理店や仲介会社を経由するか、フリーランスに直接依頼するかで費用構造が変わります。代理店経由の場合、実際に作業するディレクターやデザイナーへの報酬に加えて、代理店の管理費や営業経費が上乗せされるのが一般的です。この上乗せ分は業界や案件規模によって幅がありますが、同じ作業内容であっても仲介を挟むことで発注者の支払額が増える構造そのものは変わりません。

一方、フリーランスへ手数料0%で直接依頼できる仕組みを使えば、中間マージンが発生しない分、同じ予算でより多くの工程を依頼できたり、逆に同じ作業内容をより安く依頼できたりします。

長くフリーランス・在宅ワーク市場を運営してきた立場から見えてくるのは、直接取引がうまくいく発注者ほど、金額の安さだけでなく「この人になら任せられる」という信頼関係の構築に時間をかけているという傾向です。構成案やワイヤーフレームのような上流工程は、一度の発注で終わらず、サイトの改修や追加ページの制作など長期的な付き合いになることが多い業務です。単発の安さだけで発注先を選ぶのではなく、初回のやり取りでの説明の分かりやすさや、質問への応答の丁寧さを見極めることが、結果的に長期的なコスト削減につながります。

中間マージンが乗らない直接取引は、依頼する側にとっては同じ予算でより多くを頼めるという利点があり、受け手であるフリーランス側にとっては手取りが厚くなるという利点があります。この双方にとってメリットのある構造こそが、直接取引が広がっている理由だと言えるでしょう。額面上の見積もり金額の安さだけでなく、その予算で実際にどこまでの品質と工程を依頼できるかという「手取りの厚さ」の観点で比較検討することを、発注者の皆さんにはおすすめします。

構成案の相談をする際は、AIコンサル・業務活用支援のお仕事のように、業務フロー全体を俯瞰して整理してくれる専門家に事前相談するのも一つの方法です。サイトの目的整理からサポートしてもらえると、外注先とのやり取りもよりスムーズになります。また、ワイヤーフレームの後工程であるサイトの実装を見据えるなら、アプリケーション開発のお仕事のページで、実装まで一気通貫で依頼できる専門家の業務範囲を確認しておくと、構成案の段階から実装を意識した設計がしやすくなります。デザインとコーディングの両方に関わる人材を探す際は、Webデザイナー UI/UXの違いとスキルアップ！年収を上げる学習ステップの記事で、UIとUXそれぞれの専門性の違いを押さえておくと、ワイヤーフレーム作成の担当者に何を求めるべきかが明確になります。

サイト制作のように複数の工程に分かれる業務を発注する際は、それぞれの工程の費用相場や役割分担を事前に理解しておくことが、無駄な追加費用を防ぐ一番の近道です。似たような設計図同士の違いに戸惑うのは、あなただけではありません。構成案は「何を伝えるか」、ワイヤーフレームは「どう並べるか」。この軸さえ持っておけば、外注先との打ち合わせで的確な質問ができるようになり、思い描いていたサイトに一歩ずつ近づいていけます。

よくある質問

Q. サイト構成案とワイヤーフレームは同時に依頼した方がいいですか？

一括依頼で流れをスムーズにできる利点はありますが、構成案の内容が固まる前にワイヤーフレームまで進めると手戻りが増えます。まず構成案を確定させてから、ワイヤーフレームに着手する順番がおすすめです。

Q. 構成案の作成に自分の会社の資料をどこまで渡すべきですか？

既存のパンフレットや会社案内、競合分析資料があれば渡すと精度が上がります。特にサービスの強みや想定顧客像が分かる資料は、構成案の情報設計に直結するため優先的に共有してください。

Q. ワイヤーフレームの修正は何回まで無料が相場ですか？

制作会社やフリーランスによって異なりますが、2回から3回までを無料修正の目安とするケースが多く見られます。契約前に上限回数と超過時の追加費用を必ず確認しておきましょう。

Q. 構成案とワイヤーフレームを別々の担当者に依頼しても問題ないですか？

可能ですが、情報の引き継ぎ漏れが起きやすくなります。依頼する場合は、構成案の意図(なぜこの構成にしたか)を書面で残し、ワイヤーフレーム担当者にそのまま共有できるようにしておくと安心です。

無料で案件を掲載する

入力は3分ほど。掲載料も取引手数料も0円です。@SOHOに登録しているフリーランス・副業ワーカーから、早ければ当日中に最初の応募が届きます。