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

「モックアップを作ってほしいと言われたけれど、ワイヤーフレームやデザインカンプと何が違うの？」。Web制作の打ち合わせで、これらの言葉が混ざって使われ、混乱した経験はないでしょうか。

この記事では、モックアップの意味から、よく似た2つの言葉との違い、そして実際の作り方までを順を追って解説します。制作に関わる方が、共通言語として理解できる内容を目指しました。

モックアップとは？まず意味を整理する

モックアップという言葉は、もともと「実物大の模型」を意味します。Web制作の文脈では少し意味が絞られるので、まずは定義を確認しましょう。

モックアップ＝完成イメージの見本

Web制作におけるモックアップとは、サイトやアプリの完成形を、見た目だけ作り込んだ「静止画の見本」です。配色、写真、ロゴ、文章までほぼ本番どおりに再現します。

ただし、ボタンを押しても動かない「見た目専用」の段階。実際の動作確認は、後のプロトタイプや開発工程で行います。

なぜモックアップを作るのか

最大の目的は「完成イメージの共有」です。言葉だけでは、発注者と制作者で頭に描く完成形がずれます。見本を見ながら話せば、その溝を埋められます。

公開後に「イメージと違った」となると、大きな作り直しが発生します。モックアップは、その手戻りを未然に防ぐための工程です。

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

モックアップを理解するうえで欠かせないのが、よく似た2つの言葉との違いです。ここをそろえると、制作の会話がスムーズになります。

ワイヤーフレームとは（骨組み・設計図）

ワイヤーフレームは、ページのどこに何を置くかを示す「レイアウトの設計図」です。色や写真は使わず、線と四角と文字だけで構成を表します。

目的は「情報の配置と優先順位を決めること」。見た目の議論に入る前に、骨組みを固める段階です。作り方はワイヤーフレームの作り方で詳しく解説しています。

デザインカンプとは（完成したデザイン）

デザインカンプは、ワイヤーフレームに配色・写真・装飾を加えて仕上げた「完成版のデザイン」です。カンプは「comprehensive layout」の略とされます。

見た目としてはモックアップとほぼ同じ完成度。実務では両者を区別せず使うことも多くあります。

3つの違いを一言でまとめると

ざっくり言えば、ワイヤーフレームは「骨組み」、デザインカンプは「完成デザインそのもの」、モックアップは「完成イメージの見本」。後ろにいくほど作り込みの度合いが高まります。

種類	役割	作り込み	色・写真	動作
ワイヤーフレーム	レイアウトの設計図	低（骨組み）	なし	なし
デザインカンプ	完成したデザイン	高	あり	なし
モックアップ	完成イメージの見本	高	あり	なし
プロトタイプ	動作する試作品	高	あり	あり

プロトタイプも合わせて並べると整理しやすくなります。プロトタイプは唯一「実際に触って動く」段階で、操作感の確認に使います。

制作工程の中での位置づけ

これらは別物というより、制作の流れの中で順に作られていくものです。全体の中での位置を押さえましょう。

一般的な制作の流れ

多くの場合、「要件整理→ワイヤーフレーム→デザインカンプ／モックアップ→プロトタイプ→開発」という順で進みます。前段の合意があってこそ、次の工程に進めます。

骨組みが固まらないまま装飾を始めると、後で大幅な作り直しになりがち。順番を守ることが、結果的に近道になります。

精度を段階的に上げていく考え方

はじめから完璧な完成形を作ろうとせず、ラフ→精緻へと段階的に精度を上げるのが定石です。早い段階ほど修正が軽く、後工程ほど修正は重くなります。

モックアップを作るメリット

手間をかけてモックアップを作る理由は明確です。主なメリットを3つに整理します。

完成後の「思っていたのと違う」を防ぐ

言葉のイメージは人によってずれます。見本を見ながら合意すれば、公開後の落胆や大きな修正を避けられます。これが最大の効果です。

関係者の合意形成が速くなる

社内の決裁者やチームに、完成形を視覚的に見せられます。「百聞は一見にしかず」で、文章での説明よりはるかに早く合意が取れます。

開発・コーディングがスムーズになる

完成見本があれば、実装する側も迷いません。色や余白、文字サイズの基準が明確になり、手戻りの少ない開発につながります。

モックアップの作り方（5ステップ）

ここからは実際の作り方です。専門ツールを使う前提で、基本の流れを5つのステップに分けて解説します。

ステップ1：目的とターゲットを確認する

「誰に、何をしてほしいサイトか」をまず決めます。ここが曖昧だと、見た目の判断もすべてぶれてしまいます。デザインの前に必ず固めましょう。

ステップ2：ワイヤーフレームで骨組みを作る

いきなり色をつけず、まずレイアウトの設計図を作ります。どこに何を置くか、情報の優先順位を決める工程です。ここでの合意が後を楽にします。

ステップ3：配色・フォント・素材を決める

ブランドに合った色、読みやすいフォント、使用する写真やロゴを選びます。トーンを先に決めておくと、全体に統一感が出ます。

ステップ4：ツールで作り込む

骨組みに色・写真・文章を載せ、完成形に近づけます。実際に使う文章を入れると、仮テキストでは気づけない問題が見えてきます。

ステップ5：確認・修正を繰り返す

関係者に共有し、フィードバックをもらって調整します。スマホ表示も必ず確認しましょう。合意が取れたら、次の開発工程へ進みます。

モックアップ作成に使える主なツール

モックアップは専用ツールで作るのが一般的です。代表的なものと特徴を紹介します。なお機能・料金は変動するため、導入前に公式サイトでご確認ください。

Figma（フィグマ）

ブラウザで動き、複数人で同時編集できるのが強みです。ワイヤーフレームからモックアップ、プロトタイプまで一貫して作れ、現在の定番といえる存在です。

Adobe XD・Photoshop・Illustrator

Adobe製品でも作成できます。写真加工に強いPhotoshop、図版に強いIllustratorなど、目的に応じて使い分けられます。既存のAdobe環境がある場合に向いています。

Canva（キャンバ）

デザイン初心者でも扱いやすく、テンプレートが豊富です。本格的なWeb制作よりは、ラフな完成イメージの共有に向いています。

ツール	特徴	向いている人
Figma	共同編集・一貫して作れる定番	チーム制作・Web制作全般
Adobe XD / PS / Ai	Adobe連携・加工に強い	既にAdobeを使う人
Canva	テンプレ豊富で手軽	初心者・ラフ共有

ツールはあくまで手段です。大切なのは、目的に合った完成イメージを関係者と共有できること。高機能なツールを使うこと自体が目的化しないよう注意しましょう。今あるスキルや環境で、使い慣れたもので構いません。まずは一つを使いこなすことから始めるのがおすすめです。

モックアップ作成でよくある失敗

せっかく作るなら、効果を最大化したいもの。現場で起きがちな失敗と回避策を押さえておきましょう。

骨組みを飛ばして装飾から入る

ワイヤーフレームを省くと、レイアウトの議論と見た目の議論が混ざり、収拾がつかなくなります。順番を守ることが失敗回避の基本です。

細部を作り込みすぎて時間を浪費する

初期段階で1ピクセル単位にこだわると、方向性が変わったときに大きく無駄が出ます。段階に応じた作り込みを心がけましょう。

スマホ表示を後回しにする

PCだけで作り込み、スマホ確認を最後にすると、崩れが大量に見つかります。アクセスの多くはスマホです。早い段階から両方を意識しましょう。

モックアップとUI/UXの関係

モックアップは、UI/UXの考え方を「形」にする工程でもあります。両者は密接につながっています。

UI/UX設計をモックアップで具現化する

「ユーザーがどう動くか」を考えたUX設計、「どんな見た目・操作にするか」を考えたUI設計。それを目に見える形にしたものがモックアップです。

つまりモックアップの良し悪しは、その背後にあるUI/UXの設計に左右されます。見た目だけ整えても、設計が弱ければ使いにくいサイトになります。

見た目の前に「体験」を考える

モックアップ作成の前に、ユーザーの目的と行動を整理しておくことが重要です。UI/UXの基本はUIとUXの違いで解説しているので、あわせて読むと理解が深まります。

プロトタイプとモックアップはどう使い分ける

モックアップと並んでよく登場するのが「プロトタイプ」です。両者の違いと使い分けを理解すると、制作の解像度が上がります。

プロトタイプは「動く試作品」

プロトタイプは、ボタンを押すと画面が切り替わるなど、実際の操作を再現した試作品です。モックアップが「静止画」なのに対し、プロトタイプは「動き」を確認できます。

たとえば「申込み完了までの流れがスムーズか」を試すには、静止画では足りません。動かして初めて分かる使い勝手があります。

どちらを作るかは目的で決まる

見た目の合意を取りたいだけならモックアップで十分です。操作の流れや使い勝手まで検証したいなら、プロトタイプまで作る価値があります。

規模の小さいサイトでは、モックアップで合意して開発に進むことも多いもの。目的に応じて、どこまで作るかを見極めましょう。

確認したいこと	適した成果物
レイアウト・情報の配置	ワイヤーフレーム
見た目・トーン・完成イメージ	モックアップ／デザインカンプ
操作の流れ・使い勝手	プロトタイプ

このように、確認したいことから逆算して成果物を選ぶと、無駄なく合意を進められます。

モックアップを依頼・確認するときのコツ

制作会社にモックアップを依頼する立場、あるいは社内で確認する立場のために、押さえておきたい実務のコツを紹介します。

「好き嫌い」ではなく「目的」で見る

モックアップを見ると、つい「色が好み」「なんとなく違う」と感想を言いたくなります。しかし大切なのは、目的を達成できる構成かどうかです。

「この配置で、来た人は問い合わせまでたどり着けるか」。この視点でフィードバックすると、議論が建設的になります。

フィードバックは具体的に伝える

「もっと良くして」では制作側も動けません。「この見出しをもっと目立たせたい」のように、具体的に伝えると修正がスムーズです。

スマホ版も必ず確認する

PC版だけ見て承認すると、スマホで崩れていることに後から気づきます。アクセスの多くはスマホです。両方の見本を必ず確認しましょう。

モックアップ作成のスキルを身につけるには

自分でモックアップを作れるようになりたい方向けに、学び方の道筋を簡単に紹介します。難しく考えず、小さく始めるのがコツです。

まずは1つのツールに慣れる

あれこれ手を出さず、Figmaなど一つのツールをまず使い込みましょう。基本操作に慣れれば、他のツールにも応用が利きます。

好きなサイトを「真似て作る」練習

ゼロから考えるより、見やすいと感じたサイトを真似て作るのが上達の近道です。なぜ見やすいのかを観察する目も養えます。

デザインの基本ルールを押さえる

余白の取り方や要素のそろえ方には、基本となる原則があります。これを知るだけで、素人っぽさが一気に減ります。基礎は別記事で学ぶのもおすすめです。

制作工程ごとの成果物と確認ポイントの一覧

制作の各段階で何を作り、何を確認すべきかを整理しておくと、進行がスムーズになります。全体像を一覧で押さえましょう。

要件整理の段階

サイトの目的・ターゲット・必要なページを決めます。成果物は要件をまとめた資料です。ここでの認識合わせが、後工程すべての土台になります。

「何のために作るか」が曖昧なまま進むと、デザイン段階で議論が空中分解します。最初に時間をかける価値がある工程です。

構成・設計の段階

サイト全体のページ構成（サイトマップ）と、各ページのワイヤーフレームを作ります。情報の配置と優先順位を、見た目の前に固める段階です。

デザインの段階

ワイヤーフレームに色・写真・文章を載せ、モックアップ／デザインカンプを作ります。完成イメージを関係者で共有し、合意を取る重要な工程です。

開発・公開の段階

承認されたデザインをもとに、実際に動くサイトへと作り込みます。公開前には、表示崩れや動作、スマホ表示を入念に確認します。

工程	主な成果物	確認ポイント
要件整理	要件資料	目的・ターゲットが明確か
構成・設計	サイトマップ・ワイヤーフレーム	情報の配置と優先順位
デザイン	モックアップ・デザインカンプ	完成イメージ・トーンの合意
開発・公開	実際のWebサイト	動作・表示崩れ・スマホ対応

各工程で合意を積み重ねることで、最終的な手戻りを最小限に抑えられます。モックアップは、その合意形成の山場に位置づけられます。

モックアップを活かして公開後も改善する

モックアップは公開して終わりではなく、その後の改善にも役立ちます。作った資産を無駄にしない活用法を紹介します。

変更を試す「たたき台」になる

公開後に改善案を検討するとき、いきなり本番を変えるのはリスクがあります。モックアップ上で変更案を試せば、安全に方向性を比べられます。

関係者への説明資料になる

「ここをこう変えたい」という提案を、モックアップで見せれば一目で伝わります。文章だけの説明より、合意がはるかに速くなります。

制作の意図を記録として残せる

なぜこのデザインにしたのか、という意図を残しておくと、後から担当が変わっても判断がぶれません。モックアップは設計思想の記録でもあります。

モックアップという言葉が混乱を生む理由

そもそも、なぜモックアップ・ワイヤーフレーム・デザインカンプは混同されるのでしょうか。理由を知ると、現場での会話が整理されます。

業界や会社で定義が微妙に違う

これらの言葉には、誰もが従う厳密な公式定義があるわけではありません。会社や人によって、指す範囲が少しずつ異なります。それが混乱の主因です。

だからこそ、言葉の正しさを争うより、「あなたの言うモックアップは、どこまで作り込んだものですか」と確認するほうが実用的です。

見た目が似ているものがある

デザインカンプとモックアップは、見た目の完成度がほぼ同じです。並べても区別がつきにくいため、同義で使われやすいのです。

一方ワイヤーフレームは骨組みなので、見た目で明確に区別できます。混同が起きるのは主に完成度の高い成果物どうしです。

大切なのは「目的の共有」

言葉の定義より、「今この段階で何を確認したいのか」を共有することが本質です。骨組みの合意なのか、見た目の合意なのか、動作の合意なのか。そこがそろえば呼び名は問題になりません。

良いモックアップに共通する条件

同じモックアップでも、合意形成に役立つものとそうでないものがあります。良い見本に共通する条件を整理しました。

目的の行動が一目で分かる

「このサイトで何をしてほしいか」が、見本を見ただけで伝わること。問い合わせや購入への導線が明確なモックアップは、議論を前に進めます。

本番に近い内容で作られている

ダミー文字や仮画像だらけだと、完成イメージが正しく共有できません。本番に近い文章・写真で作られた見本ほど、信頼できる判断材料になります。

スマホ版もそろっている

PC版だけのモックアップでは、半分しか確認できません。スマホ版もセットで用意されていることが、良い見本の条件です。

観点	良いモックアップ	不十分なモックアップ
目的	してほしい行動が明確	何のページか伝わらない
内容	本番に近い文章・写真	ダミー文字ばかり
対応	PC・スマホ両方あり	PC版のみ

見本を受け取ったときは、この観点で点検しましょう。良いモックアップは、その後の制作全体の質を底上げします。

モックアップ作成の費用と期間の考え方

モックアップにかかる費用や期間は、規模や作り込みの度合いで大きく変わります。ここでは考え方の目安を示します。なお実際の金額は条件で変動するため、見積もりは必ず個別に確認してください。

ページ数と作り込みで変わる

作るページ数が多いほど、また作り込みが精緻なほど、費用も期間も増えます。トップページだけの見本と、全ページ分の見本ではまったく違います。

まずは要となるページに絞って作り、合意できたら横展開する、という進め方も費用を抑えるうえで有効です。

「安さ」だけで選ぶと手戻りで高くつく

工程を省いた安価な制作は、後の作り直しで結局高くつくことがあります。モックアップでの合意は、その手戻りを防ぐための投資だと捉えましょう。

モックアップ作成でつまずきやすいポイントと対処

実際に手を動かすと、初心者が必ずといっていいほどつまずく箇所があります。あらかじめ知っておけば、慌てずに対処できます。

レイアウトの「そろえ方」が分からない

要素の位置がバラバラだと、素人っぽく見えます。要素の端をそろえる、間隔を統一する、といった基本ルールを守るだけで、見違えるほど整います。

感覚で並べるのではなく、見えない線にそろえる意識を持つこと。これがプロらしい仕上がりへの近道です。

色を使いすぎてまとまらない

あれこれ色を足すと、ごちゃごちゃして主役が埋もれます。基本の色を2〜3色に絞り、強調したい部分だけ目立つ色を使うと、ぐっと洗練されます。

文字のサイズや種類がバラバラ

見出し・本文・補足で文字の大きさを段階的に分け、種類は絞ります。文字まわりが整うだけで、全体の印象は大きく変わります。

つまずき	対処のコツ
要素がそろわない	端や間隔を統一し、見えない線にそろえる
色が多すぎる	基本2〜3色に絞り、強調色を限定する
文字がばらつく	サイズを段階化し、種類を絞る

これらは「デザインの基本原則」と呼ばれる考え方に基づきます。原則を知れば、なぜそうするのかが理解でき、応用も利くようになります。

モックアップから開発へ引き継ぐときの注意点

モックアップで合意ができたら、いよいよ開発工程へ。スムーズに引き継ぐための注意点を押さえておきましょう。

余白や色の「数値」を明確にする

「なんとなくこのくらい」では、実装した結果がずれます。余白の大きさや色のコードなど、数値で指定できる部分は明確に伝えましょう。

FigmaなどのツールはこうしたUI指示を共有しやすく、開発側との認識のずれを減らせます。ツールの利点を活かしましょう。

動きのある部分の挙動を補足する

モックアップは静止画なので、ボタンを押したときの動きやアニメーションは伝わりません。動きが必要な箇所は、言葉や別資料で補足します。

例外パターンも想定しておく

入力エラー時の表示や、データが少ないときの見え方など、理想形だけでなく例外も考えておくと、開発後の「想定外」を減らせます。

これからのモックアップ作成で意識したいこと

ツールや作り方は進化していますが、本質は変わりません。これから取り組む方に意識してほしい視点を最後にまとめます。

ツールに振り回されない

新しいツールや機能は次々登場しますが、目的は「完成イメージを共有すること」です。ツールはあくまで手段。本質を見失わないようにしましょう。

「ユーザーを想像する力」を磨く

どんなに高機能なツールを使っても、ユーザーを想像できなければ良い見本は作れません。技術より前に、相手を思いやる視点を大切にしましょう。

モックアップ作成のチェックリスト総まとめ

ここまでの内容を、実際に作る・確認するときに使えるチェックリストとして総まとめします。手元に置いて活用してください。

作り始める前の確認

目的とターゲットが定まっているか、必要なページが洗い出せているか。ここが固まっていないと、作っても合意に至りません。着手前に必ず確認しましょう。

作っている途中の確認

骨組み（ワイヤーフレーム）の合意は取れているか、本番に近い内容で作っているか、配色や文字のルールは統一されているか。途中で立ち止まって点検します。

完成後・引き渡し前の確認

目的の行動が一目で伝わるか、PC・スマホ両方を用意したか、関係者の合意は取れたか。ここまで確認できれば、安心して次工程へ進めます。

このチェックリストを満たせば、合意形成に役立つ質の高いモックアップになります。一つずつ確認しながら進めましょう。

迷ったら「目的」に立ち返る

作り込みに夢中になると、目的を見失いがちです。「このサイトで、誰に、何をしてほしいのか」。迷ったらいつもここに立ち返れば、判断がぶれません。

モックアップ作成の前後でそろえておきたい準備

モックアップ作成をスムーズに進めるには、前後の準備も欠かせません。作業そのもの以外で整えておきたい点をまとめます。

使う素材を先に集めておく

ロゴ・写真・掲載文章などは、作り始める前にできる範囲でそろえておきましょう。素材が後から差し替わると、レイアウトが崩れて作り直しになりがちです。

特に文章は、量によって見た目が大きく変わります。本番に近いものを早めに用意しておくと、手戻りを減らせます。

参考イメージを共有しておく

「こういう雰囲気にしたい」という参考サイトをいくつか共有しておくと、方向性のずれを防げます。言葉だけより、実例を見せ合うほうが確実です。

確認・決裁の流れを決めておく

誰が確認し、誰が最終決定するのかを先に決めておきます。完成後に決裁者から大きな変更が入ると、それまでの合意がやり直しになってしまいます。

こうした準備が整っていると、モックアップ作成は格段にスムーズになります。作業前のひと手間が、全体の質と速度を左右します。

まとめ：3つの違いと作り方の要点

最後に要点を整理します。ワイヤーフレームは骨組み、デザインカンプは完成デザイン、モックアップは完成イメージの見本です。後ろほど作り込みが高まります。

モックアップを作る最大の意義は、関係者の認識をそろえ、公開後の手戻りを防ぐこと。見た目を決める作業以上に、合意形成の工程です。

作り方は、目的を固め、骨組みから段階的に精度を上げるのが定石。本番に近い内容で作り、PC・スマホ両方を確認すれば、質の高い見本になります。

よくある質問

モックアップとデザインカンプは同じものですか？

厳密には用途が異なりますが、見た目の完成度はほぼ同じで、現場では同義で使うことも多いです。打ち合わせでは「どこまで作り込むか」を具体的に確認するのが確実です。

ワイヤーフレームを飛ばしてモックアップから作ってもいいですか？

おすすめしません。骨組みが固まらないまま装飾を始めると、後で大きな作り直しになりがちです。急ぐ場合ほど、順番を守るほうが結果的に速くなります。

モックアップは動きますか？

基本的に動きません。見た目だけの静止画の見本です。ボタンを押すと画面が変わるような「動く試作品」は、プロトタイプと呼ばれ、別の工程で作ります。

初心者でもモックアップは作れますか？

作れます。CanvaやFigmaなど扱いやすいツールがあります。ただし、完成度の高いものや動作を伴うものは、慣れと知識が必要です。まずはラフな共有から始めるとよいでしょう。

無料でモックアップを作れるツールはありますか？

Figmaなど無料プランから始められるツールがあります。ただし機能や利用条件は変動するため、最新情報は各公式サイトでご確認ください。

モックアップの確認では何を見ればいいですか？

目的の行動（問い合わせ・購入など）に迷わずたどり着けるか、スマホで崩れないか、ブランドのトーンに合っているかを確認しましょう。見た目の好みだけで判断しないのがコツです。

制作会社に依頼する場合もモックアップは作りますか？

多くの場合作ります。完成イメージを共有し、公開後のズレを防ぐためです。提示されたモックアップは、遠慮せず気になる点をフィードバックしましょう。それが良い成果につながります。

モックアップは紙に手描きでもいいですか？

初期のラフ段階なら手描きでも十分役立ちます。素早くアイデアを共有できる利点があります。ただし関係者との正式な合意には、ツールで作った見やすい見本が向いています。

モックアップとデザインカンプ、どちらを依頼すればいい？

呼び名にこだわらず、「完成イメージが分かる見本がほしい」と伝えれば問題ありません。制作側がその意図をくみ取り、適切な成果物を用意してくれます。

修正は何回まで頼めますか？

契約や会社により異なります。回数制限がある場合も多いので、依頼前に確認しましょう。要点を整理してまとめてフィードバックすると、限られた回数を有効に使えます。

モックアップ作成にAIは使えますか？

近年はAIで下案を作る方法も登場しています。たたき台づくりやアイデア出しには便利ですが、目的やユーザーに合わせた最終判断は人が行う必要があります。AIが出した案をそのまま使うのではなく、なぜその形が良いのかを自分の頭で検証することが大切です。あくまで作業を速める補助として活用しましょう。