Claude Code×3つのAI連携|プログラミング未経験のLP制作

Claude Code・Codex・ChatGPTを窓口・制作・品質確認・画像の4役に分けたAI事務所の概念図

「AIを使えば、プログラミング未経験でもWebページを作れる」

そう聞いて実際に始めてみると、作業するにあたり面倒ごとや問題が出てきます。

  • AIの回答を別のAIへ何度も貼り直す
  • 複数の画面を行き来して、作業場所が分からなくなる
  • 1つのAIの判断だけで公開してよいのか不安になる

読み終わるころには、1つのAIへ全部任せる方法と、複数のAIで担当を分ける方法の違いが分かります。自分の作業にAI連携が必要かを考える判断材料にもなるはずです。

私は配送業をしながら、副業の限られた時間でブログやLP(商品やサービスを1枚で紹介するページ)を作っています。プログラミング経験はありません。英語もほとんど読めません。

そこで試したのが、Claude Code・Codex・ChatGPTを役割ごとに分ける方法です。

現在は、3つのAIで4つの担当を分けています。Claude Codeはデスクトップ版とCLI(ターミナル)版の2つを使い分けて、私と話して段取りを整える役と、ブラウザやデザイン画面を操作してLPを実装する役に分けました。そこへ、品質を確認するCodexと、画像を担当するChatGPTを加えています。

この記事では、プログラミング未経験の私が、実際にLPを4日間で組んだ時の記録をもとに、複数のAIを連携させると何が変わるのかを紹介します。

なお、4日間というのはLP制作に取り組んだ期間です。AI同士をつなぐ仕組みは、それ以前から段階的に整えていました。

複数のAIを連携させて変わったのは、AIの性能ではなく作業の流れでした。作る役、確認する役、画像を担当する役に分けることで、私が指示を何度も貼り直す場面が減りました。ただし、Claude Code・Codex・ChatGPTは最初から自動でつながっているわけではなく、別途連携の設定が必要です。

シンラボくん

シンラボくん
正直、最初は1人のAIで何とかなると思っていました。連携の設定が要ると知るまで、しばらく遠回りしました

細かな設定方法よりも、まずは「複数のAIで何ができるのか」を知りたい方に向けた内容です。

目次

1. 1つのAIだけで進めていた時に詰まったこと

AIを使い始めた当初は、1つのAIにまとめて頼むか、私が複数のAIの間に入って回答を渡していました。

文章やコードを作ること自体はできても、作業全体を進めるところで3つの問題が出てきました。

詰まり①:AI同士の橋渡しが手作業だった

あるAIが作った内容を別のAIに確認してもらうには、指示や回答を自分でコピーして渡す必要がありました。

文章を選択してコピーし、別の画面を開き、説明を加えて貼り付ける。回答が返ってきたら、今度は元の画面へ戻して修正を頼む。その繰り返しです。

1回の操作は数秒でも、回数が増えると無視できません。どの文章が最新版なのか分からなくなり、同じ説明を何度も書くこともありました。

AIに作業を頼んでいるはずなのに、AI同士をつなぐ連絡係は私のままだったのです。

シンラボくん

シンラボくん
コピペ作業が増え、手を動かす時間が気になっていました

詰まり②:複数の画面を行き来していた

LP制作では、Claude Codeと話す画面、デザインを作る画面、ブラウザで完成形を確認する画面、画像やフォントを扱う画面などを行き来します。

開く画面が増えるほど、「今どこを直していたのか」「どの画面に指示を出したのか」が分かりにくくなりました。

プログラミング経験があれば、作業ごとの役割をすぐ理解できたかもしれません。しかし、私にとっては画面が変わるだけでも不安があります。

コードを書く作業より、次に開く画面を探している時間の方が気になる場面もありました。

詰まり③:1つのAIの判断だけでは不安が残った

Claude Codeに「このまま公開して大丈夫?」と聞いて、問題ないと返ってきても、不安が完全になくなるわけではありません。

文章やデザインを作ったAIが、そのまま自分の成果物を確認しているからです。

そこで、別のAIにも確認してもらうようになりました。ただし、連携を整える前は、確認してほしい内容を私が手作業で渡していました。

品質を確認する方法はあっても、毎回コピーして説明し直す負担が残っていたのです。

1つのAIに「これで大丈夫?」と聞いて「大丈夫」と返ってきても、それは「自分の成果物を自分で見た」という意味になります。別の視点を入れたいなら、別のAIに見せる仕組みが要ります。

シンラボくん

シンラボくん
自分としては、もう少し別の視点で見てみたい、と思うのが正直なところでした

2. 転機は「AIの事務所」と考えたこと

LP制作の過程で、考え方が変わるきっかけがありました。

それまでの私は、「AIに頼むこと」を「1つのAIに全部頼むこと」と同じように考えていました。

しかし、人が働く会社では、窓口、制作、確認、画像などを1人だけで担当するとは限りません。それなら、AIも役割ごとに分ければよいのではないかと考えました。

1つのAIに全部任せるのではなく、役割を分けたAIの事務所に頼む形です。

連携の仕組みは、LPを作った4日間より前から少しずつ整えていました。5月27日には、私と話すデスクトップ版のClaude Codeと、別の作業画面で動くCLI版のClaude Codeが、直接連絡を取り合える状態になりました。

その後、Codexにも確認を頼めるようにし、ChatGPTの画像制作も組み合わせました。

私がすべての指示をコピーして渡すのではなく、窓口役のAIから別の担当へ作業を回せる形に変えていったのです。

シンラボくん

シンラボくん
役割ごとに分けたらいいのか、と腹落ちした瞬間でした。1人で全部やる前提が外れただけで、進めやすさが変わりました

3. 3つのAIを4つの役割に分けた

現在使っているのは、Claude Code・Codex・ChatGPTの3つです。

ただし、役割は4つあります。Claude Codeを「デスクトップ版」と「CLI(ターミナル)版」の2種類で動かし、窓口役と制作役に分けているからです。

役割 担当AI 主な仕事
窓口・進行管理 Claude Code(デスクトップ版) 私と話し、段取りを整えて各担当へ依頼する
制作・実務 Claude Code(CLI版) ブラウザやデザイン画面を操作し、LPを作成・修正する
品質チェック Codex Claude Codeが作った内容を別の視点から確認する
画像制作 ChatGPT アイキャッチや図解の相談・制作を担当する

私の作業環境では、Claude Codeのデスクトップ版とCLI版を別々のセッションで動かしています。デスクトップ版を窓口役、CLI版を制作役として使い分けました。

この2つが標準状態で自動的につながるわけではありません。私は事前に、デスクトップ版からCLI版へ依頼を渡すための連絡経路を設定しました。

また、CLI版側にはブラウザやデザイン画面を操作するための機能をつないでいます。そのため、今回のLP制作では、CLI版がClaude Designとブラウザを操作する職人役になりました。

「CLI版なら設定なしでどのブラウザでも操作できる」という意味ではありません。私が組んだ環境では、この分担が使いやすかったという実例です。

Claude Codeをインストールしただけで、デスクトップ版とCLI版が自動で連携するわけではありません。「CLI版がブラウザを操作できる」のも、私が別の機能を組み合わせた結果です。同じことを試す場合は、別途の連携設定が必要になります。

シンラボくん

シンラボくん
最初は『同じClaude Codeを2つ使い分ける』のがピンと来ませんでした。実際に動かすと、役割の違いを理解しやすくなりました

品質チェックはCodexが担当します。Claude Codeとは開発元が異なるAIにも見てもらうことで、同じ判断だけに偏るのを避けるためです。

画像については、以前からChatGPTへ相談していました。その後、画像制作をChatGPTへ任せる役割をより明確にしました。

「4人のAIがいる」というより、3つのAIを4つの担当に分けた体制です。

4. 役割を分けて実感した3つの変化

複数のAIを連携させて実感したのは、AIそのものの性能より、作業の進め方が変わったことです。

実感①:私がコピーして回る場面が減った

デスクトップ版のClaude CodeからCLI版のClaude CodeやCodexへ依頼を渡せるため、私が指示や回答をコピーして橋渡しする場面が減りました。

すべてが自動になったわけではありません。何を作るか、どこまで進めるか、最後に実行してよいかは、今も私が確認します。

それでも、同じ説明を別の画面で何度も繰り返す作業が減るだけで、進めやすさは変わりました。

実感②:別のAIから違う視点が入る

最初に文章やLPを作ったAIとは別のAIが確認すると、同じ成果物でも見る場所が変わります。

Claude Codeが制作を進め、Codexが品質を確認する形にすると、言い切り表現や数字の根拠、分かりにくい説明などを別の視点から確認できます。

1つのAIの回答をそのまま信じるのではなく、別のAIの意見と見比べたうえで、最後は自分で判断できるようになりました。

シンラボくん

シンラボくん
自分だけでは見落としていた指摘が出てきて、別視点を入れる効果を実感しました。特に断言表現や数字の根拠は、別のAIの方が冷静に見つけてくれます

実感③:作業を分けて進められる

CLI版がデザイン作業を進めている間に、デスクトップ版側では次の指示や確認事項を整理できます。

以前は、作業終了を待って次を考える場面がありました。役割を分けてからは、制作と確認の順番を整理しやすくなりました。

AIが急に高性能になったわけではありません。役割と連絡経路を整えたことで、それぞれのAIを使いやすくなったのです。

5. 実際に4日間でLPを作った時の動き

この体制が実際に動いた例が、shinlaboのLP制作です。

LP制作に取り組んだ期間は、暦の上でおおむね4日間でした。

連携の土台はLP制作より前から少しずつ整えており、4日間というのはLP制作にかかった期間の目安です。

制作では、おおむね次のように役割が動きました。

  1. デスクトップ版のClaude Codeが、LPの構成や原稿、作業の順番を整理する
  2. CLI版のClaude Codeが、Claude Designとブラウザを操作してデザインや装飾を反映する
  3. ChatGPTにも相談しながら、必要な画像素材を用意する
  4. LPを公開した後、Codexが本番ページを別の視点から診断する
  5. デスクトップ版が修正内容を整理し、CLI版が画面へ反映する

Codexによる最初の診断結果は、80点満点中50点でした。

50点という結果を見て、公開できたことと、内容が十分に整っていることは別だと分かりました。

そこで、指摘された内容をもとに修正と確認を繰り返したところ、最終的に69点まで上がりました。69点まで改善したことで、作る役と確認する役を分ける意味も数字で確認できました。

Codex診断スコアが50点から69点へ19点上がった棒グラフ

Codex診断スコアの推移
– 1回目(公開直後):50/80
– 修正反復後:69/80
– 変化:+19点

数字が動いた一因は、別のAIが「断言が強すぎる」「実績の数字に根拠がない」など、作った側では気づきにくい箇所を具体的に指摘してくれたことでした。

最初から高得点だったわけではありません。別のAIに確認してもらい、指摘を受けて直した結果です。

この経験から、複数のAIを使う意味は、単純に作業人数を増やすことではないと感じました。

作る役と確認する役を分け、指摘を次の修正につなげるところに意味があります。

6. AIに任せる場面と、自分で確認する場面

複数のAIをつないでも、すべてを任せるわけではありません。

実際に使い続ける中で、AIに進めてもらう作業と、自分で確認してから進める作業を分けるようになりました。

私が判断する時に見ているのは、主に次の3つです。

  • 間違えても元に戻せないか
  • 外部の人に見られる操作か
  • 個人情報や認証情報など、重要な情報が関係するか

文章の下書きや、元に戻せるファイル修正はAIへ任せやすい作業です。

一方で、戻せない操作や外部公開、重要な設定変更などは、実行前に自分で確認します。

AIに任せる範囲を広げることより、「どこで止めて確認するか」を決める方が重要でした。

AIをいったん止めて確認する3つの判断軸(戻せるか・外に出るか・重要情報か)

便利な仕組みほど、どこで人間が確認するかという線引きが安全装置になります。3つの判断軸(戻せるか/外に出るか/重要情報か)のうち1つでも当てはまったら、AIをいったん止めて私が内容を確認しています。

シンラボくん

シンラボくん
便利になると、つい全部任せたくなります。でも、戻せない操作や外部公開だけは、最後の一手を自分で押すと決めています

私が使っている詳しい8項目の分け方は、note05でまとめています。

7. プログラミング未経験だからつまずいたこと

役割を分ければ、すぐにすべてが簡単になるわけではありません。

プログラミング未経験で、英語もほとんど読めない私には、大きく2つのつまずきがありました。

つまずき①:英語の画面と文字だけの操作画面

AIを連携させる途中では、画像担当AIのアプリを英語表示に切り替えたり、文字だけでパソコンへ指示を出す画面を使ったりする場面がありました。

英語のボタンや黒い操作画面が出てくると、それだけで「触って大丈夫なのか」と不安になります。

英語を読めるようになってから始めたわけではありません。分からない表示が出るたびに、Claude Codeへ画面の意味と次に押す場所を確認しながら進めました。

すべての英語や操作方法を覚えなくても、今どの画面にいて、次に何をするのかが分かれば、一つずつ進められます。

つまずき②:知らない用語で次の一手が止まる

CLI、MCP、セッションなど、初めて見る用語が次々に出てきました。

説明を読んでも、その言葉が何を指しているのか分からない。意味が分からないため、次に何をすればよいのかも判断できない。そうして作業が止まることが何度もありました。

私は、分かったふりをして進めず、途中でClaude Codeに「この単語は何?」「今は何をしようとしているの?」と聞いていました。

専門用語を一度ですべて覚える必要はありません。

分からない言葉が出た時に、その場で自分にも分かる言葉へ置き換えてもらう。プログラミング未経験の私には、その進め方が合っていました。

シンラボくん

シンラボくん
分かったふりで進めるより、その場でClaude Codeに『この単語は何?』と聞く方が、進めやすくなりました

8. まずは自分に合うところから始める

ここまで読んで、「いきなり複数のAIを連携させるのは難しそう」と感じた方もいると思います。

最初から4つの担当をそろえる必要はありません。

まずClaude Code単体から試したい方は、次の記事で基本的な始め方をまとめています。

👉 Claude Codeの始め方|未経験40代が最初につまずいた3つの壁と回避法【2026年6月版】

Claude Code・Codex・ChatGPTをどのようにつなぎ、何をAIへ任せ、どこで自分が確認するのか。実際の組み方は、500円のnoteにまとめています。

👉 Claude Code × Codex × ChatGPT|3者を連携させて自分専用「AI事務所」を組んだ4日間の記録(文庫本1冊ほどの価格)

細かな設定方法だけでなく、プログラミング未経験の私が使っている役割分担と、AIを止めて確認する基準も掲載しています。

AI同士を連携させる考え方や、公式情報を含む背景から確認したい方は、こちらの記事も参考にしてください。

👉 配送業40代の私、Anthropic公式の足跡を知らずに辿っていた話|Code with Claude 2026

まずは自分が一番困っている作業を一つ選ぶと、どの役割からAIへ任せればよいか整理しやすくなります。

9. まとめ:AIは役割を分けると使いやすくなる

今、1つのAIと私だけで作業を回していた頃の自分に伝えるなら、こう言います。

AIに頼むことは、1つのAIに全部任せることではありません。
作る役、確認する役、画像を担当する役に分けることで、プログラミング未経験でも進めやすい形を作れます。

今でも、英語の画面や初めて見る設定を一人で触るのは不安です。だからこそ、分からない時に聞く相手と、作業を止めて自分で確認する場所を決めています。

大切だったのは、難しい仕組みを最初からすべて理解することではありませんでした。

自分が困っている作業を一つ見つけ、その役割を別のAIへ渡してみる。そこから段階的に、自分に合う体制へ整えていくことでした。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次