Claude Code サブエージェントチュートリアル：AI チームを作る
Developers Digest のデモをコマ送りで追体験：/agents ウィザードでサブエージェントを作り、それぞれに専用ツールとシステムプロンプトを与え、調査エージェントとフロントエンドエージェントがランディングページを共同構築する過程を見届けます。
要約
- Claude Code で /agents と入力してエージェントパネルを開き、約 1 分で最初のサブエージェントを作れます。
- 各サブエージェントは .claude/agents/ の 1 つの markdown ファイルで、name・description・ツールリスト・system prompt を持ちます。
- Claude でエージェントを生成し、Firecrawl や Context7 などの MCP サーバーを含むツール権限を絞り、ターミナルの色を選びます。
- デモではウェブ調査のサブエージェントと Next.js フロントエンドのサブエージェントが、AI ニュースを調査して SaaS ランディングページをエンドツーエンドで構築します。
Claude Code NEW Sub Agents in 7 Minutes
動画ソース:Developers Digest7:10
Create subagents — Claude Code official docs
公式ドキュメント ·:Anthropic
スクリーンショットは Developers Digest のウォークスルーから。用語とファイルの規約は Anthropic の公式 sub-agents ドキュメントと照合しました。
全スクリーンショットの著作権は Developers Digest に帰属し、チュートリアルの説明のために使用しています。タイムスタンプから元動画へ戻れます。
Claude Code サブエージェントをステップバイステップで作る
パート 1 · /agents で最初のサブエージェントを作る
- 1
/agents でエージェントパネルを開く
Claude Code のセッションで /agents と入力し、Create new agent を選びます。パネルには既存のサブエージェントと、常に使える内蔵の general-purpose エージェントが表示されます。
スラッシュコマンド一つでエージェントマネージャーに到達できます。動画 0:30 を見る - 2
プロジェクトか個人かを選ぶ
ステップ 1 ではエージェントの置き場所を決めます。Project（.claude/agents/）はリポジトリ内に、Personal（~/.claude/agents/）はマシン上のすべてのプロジェクトで使えます。
プロジェクトのエージェントはリポジトリにコミットでき、個人用はどこでも使えます。動画 0:46 を見る - 3
Claude にエージェントを生成させる
ステップ 2 では Generate with Claude（推奨）か Manual configuration を選びます。動画では Next.js・Tailwind・ShadCN/UI のエキスパートであるフロントエンド担当を依頼し、Claude が設定全体を draft します。
役割を一言で説明すれば、Claude がファイルを書いてくれます。動画 1:05 を見る - 4
ツール権限を絞る
ステップ 4 ではエージェントが触れるツールをグループで選びます。All tools・Read-only tools・Edit tools・Execution tools・MCP & Other tools。個別にオフにすることも、デモのように全部渡すこともできます。
フロントエンド担当は全ツールでもよいし、バックエンド担当は DB とログだけという割り切りも有効です。動画 1:36 を見る - 5
ターミナルのカラーを決める
パレットから背景色を選びます。Red・Blue・Green・Orange・Yellow・Purple・Pink・Cyan・Automatic があり、プレビューで会話内のエージェント名チップの見た目を確認できます。
色分けすれば、どのスペシャリストが動いているか一目でわかります。動画 1:48 を見る - 6
生成されたプロンプトを確認して保存
確認画面には、委譲の判断に使われる description・完全な system prompt・警告が表示されます。デモでは description が 400 文字超と警告されています。Enter で保存します。
項目は後から編集できます。ファイルは普通の markdown です。動画 2:15 を見る
パート 2 · エージェントファイルと 2 人目のスペシャリスト
- 7
.claude/agents の markdown ファイルを見つける
サブエージェントは 1 つの markdown ファイルとして存在します。デモでは Finder でプロジェクトを開き、隠しフォルダ .claude/agents 内に nextjs-tailwind-shadcn-engineer.md がある様子を紹介しています。リポジトリにコミットできます。
最初のエージェントを保存すると、このフォルダが現れます。動画 3:10 を見る - 8
ウェブ調査のスペシャリストを追加する
同じ流れで 2 体目を作成します。今度は必要な MCP ツールだけを選びます。Firecrawl サーバーの scrape・map・search の 3 つで、カウンターは 25 中 3 を示します。
ツールを絞ると、各エージェントは集中して予測しやすくなります。動画 3:36 を見る - 9
保存前にフロントマターを確認する
確認画面には Name: web-research-specialist、Location: .claude/agents/web-research-specialist.md、3 つの mcp__mcp-server-firecrawl__ ツール、description、system prompt が並びます。
フロントマターと本文は Claude が起草し、いつでも調整できます。動画 3:42 を見る
パート 3 · 調査つきビルドを委譲する
- 10
実際のビルドを委譲する
料金表と FAQ を備えた SaaS ランディングページを依頼します。メインエリアには 2025 年 7 月の AI ニューストップ 5 を調査して表示してもらい、コードを書く前にウェブ調査をするよう指示します。
ひとつのプロンプトが、作ったばかりのチームに振り分けられます。動画 4:26 を見る - 11
Claude のオーケストレーションを見る
Claude はリクエストを複数ステップの計画に分解し、まず web-research-specialist を実行し、次に nextjs-tailwind-shadcn-engineer に構築を任せ、 todo リストで進捗を追跡します。
各フロントマターの description が委譲のタイミングを伝えます。動画 4:28 を見る - 12
調査結果を受け取る
web-research-specialist はツール使用 10 回・22.5k トークン・約 2 分で調査を終え、Claude Code は todo リストの調査項目に取り消し線を引いて次へ進みます。
最新の事実がコンテキストとしてメイン会話に流れ込みます。動画 4:38 を見る
パート 4 · 構築フェーズと成果物
- 13
フロントエンドエージェントに構築させる
nextjs-tailwind-shadcn-engineer が引き継ぎ、アプリとコンポーネントのファイルや設定を書き、npm run dev を起動します。メイン会話は marinating 状態のままです。
重いファイル編集はサブエージェント自身のコンテキストで行われます。動画 4:45 を見る - 14
完成したサイトを確認する
完成したのは Developer's Digest ランディングページです。調査した 5 つの AI ニュースによるヒーロー、3 段階の料金表、動く FAQ アコーディオン、ダークモード — 依頼どおりの仕上がりです。
スペシャリストが構築し、メイン会話は全体に集中したままでした。動画 6:12 を見る
巨大プロンプト 1 本 vs サブエージェントチーム
| 能力 | 巨大なシステムプロンプト 1 本 | サブエージェントチーム |
|---|---|---|
| コンテキスト | 1 つの会話にすべてが蓄積され、話がそれていきます。 | 各サブエージェントは自分のクリーンなコンテキストウィンドウで動きます。 |
| 指示 | すべてのルールを 1 つのプロンプトに詰め込むしかありません。 | 各エージェントに専用のシステムプロンプトを与え、育てていけます。 |
| ツール | すべてのツールが常に利用可能です。 | エージェントごとの許可リスト。Firecrawl や Context7 などの MCP サーバーも含められます。 |
| 再利用 | プロジェクト間で指示を手作業でコピペします。 | リポジトリにコミットできる、あるいはグローバルに導入できる markdown ファイル。 |