AI三刀流で生産性10倍
「AIツールが多すぎて、どれを使えばいいかわからない」
最初は私もそうでした。Claude Code、Cursor、v0、GitHub Copilot...選択肢が多すぎる。
でも半年間試行錯誤した結果、それぞれの強みを活かした使い分けに辿り着きました。今では、以前の10倍のスピードで開発できています。
この「AI三刀流」ワークフローを公開します。
私の開発スタイル
- プロダクト: Next.js + Supabase のWebアプリ
- 規模: ソロ開発
- 開発時間: 平日夜 + 週末(合計20時間/週程度)
AI三刀流の構成
| ツール | 役割 | 使用頻度 |
|---|---|---|
| v0 | UIデザイン・コンポーネント生成 | 20% |
| Cursor | 日常のコーディング・補完 | 50% |
| Claude Code | 複雑なタスク・自動化 | 30% |
それぞれ「得意なこと」が違います。
v0: UIの「0→1」を担当
強み
- デザインセンスのある画面が一発で出る
- Tailwind CSSで出力されるのでそのまま使える
- イテレーションが速い
使うタイミング
- 新しい画面を作るとき
- デザインの方向性を探るとき
- 「こんな感じの画面」を言語化できないとき
実際の使い方
プロンプト例:
ダッシュボード画面を作って。
- 左サイドバーにナビゲーション
- メインエリアに統計カード4つ
- 下にデータテーブル
- ダークモード対応
- モダンでミニマルなデザイン
出力: そのまま使えるReactコンポーネント
その後: Cursorで微調整・ロジック追加
v0の限界
- 複雑なロジックは苦手
- 状態管理は自分で書く必要あり
- バックエンド連携は別途実装
Cursor: 日常の「1→10」を担当
強み
- コード補完が賢い
- ファイルを跨いだ理解
- Tab連打で書ける快感
- Composer機能で複数ファイル同時編集
使うタイミング
- 普段のコーディング全般
- リファクタリング
- バグ修正
- テスト作成
実際の使い方
Tab補完:
// "user"と打つと...
const user = await supabase.auth.getUser();
// 自動で補完される
Composer(⌘+I):
この関数にエラーハンドリングを追加して、
失敗時はtoastで通知するようにして
Chat(⌘+L):
このコンポーネントの何が問題か教えて
Cursorの限界
- 大規模なリファクタリングは苦手
- 複数ステップのタスクは自分で分解が必要
- ターミナル操作は別途必要
Claude Code: 「10→100」の自動化を担当
強み
- ターミナル操作ができる
- 複数ステップのタスクを自律実行
- プロジェクト全体を理解している
- 「やっておいて」が通じる
使うタイミング
- 大規模リファクタリング
- テスト一括作成
- ドキュメント生成
- 定型作業の自動化
実際の使い方
大規模リファクタリング:
src/components/配下の全コンポーネントを確認して、
Propsの型定義がないものに型を追加して
Claude Codeが自動で:
- ファイルを走査
- 型定義がないものを特定
- 適切な型を推論して追加
- 変更内容を報告
テスト一括作成:
src/lib/配下のユーティリティ関数全てに
Jestのテストを作成して。
既存のテストファイルのスタイルに合わせて。
ドキュメント生成:
主要なコンポーネントのJSDocコメントを更新して、
README.mdのAPI仕様も最新化して
Claude Codeの限界
- リアルタイム補完はない
- 細かい調整はCursorのほうが速い
- 起動が必要(Cursorはエディタ一体型)
組み合わせワークフロー
新機能開発の流れ
1. v0でUI生成(10分)
「ユーザープロフィール編集画面を作って」
2. Cursorに貼り付けて調整(30分)
- Propsの型定義
- フォームバリデーション
- API連携
3. Claude Codeでテスト・ドキュメント(15分)
「この機能のテストを書いて、READMEに使い方を追加して」
合計55分 で機能完成。以前は半日かかっていた作業。
リファクタリングの流れ
1. Claude Codeで一括変更
「全ファイルでconsole.logを削除して」
2. Cursorで確認・微調整
変更内容をレビューしながら調整
3. Claude Codeでテスト実行
「全テストを実行して、失敗があれば修正して」
デバッグの流れ
1. Cursorでエラー箇所を特定
「このエラーの原因は?」
2. 必要に応じてClaude Codeで深掘り
「関連するファイルを全て確認して、問題を特定して」
3. Cursorで修正
提案された修正をTab補完で適用
生産性の変化
Before(AI導入前)
| タスク | 時間 |
|---|---|
| 新画面作成 | 4時間 |
| リファクタリング | 2時間 |
| テスト作成 | 3時間 |
| ドキュメント | 1時間 |
After(AI三刀流)
| タスク | 時間 | 削減率 |
|---|---|---|
| 新画面作成 | 30分 | 87% |
| リファクタリング | 15分 | 87% |
| テスト作成 | 15分 | 92% |
| ドキュメント | 10分 | 83% |
全体で約10倍の生産性向上。
コストと効果
月額コスト
| ツール | 料金 |
|---|---|
| v0 | $20/月 |
| Cursor | $20/月 |
| Claude Max | $100/月 |
| 合計 | $140/月 |
効果
- 週20時間の開発が週2時間分の成果
- 空いた時間でマーケティング・カスタマーサポート
- 精神的な余裕(面倒な作業はAIに任せる)
$140/月は、ソロ開発者にとって最高の投資。
使い分けチートシート
┌─────────────────────────────────────────────┐
│ 何をしたい? │
├─────────────────────────────────────────────┤
│ │
│ UIを作りたい ──────────────────→ v0 │
│ │
│ コードを書きたい ─────────────→ Cursor │
│ │
│ 複数ファイルをまとめて処理 ───→ Claude Code│
│ │
│ ターミナル操作を含む ─────────→ Claude Code│
│ │
│ 細かい調整・補完 ─────────────→ Cursor │
│ │
└─────────────────────────────────────────────┘
これから始める人へ
最小構成
まずは Cursor から始めるのがおすすめ。日常のコーディングが劇的に変わります。
段階的に追加
- Cursor(日常のコーディング)
- v0(UI作成が多いなら)
- Claude Code(自動化したいなら)
大事なこと
「全部使いこなす」必要はない。自分のワークフローに合うものを選ぶ。
まとめ
| ツール | 役割 | キーワード |
|---|---|---|
| v0 | UI生成 | 0→1、デザイン |
| Cursor | 日常コーディング | 1→10、補完 |
| Claude Code | 自動化 | 10→100、自律 |
AIツールは「競合」ではなく「チーム」。それぞれの強みを活かせば、ソロでもチームの生産性を超えられます。
関連プロダクト: Claude Code