AI駆動開発10の実践テクニック
スナガク が個人開発アプリ「FocusOne」（Next.js + Hono + Cloudflare）をAIフル活用で開発した実践記録。9割をAIに任せた体験から得た10のテクニックをまとめている。
10の実践テクニック
1. デザインをAIで開発する
- Figma Make でプロトタイプ → Claude Code frontend-designプラグイン で実装
- 「実装→Figmaに落とし込む」逆引きも可能（スクリーンショット添付で再現）
- メリット: デザインから実装への「翻訳コスト」がほぼゼロ
2. SDD（仕様駆動開発）で実装する
- AIと壁打ちして仕様書を作成 → cc-sdd で実装
- 要件定義自体もAIと共に作成する（曖昧な要件→曖昧な仕様→バイブコーディング失敗の連鎖を防ぐ）
- 詳細: SDD（仕様駆動開発）
3. AIにレビューと動作確認をさせる
- Playwright MCP で動作確認をAIに委譲
- アクセシビリティ専用・パフォーマンス専用などUIレビュー専用サブエージェントを作成
- 「気になるポイントをAIにレビューさせる」という意識が重要
4. E2Eテストを整備する
- Playwright Test Agent でテスト定義
- Claude Codeで上手くいかない場合は Codex に引き継ぐ
- Skills にE2EテストTipsをまとめ（test-id付与、DOM情報先取得など）
5. 複数モデル・ツールを使い分ける
| ツール | 主な用途 |
|---|---|
| Claude Code | メイン実装 |
| Codex | E2Eテスト作成・長時間タスク放置 |
| Cursor | デバッグ、デザイン細部修正 |
| Figma Make | デザイン・画面モック作成 |
6. リファクタリングは後で、ただし定期的に行う
- スピード優先で機能開発 → 一定期間ごとにリファクタリング時間を確保
- GitHub Actions でリファクタリング候補レポートを定期出力（
/refactoring-scanスキル） - E2Eテストがあれば大規模リファクタリングも安全に実行可能
7. AIがハマりがちな領域は人間が対応する
- 認証周りの実装（セキュリティ上のセンシティブさ）
- 0→1でエンドポイントを作成する場合（既存パターンがない）
- 型エラーを
asで誤魔化す → バックエンド設計は人間が担当する判断に至った
8. 常にAIの環境整備を行う
- 些細なことでもすぐに CLAUDE.md や Skills に追記
- 「毎回同じ指示」→ Skills化 / 「AIがよく間違える」→ CLAUDE.md修正 のサイン
- 不要なコンテキストを削除してコンパクションを防ぐことも同じくらい重要
9. タスクを非同期で完全に放置できるようにする
- AIが作業中は別の思考作業に集中する
- ターミナルのみ表示（エディターを見るとコードが気になって集中が切れる）
- ペイン分割ターミナル（Ghostty / tmux）推奨
10. 負債を理解した上でタスクを進める
- 負債を「認識した上で意図的に進める」姿勢
- Domainモデルを作り込むことで影響範囲を局所化
- リファクタリングのタイミング目安: 整合性が大変になった・デバッグが辛くなった・同じバグが頻発
得られた知見
- 「試作」→「本番」を1〜2日で実現（機能を思いついたら翌日リリース）
- バイブコーディングの成否は仕様の精度に直結する
- コードレビューなしでも動作は担保されるが、業務ロジックの分散が負債になる
- 実装意図をコメントで残させる ことでレガシーコード化を防ぐ
- 現段階では使い手の設計力・アーキテクチャ知識が開発品質に直結する