UI/UXデザインの試作は、外観を確かめるモックアップ、操作感を確かめるプロトタイプ、技術の成立性を見極めるPoCを、目的に応じて使い分けます。
Figmaを使えば、コードを書かずに画面遷移や操作感を素早く再現できます。
▼全体ガイドの記事
・UI/UXデザインの完全ガイド
Webサービス開発の種類・工程・費用・会社選定までの全体像については、無料ホワイトペーパー「Webサービス開発の完全ガイドブック」で詳しく解説しています。
モックアップ・プロトタイプ・PoCの違いとデザイン上の位置づけ
試作の前に、混同されやすい3つの用語を「何を検証するか」で分けておくことが大切です。作り込みの度合いやツール、見せる相手も、それぞれ異なります。
区別が曖昧なままだと、デザインの場で技術検証を求めてしまったり、操作を確かめたいのに静止画だけを用意したりして、目的と成果物がずれることがあります。
デザイン工程では3つを段階的につなぐことが多いため、それぞれの役割をはっきりさせておきます。
3つの試作が検証する「問い」の違い
試作の種類ごとに成果物と検証対象の違いを押さえておけば、目的に合うものを選べます。
- モックアップ：静的なカンプで、画面構成や配色、文字、余白を共有し、外観の合意を得るための試作です。
- プロトタイプ：画面遷移やボタンの反応、フォーム入力を再現し、操作感やUXを確かめます。
- PoC：簡易な実装コードで、技術的に作れるかを検証します。
プロトタイプの成果物には、ワイヤーフレームやクリッカブルデモがあり、主にチーム内や一部のステークホルダーに見せます。
PoC（Proof of Concept＝概念実証）は、想定するAPI連携やリアルタイム処理が成り立つかを確かめるものです。UIや使い心地は対象外で、共有するのは技術者や経営判断者です。
デザイン文脈での成果物と対象者
3つは、デザインプロセスの異なる地点に位置づけられます。役割を分けておけば、見た目の合意から技術の確認へと段階的につなげられます。
- モックアップ：静的な完成イメージをクライアントや経営層に示し、見た目を直感的に判断してもらいます。
- プロトタイプ：画面を遷移でつなぎ、導線の使いやすさを確かめながら、仕様の認識を合わせます。
- PoC：裏側の技術が成立するかを確認する検証です。
デザイン主導の案件では、モックアップとプロトタイプが中心になります。
技術的に不確実性の高い機能がある場合は、PoCを補助として並行して進めます。
また、プロトタイプはデザイナーとエンジニアの橋渡し役でもあり、共通の画面を見ながら仕様をすり合わせられます。
基本の流れは、モックアップで見た目を固め、プロトタイプで操作感を確かめ、必要に応じてPoCで技術の裏付けを取る形です。
デザインにおけるモックアップの作り方と費用・期間
モックアップは、外観の完成イメージを関係者と合意するための静的な試作です。骨格からデザインカンプへ精度を上げる進め方と、依頼時の費用・期間の目安を押さえておくと、発注の判断材料になります。
比較的短期間・低コストで作れるうえ、見た目を先に固めておけば、後の試作や実装での手戻りを減らせます。
ワイヤーフレームからデザインカンプへの作り込み
画面の骨格を先に整えておけば、情報配置を決めたあとに起きる根本的な手戻りを防げます。
- 骨格を描く：白黒のワイヤーフレームで情報設計（IA）と画面構成を検討します。
- 見た目を作る：配色や文字、アイコン、画像、余白を載せて、カラーのカンプに仕上げます。
- 品質を整える：ブランドとの整合や視認性、可読性を確認します。
ワイヤーフレームでは、情報設計（IA）として情報の配置やボタン、ナビゲーションを検討します。装飾の話に入る前に、情報の優先順位を固めておくことが大切です。
Figmaなら、コンポーネントに色やスタイルを設定でき、複数画面の一貫性を保ったまま仕上げられます。
完成度の目安は、クライアントが最終的な見た目を想像できる程度です。
この外観の合意が、デザイン検証の出発点になります。
モックアップの費用・期間の目安
依頼するときは、費用と期間の目安に加えて、金額を左右する条件と外観の合意がもたらす効果を確認しておきます。
- 費用と期間：一般的な目安は約1〜2週間で、開発費全体の15〜20%程度、おおよそ30万〜40万円です。
- 変動要因：画面数や作り込みの深さ、ブランドガイドラインの有無によって、金額が変わります。
- 短期間・低コストの理由：静的な外観の確認に絞り、動作や技術検証を含めないためです。
- 外観の合意：予算をかけすぎずに、配色や情報の優先順位を固めておくと、後工程の変更を減らせます。
- 注意点：合意が曖昧なまま進めると、遷移を組んだあとにデザインをやり直すことになり、工数が無駄になるおそれがあります。
Figmaによるプロトタイピングの進め方
プロトタイプは、操作できる試作としてデザイン検証の中心的な役割を担います。
FigmaやAdobe XDなら、コードを書かずに遷移するデモを素早く作れます。
クリッカブルプロトタイプの組み立て方
Figmaでは、モックアップの複数の画面（フレーム）を用意し、インタラクションでつないで、操作時の挙動を再現します。
- 画面をつなぐ：ボタンや要素に、遷移先を設定します。
- 操作を加える：タップやスワイプ、ホバー時の挙動を指定します。
- URLを共有する：ブラウザやスマートフォンで、操作を試してもらいます。
たとえば、ログインボタンからダッシュボードへ移る動きや、メニューを開くとサイドナビが出る動きを再現できます。
トランジションは画面の切り替わり方を、スマートアニメートは要素の動きを自動で補間する機能です。どちらも、コードなしで挙動を設定できます。
共有URLなら、アプリをインストールしなくても、ブラウザやスマートフォンから実機に近い操作を試せます。顧客や経営層、他部署の人もリンクから触れるため、意見を集める場として使えます。
実装の前に実際に触れる画面を用意できる点に、大きな価値があります。さらに、低コストの段階で操作の違和感や導線の問題を見つけられます。
デザイナーとエンジニアの認識合わせ
操作できる画面を一緒に見れば、仕様書だけでは伝わりにくい動きや振る舞いを、具体的に共有できます。
- 遷移と動き：画面の切り替わりやアニメーションを確認します。
- 状態ごとの表示：ローディングやエラー、入力検証を共有します。
- 実装情報：サイズや余白、色、フォントを参照します。
Figmaでは、画面そのものから実装に必要な情報を確認できます。デザインと仕様を一か所にまとめておけば、解釈のずれや実装後の手戻りを抑えられます。
操作できる試作であれば、エンジニアはボタンの遷移やアニメーションの速度を実際に見て確かめられます。
デザイナーも、操作感を具体的に伝えられます。
プロトタイプは、チームの認識をそろえ、デザインとエンジニアリングをつなぐ役目を果たします。
「6割の完成度で早く作る」コツと費用・期間
完成度を上げ切る前に共有すれば、方向性のずれを早い段階で見つけて直せます。
- 粗く作る：最初から100%を目指さず、6割の段階で見せます。
- 反復する：意見をもとに直し、正しい方向へ作り込みます。
プロトタイプは、認識を合わせるための叩き台であり、正解を示すものではありません。早く作って意見を得る反復が、UXの改善につながります。
完成前に見せておけば、方向性がずれていても低コストで直せます。その後の作り込みも、正しい方向で進められます。
制作の一般的な目安は、1〜3週間で、開発費全体の35〜45%程度です。金額では、おおよそ70万〜90万円が一つの目安になります。
モックアップより比率が高いのは、画面数に加えて、遷移や操作フローを設計する工数がかかるためです。
費用や期間は、検証する導線の複雑さや画面数によって変わります。プロトタイプは、デザイン試作への投資の中心になる段階です。
ユーザビリティテストとプロトタイプの組み合わせ
実際のユーザーに近い被験者に操作してもらうと、社内レビューだけでは見えにくい導線や情報配置の課題を見つけられます。
作り手の理解を前提にしない評価だからこそ、想定した導線で迷わず使えるかを客観的に確かめられます。テストは、設計、課題の抽出、反復改善を一続きの流れとして進めます。
テスト設計と被験者リクルーティング
テストを機能させるには、事前の設計が欠かせません。目的に沿うタスクと被験者を、あらかじめ用意しておきます。
- 目的とタスク：会員登録や商品検索など、主要導線の操作課題を設定します。
- 被験者の条件：ペルソナに近い人を集めて、精度と募集のしやすさを両立させます。
- 当日の観察：発話思考法を使い、誘導せずにつまずきを記録します。
被験者の条件を厳しくしすぎると、募集に時間がかかり、遅延の要因になることもあります。
発話思考法では、考えていることを声に出してもらいます。そのため、どの画面で迷い、何を誤解したかを具体的につかめます。
Figmaのクリッカブルプロトタイプは実装前のテストにも使えるため、早い段階でUXを検証できます。
課題抽出と反復によるデザイン検証
テストで見つけた課題を直して、もう一度試す反復によって、UXを改善できます。
- 課題を分類する：個人差か、複数人に共通する問題かを見分けます。
- 優先して修正する：共通する問題は、情報配置や導線から見直します。
- 再テストする：改善版を試して、残る課題を確かめます。
ボタンに気づかない、次の操作が分からないといった問題が見つかったら、個人差か構造的な問題かを切り分けます。
「テスト→課題抽出→修正→再テスト」を実装前に何度か回すと、UXの完成度を高められます。
検証をせずに実装へ進むと、コードを書いたあとで導線を組み直すことになり、修正費用が増えるおそれがあります。試作の段階で確かめて直す方法は、デザイン工程全体の手戻りを抑えるうえで、費用対効果があります。
AIツールによるUIモックアップ生成と本開発への移行
AIはUI試作の初期生成を効率化します。一方で、試作への好評を市場の需要と取り違えないよう、本開発への移行を判断する必要があります。
v0・Lovable・Figma AIによるUI生成
AIツールは画面案を素早く用意できますが、情報設計やブランド、アクセシビリティの確認は引き続き必要です。
- v0・Lovable：自然言語の指示からUI画面を生成します。
- Figma AI・Galileo AI：デザインの生成や複数案の提案に使えます。
- 人が仕上げる：ブランドや情報設計、アクセシビリティを判断します。
自然言語のプロンプト（指示）を与えれば、数時間でUIコンポーネントや画面を生成できます。出力は、試作の叩き台として使えます。
最初の案を見せるまでの時間は、従来の数日から数時間へ短縮され、その分、より多くの案を試せます。
AIは、ゼロから完成品を作る道具というより、叩き台を用意する道具です。
人が品質を整える前提で使えば、速度と品質の両立を目指せます。
AIによる試作コストの削減効果
AIで自作できる部分と、専門家の確認が要る部分を分けて考えると、試算上はMVP費用を抑えられます。
- デザイン・フロント実装：約120万円相当を、自作・自動生成できる領域とします。
- 専門家への外注：セキュリティやインフラなどを、専門家に確認してもらいます。
- 費用の試算：MVP開発費を50万〜150万円程度とします。
フルスクラッチでMVPを開発した場合の試算（約300万円）では、UI/UXデザインは約15%（約45万円）、フロントエンド実装は約25%（約75万円）です。
両者を合わせた約40%（約120万円相当）が、v0やLovable、Figma AIで自作・自動生成できる領域とされています。
開発全体の約60%相当をAIでカバーし、残る30〜40%のうち専門性が必要な部分を外注する進め方もあります。
この試算では、従来200万〜500万円のMVP開発を50万〜150万円に抑えられ、50〜75%程度の削減になるとされています。
金額は一般的な試算で、プロダクトの複雑さや品質によって変動します。
浮いた予算や時間は、仮説検証や上流のUX設計に振り向けられます。
AIに任せた部分は、品質やセキュリティに穴が生じやすいものです。そのため、本開発へ移る際には、専門家の確認が欠かせません。
「プロトの相手は社内、MVPの相手は市場」
社内でプロトタイプが好評でも、市場の需要が証明されたとは限りません。
- プロトタイプ：内部の関係者と認識を合わせ、操作感や導線を試します。
- MVP：市場で本物のユーザーに使ってもらい、需要を確かめます。
- 移行判断：必要に応じて市場検証を挟んでから本開発へ進みます。
好評が示すのは、設計やデザインの方向性までです。ユーザーが対価を払って使うという市場ニーズの証明にはなりません。
本開発の前に、社内の納得と市場の需要を分けて考え、関係者で合意しておきます。動くものができたからといって、事業として成り立つとは限りません。
必要に応じて市場検証としてMVPを挟むことは、大きな投資の失敗を防ぐ判断につながります。
まとめ
UI/UXデザインの試作は、目的に応じてモックアップ、プロトタイプ、PoCを使い分けます。モックアップは外観、プロトタイプは操作感、PoCは技術的な実現性を確かめるものです。
モックアップの一般的な目安は約1〜2週間で、開発費の15〜20%です。プロトタイプは1〜3週間、開発費の35〜45%が目安です。
Figmaの試作をユーザビリティテストに使い、課題を直して再検証すれば、実装前にUXを高め、手戻りを抑えられます。
AIで試作やMVP開発の費用を抑えられる可能性はあります。一方で、試作の社内評価を市場の需要と混同せず、本開発の前に必要な検証を行うことが大切です。
▼全体ガイドの記事
・UI/UXデザインの完全ガイド
▼開発を相談する前に読みたい無料ホワイトペーパー
・Webサービス開発の完全ガイドブック
・【2026年最新版】AI駆動開発の完全ガイドブック
会社紹介
株式会社riplaでは、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを、構想策定・要件定義から開発・改善まで一気通貫で支援。事業会社でIT・DXを経験したプロフェッショナルによる高い要件定義力・システム設計力を活かし、事業成果の最大化に伴走します。
また、当社独自の開発テンプレート「Boxシリーズ」による標準機能の高速開発と、AI駆動開発の独自フレームワーク「GoDD」による独自機能のAI実装を組み合わせることで、低コスト・短期間で開発を実現いたします。
もし、システム開発やプロダクト開発に関するご要望がございましたら、お気軽にお問い合わせください。
・サービス概要資料のURLはこちら >>>
・お問合せページのURLはこちら >>>
・お役立ち資料のURLはこちら >>>
株式会社ripla 代表取締役CEOとして、システムパッケージ活用、システム開発、データ分析、生成AI活用、SaaS開発、アプリ開発、EC構築など、幅広い領域で企業のDX推進と事業成長を支援している。事業会社でIT・DXを経験したプロフェッショナルが集う株式会社riplaにおいて、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを構想策定・要件定義から開発・改善まで一気通貫で支援し、単なるシステム納品にとどまらず、クライアントと同じ目線で事業成果の最大化に向けた伴走支援を行う。早稲田大学卒業後、ラクスル株式会社、LINEヤフー株式会社にて事業開発やDX推進などに従事した後、株式会社riplaを創業。