Claude.aiとClaude Codeの分業フロー
上級設計はClaude.ai・実装はClaude Codeという分業パターンを実践して生産性を最大化します。
座学
この講座で学べること
- ✓Claude.aiが「考える・相談する」作業に向き、Claude Codeが「動かす・作る」作業に向くことを理解する
- ✓Claude.aiで企画→CLAUDE.mdに記録→Claude Codeで実装の分業フローを体験する
- ✓2つのAIをCLAUDE.mdを介してシームレスに連携させる実践的なワークフローを身につける
- ✓改善サイクル（Claude.aiで相談→Claude Codeで修正→確認）を繰り返す方法を把握する
Claude.ai（ブラウザ版）とClaude Code（CLI版）は同じClaudeモデルを使っていますが、得意なことが違います。Claude.aiはブラウザ上で動き、ファイルのアップロードや画像の解釈が得意で、チャット形式でじっくり対話しながら考えを深めるのに向いています。Claude Codeはターミナルで動き、ファイルの読み書き・コマンド実行・Git操作を自律的にこなすのが得意です。
Claude.aiが特に向いているのは「考える・相談する・設計する」作業です。新しいアイデアの壁打ち・要件の整理・技術選定の相談・構成の検討など、結論が決まるまで対話しながら進める作業に最適です。画像やPDFをアップロードして内容を分析させることもでき、視覚的な情報が必要な設計フェーズで活躍します。
Claude Codeが特に向いているのは「動かす・作る・実行する」作業です。設計が決まったらファイルを書いてコマンドを実行して成果物を作り上げる、という実装フェーズはClaude Codeの方が圧倒的に速く進みます。ターミナルを離れずに複数ファイルを横断した変更ができる点もClaude Codeの強みです。
最も効果的なワークフローは「Claude.aiで考えを整理→CLAUDE.mdに記録→Claude Codeで実行」という3ステップの分業です。Claude.aiでの会話で決まった設計・ルール・方針をCLAUDE.mdにメモとして残し、Claude Codeを起動したときにそのメモを読み込ませます。こうすることで2つのAIがシームレスに連携し、「考える工程」と「作る工程」をそれぞれの得意分野で分担できます。
Claude.ai と Claude Code の使い分け
Claude.ai（ブラウザ）
- ▶アイデアの壁打ち・発散
- ▶文章の構成・企画立案
- ▶調査・質問への回答
- ▶設計の相談・レビュー
Claude Code（CLI）
- ▶コードの実装・修正
- ▶ファイル操作・自動化
- ▶テスト実行・デバッグ
- ▶Git操作・デプロイ
理想的な分業フロー例
Claude.aiで設計
「どんな構成にする？」
仕様・指示をまとめる
CLAUDE.mdやメモに記録
Claude Codeで実装
「実装して」と指示
💡 コツ：思考・設計はClaude.ai、実行・実装はClaude Codeと明確に使い分けると効率が上がります。
実践手順
Claude.aiで企画を相談する
今回は「自己紹介ページを作る」という小さなプロジェクトで分業フローを体験します。ブラウザでClaude.aiを開いて以下を相談してください（Claude Codeは使いません）。
自己紹介のWebページを作りたいです。
シンプルで見やすいデザインにしたいのですが
どんな内容を載せるとよいか
どんな構成にするとよいかを
初心者向けにアドバイスしてくださいClaude.aiとの会話で「載せるべき内容のリスト」「ページの構成案」「デザインの方向性」を決めてください。
フォルダを準備してClaude Codeを起動する
Claude.aiで決まった内容をCLAUDE.mdにメモしてClaude Codeに引き継ぎます。まず作業フォルダを作ってClaude Codeを起動してください。
PowerShell で実行
cd $env:USERPROFILE\Desktop
mkdir mypage-project
cd mypage-project
claude設計内容をCLAUDE.mdに記録する
起動したら設計内容をCLAUDE.mdに記録します。
CLAUDE.mdを作成して以下を書いてください：
# 自己紹介ページ 設計メモ
## 載せる内容
- 名前
- 一言自己紹介
- 趣味3つ
- Claude Codeを使い始めた理由
## デザイン方針
- シンプルで読みやすい
- 白背景・黒文字
- スマホでも見やすい
## ファイル構成
- index.html（メインページ）
- style.css（デザイン）Claude Codeで実装して改善サイクルを体験する
CLAUDE.mdの設計をもとに実装を依頼します。完成したページを見て気になる点があれば、再びClaude.aiで相談してClaude Codeで修正するサイクルを体験してください。
CLAUDE.mdの設計メモを読んで
自己紹介ページを作成してくださいClaude CodeがCLAUDE.mdを読んでindex.htmlとstyle.cssを作成します。作成後にブラウザで開いて確認してください。気になる点は「Claude.aiで相談 → メモを更新 → Claude Codeで修正 → 確認」のサイクルで改善できます。
確認チェック
講座を終える前に、以下の項目を確認しましょう。
よくある質問
Q. Claude.aiとClaude Codeで同じことを頼んだら結果が違いました
A. インターフェースが違うため、コンテキストの持ち方が異なります。Claude Codeはターミナルで動きプロジェクトのファイルやCLAUDE.mdを読み込んだ状態で動作するのに対し、Claude.aiは会話履歴だけをコンテキストとして使います。同じモデルでも与えられる情報が違うため結果が異なることがあります。
Q. Claude.aiでの相談内容をCLAUDE.mdに記録するベストな方法は？
A. Claude.aiの会話の最後に「今の会話で決まった内容をCLAUDE.md用にまとめてください」と頼むと、そのままCLAUDE.mdに貼り付けられる形式で整理してくれます。その内容をコピーしてCLAUDE.mdに追記し、Claude Codeを起動すれば引き継ぎ完了です。
Q. Claude.aiとClaude Codeの課金は別々ですか？
A. はい、別々です。Claude.aiはClaude.aiのサブスクリプション（Pro/Max）、Claude CodeはClaude Codeのサブスクリプション（Pro/Max）と分かれています。ただし同じAnthropicアカウントでどちらも管理されます。両方使う場合はそれぞれのプランに加入する必要があります。