UI/UXデザインのPoC・プロトタイプ・モックアップ開発について

アプリやWebプロダクトを新しく立ち上げる際、いきなり本格的なUI実装やコーディングに進むのではなく、まずモックアップやプロトタイプといった「試作」を通じて、デザインの方向性や操作感、技術的な実現可能性を検証するアプローチが、UI/UXデザインの現場では当たり前になっています。デザイン工程は本来、ユーザーリサーチで課題を捉え、情報設計（IA）で構造を整理し、ワイヤーフレームで骨格を描き、ビジュアルデザインで見た目を作り込み、最終的にエンジニアへ仕様を渡すという流れで進みますが、この一連のプロセスのなかで「作る前に確かめる」役割を担うのが、モックアップ・プロトタイプ・PoCという3つの試作です。とりわけFigmaに代表される現代のデザインツールは、コードを書かずに画面遷移や操作感を再現したクリッカブルプロトタイプを素早く作れるため、デザインのプロトタイピングとこれらの試作概念は極めて相性が良く、UI/UXデザイン工程の中心的な手段として定着しています。一方で、3つの試作は目的も成果物も対象者も異なり、混同したまま進めると「外観の確認をしたかったのに操作フローの議論になる」「社内で好評だったから市場でも売れると思い込む」といった失敗を招きます。

本記事では、UI/UXデザイン工程におけるPoC・プロトタイプ・モックアップ開発に焦点を当て、まず3つの用語の違いとデザイン文脈での位置づけを整理したうえで、デザインにおけるモックアップの作り方と費用・期間、Figmaを用いたプロトタイピングの具体的な進め方、ユーザビリティテストとの組み合わせ方、そしてAIツールによるUIモックアップ生成と本開発への移行時の注意点までを、デザイン実務に即して体系的に解説します。デザインカンプ、クリッカブルプロトタイプ、画面遷移、認識合わせ、デザイン検証といったUI/UXデザイン固有の観点から整理しているため、新規プロダクトの立ち上げを検討する事業担当者や、デザイン工程を効率化したいプロダクトマネージャーにとって、試作フェーズの進め方を判断する指針となるはずです。

本テーマに関する全体ガイドは、以下の記事をご覧ください。

▼全体ガイドの記事
・UI/UXデザインの完全ガイド

モックアップ・プロトタイプ・PoCの違いとデザイン上の位置づけ

UI/UXデザインの試作を始める前に、まず混同されがちな3つの用語を、それぞれが「何を検証するための試作なのか」という問いの違いから整理しておくことが重要です。モックアップは「外観・デザインは適切か」、プロトタイプは「UI・操作感として使えるか」、PoC（概念実証）は「技術的に作れるか」を確かめるためのものであり、作り込みの深さも、使うツールも、見せる相手も異なります。この区別を曖昧にしたまま試作に着手すると、デザインの議論をしたい場でエンジニアが技術検証を求められたり、操作フローを確かめたいのに静止画しか用意できていなかったりと、検証の目的と成果物がかみ合わなくなります。デザイン工程ではこの3つを段階的につなげて進めることが多いため、それぞれの役割をはっきりさせておきましょう。

モックアップは「外観・デザインは適切か」を確かめる静的な試作です。画面のレイアウト、配色、タイポグラフィ、余白、情報の配置といったビジュアル面を、実際の完成イメージに近い形で関係者に共有し、見た目の方向性を合意するために作ります。実際の動作は伴わず、成果物は外観のみの静的画面（デザインカンプ）です。プロトタイプは「UI・操作感として使えるか」を確かめる、操作できる試作です。画面遷移やボタンを押したときの反応、フォームの入力フローなど、ユーザーが実際に触って操作感を確認できるレベルまで再現し、UXや操作フローを検証します。成果物はワイヤーフレームやクリッカブルデモであり、見せる相手はチーム内や一部のステークホルダーが中心です。PoC（Proof of Concept＝概念実証）は「技術的に作れるか」を確かめる試作で、たとえば想定するAPI連携やリアルタイム処理が成立するかといった技術的な実現可能性に特化します。UIや使い心地は対象外で、成果物は技術検証用の簡易な実装コード、見せる相手は技術者や経営判断者です。このように、同じ「試作」でも検証する問いがまったく異なる点を、まず押さえておく必要があります。

デザイン工程の文脈で見ると、この3つはデザインプロセスの異なる地点に位置します。モックアップは、ワイヤーフレームで骨格を固めた後に色や装飾を載せて作る「完成イメージの共有物」であり、クライアントや経営層に対して「最終的にこういう見た目になります」と提示する場面で力を発揮します。静的なビジュアルゆえに認識の解像度は高く、デザインの良し悪しを直感的に判断してもらえます。プロトタイプは、その見た目を持った画面同士を画面遷移でつなぎ、実際に操作できるようにしたもので、「この導線で迷わず目的にたどり着けるか」というUXの検証に使います。デザイナーとエンジニアが共通の画面を見ながら仕様の認識をすり合わせる「認識合わせ」の場としても機能し、デザイン工程とエンジニアリングの橋渡しを担います。PoCはこの2つとは性格が異なり、デザインの美しさや使い心地ではなく、裏側の技術が成立するかだけを切り出して確かめるものです。デザイン主導のプロジェクトでは、モックアップとプロトタイプが主役となり、PoCは技術的な不確実性が高い機能を抱えるときに補助的に併走させる、という関係性で捉えると整理しやすいでしょう。3つを段階的につなげ、モックアップで見た目を固め、プロトタイプで操作感を検証し、必要に応じてPoCで技術の裏付けを取る、という流れがデザイン試作の基本形です。

デザインにおけるモックアップの作り方と費用・期間

モックアップは、デザインの「外観」を関係者と合意するための静的な完成イメージです。ここでは、ワイヤーフレームからデザインカンプへと精度を上げていく作り方の流れと、開発会社に依頼した場合の費用・期間の目安を押さえておきましょう。モックアップは試作のなかでも比較的短期間・低コストで作れる一方、ここで見た目の方向性を固めておくことが、後工程のプロトタイプやエンジニア実装の手戻りを大きく減らします。

モックアップの制作は、いきなり色を付けるのではなく、まず白黒のワイヤーフレームで画面の骨格を描くところから始めるのが定石です。ワイヤーフレームでは、どこに何の情報を置くか、ボタンやナビゲーションをどう配置するかという情報設計（IA）を、装飾を排した状態で検討します。配色やビジュアルの議論に入る前に「情報の優先順位と配置」を固めておくことで、後から「やはりこの要素は上に置きたい」といった根本的な手戻りを防げます。骨格が固まったら、そこに配色、タイポグラフィ、アイコン、画像、余白の設計を載せて、実際の見た目に近いカラーのデザインカンプへと精度を上げていきます。この段階では、ブランドのトーン＆マナーとの整合や、視認性・可読性といった品質も作り込みます。Figmaを使えば、ワイヤーフレームのコンポーネントに色やスタイルを当てて段階的にカンプ化でき、複数画面で配色やコンポーネントの一貫性を保ちながら効率的に仕上げられます。モックアップの完成度は、クライアントが「最終的な見た目」をイメージできるレベルが目安であり、ここで外観の方向性をしっかり合意しておくことが、デザイン検証全体のスタート地点になります。

モックアップ制作を開発・デザイン会社に依頼する場合、一般的な目安としては約1〜2週間、費用は開発費全体の15〜20%程度（おおよそ30万〜40万円が一つの目安）とされています。あくまで一般的な相場感であり、画面数やデザインの作り込みの深さ、ブランドガイドラインの有無によって変動する点には注意が必要です。比較的短期間・低コストで作れるのは、モックアップが静的な外観の確認に目的を絞っており、動作や技術検証を含まないためです。この段階に予算をかけすぎないことと同時に、ここで外観の方向性を固めきっておくことの両方が重要になります。なぜなら、モックアップの段階で「配色のイメージが違う」「情報の優先順位が想定と異なる」といった認識のズレを潰しておけば、次のプロトタイプ制作やエンジニアによる実装に進んでから根本的なデザイン変更が発生するリスクを下げられるからです。逆に、見た目の合意が曖昧なまま操作可能なプロトタイプの制作に進むと、画面遷移を組んだ後でデザインそのものをやり直すことになり、かけた工数が無駄になりかねません。モックアップは「安く早く作れるからこそ、見た目の合意形成にしっかり使う」というのが、費用対効果を最大化する考え方です。

Figmaによるプロトタイピングの進め方

プロトタイプは「操作できる試作」であり、デザインのプロトタイピングにおいて最も中心的な役割を担います。FigmaやAdobe XDといったデザインツールを使えば、コードを一行も書かずに、画面と画面を遷移でつないだクリッカブルなデモを素早く作成できます。ここでは、Figmaでプロトタイプを組む具体的な進め方と、デザイナーとエンジニアの認識合わせにどう活かすか、そして「作り込みすぎない」ためのコツを解説します。

Figmaでのプロトタイピングは、モックアップで作った複数の画面（フレーム）を用意し、それらをインタラクションでつないでいく作業から始まります。たとえば「ログイン画面のボタンをタップするとダッシュボードに遷移する」「メニューを開くとサイドナビが表示される」といった画面遷移を、ボタンや要素に遷移先を紐づけることで再現します。Figmaにはトランジション（画面の切り替わり方）やスマートアニメート（要素の動きを自動補間する機能）が備わっており、タップ・スワイプ・ホバーといった操作に応じた挙動を、コードを書かずに設定できます。こうして組み上げたクリッカブルプロトタイプは、共有用のURLを発行すれば、相手は自分のブラウザやスマートフォンで実機に近い操作感を体験できます。「アプリをインストールしてください」といった準備が不要で、リンクをクリックするだけで触れるため、クライアントや経営層、他部署のメンバーからフィードバックを集めるハードルが大きく下がります。実装前の段階で「実際に触れる画面」を用意できることが、プロトタイプ最大の価値であり、机上の議論では見えてこなかった操作上の違和感や導線の問題を、コストの安い段階で発見できます。

プロトタイプは、デザイナーとエンジニアが共通の画面を見ながら仕様の認識をすり合わせる「認識合わせ」の場として、とりわけ重要な役割を果たします。仕様書やワイヤーフレームだけでは、画面が切り替わるときの動き、ローディング中の表示、エラー時の挙動、入力フォームのバリデーションといった「動的な振る舞い」が伝わりにくく、デザイナーの意図とエンジニアの実装解釈がずれがちです。実際に操作できるプロトタイプがあれば、エンジニアは「このボタンを押したらどう遷移するのか」「このアニメーションはどの程度の速度なのか」を目で見て確認でき、デザイナーは口頭やテキストでは伝えきれなかった操作感を具体的に共有できます。Figmaのプロトタイプは、デザイン画面そのものから各要素のサイズ・余白・色・フォントといった実装に必要な情報を参照できるため、デザインと仕様が一つの場所に集約され、認識のズレが生まれにくくなります。これにより、エンジニアが実装に着手してから「思っていた動きと違う」という手戻りが減り、デザイン工程とエンジニアリング工程の橋渡しがスムーズになります。プロトタイプは単なる「動くデザイン」ではなく、チーム全体の認識をそろえるコミュニケーション基盤として機能するのです。

プロトタイピングで陥りがちな失敗が、最初から100%の完成度を目指して作り込んでしまうことです。デザイン試作のコツは、むしろ「100%でなく6割の完成度で早く作り、関係者に見せて認識の齟齬を潰す」ことにあります。完璧に作り込んでから見せると、もし方向性が間違っていた場合に大きな手戻りが発生しますが、6割の完成度で早く見せれば、致命的なズレを安いコストで発見・修正でき、その後の作り込みを正しい方向に向けられます。プロトタイプは「正解を提示する成果物」ではなく「認識を合わせるための叩き台」と捉え、早く・粗く作って・フィードバックを得て・直す、という反復を素早く回すことが、結果的に良いUXへの近道になります。費用・期間の目安としては、一般的にプロトタイプ制作は1〜3週間程度、開発費全体の35〜45%程度（おおよそ70万〜90万円が一つの目安）とされています。モックアップより比率が高いのは、画面数が増え、画面遷移やインタラクションの設計、操作フローの作り込みといった工数が加わるためです。これも一般的な相場感であり、検証したい導線の複雑さや画面数によって変動しますが、プロトタイプはデザイン試作のなかでも投資の中心を占めるフェーズだと理解しておくとよいでしょう。

ユーザビリティテストとプロトタイプの組み合わせ

プロトタイプは作って関係者に見せるだけでなく、実際のユーザー（に近い被験者）に操作してもらうユーザビリティテストと組み合わせることで、真価を発揮します。社内のレビューだけでは「作った側の理解」を前提にした評価になりがちですが、初めて画面に触れるユーザーに操作してもらうことで、「想定した導線で迷わず操作できるか」「情報配置が適切か」といったUXの課題を客観的に発見できます。ここでは、ユーザビリティテストの設計と、そこから課題を抽出して反復改善につなげる進め方を解説します。

ユーザビリティテストを有効に機能させるには、事前の設計が欠かせません。まず「何を検証したいのか」という目的を明確にし、それに沿ったタスク（被験者にやってもらう操作課題）を用意します。たとえば「会員登録を完了する」「目的の商品を検索してカートに入れる」といった、プロダクトの主要導線に対応したタスクを設定し、被験者がそれを迷わず遂行できるかを観察します。このとき重要なのが被験者リクルーティングです。実際の想定ユーザー像（ペルソナ）に近い属性の人を集めないと、得られる結果が実態とずれてしまいます。一方で、被験者の条件を厳しくしすぎると人を集めるのに時間がかかり、テストそのものがスケジュールの遅延要因になることもあるため、検証の精度と集めやすさのバランスを取る必要があります。テスト当日は、被験者に「考えていることを声に出してもらう」発話思考法を用いると、どの画面で迷ったか、何を誤解したかが具体的に見えてきます。観察する側は答えを誘導せず、被験者がどこでつまずくかを淡々と記録することが、信頼できる課題抽出につながります。Figmaで作ったクリッカブルプロトタイプは、実装前でもこうしたテストにそのまま使えるため、安いコストで早期にUXを検証できる点が大きな利点です。

ユーザビリティテストの本当の価値は、テストを実施したこと自体ではなく、そこで見つかった課題をプロトタイプに反映し、改善したものを再び検証するという反復（イテレーション）にあります。テストで「このボタンが押せると気づかなかった」「次に何をすればよいか分からず手が止まった」といった課題が見つかったら、それが個人差による偶発的なものか、複数の被験者に共通して現れる構造的な問題かを切り分けます。複数人に共通する問題は、情報配置や導線設計そのものに原因があることが多く、ここを優先して修正します。Figmaのプロトタイプは修正が容易なため、課題を反映した改善版をすぐに作り、再度テストにかけることができます。この「テスト→課題抽出→修正→再テスト」のサイクルを、実装前のコストが安い段階で何度か回しておくことで、UXの完成度を大きく高められます。デザイン検証をこの段階で十分に行わずに実装へ進むと、コードを書いた後で導線の作り直しが必要になり、修正コストが跳ね上がります。プロトタイプとユーザビリティテストの組み合わせは、「作ってから直す」のではなく「作る前に確かめて直す」ことを可能にし、デザイン工程全体の手戻りを最小化する、費用対効果の高い手法だといえます。

AIツールによるUIモックアップ生成と本開発への移行

近年、UI/UXデザインの試作スピードを劇的に高めているのが、テキストから数時間でUIを生成するAIツールの登場です。これらはモックアップやプロトタイプの初期生成を大幅に効率化し、試作にかかるコストを根本から下げつつあります。一方で、AIで素早く作れるようになったからこそ、「プロトの好評」を「市場の需要」と取り違える失敗にも注意が必要です。ここでは、AIツールの活用法とコスト削減効果、そして本開発・MVPへ移行する際の落とし穴を解説します。

v0（Vercel）やLovableといったAIツールは、自然言語のプロンプト（指示）を入力するだけで、数時間のうちに高品質なUIコンポーネントや画面を自動生成します。「会員向けのダッシュボード画面を作って」といった指示を与えれば、それらしいレイアウトと配色を備えた画面が即座に出力され、そのまま試作の叩き台として使えます。デザインツール側でも、Figma AIやGalileo AIのように、テキストからFigmaデザインを生成したり、UIのバリエーションを複数提案したりする機能が広がっており、デザイナーがゼロから画面を起こす負担を大きく減らしています。これらのAIツールが変えたのは、試作の「初速」です。アイデアを思いついてから最初のモックアップやプロトタイプを関係者に見せるまでのリードタイムが、従来の数日から数時間へと短縮され、より多くのデザイン案を素早く試せるようになりました。ただし、AIが生成するUIはあくまで「それらしい叩き台」であり、ブランドの世界観や情報設計の妥当性、アクセシビリティへの配慮といった部分はデザイナーの判断で整える必要があります。AIを「ゼロから一を作る道具」ではなく「叩き台を高速に用意し、人が一から十に仕上げる前提の道具」として位置づけることが、品質を保ちながらスピードを得るコツです。

AIツールの活用は、試作から初期開発にかけてのコストを大きく圧縮します。一般的な試算として、従来フルスクラッチで作るMVP開発の総額を約300万円とすると、そのうちUI/UXデザインが約15%（約45万円）、フロントエンド実装が約25%（約75万円）を占めるとされています。つまりデザインとフロント実装を合わせた約40%、金額にして約120万円相当が、v0やLovable、Figma AIといったツールで自作・自動生成できる領域にあたります。さらに開発全体で見れば、この約60%相当をAIでカバーし、AIに任せきれない残りの30〜40%（セキュリティ対策やインフラ構築など専門性が要る部分）だけを専門家へ外注するという進め方を取ると、従来200万〜500万円かかっていたMVP開発を、おおよそ50万〜150万円（50〜75%程度の削減）にまで抑えることが可能になるとされています。これらはあくまで一般的な試算であり、プロダクトの複雑さや求める品質によって変動しますが、デザインの試作領域がAIによるコスト削減の中心になっていることは確かです。試作はあくまで仮説検証のための投資であり、低コストで素早く回したいフェーズだからこそ、AIの活用で浮いた予算と時間を、より多くの仮説検証や、デザイナーにしかできない上流のUX設計に振り向けることが、事業の成功確率を高めます。ただし、AIに任せた部分は品質やセキュリティに穴が生じやすいため、本開発に移る際には専門家のチェックが欠かせない点には留意が必要です。

AIで素早く高品質なプロトタイプが作れるようになったからこそ、本開発への移行で陥りやすい典型的な失敗があります。それは、作ったプロトタイプを社内や関係者に見せて「いいね、使いやすそう」と好評を得たことを、「これは市場に需要がある」と誤認し、市場での検証（MVP）を飛ばして本格的な開発に突き進んでしまうことです。ここで押さえておくべきは、プロトタイプの成功とMVPの成功はまったく別物だという点です。プロトタイプが好評だったという事実が証明するのは、あくまで「設計やデザインの方向性が正しい」ということに過ぎず、「ユーザーが実際に対価を払ってでも使いたいと思うか」という市場ニーズの証明にはなりません。この違いを言い表すのが「プロトの相手は社内、MVPの相手は市場」という考え方です。プロトタイプは社内やステークホルダーの認識を合わせ、操作感や導線を検証するためのものであり、見せる相手は基本的に内部の関係者です。一方MVPは、実際に市場へ出して本物のユーザーに使ってもらい、対価を払う需要が存在するかを確かめるためのものです。AIによって試作が安く速くなったことで、つい「動くものができた＝事業として成立する」と感じてしまいがちですが、プロトの好評と市場の需要は切り分けて捉える必要があります。本開発へ進む前に、「これは社内の納得を得ただけなのか、それとも市場の需要を確かめたのか」を関係者で合意し、必要なら市場検証としてのMVPを挟むという規律が、大きな投資の失敗を防ぐ鍵になります。

まとめ

本記事では、UI/UXデザイン工程におけるPoC・プロトタイプ・モックアップ開発について、3つの試作の違いとデザイン上の位置づけ、デザインにおけるモックアップの作り方と費用・期間、Figmaを用いたプロトタイピングの進め方、ユーザビリティテストとの組み合わせ、そしてAIツールによるUIモックアップ生成と本開発への移行時の注意点までを体系的に解説しました。モックアップは「外観・デザインは適切か」をデザインカンプで確かめる静的な試作（一般目安で約1〜2週間・開発費の15〜20%）、プロトタイプは「UI・操作感として使えるか」を画面遷移を持つクリッカブルデモで確かめる操作可能な試作（一般目安で1〜3週間・開発費の35〜45%）、PoCは「技術的に作れるか」を確かめる技術検証であり、デザイン主導のプロジェクトではモックアップとプロトタイプが主役を担います。Figmaを使えばコードを書かずに画面遷移を再現したプロトタイプを作れ、デザイナーとエンジニアの認識合わせの基盤になります。「100%でなく6割の完成度で早く作って齟齬を潰す」姿勢と、ユーザビリティテストを組み合わせた「テスト→課題抽出→修正→再テスト」の反復が、実装前にUXの完成度を高め、手戻りを最小化します。さらにv0・Lovable・Figma AIといったAIツールは、デザインとフロント実装の約60%相当を自作可能にし、従来200万〜500万円のMVP開発を50万〜150万円程度に抑える可能性を持ちます。ただし「プロトの相手は社内、MVPの相手は市場」という原則を忘れ、社内での好評を市場の需要と誤認して本開発へ突き進む失敗には注意が必要です。デザインのプロトタイピングを「作る前に確かめる」手段として規律をもって使いこなすことが、アイデアを成功するプロダクトへと育てる鍵となります。まずは検証したい問いを明確にし、複数のデザイン・開発会社に相談することから始めてみてください。

▼全体ガイドの記事
・UI/UXデザインの完全ガイド

株式会社riplaでは、IT事業会社出身のプロフェッショナルが「Impact-Driven型支援」を通じて、プロダクトやシステムの納品・提供を目的とせず、お客様と同じ目線で、事業成果の達成をゴールとして、高品質なDX/開発支援をいたします。

また、当社独自の開発テンプレート「Boxシリーズ」による標準機能の高速開発と、AI駆動開発の独自フレームワーク「GoDD」による独自機能のAI実装を組み合わせることで、低コスト・短期間で開発を実現いたします。

もし、システム開発やプロダクト開発に関するご要望がございましたら、お気軽にお問い合わせください。

株式会社riplaの会社HPはこちら

・サービス概要資料のURLはこちら >>>
・お問合せページのURLはこちら >>>
・お役立ち資料のURLはこちら >>>

執筆者プロフィール

張田谷凌央

株式会社ripla 代表取締役CEOとして、システムパッケージ活用、システム開発、データ分析、生成AI活用、SaaS開発、アプリ開発、EC構築など、幅広い領域で企業のDX推進と事業成長を支援している。IT事業会社出身のプロフェッショナルが集う株式会社riplaにおいて、「Impact-Driven型支援」を掲げ、単なるシステム納品にとどまらず、クライアントと同じ目線で事業成果の実現に向けた伴走支援を行う。早稲田大学卒業後、ラクスル株式会社、LINEヤフー株式会社にて事業開発やDX推進などに従事した後、株式会社riplaを創業。