【AI駆動開発実践】要件定義書からモックアップ作成

1. はじめに

設計書からUIモックアップを作成する、あの地味で時間のかかる作業をAIで自動化したい！

本記事では、AI（Claude Code）に要件定義書を読み込ませ、Vueコンポーネントを自動生成させる『AI駆動モックアップ開発』を試した結果と、その過程で得られた知見をまとめました。

2. 検証環境構成

構成

• アーキテクチャ：Laravel + Inertia.js + Vue3
• 使用ツール：VSCode、Claude Code、Backlog MCP Server
• 入力情報：Backlogドキュメント(要件定義書、画面イメージの添付あり)

前提

• ベースアプリは実装済み
• ベースアプリのデザインを踏襲
• 画面要素と遷移仕様を記載した要件定義書を入力

Claude Code から Backlog MCP Server 経由で要件定義書を参照し、Vueコンポーネントとしてのモックファイルを自動生成する構成としました。

3. 入力情報定義

以下のBacklogドキュメントを元にモック生成を実施しました。

• 要件定義書：各画面のUI構成（入力項目・ラベル・ボタン・レイアウト・イベント・出力項目）を定義
• ワイヤーフレーム仕様：要件定義書に添付された各画面のレイアウトとコンポーネント構成の参考画像
• 設計標準・規約：クラス命名規則・BEM構造・レイアウト分割ルールを定義
• 画面別詳細設計：

4. プロンプト定義

Claude Code を利用してモックアップを自動生成するために、事前準備ドキュメント・開発設定・レイアウトファイル・ルーティング構成を明確化しました。
これにより、生成結果の再現性と精度を高めることができました。

4.1 事前準備

AIに質の高いモックを作ってもらうために、『指示書』と『部品の設計図』のmd形式のドキュメントを作成しておきます。

📄 CLAUDE.md

Claude Code 実行時のベースプロンプト。
モックアップ作成は mockup.md の指示に従って行う旨を記載。

📄 mockup.md

Claude Code の振る舞いを定義する『全体的な指示書』。
以下のようなモックアップ作成ガイドラインを定義。

• 基本方針
• プロンプト例
• モックアップ作成手順
  • Backlog MCPを使用した要件取得
  • 画面別詳細設計の取得
  • 生成・更新対象のファイル構成
  • レイアウト構造
  • UIコンポーネント（components.mdを参照することを定義）
  • スタイル
  • 実装例
  • 動作確認方法
• 注意事項など

📄 components.md

UI部品の仕様を定義した『部品の設計図』。
以下のようなUIコンポーネントの色・形・大きさ・フォントサイズなどのスタイル仕様を定義。

• 画面レイアウトの統一ルール
  • タイトルなどの命名規則
• メインエリア内のコンポーネント
  • 検索項目の作成ルール
  • テーブル項目の作成ルール
  • 各種ボタン
  • 各種入力欄
  • ページネーション
  • 削除モーダル
  • アラート

📁 ドキュメント
├── CLAUDE.md # モックアップ作成ガイドライン
├── mockup.md # モックアップ作成手順・参照規則
└── components.md # UIコンポーネント仕様書

⚙️ 設定
├── laravel/resources/js/user/app.js # Vueルーティング設定
├── laravel/vite.user.config.js # Vite設定
├── laravel/tsconfig.json # TypeScript設定
└── laravel/tsconfig.app.json # TypeScript設定（アプリ用）

🧩 レイアウト・コンポーネント
├── laravel/resources/js/Layouts/User/MockupLayout.vue # メインレイアウト
├── laravel/resources/js/Components/User/Layout/MockupSidebar.vue # サイドバー
├── laravel/resources/js/Components/User/Layout/MockupHeader.vue # ヘッダー
└── laravel/resources/js/Components/User/Layout/MockupFooter.vue # フッター

🌐 ルーティング
└── laravel/routes/mockup.php # モックアップルート定義

4.2 Claude Code プロンプト例

Backlogドキュメントの要件定義からモックアップを作成してください。
BacklogドキュメントID: 0197119a90d77f6cb5a19274ada5ba08
機能: 3.1. ロール検索、結果表示
機能分類：role
画面：index

このプロンプトにより、Claude Code は Backlog MCP Server から該当ドキュメントを取得し、画面仕様に基づいて Vue モックアップを生成します。
mockup.md と components.md の定義内容を参照しながら、既存レイアウト構成（ヘッダー／フッター／サイドバー）に準拠したモックアップを出力します。

4.3 生成されるファイル

📄 Vue コンポーネント
laravel/resources/js/Pages/Mockup/[機能分類]/[画面名].vue
├── Index.vue # 一覧画面
├── Create.vue # 新規作成画面
└── Edit.vue # 編集画面

💻 コントローラー
laravel/app/Http/Controllers/Mockup/[機能分類]Controller.php

🔁 更新される既存ファイル
laravel/resources/js/user/app.js：新規パスマッピングを追加
laravel/routes/mockup.php：新しいルート定義を追加
laravel/resources/js/Components/User/Layout/MockupSidebar.vue：新メニューリンクを追加

4.5 実行フロー概要

• BacklogドキュメントIDから該当要件定義を取得
• mockup.md の手順に従い、機能分類・画面構造を解析
• components.md のUI定義に沿ってコンポーネントを組み立て
• 共通レイアウトを継承して .vue ファイルを生成
• コントローラーおよびルート設定を自動更新
• VSCodeでプレビューしてUIの整合性を確認

5. 検証結果

成果概要

生成結果は全体として安定しており、ユーザー管理画面やロール管理画面などの単純構成では高精度 に出力された。
一方で、複雑な画面構成（ネスト構造・非同期処理を含むUIなど）では一部崩れや誤配置が発生した。
完成系に近い画面モック画像を事前に提示した場合、生成精度が大幅に向上した。

このようなシンプルな画面であれば1回の生成で精度の高いモックアップを出力できます。

6. 所感と課題

良かった点

シンプルな画面では高精度。人手によるHTMLモックアップ作業がほぼ不要。
要件定義書の整合性確認ツールとしても有用（設計ミスがUI崩れで可視化される）。
Claude Codeの出力傾向を把握すれば、プロンプトを定型化してチーム運用可能。

課題

複雑なUI（モーダル、非同期ロード、条件分岐など）では自動生成精度が低下。
曖昧な項目をAIが勝手に補完して誤実装を行う。
要件定義書の曖昧さがそのまま品質に反映されるため、記載精度の向上が必須。
画面イメージを提示しない場合、配置順やクラス名が不安定になりやすい。

7. まとめ

今回の検証により、モックアップ段階でもAI駆動開発を有効に活用できることが確認できました。
ただし、実用においては次の改善が必要です。

• 要件定義書フォーマットの明確化（構造・属性の標準化）
• 曖昧な表現を排除し、AIが誤補完しないためのルール整備
• モック生成専用プロンプトの最適化
• 画面を1つずつ確認しながら段階的に作っていくプロセスを導入する

これらを整備することで、要件定義、モック作成、設計、実装 という一連の流れをAI駆動で連携させる道筋が見えてきました。

8. 今後の検討事項

• 複雑なUIへの対応精度検証
• AIによるモックアップの品質チェックを取り入れる