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が向いているのは「動かす・作る」作業です。ファイルを操作して実際に成果物を作る仕事はこちらが速いです。「Claude.aiで考えを整理→CLAUDE.mdに記録→Claude Codeで実行」というセットで使うのがおすすめです。
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で修正 → 確認」のサイクルで改善できます。
確認チェック
講座を終える前に、以下の項目を確認しましょう。