ワイヤーフレームは発注者が用意すべきか｜手書きラフでも制作会社に伝わる作り方 2026

「ワイヤーフレームは自分で用意すべきなのか、それとも制作会社に任せてよいのか」。Webサイトの新規制作やリニューアルを外注しようとした発注者の多くが、最初にぶつかる疑問です。結論から言うと、簡易的な手書きラフであっても発注者側で用意したほうが、見積もりの精度が上がり、後戻りの修正コストを大きく減らせます。この記事では、発注者がワイヤーフレームをどこまで用意すべきか、具体的な作り方、外注先とのすり合わせ方を解説します。

ワイヤーフレームを取り巻く市場の現状

Web制作の外注市場では、要件定義の曖昧さがトラブルの最大要因になっています。中小企業庁の調査でも、下請け取引における契約内容の不明確さがトラブルの温床になりやすいことが指摘されており、Web制作でも「イメージが違う」という理由での差し戻しは珍しくありません。

ワイヤーフレームを作る人は、大きく「発注者側」と「受注者（Web制作会社）」の2つに分かれます。 サイトリニューアル・新規Web制作などの場合は、基本的にはWeb制作会社のディレクターやデザイナーが制作することが主ですが、「既存サイトに1ページ追加」などの小規模な案件の場合だと、発注者がワイヤーフレームを制作してWeb制作会社に見積もりを依頼することもあります。

つまり、大規模なリニューアルであれば制作会社側がワイヤーフレームを起こすのが一般的ですが、小規模な追加ページや部分的な改修の場合は、発注者自身が簡易的なワイヤーフレームを用意して見積もり依頼をするケースが増えています。この違いを理解しないまま「うちの案件はどっちだろう」と迷ってしまう発注者は非常に多いです。

背景には、Web制作の外注費用そのものが上昇傾向にあることがあります。30万円台だった小規模サイトの制作費が、50万円を超えるケースも珍しくなくなりました。見積もり金額の差が大きくなるほど、発注者側が事前にイメージを固めておく重要性が増しています。ワイヤーフレームがないまま「なんとなくかっこいいサイトにしてほしい」と依頼すると、制作会社側はリスクを見込んで見積もりを高めに出さざるを得ません。逆に、発注者がラフでもワイヤーフレームを提示できれば、制作会社は必要な工数を正確に見積もれるため、結果的に費用を抑えられる可能性が高まります。

そもそもワイヤーフレームとは何か

ワイヤーフレームとは、Webページのレイアウトを線と枠だけで示した設計図です。見た目の装飾（色・写真・フォント）は含まず、「どこに何を配置するか」だけを可視化したものです。

このページでは、そんなワイヤーフレームについての解説とワイヤーフレームの作り方、またWeb制作時のワイヤーフレームの注意点などを解説します。 出典: digital-marketing.jp

似た言葉に「モックアップ」や「デザインカンプ」がありますが、これらとは役割が明確に異なります。

ワイヤーフレームとモックアップ・デザインカンプの違い

ワイヤーフレームはレイアウトの骨組みのみを示すものです。文字はダミーテキスト、画像は灰色の四角で代用され、色もほぼ使いません。一方、モックアップは配色やフォント、画像を仮でも実際に近い形で当てはめた見た目に近いイメージです。デザインカンプは、実際に使う写真・配色・フォントまですべて確定させた、公開直前の完成見本にあたります。

制作フローとしては、ワイヤーフレーム→デザインカンプ（モックアップ）→コーディングという順に進むのが一般的です。発注者がこの段階の違いを理解していないと、「ワイヤーフレームの段階で色やフォントの指摘をしてしまい、無駄な手戻りが発生する」という失敗が起きます。ワイヤーフレームの段階で確認すべきは、あくまで「情報の配置」と「導線」であることを覚えておいてください。

ワイヤーフレームが発注者にとって重要な理由

発注者がワイヤーフレームを用意する、あるいは少なくとも理解しておくべき理由は3つあります。

理由1：見積もりの精度が上がる

Web制作の見積もりは、ページ数・機能・情報量によって大きく変動します。ワイヤーフレームがあれば、制作会社は「このページにはこの要素がある」と具体的に把握できるため、後から「思ったより工数がかかった」という追加請求のリスクが減ります。逆にワイヤーフレームなしで発注すると、見積もり金額に大きな幅を持たせざるを得ず、結果的に高めの見積もりになりがちです。

理由2：認識のズレを防げる

「トップページにキャンペーン情報を大きく載せたい」というイメージが発注者と制作会社で一致していないと、完成後に「思っていたのと違う」という事態になります。ワイヤーフレームの段階で情報の優先順位・配置を確認し合うことで、デザインが完成してからの大規模な修正を防げます。

理由3：社内合意形成がスムーズになる

複数の担当者や経営層の承認が必要な案件では、ワイヤーフレームがあることで社内の合意形成が格段にスムーズになります。文章だけの要望書よりも、視覚的な設計図のほうが関係者間の認識をそろえやすいためです。

その点、ワイヤーフレームはある程度サイトの体裁を整えているため、実際のサイトの仕上がりをイメージしつつ、足りないものを確認できます。 出典: digital-marketing.jp

発注者向けワイヤーフレームの作り方5ステップ

ここからは、発注者がゼロからワイヤーフレームを用意する場合の具体的な手順を解説します。デザインスキルは一切不要です。

ステップ1：ページの目的とゴールを整理する

まず、そのページで「誰に」「何を伝え」「どんな行動をしてほしいか」を言語化します。例えば「30代の子育て世代に商品の安全性を伝え、資料請求してもらう」といった具合です。ここが曖昧なまま作業に入ると、情報の優先順位が決められず、要素を詰め込みすぎたページになってしまいます。

ステップ2：掲載したい要素を洗い出す

ロゴ、ナビゲーションメニュー、メインビジュアル、キャッチコピー、商品説明、料金表、お客様の声、問い合わせフォームなど、そのページに必要な要素をすべて紙やメモに書き出します。この段階では順番を気にせず、思いつくものを全部出すのがポイントです。

ステップ3：要素の優先順位を決めて配置する

洗い出した要素に優先順位をつけ、上から重要な順に配置していきます。基本的にはF字型（左上から右、下へと視線が動く）またはZ字型の視線誘導を意識すると、ユーザーが自然に情報を追いやすくなります。3秒以内に何のページか伝わるかを基準に、ファーストビュー（スクロールせず見える範囲）の情報を絞り込みましょう。

ステップ4：手書き、もしくは無料ツールで形にする

ここで実際に線と枠を描いていきます。デザインスキルがなくても問題ありません。発注者が用意するワイヤーフレームは「制作会社に意図が伝わればよい」ので、完成度の高さは求められません。

• 手書き：紙にペンで四角と線を描くだけでも十分伝わります。スマートフォンで撮影して共有すれば手間もかかりません。
• PowerPointやGoogleスライド：普段使い慣れているツールなら、四角形と文字だけで簡単に作成できます。
• 無料のワイヤーフレームツール：Figma（無料プランあり）やCacooなど、専用ツールを使えばより明確に伝えられます。初めて使う場合は、テンプレートから四角と線を配置するだけの簡単な操作で完成します。

ステップ5：制作会社に共有し、意図を補足する

ワイヤーフレームだけでは伝わりきらないニュアンス（「ここは目立たせたい」「この情報は優先度が低いので省略してもよい」など）は、口頭やメモで補足しましょう。ワイヤーフレームは万能ではなく、あくまで意図をすり合わせるためのたたき台です。制作会社側から「この配置だと情報が多すぎる」といった専門的なフィードバックをもらい、双方で調整していくのが理想的な進め方です。

ワイヤーフレーム作成時に発注者が注意すべきポイント

完成度を求めすぎない

発注者が作るワイヤーフレームは、あくまで「たたき台」です。デザインの美しさや正確なピクセル配置を求める必要はありません。むしろ完成度を上げすぎると、制作会社側が「発注者の意図を尊重しすぎて自由度が失われる」というケースもあります。ラフでよいので、伝えるべき情報の優先順位だけを明確にしましょう。

色やフォントの指定はしない

ワイヤーフレームの段階では、色やフォントといったデザイン要素の指定はしないのが原則です。この段階での装飾の話は、後工程のデザインカンプで詰めるべき内容です。ワイヤーフレームに色をつけてしまうと、制作会社のデザイナーが「これが確定案なのか」と誤解し、自由な提案がしにくくなる懸念があります。

全ページを完璧に作ろうとしない

サイト全体のワイヤーフレームをすべて発注者が用意する必要はありません。特にこだわりが強いページ（トップページ、サービス紹介ページなど）だけをラフで用意し、それ以外は制作会社の提案に委ねるという分担でも十分機能します。すべてを自分で作ろうとすると時間がかかりすぎ、本業に支障が出てしまいます。

モバイル表示を考慮する

現在はスマートフォンからのアクセスが大半を占めるサイトが多いため、PC版だけでなくスマートフォン版のレイアウトもイメージしておくと、後の手戻りを防げます。特に、PC版で横並びに配置した要素が、スマートフォンでは縦に積み重なることを意識しておくと、情報の優先順位を決める際の判断材料になります。

ワイヤーフレーム作成におすすめの無料ツール

発注者が使いやすい無料ツールをいくつか紹介します。

Figma

Web制作業界で広く使われているデザインツールです。無料プランでも十分な機能があり、テンプレートも豊富です。制作会社側もFigmaを使っているケースが多いため、共有・コメントのやり取りがスムーズです。クラウド上で動作するため、インストール不要でブラウザからすぐに使い始められます。

PowerPointやGoogleスライド

普段の業務で使い慣れているツールで代用する方法です。四角形の図形と文字だけで、簡易的なワイヤーフレームは十分作成できます。専用ツールの学習コストをかけたくない発注者にはこちらがおすすめです。

手書き（紙・ホワイトボード）

最も手軽な方法です。ツールの使い方を覚える時間すら惜しい場合は、紙に手書きしたものをスマートフォンで撮影し、そのまま制作会社に送るだけでも十分に意図は伝わります。完璧な清書は不要です。

外注時の費用相場と依頼の流れ

Web制作を外注する際、ワイヤーフレーム込みでの費用相場は制作会社の規模や依頼内容によって幅があります。中小の制作会社やフリーランスに依頼する場合、コーポレートサイトの新規制作で30万円から100万円程度、LP（ランディングページ）1ページのみであれば10万円から30万円程度が目安です。制作会社によっては、ワイヤーフレーム作成を別工程として料金を分けている場合もあれば、デザイン費用に含まれている場合もあります。見積もり依頼の段階で、ワイヤーフレーム作成が費用に含まれるかどうかを必ず確認しましょう。

依頼の流れとしては、以下のような順序が一般的です。

1. 目的・要件の整理（発注者側）
2. ワイヤーフレームの用意、または制作会社への相談（発注者または制作会社）
3. 見積もり依頼、複数社への相見積もり
4. 契約、キックオフミーティング
5. デザインカンプの確認・修正
6. コーディング、実装
7. 検証・公開

ここで重要なのは、見積もりを依頼する際に必ず複数社を比較することです。1社のみの見積もりでは相場観がつかめず、適正価格かどうかの判断ができません。

私自身、初めて外注したときに見積もりの比較を怠り、後悔した経験があります。1社だけの見積もりで「相場はこんなものだろう」と判断して契約したところ、後から他社に相談する機会があり、同等の内容で3割近く安い見積もりが出せることを知りました。正直なところ、これは発注者側の準備不足が招いた失敗だったと今でも思います。ワイヤーフレームを事前に用意しておけば、複数社に同条件で見積もりを依頼でき、比較検討がしやすくなっていたはずです。

制作会社選びで失敗しないためのポイント

ワイヤーフレームを用意したうえで、次に重要になるのが依頼先の選定です。制作会社選びで発注者がよく陥る失敗として、価格の安さだけで選んでしまうケースがあります。

安さだけで選んで品質面で苦労したという声は、外注経験者からよく聞かれます。極端に安い見積もりを出す業者の中には、コミュニケーションが不十分だったり、修正対応が別料金だったりするケースもあります。見積もり金額だけでなく、以下の点も比較材料にしましょう。

• 過去の制作実績（同業種・類似規模のサイトがあるか）
• コミュニケーションの取りやすさ（返信の速さ、質問への回答の丁寧さ）
• 修正対応の範囲（何回まで無料か、追加費用の有無）
• 公開後の保守・運用サポートの有無

制作会社を通す場合、仲介会社やエージェントを経由すると、その分の手数料が見積もりに上乗せされていることが一般的です。一方、フリーランスのデザイナーやディレクターに直接依頼すれば、中間マージンが発生しない分、同じ予算でもより多くの工数を確保できたり、費用を抑えられたりする可能性があります。ワイヤーフレームを発注者側で用意しておくことは、こうした直接発注のハードルを下げる効果もあります。要件が明確になっていれば、フリーランスへの直接依頼でも認識のズレが起きにくくなるためです。

発注者データから見えるワイヤーフレーム準備の傾向

発注者向けの業務委託関連の情報を見ると、契約書のひな型を整えてから依頼する発注者ほど、後工程でのトラブルが少ない傾向があります。同様に、ワイヤーフレームや要件を先に整理しておく発注者ほど、見積もりの精度や納品後の満足度が高くなる傾向が見られます。契約書の作り方について詳しく知りたい方は、業務委託契約書の作り方｜発注者向けテンプレート付きでテンプレート付きの解説をまとめているので参考にしてください。

Web制作だけでなく、AIを活用した業務効率化を検討している発注者も増えています。ワイヤーフレーム作成自体にAIツールを補助的に使う動きも出てきており、業務全体のデジタル化を進めたい場合はAIコンサル・業務活用支援のお仕事で、AIの導入支援を依頼できる専門家の情報を確認できます。マーケティングやセキュリティ面も含めた総合的な支援を検討している場合は、AI・マーケティング・セキュリティのお仕事も参考になります。

Web制作の外注が単発の依頼にとどまらず、アプリ開発やシステム連携まで広がるケースも増えています。将来的にアプリ化やシステム連携を見据えている場合は、アプリケーション開発のお仕事で、開発を依頼できる人材の相場感を把握しておくとよいでしょう。

発注する側の担当者としてどのようなスキルセットを持つ人材を探せばよいか判断に迷う場合は、ソフトウェア作成者の年収・単価相場を参照すると、開発職の相場感を把握する材料になります。Webサイトの文章コンテンツの発注を検討している場合は、著述家，記者，編集者の年収・単価相場も合わせて確認しておくと、記事制作やコピーライティングの外注費用の目安がつかめます。

20年この市場を見てきた立場から言えば、発注者と受注者の関係が長く続くケースほど、初回の要件整理に時間をかけている傾向があります。ワイヤーフレームというたたき台ひとつで、双方の手戻りが減り、結果的に予算内で仕上がる確率が上がるという構造は、Web制作に限らず外注全般に共通する法則です。中間マージンが乗らない直接取引では、発注者は同じ予算でより多くの作業を依頼でき、受注する側も手取りが厚くなります。この「双方が得をする」構造は、単なる価格差以上に、双方の関係性を長続きさせる土台になっていると運営者として感じています。

ワイヤーフレームを用意する手間は、決して小さなものではありません。しかし、この一手間が見積もりの精度を上げ、認識のズレを防ぎ、結果的にプロジェクト全体のコストと時間を削減します。手書きのラフで構いません。まずは目的とゴールを整理するところから始めてみてください。

よくある質問

Q. ワイヤーフレームは必ず発注者が用意しないといけませんか？

必須ではありません。大規模なリニューアルは制作会社側が作成するのが一般的です。ただし小規模な追加ページや部分改修では、発注者がラフを用意すると見積もり精度が上がりやすくなります。

Q. 手書きのワイヤーフレームでも制作会社に伝わりますか？

問題なく伝わります。ワイヤーフレームの目的は情報の配置と優先順位を共有することなので、完成度よりも意図が明確であることのほうが重要です。

Q. ワイヤーフレームの段階で色やデザインを指定してもいいですか？

避けたほうがよいです。色やフォントはデザインカンプの工程で決める内容です。ワイヤーフレーム段階での装飾指定は、制作会社の自由な提案を妨げる可能性があります。

Q. ワイヤーフレーム込みの制作費用はどのくらいが相場ですか？

コーポレートサイトの新規制作で30万円から100万円程度、LP1ページのみなら10万円から30万円程度が目安です。ワイヤーフレーム作成が別料金かどうかは見積もり時に必ず確認しましょう。

無料で案件を掲載する

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