AI がコードを書いてくれる時代になったとはいえ、「これ作って！」とポンと投げるだけでは、なかなか思い通りの結果が得られませんよね。
今回は、Claude を使って効率的に高品質なコードを生成するための、実際に使えるワークフローをご紹介します。
なぜ適当なプロンプトでは うまくいかないのか
多くの開発者が体験しているように、「〇〇 を作って」という一言だけでは、期待する結果を得るのは難しいものです。これには理由があります
- 文脈がない – AI は あなたの頭の中にある全体像を理解できません。何を作りたいのか、どんな技術を使いたいのか、どんな制約があるのか、すべて伝える必要があります。
- 要件があいまい – 具体的な仕様や制約が明確でないと、AI も どう答えていいかわからなくなってしまいます。
- いきなり複雑すぎる – 大きなプロジェクトを一度に処理するのは、AI にとっても人間にとっても複雑すぎます。
効果的なワークフローの 4 つのステップ
1. 基本設計書を マークダウンで作成
まず最初に、作りたいものを明確にするための設計書を マークダウン形式で作成します。これが すべての基盤となります。
# プロジェクト名
## 概要
- 何を作るのか
- 主な機能
- 想定ユーザー
## 技術スタック
- フロントエンド: React, TypeScript
- バックエンド: Node.js, Express
- データベース: MongoDB
- デプロイ: Vercel
## 機能要件
### 必須機能
1. ユーザー認証
2. データの CRUD 操作
3. レスポンシブデザイン
### あったらいい機能
1. リアルタイム通知
2. データエクスポート機能
## 制約・前提条件
- 予算: 無料プランの範囲内
- 開発期間: 2週間
- パフォーマンス要件: 初期表示 3秒以内
この設計書があることで、AI に対して明確な方向性を示すことができます。
人間同士でも、要件定義書がないプロジェクトは うまくいかないですよね。それと同じです。
2. Claude プロジェクトで ナレッジ管理
Claude（Web版）で新しいプロジェクトを作成し、先ほど作った基本設計書を ナレッジとして アップロードします。これにより
- 一貫性が保たれる – すべての会話で同じ前提条件を共有できます
- 文脈が引き継がれる – 過去の会話内容を踏まえた提案が可能になります
- 品質が向上する – 設計意図に沿ったコード生成ができます
プロジェクト機能を使うことで、毎回 長い説明をしなくても、Claude が あなたの作りたいものを理解してくれるようになります。
3. 開発途中で ディレクトリ構成を更新
開発が進むにつれて、現在のディレクトリ構成やプロジェクトの状態を定期的に ナレッジに追加していきます。
project-root/
├── src/
│ ├── components/
│ │ ├── Header.tsx
│ │ └── Footer.tsx
│ ├── pages/
│ │ ├── Home.tsx
│ │ └── About.tsx
│ ├── hooks/
│ │ └── useAuth.ts
│ └── utils/
│ └── api.ts
├── public/
├── package.json
└── README.md
この段階的な更新により、AI は
- 既存のコード構造を理解できる
- 命名規則や設計パターンを把握できる
- 新しい機能を既存コードと うまく組み合わせて提案できる
これをやらないと、AI は毎回 ゼロから考えることになってしまい、一貫性のないコードが生成されがちです。
4. MCP で Claude Desktop と Claude Code を連携
最後に、MCP（Model Context Protocol）を使って Claude Desktop と Claude Code を連携させます。これが今回の ワークフローの キモとなる部分です。
セットアップの流れ：
- Claude Desktop をインストール
- Node.js をインストール
- MCP サーバー（filesystem）をインストール
- Claude Desktop の設定ファイルを作成
- Claude Desktop で プロンプトを作成
- Claude Code で実際のコード生成・実装
この連携により
- シームレスな開発体験 – 設計から実装まで一貫した流れで進められます
- リアルタイムフィードバック – 実装結果を すぐに確認できます
- 効率的な反復開発 – 修正・改善の サイクルが高速化されます
実践例：Todo アプリを作ってみる
このワークフローを使った具体例を見てみましょう。
基本設計書（抜粋）：
# シンプル Todo アプリ
## 技術スタック
- React + TypeScript
- Tailwind CSS
- Local Storage
## 機能要件
- タスクの追加・削除・編集
- 完了状態の切り替え
- フィルタリング機能（全て・未完了・完了済み）
段階的な実装：
- プロジェクト構造の作成
- 基本コンポーネントの実装
- 状態管理の追加
- スタイリングの適用
- 機能拡張
各段階で現在の状態を ナレッジに更新し、次の開発ステップを AI に相談することで、一貫性のある高品質なコードが生成されます。
このワークフローの うれしいポイント
開発効率が大幅アップ
- 設計から実装まで スムーズな流れ
- 手戻りが大幅に減る
- 自動化による時間短縮
コード品質の向上
- 設計意図との整合性が取れる
- 一貫した命名規則・構造になる
- ベストプラクティスが自然と適用される
学習効果も期待できる
- AI の提案から新しい技術を学べる
- 設計思考が身につく
- 段階的に理解が深まる
お財布にやさしい
従来の API 経由での利用だと従量課金で コストが かさみがちですが、MCP を使った場合は Claude の月額料金（20ドル）の範囲内で利用できるので、安心して いろいろ試せます。
気をつけるポイントと コツ
設計書は ちょうどいい塩梅で
過度に詳細な設計書は柔軟性を失い、簡潔すぎる設計書は方向性を見失います。「これくらいなら伝わるかな」という バランスを保つことが重要です。
こまめな ナレッジ更新が重要
開発が進むにつれて、必ず プロジェクトの現状を ナレッジに反映させましょう。古い情報に基づいた提案は、開発を混乱させる原因となります。
小さく始めて 段階的に
一度に すべてを実装しようとせず、小さな機能単位で段階的に進めることで、問題の早期発見と修正が可能になります。
まとめ
Claude を使った効率的なコード生成は、適切なワークフローと準備によって実現されます。
基本設計書の作成、ナレッジ管理、段階的な更新、そして MCP 連携という 4つのステップを踏むことで、単発のプロンプトでは得られない高品質で一貫性のあるコードを生成できます。
最初は設定が少し面倒に感じるかもしれませんが、一度 この流れを覚えてしまえば、開発効率が劇的に向上するはずです。
ぜひ次のプロジェクトで試してみてください！
