AI2つと私で協力してMCP開発！ClaudeCode×クロ助×私の理想的な分業体制
こんにちは！YaroTechです。
3日間（10月11日・土曜日～13日・月曜日）、自作MCP「Visual Browser MCP」の開発に挑戦していました。
最初はクロ助と私の2者で進めていたのですが、かなり時間がかかってしまい...。そこで途中からClaudeCode（クロコ）を投入して3者体制にしたところ、劇的に効率が上がったんです！
これ、1人で開発してるんじゃない。3人で開発してる感覚だって。
ClaudeCode（クロコ）がコードを書き、ClaudeDesktop（クロ助）が私とクロコの橋渡しをして、私が経験と感覚で補完する。この3者の分業体制が、驚くほどスムーズで効率的でした。
3日間、合計8時間25分（11日：2時間40分、12日：1時閗45分、13日：4時間）かけて約2000行のコードを書き、Phase 1-5すべてを実装完了。複雑なデバッグも次々に解決。「マルチエージェント開発」の可能性を、身をもって実感した3日間でした。
今日は、その開発の舞台裏と、3つのAIがどう協力したのかを詳しくお伝えします！
※見出し画像のプロンプトは一番下におまけで公開中！
🖥️ 実行環境
OS: Windows 11 Pro 24H2（ARM64版）
PC: Microsoft Surface Laptop 7th（Snapdragon X Elite）
ClaudeCode: 従量課金制（$9.73/4時間セッション）
ClaudeDesktop: Proプラン（$20/月）
開発期間: 2025年10月11日（土）〜13日（月）（3日間）
プロジェクト: Visual Browser MCP開発
🎯 この記事で得られること
マルチAI開発の実践例が分かる
2者→3者体制の効率差を実感できる
各AIの役割分担のコツを学べる
効率的な協力体制の作り方が理解できる
実測データ（コスト・時間）を知れる
未来のマルチエージェント開発への展望
📊 プロジェクト概要
Visual Browser MCPとは
AIがブラウザ画面を「見て」、要素の位置を判断して自動操作できるMCPツールです。
実装した機能:
`visual_navigate`: URL移動
`visual_click`: AI要素クリック
`visual_type`: AIテキスト入力
`visual_extract`: AI情報抽出
`visual_task`: 自動タスク実行
開発実績
開発期間: 3日間（10月11日〜13日）
総開発時間: 合計8時間25分（11日：2時間40分、12日：1時閗45分、13日：4時間）
進捗: Phase 1-5まで実装完了（約70%完成）
コード量: TypeScript約2000行（8ファイル）
成功率: 25%（4回中1回成功、改善中）
2者→3者体制の変化
Day 1-2（クロ助と私の2者体制）:
時間がかなりかかる
チャット文字数制限に悩まされる
デバッグの方向性を決めるのに時間がかかる
Day 3（ClaudeCodeを投入して3者体制）:
作業スピードが劇的に向上
文字数制限の壁を突破
役割分担が明確になって効率化
💰 ClaudeCode使用状況（実測データ）
最終日の4時間セッション:
セッション時間: 4時間
使用トークン: 13,569.1k tokens（62.7%消費）
コスト: $9.73
予測最終コスト: $10.13
モデル: Claude Sonnet 4.5特筆ポイント:
通常のClaudeチャットだと文字数制限で数回で限界
ClaudeCodeは4時間連続作業が可能
トークン上限（21,643k）まで使える効率性
🤝 理想的な3者分業体制
🤖 ClaudeCode（クロコ）- コーディング担当
得意なこと:
✅ 大量のコード生成・編集
✅ ファイル間の一貫性維持
✅ TypeScript/Node.js開発
✅ エラーを自動修正しながら進行
✅ 文字数制限なし
苦手なこと:
❌ 説明が技術的すぎて分かりづらい
❌ 細かいデバッグの方向性判断
❌ 日本語のニュアンス理解
今回の実績:
TypeScriptファイル8個作成（約2000行）
エラー修正20回以上
ビルド成功まで粘り強く対応
🎭 クロ助（Claude Desktop）- 橋渡し＆案内役
得意なこと:
✅ ClaudeCodeの説明を分かりやすく翻訳
✅ エラーの原因を的確に説明
✅ 次のステップを明確に提示
✅ プロジェクト全体の進捗管理
✅ 継続プロンプト作成
苦手なこと:
❌ 大量のコード編集（文字数制限）
❌ 複数ファイルの同時編集
今回の実績:
ClaudeCodeの技術説明を日本語で解説
デバッグ方向性の提案（4つのPhase特定）
問題の原因を3つの選択肢で提示
継続プロンプト作成で次回作業もスムーズ
👤 私（人間）- 経験と感覚で補完
得意なこと:
✅ AIが気づかない違和感の発見
✅ 実測値の提供（ストップウォッチ計測）
✅ 成功率の判断（4回中1回 = 25%）
✅ 優先順位の決定
✅ 過去の経験からの判断
今回の実績:
MCPタイムアウトを11秒と正確に計測
4回テストして成功率25%を報告
「座標を見えるようにできないか」と提案→赤丸で目視確認実装
SharpライブラリがARM64で使えないことを指摘→HTMLで実装へ
「とりあえず動くならOK」の判断
過去の似た事象を思い出して指摘
📅 3日間の開発の流れ
Day 1（10月11日・土曜日）：クロ助と2者で開始
作業内容: プロジェクト立ち上げ、基本構造の設計
問題点:
チャット文字数制限にすぐ到達
5回以上チャットを変更
デバッグ方向性を決めるのに時間がかかる
所要時間: 2時間40分
Day 2（10月12日・日曜日）：継続もやはり遅い
作業内容: Phase 1-3の実装継続
問題点:
依然としてチャット文字数制限
実装スピードが上がらない
デバッグに時間がかかる
所要時間: 1時閗45分
この時点での判断: 「これ、クロコに任せた方が早いんじゃない？」
Day 3（10月13日・月曜日）：ClaudeCode投入で劇的変化
作業内容: Phase 4-5の実装、デバッグ完了
変化:
✅ 文字数制限の壁を突破
✅ 実装スピードが5-10倍向上
✅ 4時間で残りすべて完了
所要時間: 4時間（ClaudeCodeセッション）
結果: Phase 1-5すべて実装完了！
🔧 開発で発生した主な問題と解決
問題1：STDIOエラー
現象: MCP InspectorがSyntaxError連発
原因: console出力がJSON-RPCに混入
解決: stderrへリダイレクト
担当: クロ助が原因特定 → ClaudeCodeが修正協力のポイント:
クロ助がログを分析してすぐに原因を特定
ClaudeCodeが即座にリダイレクト実装
問題2：MCPタイムアウト
現象: 10.87秒でMCPエラー
原因: AI処理（25秒×2）が制限超過
解決: AI処理を10秒に短縮
担当: クロ助が原因分析 → 私が実測 → ClaudeCodeが修正協力のポイント:
クロ助が「3つの選択肢」を提示
私がストップウォッチで正確に計測
ClaudeCodeが設定変更を即実装
問題3：AI誤判断
現象: タスクがステップ1で即終了
原因: プロンプトフォーマット不一致
解決: extracted_data構造に統一
担当: クロ助がデバッグログで特定 → ClaudeCodeが修正協力のポイント:
クロ助が「ログを追加しよう」と提案
ログから原因が明確に
ClaudeCodeが構造を統一
問題4：変数重複エラー
現象: TS2451エラー（変数の二重宣言）
原因: steps変数が2箇所で宣言
解決: completedStepsにリネーム
担当: ClaudeCodeがエラー検出 → クロ助が確認 → ClaudeCodeが修正協力のポイント:
ClaudeCodeがビルドエラーを検出
クロ助が「646行目と657行目だね」と場所を特定
ClaudeCodeが即座に修正
問題5：クリック位置が分からない
現象: AIがクリックしている座標が見えない
解決: 赤い丸で座標を表示して目視確認
担当: 私が提案 → クロ助がSharpを提案 → 私がARM64で使えないと指摘 → ClaudeCodeがHTMLで実装協力のポイント:
私が「座標を見えるようにできないか」と提案
クロ助がSharpライブラリを提案
私がARM64では動かないことを経験から指摘
ClaudeCodeがHTMLで赤い丸を描画する方法に切り替え
結果、クリック位置を赤丸で目視確認できるように
💡 3者協力の具体例
シーン1：エラー発生時
ClaudeCode: 「TS2451エラーが出ています」
↓
クロ助: 「同じ変数名が2回使われてるね。
646行目と657行目を修正すればOK」
↓
私: 「了解、修正お願い」
↓
ClaudeCode: 修正実行・ビルド成功シーン2：タイムアウト調査
私: 「ストップウォッチで11秒でエラーが出る」
↓
クロ助: 「AI処理10秒+通信1秒だね。
3つの選択肢を提案するよ：
A) タイムアウトを延長
B) AI処理を短縮
C) 動的タイムアウト実装」
↓
私: 「B案で。10秒に短縮して」
↓
ClaudeCode: 設定変更実行シーン3：成功率の判断
私: 「4回試して1回成功、3回失敗」
↓
クロ助: 「成功率25%だね。
プロンプト改善が必要かも」
↓
ClaudeCode: 「プロンプトの修正案を提示します」
↓
私: 「とりあえず動くからOK。
精度向上は次回で」🎉 この開発で実現できたこと
✅ Phase 1-5すべて実装完了
Phase 1: visual_navigate（URL移動）
Phase 2: visual_click（AI要素クリック）
Phase 3: visual_type（AIテキスト入力）
Phase 4: visual_extract（AI情報抽出）
Phase 5: visual_task（自動タスク実行）← 成功率25%だが動作
✅ 複雑なデバッグを3日間（合計8時間25分）で完走
STDIOエラー → 解決
タイムアウト問題 → 解決
AI誤判断 → 解決
変数重複エラー → 解決
クリック位置が分からない → 解決
✅ 実用レベルに到達
基本動作は成功
Googleで検索ボックスをクリック→テキスト入力→検索実行が可能
Yahoo!路線検索も動作確認済み
🚀 今後の展望：マルチエージェント開発
現在の体制
私 ←→ クロ助 ←→ ClaudeCode
(判断) (翻訳) (実装)この3者体制でも十分効率的ですが...
理想の未来
私 ←→ クロ助（統括）←→ ClaudeCode（実装）
↓
チャッピー（レビュー）
↓
ジミー（テスト）期待される効果:
レビュー役で品質向上
テスト役で自動検証
開発速度がさらに加速
24時間開発体制も可能？
🎓 実践から学んだ「AI使い分けの鉄則」
1. 大量コーディング → ClaudeCode
文字数制限なし
自動エラー修正
複数ファイル同時編集
2. 相談・説明 → クロ助
分かりやすい日本語
選択肢の提示
進捗管理
3. 実測・判断 → 私
違和感の発見
数値の計測
優先順位の決定
この3者が協力すれば
✅ 3日間（合計8時間25分）で実用レベルのMCPが完成
✅ 複雑なデバッグもスムーズ
✅ 文字数制限の壁を突破
✅ 2者体制より生産性が2-3倍向上
💭 つまずきポイントと解決策
ポイント1：ClaudeCodeの説明が分かりづらい
問題: 技術用語だらけで理解できない
解決策: クロ助に「これどういう意味？」と聞く
→ 分かりやすく翻訳してくれる
ポイント2：文字数制限の壁
問題: クロ助だと5回でチャット交代
解決策: 大量コーディングはClaudeCodeに任せる
→ 4時間連続作業可能
ポイント3：AIでは気づけない違和感
問題: AIは「成功」と言うが何か変
解決策: 人間が実際に試して計測
→ 「11秒でエラー」などの実測値を提供
ポイント4：ClaudeCodeが勝手にサーバー起動→強制終了で全部閉じる
問題: ClaudeCodeがMCP Inspectorサーバーを勝手に起動、コマンドプロンプト表示がない
失敗例: 強制終了（Kill task）したら、ClaudeCodeやClaudeDesktopのMCPサーバーも全部閉じられた
教訓: Kill taskは基本しちゃいけない
正しい対応:
ClaudeCodeのターミナルでCtrl+Cで正常停止
または放置しておく（自動で終了する）
プロセスを特定して個別に終了
📝 まとめ
AIの特性を理解して適材適所で使い分ける
ClaudeCode: 大量コーディング、自動エラー修正
クロ助: 分かりやすい説明、進捗管理
私: 実測、判断、優先順位決定
2者→3者体制で生産性が大幅向上
最初の2日間: クロ助と2者体制で時間がかかる
3日目: ClaudeCodeを投入して劇的に効率化
結果: 3日間（合計8時間25分）で2000行のコード完成
マルチエージェント開発の未来に期待
現在の3者体制でも効率的ですが、さらにエージェントを増やしてレビュー役やテスト役を追加できれば、開発速度と品質がさらに向上するはずです。
AIと人間が協力する開発スタイル。これが、これからのソフトウェア開発の標準になるかもしれませんね。
🔗 関連記事
今回の記事に関連する過去記事です：
📢 さいごに
3日間、合計8時間25分の開発で、マルチエージェント開発の可能性を強く実感しました。
最初の2日間（4時間25分）はクロ助と2者体制で時間がかかっていましたが、ClaudeCodeを投入した3日目（4時間）は劇的に効率化。ClaudeCodeが黙々とコードを書き、クロ助が私に分かりやすく説明してくれて、私が経験と感覚で判断する。この3者が協力することで、1人では絶対に8時間25分では終わらない作業が、スムーズに進みました。
AIを「道具」ではなく「チームメンバー」として扱う。そんな開発スタイルが、もう現実になっています。
明日のDay96では、また新しい発見をお届けできればと思います。それでは、また！
🎨 おまけ：見出し画像の作成プロンプト
今日の見出し画像のベースはチャッピー（ChatGPT）に下記プロンプトで作成してもらいました！
ChatGPT用プロンプト
柔らかな照明で撮影された超現実的でプロフェッショナルな写真を作成してください。
下記条件のnote見出し画像をサイズは横長で作成してください。サイズは必ず横長で作成してください。
## 🎨 見出し画像案
### デザインコンセプト
- **背景**: 紺色（#1e3a8a）→紫色（#9333ea）のグラデーション（協力・連携の雰囲気を表現）
- **メインビジュアル**:
- 上部中央：Claude風アイコン（クロ助、円形150×150px）
- 左下：ターミナルアイコン（クロコ、円形150×150px）
- 右下：人間アイコン（私、円形150×150px）
- 3つを繋ぐ線・ネットワークエフェクト
- **テキスト要素**:
- 上部（白文字・太字・28pt）: 「AI2つと私が協力！」
- 中央（黄色・太字・48pt）: 「マルチエージェント開発」
- 下部（白文字・24pt）: 「3日間・8時間25分で2000行コード完成」
- **装飾**:
- 3者を繋ぐネットワーク線
- 協力を示すキラキラエフェクト
- 三角形配置で安定感を表現
### 作成手順
1. スライドサイズを1536×1024pxに設定
2. 紺色（#1e3a8a）から紫色（#9333ea）へのグラデーション背景を適用
3. 上部中央にClaude風アイコン（クロ助）を配置（円形150×150px）
4. 左下にターミナルアイコン（クロコ）を配置（円形150×150px）
5. 右下に人間アイコン（私）を配置（円形150×150px）
6. 3つのアイコンを白い線で繋ぐ（協力関係を表現、3pt）
7. テキストを3段構成で追加：
- 上部: 「AI2つと私が協力！」（白・太字・28pt）
- 中央: 「マルチエージェント開発」（黄色・太字・48pt）
- 下部: 「3日間・8時間25分で2000行コード完成」（白・24pt）
8. ネットワークエフェクトを追加（接続点にキラキラ）
9. 協力を示す円形エフェクトを背景に配置（透明度70%）
10. YaroTechロゴを右下に12ptで控えめに配置YaroTech
クリエイターページ:
#YaroTech #ClaudeDesktop #ClaudeCode #AI活用 #効率化 #使い分け #実践 #生産性向上 #MCP #プロンプトエンジニアリング #働き方を変えるツール
