作るアプリケーションの概要
今回作るアプリケーションは「AI Writing Tool」です。ブログ記事を生成したり、メールの返信文を考えてくれたり、記事の要約をしてくれたりする、文章に関連するAI Webアプリケーションを作っていきます。
Spec Driven Development（仕様駆動開発）
Claude Codeでバイブコーディングするときに一番重要なのが、最初にしっかりと要件を固める・仕様を固めるというところです。これを「Spec Driven Development（SDD）」と言ったりします。
特に中規模・大規模のアプリケーションだと、最初にちゃんと要件と仕様が決まっていないとClaude Codeがちゃんと認識してくれません。どういったアプリを作りたいのかがぼやけた状態で開発することになるので、最初はしっかりと計画を立てて要件を伝えることが大事になります。
ただし、個人でアプリを作っていく場合は要件が最初からガチっと決まっているわけではないので、まずは簡単にClaude Codeと壁打ちをしていきましょう。
Planモードを使う
最初の壁打ちには「Planモード」を使います。Shift+Tabを2回押すと、Planモードがオンになります。Planモードにすると、しっかりと計画を立てた上で実行することができるので、要件を詰めるときはこのモードを使いましょう。
AIにヒアリングしてもらう
要件を伝える際は、AIに質問させるというやり方が非常に重要です。Claude Codeには「Ask Question Tool」というツールがあり、これを発動してもらうことで壁打ちができます。
まずはざっくりと作りたいものを伝えます。例えば以下のような内容です。
- 生成AIを使ったAIライティングツールを作りたい
- テーマを提案したらブログ記事を執筆してくれる
- メールを書いてくれる
- 記事の要約をしてくれる
- 知りたいことがあれば自分に質問してください
このようにAIにヒアリングしてもらうことで、仕様策定・開発がよりやりやすくなります。
AIからの質問に答える
AIから質問が来るので、それに回答していきます。今回の例では以下のように答えました。
- ターゲットユーザー: 自分用（認証やデータベース、決済などの難しい機能は今回は省略）
- 開発経験: 中級者
- AI API: Gemini API（無料枠で使いたい）
- フレームワーク: Next.js
- データベース: 最初はDB・認証なしでシンプルに始める
なお、Opus 4.6のような高性能モデルを使いたい場合はClaude APIに課金する必要があります。AI系のツールは従量課金制でコストがかかるため、製品としてリリースする場合はサブスク課金でクレジットを一定数付与して赤字が出ないように設計することが大事です。
プランの保存先について
AIが立てたプランがどこに記録されているか確認しましょう。プランはセッションログ（会話のトランスクリプト）に保存されていますが、セッション内のコンテキスト内にあるだけでファイルとしては保存されていません。
保存方法は2つあります。
- メモリ機能: プロジェクトの背景や意思決定の要約を簡潔に保存したいときに使えます
- Docsディレクトリ: 実装プランの全文を残すのに最適です
今回のレベルのアプリであれば必ずしも必要ではありませんが、メモリとDocsの両方に残しておくことにしました。
開発をスタートする
プランを確認してOKを出すと、プロジェクトの開発とドキュメントの保存をパラレル（並行）で進めてくれます。Claude Codeが自動でアプリ完成まで実装してくれるので、許可を出しながら進めていきましょう。
