結論：Claude in ChromeでChatGPTやGeminiを操作する
Claude CodeでLPやスライドを作るときに、画像生成までまとめて自動化したい。
いくつかの方法を試した結果、最も手っ取り早かったのは、Claude in Chromeを使ってChatGPTやGeminiのブラウザ版を直接操作させる方法でした。
この方法なら、Claude Codeが理解しているLPや資料の内容をもとに画像を生成し、保存して、そのまま制作物に配置できます。
Codex Pluginや各種連携方法を試したものの、「設定や制限が多く、結局面倒だった」という方もいるかもしれません。今回は、そのような方に向けて、できるだけ準備の少ない方法を紹介します。
なお、仕組みとしてはかなり単純です。すでに気づいている方にとっては、当たり前に感じる内容かもしれません。その場合は、この先を読み飛ばしていただいて問題ありません。
筆者自身は、API連携やCodex経由の生成など、いろいろと複雑な方法を試した後で、ようやく「ブラウザ版をそのまま操作すればよかった」と気づきました。
もっと早く気づくべきでした。
Claude Codeには画像生成機能がない
Claude Codeは、LPやスライドの制作と相性が良いツールです。
文章の作成から構成、HTMLやCSSの実装、レイアウト調整まで進められます。
一方で、Claude Code自体には画像生成機能がありません。
そのため、次のような依頼はClaude Codeだけでは完結しません。
サービス内容に合ったメインビジュアルを作り、LPのファーストビューに配置してください。
フリー素材やプレースホルダー画像を使うことはできますが、サービス独自の利用シーンや世界観を表現するには、別の画像生成サービスが必要です。
最初に試した方法
Gemini APIを呼び出す
最初に試したのは、Claude CodeからGeminiのAPIを呼び出す方法です。
画像生成用のプロンプトを作り、APIから画像を取得し、ローカルに保存してLPへ配置するところまで自動化できます。
仕組みとしてはシンプルですが、APIの利用料金が別途発生します。
LPや資料制作では、構図や人物、色味を調整するために何度も画像を作り直します。生成回数が増えるほど料金も増えるため、気軽な試行錯誤には少し使いにくさがありました。
Codexやプラグイン経由で画像を生成する
次に、Claude CodeからCodexを呼び出したり、Codex Pluginなどを組み合わせたりする方法を試しました。
ターミナル上で一連の作業を完結できる点は便利です。一方で、認証や設定、ツール間の受け渡しなど、画像を数枚生成したいだけにしては構成が複雑になりがちでした。
また、筆者の環境では、ブラウザのチャット版から直接生成した画像の方が意図に近いと感じる場面がありました（多分私の使い方が悪いだけ）。
画像生成を繰り返すと、週間の利用上限にも比較的早く到達しました。
本格的な自動化基盤を作るのであれば有力な選択肢ですが、LPやスライドに使う画像を手早く用意したいだけであれば、少し大げさに感じました。
Claude in Chromeを使ったワークフロー
最終的に、次の方法に落ち着きました。
- Claude CodeでLPやスライドの構成を作る
- 必要な画像の内容をClaudeに整理させる
- Claude in ChromeでChatGPTやGeminiを開く
- 画像生成用のプロンプトを入力させる
- 生成された画像を保存する
- LPやスライドに配置する
APIを直接呼び出すのではなく、普段使っているブラウザ版の画像生成機能をClaudeに操作してもらう形です。
Claude Code側では、すでに次のような情報を把握しています。
- サービスの内容
- ターゲットユーザー
- LPや資料の目的
- デザインの方向性
- 必要な画像の役割
- 画像を配置する場所
そのため、人間が画像生成サービスにサービス内容を一から説明し直す必要がありません。
Claudeに、必要な画像の判断、プロンプト作成、生成、保存、配置まで連続して進めてもらえます。
サブスクリプションを活用できる
この方法の利点は、ChatGPTやGeminiのブラウザ版を使うため、既存のサブスクリプションを活用しやすいことです。
APIを使う場合、有料プランに加入していてもAPI料金は別枠になることがあります。
ブラウザ版を操作する方法であれば、各サービスの通常の利用枠の中で画像を生成できます。
もちろん、プランごとの回数制限はありますが、LPや資料に使用する数枚の画像を作る用途であれば、API料金を気にせず試しやすくなります。
絵コンテ画像の作成と特に相性が良い
最も良かったのは、動画生成AIに渡す絵コンテ画像を作る場面でした。
複数のカットを別々の会話で生成すると、同じ人物を指定しても、画像ごとに次のような違いが生まれやすくなります。
- 顔立ち
- 髪形
- 服装
- 年齢感
- 色味
- カメラの質感
- 映像全体の雰囲気
Claude in Chromeを使えば、ChatGPTやGeminiの一つの会話の中で、すべての絵コンテ画像を続けて生成できます。
例えば、最初のカットを生成した後に、次のような指示を続けられます。
同じ女性、同じ服装、同じ映像の質感を維持したまま、電車内でスマートフォンを見ている場面を生成してください。
さらに次のカットでは、同じ人物と撮影スタイルを引き継ぎながら、場所や動作だけを変更できます。
人物を完全に固定できるわけではありませんが、画像ごとに新しい会話を始めるよりも、一連のカットとして自然な統一感を保ちやすくなりました。
Claude Codeが動画全体のストーリーや各カットの役割を理解したうえで指示を作るため、絵コンテ制作との相性は特に良いと感じます。
注意点
Claude in Chromeを使っても、完全に放置できるわけではありません。
ブラウザの確認画面やUI変更によって操作が止まることがあります。生成された画像の品質、保存先、配置結果については、最後に人間が確認する必要があります。
また、一つの会話で生成を続けても、人物や服装が完全に同一になるとは限りません。厳密な一貫性が必要な場合は、参照画像を使える機能などを併用した方が良いでしょう。
商用利用では、利用する画像生成サービスの最新の規約も確認する必要があります。
まとめ
Claude Codeで画像を含むLPやスライドを作るなら、Claude in Chromeを使ってChatGPTやGeminiのブラウザ版を操作させる方法が手軽です。
この方法には、次のメリットがあります。
- APIを別途用意しなくてよい
- 既存のサブスクリプションを活用しやすい
- Claude Codeの文脈を画像生成に反映できる
- 生成、保存、配置まで一連の流れにできる
- 絵コンテ画像の人物や映像の雰囲気をそろえやすい
Claude Code自体には画像生成機能がありません。
しかし、ブラウザ操作と組み合わせることで、文章やコードだけでなく、画像を含む制作物全体をまとめて作れるようになります。
いろいろ試した結果、最も単純な方法が最も使いやすいという結論になりました。
LP、提案資料、動画の絵コンテをAIで作る機会が多い方には、試しやすいワークフローです。