GeminiによるモックアップAI作成｜UI設計・画面遷移図を会話で生成する方法

はじめに：AIがモックアップ作成を変える

システム開発の上流工程では、要件定義や画面設計に多くの時間がかかります。特に「クライアントへのヒアリング → モックアップ作成 → フィードバック → 修正」のサイクルは、専門のデザイナーがいない場合、何日もかかることがあります。

Geminiを活用することで、会話だけでUIのワイヤーフレームやHTML/CSSのモックアップを数分で生成できます。さらにGeminiはアップロードした画像（既存のUI、紙のスケッチ）を理解して改善案を提案するマルチモーダル能力を持ちます。本記事では、実際のプロジェクトで使えるモックアップ生成の手順を解説します。

Geminiモックアップ生成に使うツール

ワイヤーフレーム生成のプロンプト設計

Geminiにモックアップを生成させるには、「誰が」「何のために」「どんな操作を」するアプリかを具体的に伝えることが重要です。

基本プロンプトのテンプレート

# 業務アプリのモックアップ生成プロンプト
あなたはUIデザイナーです。以下の要件でWebアプリの
ワイヤーフレームをHTML/CSSで作成してください。

【アプリ概要】
{アプリの目的・概要を2〜3文で}

【ターゲットユーザー】
{誰が使うか: 例「中小企業の営業担当者（PC・スマートフォン利用）」}

【主要な画面（最初は1画面から）】
- 画面名：{画面名}
- 表示する情報：{表示する情報の一覧}
- ユーザーが行う操作：{ボタン・フォーム・ドロップダウン等}

【デザイン指針】
- スタイル：{例「シンプルなビジネス向け」「モダン・ダーク系」}
- カラー：{例「メインカラー #1a73e8、白ベース」}
- 日本語UIで作成

HTMLとCSSを1ファイルにまとめて出力してください。

経費申請画面の生成例

# 実例：経費申請フォームのモックアップ
あなたはUIデザイナーです。社内経費申請システムの
申請フォーム画面をHTML/CSSで作成してください。

【アプリ概要】
従業員が交通費・接待費・備品購入費などの経費を
スマートフォンから申請するWebアプリ。

【ターゲットユーザー】
一般社員（スマートフォンメイン、ITリテラシー普通）

【主要な画面】
- 画面名：経費申請フォーム
- 入力項目：申請日・費用種別（ドロップダウン）・
           金額・目的・領収書画像アップロード・メモ
- ボタン：「下書き保存」「申請する」
- バリデーション：金額は数値のみ、必須項目に＊マーク

【デザイン指針】
- スタイル：シンプルで清潔感のあるビジネス向け
- カラー：メインカラー #1967d2（Googleブルー系）
- スマートフォン優先（max-width 480px）
- 日本語UIで作成

会話で反復改善する方法

最初の生成物をベースに、会話で修正を重ねるのがGeminiモックアップ生成の真価です。

効果的な修正プロンプト例

# 反復改善のプロンプト例

// レイアウト変更
「ヘッダーを固定（sticky）にして、左にロゴ、右にユーザーアイコンを配置してください」

// コンポーネント追加
「申請一覧テーブルの各行に「詳細を見る」ボタンを追加し、
ステータスに応じてバッジの色を変えてください
（申請中:青、承認済:緑、却下:赤）」

// レスポンシブ対応
「現在のデザインをスマートフォン（375px）でも見やすいように
レスポンシブ対応してください。テーブルは横スクロール可にする」

// インタラクション追加
「申請ボタンをクリックしたら確認ダイアログを表示し、
OKで送信完了トーストを3秒間表示するJavaScriptを追加してください」

画像からUIを解析・改善

Geminiのマルチモーダル機能を使うと、既存のUI画面のスクリーンショットや手書きスケッチをアップロードして、分析・改善案の生成・コード化ができます。

既存UIのスクリーンショットを貼り付けて改善

# 既存UIを改善するプロンプト
添付の画面を見てください。これは現在使っている
在庫管理システムのUIです。

以下の観点で問題点を指摘し、改善したHTMLモックアップを生成してください：
1. 情報の視認性・優先度付け
2. 操作ボタンの配置・分かりやすさ
3. モバイルでの使いやすさ
4. 色使い・フォントサイズの適切さ

手書きスケッチをデジタル化

# スケッチからモックアップを生成
添付の手書きスケッチを基に、ダッシュボード画面の
HTMLモックアップを作成してください。

スケッチの各エリアについて：
- 上部：KPIカードを横並び（今月の売上・新規顧客数・成約率）
- 中央左：折れ線グラフ（月別売上推移）
- 中央右：ドーナツグラフ（案件ステータス別）
- 下部：直近の商談一覧テーブル

Chart.jsを使ってグラフもダミーデータで実装してください。

画面遷移図の生成

モックアップだけでなく、Mermaid記法を使った画面遷移図もGeminiで生成できます。

# 画面遷移図の生成プロンプト
以下のアプリの画面遷移図をMermaid記法で作成してください。

アプリ：経費申請システム
画面一覧：
- ログイン画面
- ダッシュボード（申請状況サマリー）
- 申請一覧（自分の申請）
- 新規申請フォーム
- 申請詳細（編集・取り消し可）
- 承認者用：承認待ち一覧
- 承認者用：承認・却下処理

条件分岐も含めて表現してください
（例：一般ユーザーと承認者でルートが異なる）

// Geminiが生成したMermaid画面遷移図（例）
graph TD
    A[ログイン画面] -->|一般ユーザー| B[ダッシュボード]
    A -->|承認者| B
    B --> C[申請一覧]
    B --> D[新規申請フォーム]
    C --> E[申請詳細]
    E -->|申請中| F[編集・取り消し]
    E -->|承認済| G[詳細表示のみ]
    B -->|承認者のみ| H[承認待ち一覧]
    H --> I[承認・却下処理]

Figmaへの取り込みフロー

Geminiが生成したHTMLモックアップをFigmaに取り込む方法はいくつかあります。

方法①：スクリーンショット → Figmaに貼り付け

最もシンプルな方法。ブラウザでHTMLを開き、スクリーンショットを撮ってFigmaに貼り付け。トレース・編集のベースとして使用します。

方法②：HTML to Figmaプラグイン

「html.to.design」などのFigmaプラグインを使うと、URLや直接HTMLを入力してFigmaフレームに変換できます。テキスト・色・レイアウトが編集可能な状態で取り込まれます。

方法③：デザイントークンを指定して生成

あらかじめFigmaで決めたカラーパレット・フォント・スペーシングをGeminiに伝えてコードを生成することで、既存のデザインシステムと一貫性を保てます。

Reactコンポーネントの生成（Claude Artifacts活用）

より実装に近いプロトタイプが必要な場合は、Claude の Artifacts 機能が有効です。React コンポーネントをインタラクティブにプレビューしながら生成できます。

# ClaudeへのReactコンポーネント生成プロンプト
以下のReactコンポーネントを作成してください。
Tailwind CSSを使用し、TypeScriptで記述してください。

コンポーネント名：DataTable
機能：
- propsでデータ配列（columns定義とrowsデータ）を受け取る
- ソート機能（列ヘッダークリックで昇順/降順切替）
- 検索フィルタ（テキスト入力でリアルタイムフィルタリング）
- ページネーション（1ページ10件）
- 行選択（チェックボックス）
- モバイルレスポンシブ

Storybookのstories.tsxも合わせて作成してください。

実務で役立つモックアップ生成のコツ

1. 一度に全画面を作ろうとしない

最初は最重要画面1枚に絞り、フィードバックを受けて改善してから次の画面へ。全画面を一気に作ると修正コストが膨らみます。

2. 実データを使ったダミーコンテンツを指定する

「テスト太郎」「商品A」などの汎用ダミーデータではなく、実際の業務に近いデータ（例：顧客名に「株式会社〇〇」、商品名に実際のSKUコード）を指定すると、クライアントへのプレゼン品質が上がります。

3. エラー状態・空状態も生成する

「データが0件のときの表示」「API通信エラー時のメッセージ」などのエッジケースをモックアップ段階で確認しておくと、開発後の手戻りが減ります。

4. アクセシビリティ要件を含める

# アクセシビリティを考慮したプロンプト追記
以下のアクセシビリティ要件も満たしてください：
- ボタン・フォームにaria-label属性を追加
- カラーコントラスト比4.5:1以上
- キーボードナビゲーション対応（tabindex）
- フォームのエラーメッセージをrole="alert"で実装

まとめ

Geminiを活用したモックアップ生成のメリットをまとめます。

• スピード：従来数日かかっていた初回モックアップが数時間〜数分に
• 反復の容易さ：会話で修正を重ねられるため、クライアントとその場でブラッシュアップできる
• マルチモーダル：既存のUI画像・手書きスケッチからコードを生成可能
• コスト：専門デザイナー不在でも高品質なプロトタイプを作成できる

ただし、AIが生成するモックアップはあくまで「たたき台」です。実際のユーザー体験や業務フローへの適合性は、ユーザーインタビューやプロトタイプテストで検証することが重要です。AIを「アイデアを素早く形にするツール」として使い、人間がUX判断を行うスタイルが最も効果的です。