【AI駆動開発】Gemini / Claude Codeを使ってアイデアアプリを爆速で作ってみた

ClaudeCodeとGeminiで作るWebアプリ開発 - AI主導開発の実践記録

自己紹介

Kazu Tomiと申します
普段は、IT企業で、26歳クラウドエンジニアをしております
10近くのプロダクトのクラウドインフラを正社員1＋準委任1＋ベンダー1でみているため、あまり時間の余裕がなく、年始に遊びで作ってみました
今回やったことは8割以上、GeminiやClaudeCodeにつくらせています
WebアプリやCICDは会社であまり触っていなく、知識はあるつもりでしたが、やってみるのも久々だったので、アウトプットとして記事書いてみました
（下記アプリはいつ停止するかわかりませんので、ご了承ください）

はじめに

「AIにどこまで開発を任せられるのか？」

この疑問を検証するため、ClaudeCode（Anthropic製のAI開発CLI）とGoogle Geminiを活用してWebアプリケーションを開発してみました。コーディングの約80%をAIが担当し、人間は設計判断やインフラの微調整に集中する形で進めました。

本記事では、AI主導で開発した経験と、実際の作業フロー、そして「AIができること/できないこと」の学びを共有します。

作ったもの: AI Brainstorm Board

2〜3つのキーワードを掛け合わせて、AIが革新的なビジネスアイデアを生成するWebアプリです。

デモURL

実際のアプリ

主な機能

• キーワード掛け合わせ: 「AI × 農業 × 高齢化」→ 3つの異なるアイデアを生成
• 最新トレンド調査: Tavily Search APIで最新情報を取得
• 並列処理: 3つのアイデアを同時生成（高速化）
• AIチャット: 生成されたアイデアについて対話的に深掘り
• 履歴管理: 過去のアイデアを保存・検索・評価
• PDF出力: アイデアをPDFでエクスポート

技術スタック

レイヤー	技術
フロントエンド	HTMX, Tailwind CSS, カスタムCSS
バックエンド	FastAPI (Python 3.13)
AI	Google Gemini 3.0 Pro, Tavily Search API
インフラ	AWS App Runner, ECR, Route53, Terraform
CI/CD	GitHub Actions, OIDC認証
テスト	pytest, Playwright (E2E)
パッケージ管理	uv (超高速)

ClaudeCodeとは？

ClaudeCodeは、Anthropic社のAI開発アシスタントCLIツールです。

従来のコード生成AIとの違い

機能	従来のAI（ChatGPT等）	ClaudeCode
コード生成	✅	✅
ファイル読み書き	❌	✅
Bashコマンド実行	❌	✅
Git操作	❌	✅（コミット、PR作成）
テスト実行	❌	✅
自律的な問題解決	❌	✅

ClaudeCodeは**「指示→実行→検証」を自動で回す**ため、開発速度が劇的に向上します。

開発フロー: AIと人間の役割分担

基本的な流れ

1. 人間が要件を定義
2. ClaudeCodeが実装
3. ClaudeCodeが自動テスト
4. 人間がレビュー・動作確認
5. ClaudeCodeがPR作成・マージ
6. GitHub ActionsがCI/CD実行

実際の作業比率

作業内容	AI	人間
コーディング	80%	20%
テスト作成	90%	10%
ドキュメント作成	95%	5%
設計判断	20%	80%
インフラ調整	60%	40%
デバッグ	70%	30%

開発実例: AIチャット機能の追加

実際の開発プロセスを見てみましょう。

1. 要件を伝える（人間）

ClaudeCodeに指示:

「AIチャット機能を追加してください：
- 生成されたアイデアについて対話できる機能
- FastAPIエンドポイント /chat を追加
- Geminiでチャット応答を生成
- HTMXでリアルタイム表示
- XSS対策必須（HTMLエスケープ）
- テストコード追加」

2. ClaudeCodeが自動実装

ClaudeCodeの動作ログ（要約）:

# 1. GitHub Issue作成
gh issue create --title "新機能: AIチャット機能でアイデアを深掘り"
# => Issue #29 作成

# 2. ブランチ作成
git checkout -b feature/29-chat-feature

# 3. バックエンド実装
# app/main.py に /chat エンドポイント追加
# - Pydanticモデル定義
# - Gemini API呼び出し
# - HTMLエスケープ処理

# 4. フロントエンド実装
# app/templates/index.html にチャットUI追加
# - HTMX hx-post属性
# - アニメーション効果
# - ローディング表示

# 5. テスト作成
# tests/test_chat.py 作成
# - 正常系テスト
# - XSS防止テスト
# - エラーハンドリングテスト

# 6. テスト実行
uv run pytest tests/test_chat.py -v
# => すべて成功 ✅

# 7. PR作成
git add .
git commit -m "新機能: AIチャット機能でアイデアを深掘り

- Geminiベースのチャット機能実装
- XSS対策（HTMLエスケープ）
- テストコード追加（8テスト）

🤖 Generated with Claude Code"

git push -u origin feature/29-chat-feature
gh pr create --title "新機能: AIチャット機能でアイデアを深掘り (#29)"
# => PR #30 作成

3. CI/CD自動実行

GitHub Actionsが自動的に：

• ユニットテスト実行
• E2Eテスト実行
• カバレッジ測定（85%以上）
• すべて成功 ✅

4. マージ・デプロイ（ClaudeCode）

gh pr merge 30 --squash --delete-branch
# => mainブランチにマージ

# GitHub Actionsが自動デプロイ
# 1. ECRにDockerイメージプッシュ
# 2. App Runnerに自動デプロイ
# 3. 本番環境反映 🚀

合計時間: 約30分（人間の作業は指示とレビューのみ、約5分）

ClaudeCodeの効果的な使い方

✅ 良い指示の例

# 具体的で明確
「app/main.py のgenerate_ideasエンドポイントを修正してください：
- asyncio.gatherで3つのアイデアを並列生成
- Gemini API呼び出しを3回
- エラーハンドリング追加（1つ失敗しても他は返す）
- テスト追加」

結果: ClaudeCodeが意図通りに実装

❌ 悪い指示の例

# 曖昧で不明確
「アイデア生成を改善して」

結果: ClaudeCodeが「何を改善すればいいですか？」と質問を返す

コツ

1. 具体的なファイル名・関数名を指定
2. 期待する動作を明記
3. 技術的な制約を伝える（使うライブラリ、パフォーマンス要件等）
4. テストの必要性を明示

Gemini活用: AIでAIを作る

このプロジェクトの面白い点は、Geminiを使ってアイデア生成AIを作ったことです。

プロンプト設計（ClaudeCodeと共同）

# app/main.py（ClaudeCodeが実装）

prompt = f"""あなたは革新的なビジネスアイデアを生成するAIです。

# 入力キーワード
- {keyword1}
- {keyword2}
{f"- {keyword3}" if keyword3 else ""}

# 最新トレンド情報（Tavily検索結果）
{tavily_results}

# タスク
以下の形式で2026年以降に実現可能なアイデアを1つ生成してください。

[SUMMARY]
15文字以内のプロジェクト名

[DETAIL]
【プロジェクト名】プロジェクト名（15文字以内）
【課題】どんな課題を解決するか（50文字）
【仕組み】具体的な仕組み（100文字）
【効果】期待される効果（50文字）
【ターゲット】想定ユーザー（30文字）
"""

ClaudeCodeによるプロンプト改善サイクル

1. 人間: 「プロンプトを改善して構造化された出力にして」
2. ClaudeCode: プロンプト修正 + パース処理実装
3. 人間: 動作確認 → 「要約が長すぎる、15文字以内に」
4. ClaudeCode: プロンプト再修正
5. 人間: 動作確認 → OK ✅

このように、フィードバックループを回して品質向上できます。

人間が手直しした部分（正直ベース）

AIが完璧ではないため、以下は人間が調整しました。

1. インフラ設定の微調整（40%は手動）

ClaudeCodeの実装:

# terraform/main.tf
resource "aws_apprunner_service" "app" {
  cpu    = "256"  # 0.25 vCPU
  memory = "512"  # 0.5 GB
}

人間の調整:

• ヘルスチェックパス調整（/ → /health）
• タイムアウト値の最適化（30秒 → 60秒）
• 環境変数のParameter Store参照方法

2. CSS微調整（アニメーションタイミング）

ClaudeCodeの実装:

.card-hover {
    transition: all 0.3s ease;
}

人間の調整:

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.2s ease;
    /* transformとbox-shadowで別々のタイミング */
}

3. Geminiプロンプトの細かな調整

ClaudeCodeの初期プロンプト:

• 出力が安定しない（たまに形式が崩れる）

人間の調整:

• 「必ず【】を使ってください」を強調
• サンプル出力を2つ追加
• 「絵文字は使わない」を明記

結果: 安定した出力に改善

4. E2Eテストの待機時間調整

ClaudeCodeの実装:

# tests/test_e2e.py
await page.wait_for_timeout(2000)  # 2秒固定

人間の調整:

# 要素が実際に表示されるまで待つ
await page.wait_for_selector(".idea-card", timeout=10000)

理由: ネットワーク環境によって生成時間が変動するため

ClaudeCodeができること/できないこと

✅ ClaudeCodeが得意なこと

カテゴリ	具体例
実装	エンドポイント追加、ビジネスロジック実装
テスト	ユニットテスト、E2Eテスト、モック作成
リファクタリング	コード整理、関数分割、命名改善
ドキュメント	README、API仕様書、コメント
Git操作	コミット、ブランチ作成、PR作成
デバッグ	エラーログ解析、修正提案
ベストプラクティス	セキュリティ対策、エラーハンドリング

❌ ClaudeCodeが苦手なこと（人間が必要）

カテゴリ	理由
創造的な設計判断	「どんなアプリを作るか」は人間が決める
UI/UXの微調整	配色、余白、アニメーションタイミング
ビジネス要件理解	ステークホルダーとのコミュニケーション
複雑なバグの根本原因	環境依存、競合状態など
インフラの最適化	コスト、パフォーマンス、セキュリティのバランス

開発統計

期間と工数

• 総開発期間: 約3週間
• 人間の実作業時間: 推定10〜15時間
• ClaudeCodeとの対話: 約50回のセッション

コミット統計

# 総コミット数
$ git log --oneline | wc -l
34

# ClaudeCodeによるコミット（🤖マーク付き）
$ git log --oneline | grep "🤖" | wc -l
31  # 約91%

Issue/PR

• Issue: 18件（すべてClaudeCodeが作成）
• PR: 18件（すべてSquash merge）
• 平均マージ時間: 30分以内

テストカバレッジ

• ユニットテスト: 15テスト
• E2Eテスト: 5テスト（Playwright）
• カバレッジ: 85%以上
• すべてClaudeCodeが作成

運用コスト詳細

開発フェーズのコスト（3週間）

AI API使用料

サービス	用途	使用量	料金
ClaudeCode	開発アシスタント	約50セッション	$20〜30
		平均1セッション30分
Gemini API	開発中のテスト	約200リクエスト	$0
		（無料枠: 150万トークン/月）	（無料枠内）
Tavily API	トレンド調査テスト	約50リクエスト	$0
		（無料枠: 1000リクエスト/月）	（無料枠内）

人件費換算

項目	従来の開発	AI主導開発	削減効果
開発時間	60時間	15時間	75%削減
時給@3,000円	¥180,000	¥45,000	¥135,000削減
+ AI利用料	-	$20〜30 (約¥3,000)
実質コスト	¥180,000	¥48,000	¥132,000削減

開発フェーズ合計: 約$20〜30（¥3,000〜4,500）

運用フェーズのコスト

月間コスト（想定: 月100ユーザー、300アイデア生成）

サービス	構成	詳細	料金/月
AWS App Runner	0.25 vCPU	プロビジョニング（アイドル）: 約690時間	$2.41
	0.5 GB RAM	メモリ: 0.5GB × $0.007 × 690h
		アクティブ: 約30時間	$0.59
		(0.25×$0.064 + 0.5×$0.007) × 30h
		App Runner合計	$3.00
Amazon ECR	500MB	コンテナイメージ保存	$0.05
		@$0.10/GB/月	（無料枠）
Route53	1ゾーン	ホストゾーン	$0.50
		クエリ料金（少量）	$0.00
Gemini API	300生成	300アイデア × 3 = 900回	$0.00
		約72万トークン/月	（無料枠内）
Tavily API	300検索	300リクエスト/月	$0.00
		（無料枠: 1000/月）	（無料枠内）

月間合計: 約$3.55（¥533）

年間コスト

項目	月額	年額
インフラ	$3.55	$42.60
AI API	$0	$0（無料枠内）
合計	$3.55	約$43（¥6,450）

スケール時のコスト試算

シナリオ1: 月1,000ユーザー（3,000アイデア生成）

サービス	変化	料金/月
App Runner	CPU使用率↑（0.5 vCPU）	$8〜10
Gemini API	720万トークン	$0〜2
	（無料枠超過の可能性）	（Gemini 1.5 Flash検討）
Tavily API	3,000リクエスト	$10
	（有料プラン必須）	（Basic: $50/5k req）

月間合計: 約$18〜22（¥2,700〜3,300）

シナリオ2: 月10,000ユーザー（30,000アイデア生成）

サービス	変化	料金/月
App Runner	1 vCPU, 2 GB（スケールアップ）	$30〜40
Gemini API	7,200万トークン	$10〜15
	Gemini 1.5 Flash推奨	（Pro比80%削減）
Tavily API	30,000リクエスト	$200
	（Pro: $200/50k req）
CloudFront	CDN追加	$5〜10
RDS	SQLiteから移行	$15〜20

月間合計: 約$260〜285（¥39,000〜43,000）

コスト最適化のポイント

1. AI APIの最適化

Gemini API:

# ❌ コスト高: Gemini 3.0 Pro
# 入力: $1.25/1M tokens
# 出力: $5.00/1M tokens

# ✅ コスト削減: Gemini 1.5 Flash
# 入力: $0.075/1M tokens（94%削減）
# 出力: $0.30/1M tokens（94%削減）
# 性能: 軽量タスクには十分

Tavily API:

# キャッシュ戦略
# - 同じキーワード組み合わせは24時間キャッシュ
# - API呼び出し削減: 約50%

2. インフラの最適化

App Runner:

• アイドル時間のスケールダウン設定
• リクエスト数に応じた自動スケーリング
• 推定削減効果: 約30%

CloudFront CDN（将来検討）:

• 静的アセットのキャッシュ
• App Runnerへの負荷軽減
• 推定削減効果: 約20%

3. データベース導入（将来検討）

現在: データベースなし:

• セッションベースの一時保存
• コスト: $0
• 制約: 永続化なし

将来: RDS MySQL導入（履歴永続化が必要な場合）:

• db.t4g.micro: $12.41/月
• Multi-AZ: $24.82/月（高可用性）

コスト比較: 従来の開発 vs AI主導開発

初期開発コスト

項目	従来の開発	AI主導開発	削減額
開発時間	60時間	15時間	-45時間
人件費@¥3,000/h	¥180,000	¥45,000	-¥135,000
AI利用料	¥0	¥3,000	+¥3,000
インフラ初期	¥10,000	¥0	-¥10,000
	（サーバーセットアップ）	（Terraform自動化）
合計	¥190,000	¥48,000	-¥142,000

年間運用コスト（100ユーザー想定）

項目	従来の開発	AI主導開発	差額
インフラ	¥72,000	¥6,450	-¥65,550
	（EC2 t3.small）	（App Runner）
メンテナンス	¥120,000	¥30,000	-¥90,000
	（月10時間@¥10,000）	（月2.5時間@¥12,000）
監視・運用	¥24,000	¥0	-¥24,000
	（CloudWatch等）	（App Runner自動）
合計	¥216,000	¥36,450	-¥179,550

3年間のTCO（Total Cost of Ownership）:

• 従来の開発: ¥190,000 + ¥216,000×3 = ¥838,000
• AI主導開発: ¥48,000 + ¥36,450×3 = ¥157,350
• 削減効果: ¥680,650（81%削減）

実際の運用実績（1ヶ月目）

API使用量

API	リクエスト数	トークン数	料金
Gemini	127回	約10万トークン	$0（無料枠）
Tavily	42回	-	$0（無料枠）

インフラコスト

サービス	実績	料金
App Runner	稼働720時間（アクティブ約25時間）	$2.97
ECR	498MB	$0（無料枠）
Route53	1ゾーン	$0.50

実績合計: $3.47（¥521）

まとめ: コストメリット

初期開発

✅ 開発コスト約75%削減（¥190,000 → ¥48,000）
✅ 開発期間3〜5倍高速化（60時間 → 15時間）
✅ インフラ初期投資ゼロ（Terraform自動化）

運用フェーズ

✅ 月額約$3.5（¥525）で運用可能
✅ AI APIは無料枠内で完結（月100ユーザーまで）
✅ メンテナンスコスト75%削減（ClaudeCodeでメンテナンス自動化）

スケール時

✅ 段階的なコスト増加（従量課金）
✅ 最適化余地が大きい（API切り替え、キャッシュ等）
✅ 固定費が少なく低リスク

学びと気づき

1. 開発速度が3〜5倍に

従来の開発（個人開発）:

• 設計: 2時間
• 実装: 8時間
• テスト: 3時間
• デバッグ: 2時間
• 合計: 15時間

ClaudeCodeとの開発:

• 設計: 1時間（人間）
• 実装: 1時間（ClaudeCode: 自動）
• テスト: 0.5時間（ClaudeCode: 自動）
• デバッグ: 0.5時間（ClaudeCode: 主導）
• 合計: 3時間

2. コード品質が安定

• 一貫したコーディングスタイル
• セキュリティベストプラクティス自動適用（XSS対策、SQLインジェクション対策等）
• 包括的なテスト（正常系・異常系・エッジケース）
• 適切なエラーハンドリング

3. ドキュメントが充実

ClaudeCodeは自動的に以下を生成：

• README.md
• API仕様
• テストガイド
• GitHub運用フロー
• 開発履歴（CLAUDE.md）

人間だけだと面倒で後回しにしがちな作業を自動化できたのが大きい。

4. AI活用のコツ

(1) 明確な指示

❌ 「エラーを修正して」
✅ 「app/main.py:42 のTypeErrorを修正。Noneチェックが不足しています」

(2) 段階的に進める

❌ 一気に全機能実装依頼
✅ 機能ごとに分割 → 動作確認 → 次の機能

(3) フィードバックループ

指示 → 実装 → 動作確認 → フィードバック → 改善

(4) AIを信頼しつつ検証

• コードレビューは人間が必ず実施
• セキュリティ、パフォーマンスは特に注意

5. 意外な発見: AIは「学習」する

同じプロジェクト内で複数回の対話を重ねると、ClaudeCodeは以前のフィードバックを学習します。

例:

1回目: 「テスト追加」 → 基本的なテストのみ
↓
フィードバック: 「エッジケースも追加して」
↓
2回目: 「別の機能のテスト追加」 → 最初から包括的なテストを作成

今後の展望

機能拡張（ClaudeCodeと共同予定）

• ダークモード対応
• ユーザー認証機能
• アイデアのタグ付け・分類
• アイデア評価・投票システム
• マルチ言語対応

技術的改善

• フロントエンド: React/Vueへの移行検討
• バックエンド: GraphQL API化
• インフラ: CloudFront CDN導入
• AI: Gemini 4.0への対応

すべてClaudeCodeに指示して実装予定です。

まとめ

AI主導開発で得られたもの

✅ 開発速度 3〜5倍
✅ 高品質なコード（ベストプラクティス自動適用）
✅ 包括的なテスト（カバレッジ85%以上）
✅ 充実したドキュメント
✅ 完全なCI/CD（GitHub Actions自動化）

人間の役割の変化

従来: コーディング、テスト、デバッグ、ドキュメント作成
AI時代: 設計判断、要件定義、レビュー、最終調整

人間はより創造的な作業に集中できる

最後に

ClaudeCodeとGeminiを使った開発は、単なる「コード生成」ではなく真のペアプログラミングでした。

• 人間: 創造性、ビジネス理解、設計判断
• AI: 実装、テスト、ドキュメント、デプロイ

この役割分担により、個人開発者でも企業レベルのアプリケーションを短期間で構築できます。

AIツールは日々進化しています。ぜひ皆さんも、AI主導開発にチャレンジしてみてください。

参考リンク

• リポジトリ: https://github.com/Tomizawa-Kazu/ai_brainstorm
• ClaudeCode: https://claude.com/claude-code
• Google Gemini API: https://ai.google.dev/
• Tavily Search API: https://tavily.com/
• FastAPI: https://fastapi.tiangolo.com/
• HTMX: https://htmx.org/

付録: ClaudeCode活用例

実際に使った指示の例を紹介します。

機能追加

「3つのアイデアを並列生成する機能を追加してください：
- asyncio.gatherで並列処理
- Gemini API呼び出しを3回
- カード表示を横並び（Tailwind CSS grid）
- ローディング状態表示
- テスト追加」

バグ修正

「ローディングオーバーレイが消えない問題を修正してください：
- HTMXインジケーターのCSS確認
- .htmx-requestクラスの動作確認
- display: noneが正しく適用されているか検証」

インフラ構築

「AWS App RunnerデプロイのTerraformを作成してください：
- ECRリポジトリ
- App Runnerサービス（0.25 vCPU, 0.5 GB）
- Parameter Store参照（APIキー）
- GitHub Actions OIDC認証」

ドキュメント作成

「README.mdを更新してください：
- セットアップ手順
- Docker Compose使用方法
- API仕様
- テスト実行方法
- デプロイ方法」

これらの指示だけで、ClaudeCodeが自律的に実装・テスト・ドキュメント化を完了しました。

最後に

下記勉強になりました

1. CI/CDの楽さ
2. AI駆動開発の面白さ
3. 細かな部分は人での修正するべき

CI/CDはやはり楽でした。
マージすると自動でデプロイまで持っていけるのは、とても楽です。（会社だと政治的な事情で手動でやっているものがかなり多いです。。）

AI駆動開発は面白いですね。
年始の余裕のある時間で、ゲームしながら、裏でコードを書かせて、ゲームの合間に動作確認できるのは、とても楽しかったです
（AI・ヒト）設計　→　（AI）コード書かせる　→　（ヒト）ゲーム　→　（AI）動作確認・修正　→　（ヒト）ゲーム　→　（AI）動作確認　→　（AI）Git運用　→　（GithubActions）CI/CD　→　（ヒト）動作確認

でも人の手での修正が必要だったりしました
特にインフラ部分は、思い通りの挙動しなかったり、セキュリティの点から、少しは触りました
app runnerなども私の知識で選定しました（ECSはVPCやLB、Natでコストが高くつきそうだったので、、、）

ここまで読んでいただきありがとうございました