副業のLP(ランディングページ)の案件で、AIの役割分担を変えました。
Claude CodeのOpusが指示と確認をして、実装はSonnetのサブエージェントに任せる形です。
デザインとの差を詰める修正は、PCとスマホで1回ずつ、それぞれ10分ほど。
スマホは、全セクションの高さの差が0まで詰まりました。
🎥 この記事の内容は動画でも解説しています。
案件の名前や画像は出せないので、分担のしかたと、分けてみて分かったことを書きます。
前は、2つのAIを自分のターミナルで行ったり来たりしていた
この案件は、ガイドラインが厳しめのLPです。
最初はCodexでコーディングしたら、デザインとかなり違うものができました。
見比べもCodexに頼んだら、5時間の利用枠を使い切ってしまったんです。
そのあとは、「Codexが実装して、Claude Codeがレビューする」という流れにしました。
ただこれだと、2つのAIの間のやりとりを、自分のターミナルで回すことになります。
Opusが指示と確認、Sonnetのサブエージェントが実装
10月4日から、Claude Codeの中で役割を分けました。
- Opus(メインのClaude Code): 何を直すかの指示書を作る。デザインと実装の画像を等倍で見比べて、合否を判定する。ガイドラインに合っているかの裏取りもする
- Sonnet(サブエージェント): 指示書のとおりにHTMLとCSSを直す
サブエージェントは、Claude Codeが作業の一部を別のAIに任せる機能です。
今回は、その別のAIにSonnetを使いました。
こうしたのは、指示書をかなり細かく書けたからです。
「このセクションの上の余白を何pxに」というところまで、Opusが決めて書いています。
そこまで決まっていれば、実装は指示どおりに手を動かすだけ。
考える役と手を動かす役を、分けやすかったんです。
結果: 各10分ほどで、スマホは高さの差0
修正はPCとスマホで1回ずつ回して、どちらも10分ほどでした。
スマホは、デザインの画像と実装の画面で各セクションの高さを比べて、全セクションで差が0になっています。
2つのAIのやりとりを自分のターミナルで回していたのが、Claude Codeの中で完結するようになりました。
ちなみに、使った量(利用枠の消費)は測っていません。
なので、「各10分ほどで回せた」以外の比べ方はしていません。
分けてみて分かった、3つの注意点
サブエージェントは、話の流れを知らない
サブエージェントには、それまでの会話が引き継がれません。
「さっきのあれ」は通じないので、読むファイルや直す場所は、指示書に全部書いてもらう必要がありました。
同じCSSを触る修正は、同時に走らせない
サブエージェントは、同時に何人も動かせます。
でも、同じCSSのファイルを2人が同時に直すと、変更がぶつかるおそれがあります。
なので、同じファイルを触る修正は、1つずつ順番にしました。
サブエージェントの報告は、原本で確かめる
サブエージェントは、作業が終わると「ここをこう直しました」と報告してきます。
その報告をOpusが原本のファイルで確かめたら、主張の一部が間違っていたことがありました。
逆に、Opusが怪しいと思って確かめたら、報告のほうが正しかったこともあります。
どっちにしても、報告を読んだだけで「直った」とは判断しない。
ファイルと画面で確かめてから進める、という形にしています。
まとめ
Opusが指示と確認、Sonnetのサブエージェントが実装、という分担に変えて、LPの修正は各10分ほどで回せました。
前提にあったのは、指示書を細かく書けたことです。
そのうえで、文脈は渡す、同じファイルは同時に触らない、報告は原本で確かめる。
この3つを守ると、分けても崩れにくかったです。
同じような分け方は、受託の仕事を紹介するプロモ動画を作るときにも使いました。
そのときは、Opusのサブエージェントが構成を考えて、実装と確認は別の担当がやっています。
