12ページのリニューアルを集中作業フェーズ実質4日間で完了できた理由のひとつが、AI を複数名のチームとして動かしたことです。デザイン確認・コードレビュー・コンテンツチェックを同時進行させる体制を、CLAUDE.md と .claude/agents/ フォルダだけで構築しました。
前回は Skill・Hook・MCP で Claude Code の「手足」を拡張する方法を紹介しました。今回はさらに踏み込んだ話です。Claude Code には複数の AI エージェントを同時に動かす仕組みがあります。弊社ではこの仕組みを使い、PM・コーダー・デザイナー・レビュアーの6名体制で作業を並列化しました。
サブエージェントとは
Claude Code の「サブエージェント」とは、メインの Claude が必要に応じて呼び出す専門 AI のことです。別のコンテキスト（会話空間）を持ち、独立して作業し、結果だけを返してきます。
たとえば「デザインを確認してほしい」と伝えると、デザイン専門のサブエージェントがブラウザを開き、スクリーンショットを撮り、Apple デザイン基準でチェックして報告してきます。メインの Claude は別の作業を続けながら、報告を待てます。
重要なのは「並列実行」です。複数のサブエージェントに異なるタスクを同時に投げると、それぞれが独立して動き始めます。1つのタスクを順番にこなすより、圧倒的に速く終わります。
汎用エージェントとカスタムエージェントの2種類がある
汎用エージェント（Claude Code 標準）
Claude Code には最初から呼び出せる汎用エージェントがあります。弊社でよく使った4種類を紹介します。
| エージェント | 得意な作業 |
|---|---|
| Explore | コードベースの探索・ファイル検索・キーワード調査 |
| Plan | 実装計画の設計・アーキテクチャの検討 |
| general-purpose | 調査・実装・多目的タスク |
| feature-dev:code-reviewer | コードレビュー・バグ検出・品質チェック |
これらはエージェントの「型」です。「Explore エージェントを使ってこのファイルを調べて」と伝えるだけで呼び出せます。
カスタムエージェント（プロジェクト専用設定）
汎用エージェントにプロジェクト固有のルールと権限を持たせたものがカスタムエージェントです。弊社の ui-designer エージェントは、UI 確認・Playwright スクリーンショット撮影に特化した独自設定を持ちます。
.claude/agents/ でカスタムエージェントを定義する
カスタムエージェントの作り方はシンプルです。プロジェクト直下の .claude/agents/ フォルダにマークダウンファイルを1つ置くだけです。
---
name: ui-designer
description: Use when reviewing UI components or visual design for the Astro frontend
model: sonnet # 最新の Sonnet モデルを指すエイリアス
tools:
- Read
- Write
- Edit
- mcp__playwright__browser_navigate
- mcp__playwright__browser_take_screenshot
---
あなたはこのプロジェクトのUI/UXデザイン専門エージェントです。
スクリーンショットは /screenshots/ フォルダに保存してください。
（以下、プロジェクト固有のルールを記述）フロントマターで使用するモデル・利用可能なツールを制限し、本文にプロジェクト固有のルール（CSS 変数・デザイントークン・保存先パスなど）を書きます。Claude Code が .claude/agents/ フォルダを自動で読み込むため、呼び出し方は汎用エージェントと同じです。
弊社では ui-designer・code-reviewer・debugger・content-reviewer の4種類をカスタマイズしました。たとえば ui-designer には Apple デザイン準拠チェックリストを埋め込み、確認時に必ず余白・フォントスケール・コントラストを測るよう設定しました。
CLAUDE.md でチーム構成を定義する
カスタムエージェントを定義したら、CLAUDE.md にチームの役割テーブルを書きます。どのタスクをどのエージェントに任せるかをメインの Claude に伝えるためです。
## サブエージェント活用ルール
| タスク | 使うエージェント |
|---|---|
| コードベース探索・ファイル検索 | Explore |
| UI/デザイン確認・Playwright 操作 | ui-designer |
| コードレビュー | feature-dev:code-reviewer |
| 機能実装設計 | feature-dev:code-architect |弊社の標準チーム構成はこうです。
| 役割 | 担当 |
|---|---|
| PM（自分） | 優先度・スコープ管理・調整 |
| Coder | PHP・CSS・JavaScript 実装 |
| Writer | コンテンツ・コピーライティング |
| Designer | UI制作・Playwright 操作・スクリーンショット確認 |
| DesignReviewer | デザイン品質チェック・Apple デザイン準拠確認 |
| CodeReviewer | コードレビュー・バグ検出 |
PM である自分（メインの Claude）が司令塔となり、5名をバックグラウンドで並列起動します。run_in_background: true を指定するだけで、全員が同時に動き始め、自分は次の指示を出しながら報告を待てます。
並列作業の具体例
実際にどう使ったか、一例を紹介します。
「今日の作業は3つある。①デザイン審査 ②コードレビュー ③ブログ記事の事実確認」という状況で、以前なら順番にこなすしかありませんでした。並列チームではこうなります。
- Designer →
/our-projects/のスクリーンショット撮影・Apple デザイン基準チェック - CodeReviewer → 追加した CSS・コンポーネントのレビュー
- Writer → 記事の数値・URLの事実確認
3つのタスクを同時に投げ、自分はコーディングを続けます。数分後、3名から報告が返ってきます。問題があればその場で修正指示を出す。これだけです。
並列実行がなければ、同じ内容を1人でこなすと少なくとも2〜3倍の時間がかかったはずです。
「1人で何でもやらせる」より「役割を分けて並列に動かす」
AI を1人のオールラウンダーとして使うのではなく、専門性を持った複数のエージェントに分けて並列で動かす。これが Claude Code のチーム活用の本質です。
役割分担は人間のチームと同じ原理です。デザイナーに実装を頼まず、コーダーにデザイン審査を頼まない。専門家が専門の作業をする構成が、一番速くて品質も高い結果になります。AI エージェントでも、この原則はそのまま機能します。
次回予告
チームの設定が整ったところで、第5回では実際に何を4日間で作ったかを工程ごとに紹介します。WordPress → Astro 移行の全工程、12ページの実装フロー、インフラ設計の決定プロセスをまとめます。