モックアップとは？デザインカンプ・ワイヤーフレーム・プロトタイプとの違いをわかりやすく解説【2026年最新】

私たちが普段当たり前のように使っているWEBサービスやアプリサービスですが、それらの開発はいくつかの工程に分けて進行しています。「ヒアリング工程」「要件定義工程」「設計工程」「開発工程」「テストおよびリリース工程」です。

その一連の工程の中で、画面デザインに関する作業は主に設計工程で進行します。

実際にデザイナーとして業務をしていると当たり前のように耳にする「ワイヤーフレーム」や「デザインカンプ」「モックアップ」という言葉があります。それらはいずれも、デザイン制作おける成果物に該当しますが、それぞれ制作の段階や役割に違いがあります。

WEBサービスやアプリサービスのデザインがどのような流れで作り上げられていくのか、その様子を少しでも掴んでいただけたら嬉しく思います。

モックアップとは？

モックアップ（mock-up）とは、完成品の外観を再現した模型のことです。実際に触ったり操作したりすることはできませんが、見た目や質感を目で見て確認するために作られるサンプルを指します。

元々は工業製品や建築物などのプロダクトデザインの分野で使われてきた言葉で、内部の構造や機能は再現されていないものの、外側だけは完成品に近い状態に作り込まれている点が特徴です。「百聞は一見に如かず」と言うように、言葉や図面だけでは伝わりにくい完成イメージを、誰の目にも分かる形で共有するための手段として活用されています。

モックアップという考え方は、WEBサービスやアプリサービスの制作現場でも同じように使われています。

ワイヤーフレームで固めた画面構成をもとに、配色やフォント、画像などのビジュアル要素を加えて、実際の画面に近い完成イメージとして作り込んだものが、WEB制作におけるモックアップです。

動くボタンやページ遷移までは含まれない、あくまで「見た目の完成形」である点は、他分野のモックアップと共通しています。

それでも、実際の配色や文言、画像を当てはめた複数の画面を作り込むことで、デザインカンプの段階よりも一歩踏み込んで、導線設計やユーザーが迷わず目的の情報にたどり着けそうかを具体的にイメージしながら検討できるのがメリットです。実際にクリックして動作まで確認する検証は、次のプロトタイプの段階で行います。

一方で、複雑な階層構造を持たないWEBサイトデザインの現場では、場合によってはデザインカンプとモックアップがおおよそ同一の工程として扱われることも少なくありません。

例えば、LPなどシンプルなページ遷移のWEBサイトであれば、デザインカンプがほぼモックアップの役割を兼ねることができます（詳しくは後述します）。モックアップ工程は、ユーザーに対して提供する機能が豊富なWEBサービス・アプリサービス開発において、その重要性がより高まります。

関連記事：UI（ユーザーインターフェース）デザインの重要性。使いやすい画面設計の要点と事例について解説

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

WEB制作の現場では、モックアップと合わせて「ワイヤーフレーム」「デザインカンプ」「プロトタイプ」という言葉もよく使われます。いずれもデザイン工程の成果物ですが、確認する対象や作り込みの深さがそれぞれ異なります。まずは4つの違いを一覧で確認してみましょう。

	ワイヤーフレーム	デザインカンプ	モックアップ	プロトタイプ
主な目的	画面構成・情報設計の把握	デザインの完成見本を提示し、関係者間で最終ビジュアルの認識をすり合わせる	実際の画面に近い完成イメージを再現し、導線や情報設計を視覚的に確認する	クリックや画面遷移などの操作性を検証する
ビジュアルの作り込み	線と枠のみ（配色・画像なし）	配色・フォント・画像まで作り込んだ静止画	デザインカンプとほぼ同等（実データ・実画面ベース）	モックアップと同等
動き・画面遷移	なし	なし	基本的になし（見た目の完成形）	あり（簡易的な操作・画面遷移）
主な作成者	ディレクター、プロジェクトリーダー	デザイナー	デザイナー	デザイナー、UIエンジニア
主なツール	紙とペン、Figma、XD	Photoshop、Illustrator、Figma、XD	Figma、XD	Figma、XDのプロトタイプ機能

表からもわかる通り、デザインカンプとモックアップはビジュアル面での違いがほとんどなく、境界があいまいになりやすいポイントです。両者の違いと、モックアップとプロトタイプの境界線については、このあと詳しく解説します。

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

ワイヤー（線）フレーム（枠）という名が示す通り、WEBサービスやアプリサービスの完成イメージを、まずは簡易的に線と枠で把握する事が目的です。

画像やオブジェクト、テキストの配置を把握し、全体の構造を俯瞰します。ここではあくまで配置の把握のみに務め、具体的なグラフィックの作り込みはしません。

そのため、ワイヤーフレームを作成するときは、Figmaなどデザインツールではなく、パワーポイントやエクセルといった身近なオフィスソフトや紙とペンで書かれることも多いです。

図1：弊社HPモーダル表示のワイヤーフレーム

※視認性のため一部に色や仮画像を入れていますが、実際は線と枠のみで作成される場合も多くあります

ワイヤーフレームは、以降のデザインカンプ制作時に重要な役割を果たすことはもちろんですが、WEBサービスやアプリサービスのどの位置にどんな内容がどの程度の分量で配置されるのか、導線や画面遷移はどうなるかを開発プロジェクト内で共有するためにも使用されます。

そういう意味では、ワイヤーフレームはビジュアルを通して共通認識を醸成する仕様書としての役割も持っていると言えるでしょう。

デザインカンプとは何か

ワイヤーフレームによって、開発プロジェクト内でWEBサービス・アプリサービスの構造について共通認識を持つことに成功したら、次はデザインカンプの制作に入ります。

デザインカンプは、WEBサービスやアプリサービスのデザイン完成見本を指します。このデザインカンプの最も大きな役割は、開発プロジェクトの依頼主側と開発側のデザインの最終形の共通認識をグリップすることです。

図2：弊社HPモーダル表示のデザインカンプ

このデザインカンプについては、依頼主側に対して複数のデザイン案を提出することも少なくありません。

この段階で、プロジェクト関係者全体でしっかりとデザインイメージの共通認識を持つ事で「完成したWEBサービス・アプリサービスのイメージが違う」という事態を防止します。

プロトタイプとは

プロトタイプとは「試作品」を意味し、モックアップに実際の操作や画面遷移を加えたものです。FigmaやXDのプロトタイプ機能を使えば、作成済みのモックアップ画面同士をリンクさせ、クリックやスワイプで画面が切り替わる状態を簡易的に再現できます。

プロトタイプを使うことで、想定していた通りに情報へたどり着けるか、ボタンやメニューの位置が直感的にわかりやすいか、といったユーザビリティの観点での検証が可能になります。開発工程に入る前にこうした操作性の課題を洗い出しておくことで、後工程での手戻りを減らすことができます。

モックアップとプロトタイプの境界線

デザインカンプが「静止画としての完成見本」であるのに対し、モックアップはそれをベースに、実際の画面遷移や文言、画像を当てはめて作り込んだ、より実物に近い完成イメージです。ページごとの見た目がすべて確定した状態、と捉えるとイメージしやすいかもしれません。

ここまではモックアップも「見た目」の範囲にとどまりますが、次の工程であるプロトタイプでは、実際にボタンをクリックして画面が切り替わる、といった簡易的な操作までを再現します。「見た目が完成している」段階がモックアップ、「見た目に加えて動きも確認できる」段階がプロトタイプ、という理解が実務上はわかりやすい線引きです。

なお、複雑な階層構造を持たないWEBサイトの場合、モックアップの段階である程度画面遷移のイメージまで共有しておき、プロトタイプ工程を簡略化するケースもあります。案件の規模や関係者の人数に応じて、どこまで厳密に工程を分けるかを判断するとよいでしょう。

モックアップやデザインカンプが作られる工程

モックアップやデザインカンプ、ワイヤーフレームといった言葉は、WEBサービスやアプリサービスの開発プロジェクトの中でも、主にデザイン制作に関する工程で登場します。ここでは、開発プロジェクト全体の流れを簡単に押さえたうえで、デザイン工程がどのタイミングで、どのような役割を持って発生するのかを解説します。

WEBサービスやアプリサービスの開発は、大きく「ヒアリング」「要件定義」「設計」「開発」「テスト」「リリース」という工程で進みます。まず、開発を必要としている関係者に目的やゴールを綿密にヒアリングし、その内容をもとに要件定義工程で実装すべき機能を具体化します。

私たち株式会社GeNEEでは、この要件定義工程を「開発プロジェクトの背骨を作り上げる重要な工程」と位置づけており、UI/UXデザインの検討もこの段階から並行してスタートします。

関連記事：システム開発の要件定義とは？欠かせない要素と進め方を解説

要件定義で固めた内容をどう形にするかを検討するのが設計工程です。データ構造やデータベースの設計と並行して、この工程でいよいよ画面デザインの制作が本格的に始まります。モックアップやデザインカンプが作られるのは、まさにこの設計工程の中です。

設計工程を経て開発工程に入ると、これまでに固めた設計やデザインを実際のWEBサービス・アプリサービスとして実装していきます。実装が完了したら、開発目的を達成できているか、不具合はないかをテスト工程で確認し（テストの種類や進め方はこちらの記事で解説しています）、問題がなければリリースに進みます。リリース後もユーザーからのフィードバックをもとに、継続的な改善を行っていきます。

設計工程内の流れ（ワイヤーフレーム→デザインカンプ→モックアップ→プロトタイプ）

デザイン制作は、以下のような流れで進みます。

1. ワイヤーフレームを制作し、サービス全体の構造や導線を視覚的に把握する
2. ワイヤーフレームをチームメンバーと検討し、ブラッシュアップする
3. 完成したワイヤーフレームをベースに、デザインカンプを制作する
4. デザインカンプをチームメンバーと共同でブラッシュアップする（静的な完成イメージの確定）
5. 完成したデザインカンプをベースに、モックアップを制作する
6. モックアップをチームメンバーと共同でブラッシュアップする（実際の画面に近い完成イメージの確定）
7. モックアップをベースにプロトタイプを制作し、画面遷移や操作性を検証する

この「ワイヤーフレーム制作〜デザインカンプ制作〜モックアップ制作〜プロトタイプ制作」という一連の流れを通じて期待されるのは、開発プロジェクト内でサービスの完成イメージと使用感を、具体的な形で共有することです。

デザインカンプ・モックアップ制作のポイント

デザインカンプやモックアップについて、それぞれの概要について触れてきましたが、実際にそれらを制作する場合、デザイナーはどのような事を意識しているのでしょうか。

ワイヤーフレームについても含めて、それぞれの制作時のポイントを簡単にまとめてみます。

ワイヤーフレーム制作時のポイント

ワイヤーフレームは、これから作るWEBサービス・アプリサービスの構成を落とし込んだ設計図です。その作りは出来る限りシンプルな物とし、基本的には線と枠のみで構成されます。その際、着色やボタン形状などのグラフィック要素は基本的には反映されません。

このワイヤーフレームに求められるのは「何処にどのような要素をどの程度配置するかの設計図面」です。つまり、デザインというよりは企画構成の領域に該当します。その性質から、ワイヤーフレーム制作の担当者はデザイナーではなく、プロジェクトリーダーなどひとつ上流工程の人物である事が多く、この時点でデザイン的要素を盛り込んでしまうと、後工程を担当するデザイナーにとって余計な情報を受け取ることになってしまいます。

デザイン的な要素が盛り込まれた状態のワイヤーフレームをデザイナーに渡してしまった場合、デザイナー目線では「上流工程である程度デザインの縛りを入れてきたのかな」と認識してしまいます。

せっかくデザインのプロに仕事を渡すのですから、出来る限りデザイナーの自由な発想の余地を残して置いた方が、結果として研ぎ澄まされたデザインに辿り着くことが出来るでしょう。

ワイヤーフレームを作るツールは、紙とペンでも充分です。

もちろん、プロジェクトチーム内で回覧がしやすい共同編集機能を備えたツールを使用するのも、効率面ではお勧めとなります。

ちなみに、以前の記事で紹介したFigmaやXDも、ワイヤーフレーム段階からよく使われるツールのひとつです。

関連記事：FigmaとAdobe XDを比較。UI/UXデザインツールのお勧めについて解説。

デザインカンプ制作時のポイント

ワイヤーフレームが完成したら、デザインカンプの制作に入ります。

前工程で作成されたワイヤーフレームは設計図であり、ビジュアル的な仕様書であるという性質上その制作を担当するのはプロジェクトリーダーなどの上流工程を管轄する人物である事が多い（もちろん、クリエイティブディレクターなどのデザイン領域寄りの人物が担当することもあります）ですが、デザインカンプ制作からはデザイナーの出番になります。

デザイナーが受け取るワイヤーフレームは、あくまでも設計図です。

「ここに必ずこの要素を配置しなければならない」というガチガチに決まり切ったものというよりは、ユーザーにどんな情報をどのような順番で提示するかを掴むための概要図であるともいえます。

大切なのは、そのワイヤーフレームの配置や順序にはどのようなストーリーがあるのか、つまり「制作するWEBサービス・アプリサービスの目的は何か」を把握する事です。

もちろん、同時にしっかりとしたミーティングは必須です。

そのうえで、デザイナーの専門的な視点から目的を達成するためにより最適なレイアウトやサイズ、構成を提案する必要があります。

ワイヤーフレーム制作時に、できるだけデザイン的要素を盛り込まないように気を付ける必要がある理由は、この「デザイナーの専門的な視点」の邪魔になるためです。

ワイヤーフレームからそのサービスの目的を把握してデザインを作り込む際に、色や形の情報が盛り込まれていたら、デザイナーは「何か思惑があるのでは」と深読みをしてしまいます。

結果として、目的を達成するための最適なデザインに辿り着けない可能性も出てきます。

デザインカンプ制作工程で行われることは以下の通りです。

• ・ワイヤーフレームとミーティングから、サービスの目的地を把握する。
• ・サービスのターゲティングやペルソナ設定を把握する。
• ・競合サービスの調査と検証作業をする。
• ・目標とするUXをしっかりとグリップし、逆算してUIを検討する。
• ・複数案のデザインを提案し、プロジェクトチーム内の議論へ発展させる。
• ・上記デザイン案に関する議論を経て、ブラッシュアップする。

デザインカンプは、あくまでも画面のビジュアルを確認する静止画であるため、この工程だけを考えれば、制作ツールはPhotoshopやIllustratorなどでも対応可能です。

しかし、この後にモックアップ制作工程が控えている場合、スムーズに移行するためにFigmaやXDといったツールがお勧めになります。

モックアップ制作時のポイント

デザインカンプ工程を乗り越えたら、モックアップ制作工程に入ります。

モックアップとは「模型」という意味であることは述べましたが、WEBサービスやアプリサービスにおいて、この「模型」とは具体的に何を指すのでしょうか。その答えは、実際の文言や画像、配色を当てはめて作り込んだ、各画面の完成イメージです。

デザインカンプ段階では代表的な1〜2画面のみを作り込むケースも多いですが、モックアップでは遷移先を含めた複数の画面を一通り作り込み、サービス全体を通した見た目の完成形を確認します。

紙媒体や1枚物のLPのようなグラフィックデザイン媒体と、WEBサービスやアプリサービスの大きな違いは「階層があり、画面遷移が発生する」という点です。この階層構造を踏まえてすべての画面の見た目を確定させておくことで、次のプロトタイプ工程でスムーズに動作確認へ進むことができます。

モックアップ作成で押さえておきたい実践ポイント

モックアップの完成度を高めるためには、いくつか意識しておきたいポイントがあります。

重要なのが、ファーストビュー（画面を開いて最初に目に入る領域）の作り込みです。ユーザーがそのままページに留まってくれるかどうかを左右する、画面レイアウトの中でも特に重要なエリアのため、サービスの魅力やメリットが端的に伝わるデザインになっているかを重点的に確認しましょう。

次に、コンバージョンボタン（CTA）やナビゲーションなど、ユーザーの行動を促す導線がひと目で認識できるようになっているかも欠かせないチェックポイントです。問い合わせや購入といった具体的なアクションにつながる要素だからこそ、色・サイズ・配置を含めて丁寧に検討する必要があります。

また、モックアップは作って終わりではなく、必ず評価のプロセスを挟みましょう。公開前は、社内やクライアントを交えたレビューで、配色や文字サイズ、導線がユーザーにとってストレスのないものになっているかを確認します。必要に応じて外部の協力者を集めたユーザビリティテストを行うケースもあります。公開後は、Google Analyticsなどのアクセス解析やヒートマップツールを使い、実際のユーザー行動データをもとに継続的な改善を行っていくことが大切です。

【2026年最新】生成AIでデザインカンプを作る

ここまで、ワイヤーフレームからモックアップまでの制作プロセスを解説してきましたが、近年は生成AIを使ってデザインカンプのたたき台を作成する手法も広がっています。ここでは、弊社で実際に行っている「Figma Make」を使ったデザインカンプ制作の進め方を紹介します。

AIへの指示の出し方（プロンプト設計のコツ）

生成AIでデザインカンプを作る際にまず意識したいのは、1回の指示で完璧な仕上がりを狙わないことです。特にHTMLベースで生成する場合、細かい調整も含めるとおおよそ5回前後の修正を重ねて完成に近づけていくのが実態に近く、最初の生成は「たたき台」と捉えておくと進めやすくなります。

また、ページ内に複数のセクションがある場合は、一度にすべてを生成させようとせず、セクションごとに区切って生成・修正を進めるのがおすすめです。一度に広い範囲を触らせると、意図しない崩れが起きやすくなります。

最初のプロンプトには、以下のような要素を盛り込むと精度が上がります。

• 役割設定：AIに「一流のUI/UXデザイナー兼フロントエンドエンジニア」として振る舞ってもらう
• 参照データ：トーン＆マナーやレイアウトの参考にしたい画像を添付する
• デザイン要件：デザインテイスト、レスポンシブ対応する解像度（例：PC用1200px、スマホ用375px）、UIパーツの配置方法（HTMLの構造を崩さずCSSのグリッドやフレックスボックスで配置する、など）
• 出力形式：デザインカンプ画像はPNG、コードはブラウザでそのまま確認できるHTML/CSS統合形式で出力する、など欲しい成果物の形を明記する

実際のプロンプト例は以下の通りです。

生成後の修正では、div要素などHTML構造レベルの調整であれば、該当するエレメントを具体的に指定して指示を出すことで、意図しない箇所まで変わってしまう事故を防げます。例えば、次のような指示です。

Figmaでの微調整のポイント

生成AIが作ったHTML/CSSやPNG画像は、そのまま公開できる完成度になるとは限りません。特に画像の細かな調整（トリミングや差し替え、圧縮など）や、余白・フォントサイズなどの繊細なニュアンス調整は、Figma上で人の手を加えたほうが早く、かつ精度も高くなります。

役割分担のイメージとしては、HTML構造レベルの調整（余白やパーツ配置など）はAIへの指示で直せる範囲を見極めて任せ、画像そのものの微調整やピクセル単位の細かい仕上げはFigmaで対応する、という使い分けが効率的です。

生成AI活用の注意点・限界

ここで紹介した進め方は、あくまで一つの実践例であり、デザイナーによって最適な進め方は異なる可能性があります。ただ、共通して言えるのは、生成AIは「たたき台を素早く作る」ことには非常に強い一方、公開レベルの完成度に一発で到達するものではない、という点です。

複数のセクションを一度に生成させようとすると、意図しない崩れやレイアウトのズレが起こりやすくなります。セクションごとに区切って生成・確認を繰り返すほうが、結果的に手戻りが少なく済みます。

生成AIはデザインカンプ制作のスピードを大きく高めてくれるツールですが、最終的な品質を担保するのは、これまで解説してきたワイヤーフレームでの構造設計や、デザイナーによる目的理解・レイアウトの検討といった土台があってこそです。AIに任せきりにせず、人の目でしっかりチェックする工程は引き続き欠かせません。

デザインカンプとモックアップを区別しない場合もある

ワイヤーフレーム／デザインカンプ／モックアップを分けて解説をしてきましたが、実は開発プロジェクトによってはデザインカンプとモックアップを同一工程にまとめる場合もあります。

最初からモックアップ的な画面遷移を盛り込んでデザインカンプ制作をする場合がそれに該当します。

WEBサービスやアプリサービスのデザインツールとして、FigmaやXDが大きなシェアを占めるようになっている現在、ワイヤーフレーム移行のデザイン工程を、FigmaやXDで行うのは自然な流れであり、その場合画面遷移も含めたデザイン制作を行う事が可能です。

その場合、デザインのビジュアル面と画面遷移の部分は同時に進行する事となり、デザインカンプとモックアップの工程はひとつにまとめられます。

まとめ

ここまで、WEBサービス・アプリサービス開発におけるワイヤーフレーム・デザインカンプ・モックアップ・プロトタイプについて、それぞれの意味と制作のポイントを解説してきました。

ワイヤーフレームの立ち位置は比較的明確である一方、デザインカンプとモックアップ、モックアップとプロトタイプについては、サイトの規模や複雑さによって工程がまとめられることもあり、現場ごとに運用が流動的な部分もあります。近年は生成AIを使ってデザインカンプのたたき台を素早く作る手法も広がっていますが、こうしたツールを活用する場合も、ワイヤーフレームによる構造設計やデザイナーによる目的の理解といった基本の考え方は変わりません。

それでも、これらすべての工程に共通する明確な役割があります。それは「開発してみたら、想像していたものと違う」という、ゴール地点のズレを防ぐことです。「完成品はこうなりますよ」というイメージを、工程ごとの精度で視覚的に共有しておくことで、開発プロジェクトは迷わずに最後まで走り抜けることができます。

完成イメージを明確に想定・共有しながら、安心して開発プロジェクトを進められるWEBサービス・アプリサービスのご依頼、ご相談がございましたら、ぜひGeNEEまでご連絡ください。お客様のニーズや将来的な方針等を具体的にヒアリングした上で、最適なソリューションをご提案いたします。下記のバナーから、お気軽にお問い合わせください。

• 

  GeNEEの開発実績

  製造業、小売業、流通業、印刷・出版業など、業界別のベストプラクティスを保持しています。
  弊社の開発実績にご関心のある方はこちら

  一部公開可能な事例を掲載中

• 

  GeNEEの事業内容

  現在、6事業を展開しております。お客様の状況や目標に合わせて、FITするソリューションを提供いたします

  6事業の詳細はこちら

• 

  弊社主催セミナー

  最大月に1回のセミナーを開催しております。毎回30名以上の方にご出席いただいております。
  テック系のセミナーにご興味ある方はこちら

  月に1回テック系セミナー開催中

• 

  オウンドメディア

  GeNEE は技術に関する情報発信を積極的に行っています。 弊社のお客様だけでなく、業界全体に貢献のできる品質の高い情報提供を心掛けています。

  最先端テクノロジーの情報配信中

• 

  GeNEEの会社概要

  ビジネスxテクノロジーxデザインの三位一体で、お客様の課題を解決する独自のアプローチをご紹介

  創業から15年の実績

• 

  GeNEEの5つの特徴

  なぜGeNEEはコンサルティングやシステム開発のプロジェクト成功率が高いのか。
  競合他社との違いや優位性についてまとめております。

  GeNEEの5つの特徴

• 

  GeNEEへのお問い合わせ

  DX/ITコンサルティングのご依頼やシステム開発・スマホアプリ開発のご相談はこちらのフォームからお願いいたします

  お問い合わせフォームはこちら

• 

  GeNEEの資料をダウンロード

  ご希望の会社様にGeNEEのパンフレットをお送りしております。
  ITベンダーとの繋がりをお探しの方は是非お気軽にリクエストください。

  資料ダウンロードはこちら