個人でAI駆動開発するための開発フロー戦略

はじめに

　AIエージェントを活用しながら開発をしたいと考えております。個人開発で出来る戦略を立てつつ、ClaudeCodeのパートでは、実務を意識してコスト、利用規約、セキュリティの観点で必要と感じるところをピックアップしました。

開発方針

• 無料で置き換え可能なら代替したい
• ClaudeCodeのProプランのトークン消費を節約したい
• テキストエディタを用いて開発を進めたい

構想

• 企画、要件分析、要件定義はClaudeCodeでrequirements.mdにまとめる
• 設計はデザインツールを活用しつつ、Gemini-CLIで仕様をまとめて、デザインはdesign.mdとしてまとめる
• タスク化（機能要件）は、GitHub Issue単位でまとめる
• Issueを立ててテスト駆動開発で進める
• 実装パートは、CursorエディタのComposer 2を利用

　AIエージェントを使う場面を開発フローで示すと以下の通りです。

企画、要件分析、要件定義フェーズ

　このセクションでは、要件定義までのフェーズで有用なClaudeCodeの紹介をします。
最終的にrequirements.mdを出力することを目的とし、ここからREADME.mdを生成する方針です。

ClaudeCode

　Anthropic社が提供する日本語で話しかけるとコードを書いてアプリを作ってくれるターミナル上で動くAIエージェントです。ClaudeCode CoworkやClaudeCode RemoteなどClaudeCodeでしか出来ないサービスがあったり、ClaudeCodeの機能を拡張するSkillsのエコシステムも潤沢なので、ClaudeCode使っておけばOKです。

ClaudeCodeの料金（コスト）

　ターミナル上で動き プラン（月額定額）とAPI キー（従量課金）の2パターンで請求されます。

　定額プランに加入していても、端末側でAPIキーを設定していると二重課金発生しまうので注意が必要です。この詳細については、下記参照して設定されてないか確認しておきましょう。

　 ※ClaudeCodeのトークン消費を抑える方法については、別の記事でまとめる予定

ClaudeCode利用上の注意

　月額定額プランの場合、ClaudeCodeはターミナル上で利用しないとコンシューマー利用規約違反となります。Agent SDKやサードパーティー（Cursor、VSCode、OpenCodeなど）でClaudeCodeを利用する場合は、従量課金のAPIキーを指定することで利用可能なので注意が必要です。

ClaudeCodeで機密データを送信したくない場合

　外部に機密データを送信したくない場合は、~/.claude/settings.jsonに以下設定を入れます。

~/.claude/settings.json

{
  "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1",
}

上記の設定は、下記の設定をひとまとめにしたもので同じです。

{
  "DISABLE_TELEMETRY": "1",
  "DISABLE_ERROR_REPORTING": "1",
  "DISABLE_BUG_COMMAND": "1",
  "CLAUDE_CODE_DISABLE_FEEDBACK_SURVEY": "1"
}

※詳しくは、API プロバイダーのデフォルト動作よりClaude APIカラムの各設定参照

設計フェーズ

　AIエージェントを活用して、実装フェーズに進むように、設計書や画面遷移図を作成することを目的とする。仕様書としてドキュメント化するなら、Notionやpandocを用いる。
　このフェーズでは、requirements.mdを入力として、gemini-cliで仕様を固めていく。仕様を固めていく時は、planモードで方針を決めてmdファイルにまとめていく。アプリのスタイリングはDESIGN.mdで生成させる。

設計書作成

画面のデザイン決め

AIエージェントとの親和性の高いもの中心に以下ピックアップしました。

• Awesome DESIGN.md
  有名なサービスのデザインを参考にする。

　日本企業のデザインの場合はこちら

• Google Stitch
  Webデザインを自作する。 DESIGN.mdとしてエクスポートすることも可能。

• Aura
  真似したいデザインのサイトURLを渡すだけでDESIGN.mdを自動生成できる。

• TypeUI
  　スタイルの方向性からデザインシステムを選べるCLI。
  npx typeui.sh generate実行して、対話形式で、Webデザインを決めてSKILL.mdを生成することができる。
  Claude Code / Cursor / Codex CLI / Gemini CLIに対応している。

画面遷移図

　requirements.mdやDESIGN.mdを基に画面遷移図を作成する。

• Mermaid
  Mermaid記法に沿ってUMLを表現することができる。GitHubで管理出来て、体裁に時間をかけずに作成できる。flowchartを用いることで実現できる想定。

• Figma
  　グラフィカルに作成するならこちら。gemini-cliにrequirements.mdやDESIGN.mdを連携して、Figma MCPを利用することで作成できる。ただし、Dev Modeに入ってMCP ServerとFigmaアプリ間を連携するのに、FigmaのProfessional Planに加入する必要あり。

ER図

• Mermaid
  Entity Relationship Diagramsを用いることで実現できる想定。

• dbdiagram.io
  　視覚的に見やすいのはこちら。データベースのエンティティ関係表現のツールであるDBMLファイルがあればインポート可能。

API設計（余力あれば）

• Swagger
  　RESTful API仕様書の設計・ドキュメント化に用いる。

タスク化フェーズ

　GitHub ProjectsやGitHub Issueを用いて、Issue駆動開発することが想定されます。
ここで、設計から実装・テストに移行するにあたって、タスクの詳細化が重要になると考えております。

AI仕様駆動開発tsumiki

　クラスメソッド社が提供するAI支援とテスト駆動開発を組み合わせたオープンソースフレームワークです。
要件定義と設計をAIと徹底的に壁打ちして、タスク化以降はAIに実装を任せることができます。

実装、テストフェーズ

　GitHub上でIssueを立ててテスト駆動開発で進めます。MVPリリースできるように以下を用いる予定です。

• Cursorエディタ
  　今回用いるテキストエディタ。Freeプランで無料のAIエージェントを呼び出してコーディングが可能です。

　開発時に、Cursorエディタ固有の設定は、rulesフォルダ配下にルールを定義していく。

• Composer 2
  　Cursor無料プランで、デフォルトで選択される無料のAIエージェントです。Composer 2は、Moonshot AI社のAIエージェント KimiをベースにファインチューニングされたAIエージェントとされています。

　Cursorエディタのエージェントウィンドウ（画像の右側）で、デフォルトのAutoでComposer 2が選択され実行されます。ターミナルとテキストエディタを行き来せず利用できるため、実装する時に重宝していきます。

• Postman
  　APIテストツール。実装したWeb APIが機能しているかテスト出来ます。

最後に

　今回はテキストエディタ利用する想定で、現時点の開発フローを考えてみました。今後、Vimを扱えるようにしたいので、テキストエディタを用いずにターミナルのみで開発フローを考えていきたいと思いました。知見が集まったら、Vimを活用した開発フローを練ってみます。