2026年7月31日

ワイヤーフレーム・モック・プロトタイプの違いを“制作フローの順序”で理解｜発注者が確認すべきタイミング

Web制作会社との打ち合わせで「ワイヤーフレーム」「モックアップ」「プロトタイプ」といった専門用語が飛び交い、内容をよく理解できないまま「お任せします」と答えてしまった経験はないでしょうか。

これらはいずれも制作途中に登場する中間成果物の名前であり、実はそれぞれ確認すべきポイントがまったく異なります。用語の意味を知らないまま承認を重ねると、完成間際になって「イメージと違う」という大きな手戻りが発生しかねません。

本記事では、混同されやすい3つの用語を「ワイヤーフレーム→モック→プロトタイプ」という制作フローの順序に沿って整理し、発注者が各段階で何を確認し、何を承認すべきかを具体的に解説します。読み終える頃には、任せきりだった確認作業に自信を持って臨めるようになるはずです。

ワイヤーフレームとは｜Web制作の「骨組み」を決める設計図

ワイヤーフレームとは、Webサイトやアプリの画面に「何を・どこに・どの優先順位で」配置するかを線と枠だけで表した設計図のことです。ワイヤーフレームは、建築でいう間取り図にあたります。壁紙の色や家具のデザインを決める前に、部屋の数と広さ、動線を確定させるのと同じ役割を、Web制作ではワイヤーフレームが担っています。

最初に骨組みだけを固めるのは、「情報の構成」と「見た目のデザイン」を同時に議論すると、話が必ず混乱するからです。色やビジュアルが目に入ると、人はどうしてもそちらに意識を奪われ、「このページで本当に伝えるべき情報は何か」という本質的な議論が置き去りになります。だからこそWeb制作の現場では、あえて色も写真も入れないグレーの図面を最初に作り、情報設計だけに集中して合意を取るのです。

ワイヤーフレームとはページの構成要素と配置を定めた図面

ワイヤーフレームには、ロゴやナビゲーション、メインビジュアル、見出し、ボタンといったページを構成する要素と、その配置・大きさ・順番が描かれます。一方で、配色・フォント・写真素材・装飾といったビジュアル要素は意図的に含まれません。

実際のワイヤーフレームは、次の図のようにグレーの箱と線、バツ印の画像プレースホルダだけで構成されたシンプルなものです。初めて見る発注者の方は「ずいぶん簡素だな」と驚くかもしれませんが、これが正常な姿です。

図のように、画像が入る予定の場所はバツ印つきの箱で、文章が入る場所は灰色の線や仮テキストで示されます。この段階の成果物に対して「色が地味だ」「写真がダサい」という感想を持つ必要はまったくありません。見るべきは要素の有無と配置、そして優先順位だけです。

ワイヤーフレームに色やデザインが入っていない理由

ワイヤーフレームが白黒・グレーで作られるのは、手抜きではなく議論の焦点を絞るための意図的な設計です。理由は大きく2つあります。

1つ目は、前述のとおり情報設計への集中です。「問い合わせボタンはファーストビューに必要か」「料金表と導入事例はどちらを先に見せるべきか」といった判断は、サイトの成果を左右する重要事項です。ここに色の好みの話が混ざると、重要な判断が後回しになってしまいます。

2つ目は、修正コストが最も低い段階だからです。線と箱だけの図面であれば、レイアウトの大幅な変更も短時間で反映できます。逆にデザインが完成した後で「この要素を追加してほしい」となると、デザイン全体のバランス調整からやり直しになり、修正の負担は一気に膨らみます。直しやすいうちに構成を固めきることが、ワイヤーフレームという工程の存在意義なのです。

具体例で理解するワイヤーフレームの役割

たとえば、食品メーカーが自社ECサイトのリニューアルをWeb制作会社に依頼したとします。ワイヤーフレームの確認会議で、担当者が「トップページに社長挨拶を大きく載せたい」と要望したところ、Web制作会社から「購入を検討するお客様が最初に知りたいのは商品の魅力なので、社長挨拶は会社案内ページに配置しましょう」と提案を受ける、といった場面が典型的です。

ワイヤーフレーム段階は、「誰に・何を・どの順番で見せるか」というサイトの戦略を、図面上ですり合わせる場です。ここで発注者が業務知識や顧客理解を提供し、Web制作会社が設計の専門知識を提供することで、双方の知見が反映された強い骨組みが完成します。任せきりにするにはもったいない、発注者の参加が最も価値を生む工程だといえるでしょう。

モックとは・デザインカンプとは｜見た目を完成形に近づける工程

モックとは、ワイヤーフレームに色・写真・フォント・装飾を加え、完成時の見た目を静止画として再現した中間成果物のことです。モックアップと呼ばれることも多く、Web制作の現場ではデザインカンプという呼び名も広く使われます。この段階で、サイトの「見た目」がほぼ確定します。

ワイヤーフレームが間取り図なら、モックアップは完成予想パース（内装イメージ図）です。骨組みで合意した配置はそのままに、ブランドカラーや実際の写真、作り込まれたボタンデザインが載ることで、初めて「うちのサイトはこうなるのか」という実感が湧く工程でもあります。

モックとは「静止画の完成イメージ」

モックの最大の特徴は、見た目は完成品同然なのに、クリックしても動かないという点です。あくまで1枚の絵、つまり静止画であり、リンクを押してもページは遷移しませんし、メニューも開きません。

この性質を知らないと、「ボタンを押しても反応しないが、不具合ではないか」と誤解してしまうことがあります。モックアップは動作を確認するためのものではなく、色彩・写真・文字の雰囲気といったビジュアルデザインを確認するためのものです。動きの確認は、次の工程であるプロトタイプの役割になります。

デザインカンプとはWeb制作現場での呼び名

用語の混乱が起きやすいポイントとして、デザインカンプとは何かにも触れておきます。カンプは「comprehensive layout（総合的なレイアウト）」に由来する言葉で、日本のWeb制作業界では完成見本としてのデザインデータを指すのが一般的です。

実務上は、モック・モックアップ・デザインカンプはほぼ同じものを指していると理解して差し支えありません。Web制作会社によって「カンプをお出しします」「モックを確認してください」と言い方が変わるだけで、ワイヤーフレームに見た目を与えた静止画の完成イメージという本質は共通です。打ち合わせで聞き慣れない呼び方が出てきたら、「それはデザインの完成見本のことですか」と確認すれば、認識のずれを防げます。

モックアップ段階で決まること

モックアップ段階では、配色・写真やイラストの選定・フォントの種類と大きさ・余白の取り方・ボタンなどUIパーツの質感が決まります。企業サイトであれば、ブランドイメージとの整合性がここで問われます。

先ほどの食品メーカーの例の続きとして、モックアップ確認の場で、「商品写真はもっとシズル感のあるカットに差し替えたい」「コーポレートカラーの赤が強すぎるので彩度を落としたい」といったフィードバックが交わされるとします。これらはまさにモック段階でこそ出すべき指摘です。

逆にこの段階で「やはり導入事例をトップに追加したい」という構成レベルの変更を出すと、確定済みのワイヤーフレームまで遡る手戻りになります。モックアップはあくまで“見た目”を審査する場である、と覚えておくことが、スムーズなWeb制作の鍵になります。

プロトタイプとは｜動きと画面遷移を検証する試作品

プロトタイプとは、モックアップに「動き」を加え、実際のWebサイトのように操作できるようにした試作品のことです。プロトタイプは、実装前の最終検証を担う成果物であり、ボタンをタップすればページが切り替わり、メニューを押せばナビゲーションが開くなど、ユーザーが体験する操作の流れを確かめられます。

この工程が重要なのは、静止画では絶対に分からない問題が、動かすと一瞬で見つかるからです。1枚ずつのデザインは美しくても、実際に操作してみると「購入完了までのステップが多すぎる」「今どのページにいるのか分からなくなる」といった体験上の欠陥が潜んでいることは珍しくありません。実装後にこうした問題が見つかれば大規模な改修になりますが、プロトタイプ段階なら画面のつなぎ替えだけで修正できます。

プロトタイプとはクリックできる試作モデル

プロトタイプの見た目はモックアップとほぼ同じです。違いはただ一点、画面同士がリンクでつながっていて、操作に反応することです。Figmaなどのデザインツールにはプロトタイプ作成機能が標準搭載されており、デザインデータの画面同士を矢印でつなぐだけで、ブラウザやスマートフォン上で本物のサイトのように動かせます。

発注者にとってのメリットは、専門知識がなくても完成後の体験を疑似的に試せることです。URLを共有してもらえば、自分のスマートフォンで実際にタップしながら「お客様はこう操作するのか」を体感できます。

プロトタイプで検証できること

プロトタイプで検証すべきは、画面遷移の流れ・導線の分かりやすさ・操作時の迷いの有無です。たとえば「トップページから問い合わせ完了まで何回のタップが必要か」「スマートフォンでメニューは開きやすいか」「戻りたいときに戻れるか」といった観点です。

たとえば、その食品メーカーの担当者がECサイトのプロトタイプを操作し、「カートに入れた後、買い物を続ける方法が分かりにくい」と気づいたとします。この指摘が実装前に出れば、遷移の設計を直すだけで済みます。「動かして初めて気づくこと」を実装前に洗い出すのがプロトタイプの使命です。

すべての案件でプロトタイプを作るわけではない

注意点として、プロトタイプは必ず作られる工程ではありません。ページ数の少ないコーポレートサイトや、一般的な構成のサイトでは、モックアップ承認後にそのまま実装へ進むことも多くあります。

一方、ECサイトや会員制サービス、Webアプリのように操作の流れが成果を左右する案件では、プロトタイプ検証の価値が非常に大きくなります。見積もりや工程表にプロトタイプが含まれているかを最初に確認し、含まれていない場合は「操作性の検証はどの段階で行いますか」とWeb制作会社に聞いておくと安心です。

ワイヤーフレームとモックアップの違い・プロトタイプとの違いを制作フローの順序で整理

ここまでの3つの用語は、個別に暗記するより制作フローの順序で捉えると一度で理解できます。ポイントはシンプルで、Web制作は「情報→見た目→動き」の順に決めていくということです。ワイヤーフレームで情報と配置を固め、モックアップで見た目を与え、プロトタイプで動きを検証する。この積み上げの順序こそが、3用語の違いそのものです。

次の図は、同じ1枚のページがワイヤーフレーム→モックアップ→プロトタイプへと進化していく様子を並べたものです。左から右へ、線と箱だけの骨組みに色と写真が入り、最後にタップ操作と画面遷移が加わる流れが見て取れます。

こうして並べると、3つは別物ではなく同じページの成長段階だと分かります。ワイヤーフレームとモックアップの違いは「見た目の情報が乗っているかどうか」、モックアップとプロトタイプの違いは「操作できるかどうか」。たったこれだけの整理で、打ち合わせ中の混乱はほぼ解消されるはずです。

制作フロー全体の中での位置づけ

3つの成果物は、Web制作の全体工程の中では企画と実装のあいだに位置します。一般的な流れは、企画・要件定義→サイト設計（サイトマップ作成）→ワイヤーフレーム→モックアップ（デザインカンプ）→プロトタイプ→実装・公開という順序です。

下の工程図では、この流れの中で発注者の確認ポイントがどこにあるかを旗印で示しています。各旗の位置が、まさに本記事のテーマである「発注者が確認すべきタイミング」です。

重要なのは、各工程の承認が「その前の工程の確定」を前提にしていることです。モックアップはワイヤーフレームの承認内容を土台に作られ、プロトタイプはモックアップの承認内容を土台に作られます。そのため後の工程に進むほど、前の工程を覆す変更の影響範囲は大きくなっていきます。

「情報→見た目→動き」という積み上げの順序

この順序には合理的な理由があります。抽象度の高い決定から順に固めることで、修正の影響を最小化できるからです。情報の構成が変われば見た目も動きも作り直しになりますが、色を変えても情報の構成には影響しません。影響範囲の大きい決定ほど早い段階で、低コストなうちに確定させる。これはWeb制作に限らず、建築でも製品開発でも共通する原則です。

順序を飛ばすと手戻りが起こる理由

発注者として最も知っておきたいのが、指摘のタイミングを間違えると修正コストが跳ね上がるという事実です。ソフトウェア開発の世界では、不具合や仕様変更の修正コストは工程が進むほど数倍から数十倍に膨らむと言われてきました。Web制作でも同じで、ワイヤーフレーム段階なら数時間で済んだ構成変更が、実装後にはデザイン修正とコード修正を伴う大掛かりな作業になります。

次の図は、同じ「構成を変えたい」という指摘でも、出すタイミングによって手戻りの大きさがどれほど変わるかをイメージ化したものです。

図が示すとおり、早い段階での確認は「面倒な作業」ではなく「最大の節約」です。だからこそWeb制作会社は各工程で丁寧に承認を求めてくるのであり、発注者がそこで的確なフィードバックを返せるかどうかが、プロジェクト全体の品質とスケジュールを左右します。

発注者がワイヤーフレーム・モック・プロトタイプの各段階で確認すべきこと

では具体的に、各段階で何を確認し、何を承認すればよいのか。合言葉は、「ワイヤーでは構成を、モックでは見た目を、プロトタイプでは動きを」です。それぞれの段階には「いま確認すべきこと」と同時に、「まだ言わなくていいこと」があります。この切り分けを知っているだけで、確認作業の質は劇的に向上します。

次の図に、3つの段階ごとの確認すべきこと／まだ言わなくていいことを整理しました。打ち合わせ前に眺めるチェックシートとして活用してください。

ワイヤーフレーム段階のチェック観点

ワイヤーフレーム段階で確認すべきは、掲載すべき情報がすべて入っているか・優先順位は正しいか・お問い合わせなどの導線が明確かの3点です。特に「自社の顧客が最初に知りたい情報がページ上部にあるか」は、発注者にしか判断できない重要な観点です。

また、このページに載せる予定だった情報が抜けていないかの確認も欠かせません。営業資料やパンフレットを横に置き、必要な情報の漏れをチェックしましょう。逆に、この段階で色・写真・フォントの話は出さなくて構いません。「グレーで地味」なのは仕様であり、見た目の議論は次の工程で存分にできます。

モックアップ段階のチェック観点

モックアップ（デザインカンプ）段階では、ブランドイメージとの整合性・写真や色の印象・文字の読みやすさを確認します。「自社らしさが表現されているか」「ターゲット顧客に与えたい印象と合っているか」という判断は、まさに発注者の出番です。

一方で、レイアウトや掲載情報の変更要望はこの段階では原則出さないのがマナーです。構成はワイヤーフレームで承認済みだからです。どうしても構成変更が必要になった場合は、「手戻りが発生する変更である」と認識したうえで、影響範囲と追加費用・納期をWeb制作会社に確認しながら判断しましょう。また、ボタンを押して動かないことへの指摘も不要です。前述のとおりモックは静止画であり、動きの確認は次の段階で行います。

プロトタイプ段階のチェック観点

プロトタイプ段階では、実際に操作して「迷わず目的を達成できるか」を確認します。おすすめは、社内のプロジェクト非関与者に触ってもらうことです。制作過程を知らない人が迷わず問い合わせや購入まで到達できれば、実際のユーザーにとっても使いやすい可能性が高いといえます。

ここで確認すべきは遷移の流れ・導線の分かりやすさ・スマートフォンでの操作感であり、色やレイアウトへの指摘は原則卒業です。たとえば、その食品メーカーの担当者がプロトタイプ確認の場で「やはりトップの写真を変えたい」と言い出したとすると、承認済みのモックアップに遡る手戻りが発生してしまいます。各段階の承認は「その論点はもう蒸し返さない」という約束でもあるのです。

「まだ言わなくていいこと」を知ると手戻りが減る

ここまでの整理から分かるとおり、良い発注者の条件は「たくさん指摘すること」ではなく、「正しいタイミングで、その段階の論点に絞って指摘すること」です。気づいたことをメモしておき、該当する工程の確認時に出す。それだけで手戻りは大幅に減り、Web制作会社との信頼関係も深まります。確認を任せきりにせず、しかし口を出しすぎもしない。このバランス感覚こそ、発注者に求められる最大のスキルだといえるでしょう。

ワイヤーフレームやプロトタイプ作成に使われるツールとWeb制作会社との連携のコツ

最後に、ワイヤーフレームやモックアップ、プロトタイプがどんなツールで作られ、発注者はどう関わればよいかを押さえておきましょう。発注者がツールを操作できる必要はありませんが、ツールの名前と共有の仕組みを知っておくと、確認作業が格段にスムーズになります。

現在の標準ツールはFigma

現在のUIデザインの現場で事実上の標準となっているのはFigma（フィグマ）です。Figmaはブラウザさえあれば使えるデザインツールで、ワイヤーフレームからモックアップ、プロトタイプまでを1つのデータで一気通貫して作成できます。共有リンクを開くだけで最新のデザインを閲覧でき、コメントも画面上に直接書き込めるため、発注者とWeb制作会社のやり取りが非常に効率的になりました。

なお、かつて広く使われていたAdobe XDは現在、開発が事実上終了した状態にあり、新規案件で採用されることはほとんどなくなっています。もし古い資料や記事でXD前提の説明を見かけても、これから始まる案件ではFigmaが使われると考えておけばまず間違いありません。このほか、ワイヤーフレーム段階では手描きスケッチやPowerPointが使われることもありますし、図解ツールを併用するWeb制作会社もあります。大切なのはツールの種類ではなく、どの段階の成果物なのかを把握することです。

発注者がツールを操作できなくても問題ない

「Figmaを使ったことがないので不安」という発注者の方は多いのですが、心配は不要です。確認に必要なのは共有されたリンクを開いて閲覧することだけで、デザインの編集権限も専門知識も要りません。閲覧だけならアカウントなしで見られる形で共有されることも多く、スマートフォンからプロトタイプを操作することもできます。

むしろ発注者にお願いしたいのは、フィードバックを具体的に伝える工夫です。「なんとなく違う」ではなく、「ターゲットの30〜40代女性には色が強すぎる印象」のように、誰にとって・何が・なぜを添えるだけで、Web制作会社は的確な修正案を出せます。デザインの正解を出すのはプロの仕事ですが、判断材料を提供できるのは発注者だけです。

承認の記録を残すことが信頼につながる

もう1つの実務的なコツは、各段階の承認を口頭で済ませず、記録に残すことです。「ワイヤーフレームは○月○日の内容で確定」とメールやチャットで明文化しておけば、後から「言った・言わない」のトラブルを防げます。

これは発注者を縛るためではなく、双方を守るための仕組みです。承認済みの内容が明確なら、追加の変更要望が出たときも「これは承認後の変更なので、影響範囲を見積もりましょう」と冷静に協議できます。ワイヤーフレーム・モックアップ・プロトタイプという中間成果物は、いわば発注者とWeb制作会社が段階的に合意を積み上げていくための共通言語です。この共通言語を理解した発注者は、Web制作会社にとって最高のパートナーになれるはずです。

まとめ

ワイヤーフレームは情報と配置の設計図、モックアップ（デザインカンプ）は見た目の完成見本、プロトタイプは動きを検証する試作品。3つは別物ではなく、同じページが「情報→見た目→動き」の順に成長していく段階です。そして発注者の役割は、各段階の論点に絞って確認し、承認を積み上げていくことでした。

次の打ち合わせからは、ぜひ「いまはどの段階の確認か」を意識してみてください。それだけで手戻りは減り、サイトの品質は確実に上がります。これからWebサイトの新規制作やリニューアルを検討されている方、現在進行中のプロジェクトの確認の進め方に不安がある方は、設計段階から発注者に伴走するクライマークスへ、まずはお気軽にご相談ください。