課題
システム提案前フェーズの工数問題
システム開発の提案・要件定義フェーズでは、ヒアリング後に手作業で要件をまとめ、画面イメージを作成する作業が発生します。これが時間もかかり、属人的になりがちでした。
ヒアリング後の要件整理に数時間
画面イメージ作成がデザインツール頼み
ヒアリング漏れに後から気づく
要件確認のために再度ヒアリング
解決策
ヒアリング → AI分析 → モック生成を自動化
ヒアリング中の発言をそのまま文字起こし。終了後ボタン1クリックでAIが要件分析〜モック生成まで自動実行します。
🎙️ リアルタイム文字起こし
Web Speech APIでヒアリング中の発言をリアルタイムで記録。メモ不要でヒアリングに集中できます。
🤖 AI要件分析（Claude）
Playwright経由でclaude.aiに自動送信。要件仮説・不足要件をJSON形式で即生成。
✅ 不足要件の確認・回答
AIが抽出した確認事項を画面上で回答。はい/いいえ/未定ボタンや自由入力で素早く対応。
🖼️ HTML画面モック生成
回答内容を反映した4画面分の完全なHTMLモックを自動生成。そのままクライアント提示可能。
処理フロー
2ステップで完了する自動生成フロー
🎙️
ヒアリング
（音声入力）
→
ヒアリング
（音声入力）
📝
文字起こし
自動保存
→
文字起こし
自動保存
🤖 Step 1
Playwright
claude.ai
→
Playwright
claude.ai
📋
要件仮説
+ 確認事項
→
要件仮説
+ 確認事項
✅
ユーザー
回答・確認
→
ユーザー
回答・確認
🤖 Step 2
Claude CLI
HTMLモック
→
Claude CLI
HTMLモック
🖼️
4画面
HTML生成
4画面
HTML生成
Step 1（要件分析）はPlaywright経由でclaude.aiを自動操作。Step 2（HTML生成）はclaude CLIで実行。APIキー・従量課金不要で、Claude Codeのサブスクリプションのみで動作します。
💡 Artifact 問題の解決策
claude.ai はHTMLコードを「Artifact」として別パネルに分離するため、PlaywrightのDOM取得ができませんでした。
CLIフォールバック（
claude --bare -p）はプレーンテキスト出力のため Artifact が発生せず、この問題を根本解決しています。
React + TypeScript + Vite
Python FastAPI
Playwright（Chrome自動操作）
Claude CLI (claude --bare -p)
Web Speech API
主な機能
ヒアリングから提案資料まで一気通貫
音声入力
Web Speech APIでリアルタイム文字起こし。ヒアリング中に自動記録
要件仮説生成
システム名・概要・利用者・機能・画面を自動抽出
不足要件抽出
承認フロー・権限管理・通知など典型的な漏れを5〜8件検出
インタラクティブ確認
はい/いいえ/未定ボタンで素早く回答。個別削除も可能
4画面HTML生成
ダッシュボード・一覧・登録・詳細の4画面を完全なHTMLで生成
HTMLエクスポート
スタンドアロンHTMLとしてダウンロード。ブラウザで直接閲覧可
サンプル出力
実際に生成されたモック画面
以下は本ツールで実際に生成したHTMLモック画面のスクリーンショットです。ヒアリング内容に基づき、業務システムらしいデザインで4画面が自動生成されます。
📄 サンプル①：請求書自動処理システム（ABC株式会社向け）
ダッシュボード
受信請求書一覧
請求書登録
請求書詳細・承認
📊 サンプル②：AI見積もり支援システム
ダッシュボード
見積一覧
見積作成（AI支援）
見積詳細・承認
開発フロー
提案フェーズから本開発へのステップ
STEP 1
ヒアリング
音声入力でリアルタイム文字起こし。メモ取り不要
STEP 2
AI分析
Claude AIが要件仮説と不足要件を自動生成（約1〜2分）
STEP 3
要件確認
不足要件にボタンで回答。不要な質問は削除可能
STEP 4
モック生成
回答を反映した4画面HTMLを自動生成（約2〜3分）
STEP 5
クライアント提示
HTMLをダウンロードして当日中に提示。温度感を確認
STEP 6
本開発へ
合意後はAWS本開発フェーズへ移行。要件定義書も自動生成可能