Claudeに相談して、Codexに画像をお願い。猫カフェのLPで試したClaude Designの使い方 - ニュース

「ホームページを作って」とお願いすると、形にはなる。
でも、写真やイラストとページ全体の雰囲気が、ちょっと合っていない。
そんな時は、画像を作る前に「どこに、どんな絵を置きたいのか」を決めると進めやすくなります：）

10月12日の朝ライブでは、Claude Codeに全体を取りまとめてもらい、Claude Designでデザインを考え、必要な画像をCodexにお願いする流れを試しました。
題材は猫カフェのLP。
LPは、お店やサービスの魅力を1ページで伝えるWebページのことです。
今回は、実際に使った頼み方と、出来上がりを見て修正したくなったところまでお話しします。

画像の前に、ページ全体を考えてもらう

たとえば「おしゃれな猫の画像を作って」と頼むと、猫の画像は作れます。
でも、その画像を見出しの横に置くのか、画面いっぱいに広げるのかで、欲しい構図は変わりますよね。
文字を重ねるなら余白も欲しいし、ページが淡い色なのに画像だけ強い色だと、そこだけ浮いてしまうことも。

ライブでは、こんな役割分担を説明しました。

担当	今回お願いしたこと
Claude Code	私の依頼を受け取り、制作全体と仕上がりを取りまとめる
Claude Design	ページの構成、見せ方、画像を置く場所などを考える
Codex	決まったデザインに合わせて、必要な画像やパーツを作る

私がやり取りする窓口はClaude Code。
そこから必要に応じてClaude DesignとCodexへお願いする、という流れです。

私はブログのアイキャッチのように、1枚で完結するものはCodexに直接お願いすることもあります。
一方、Webページの中に入れる画像は、全体を取りまとめるClaude Codeから依頼してもらう使い分けをしています。
このあたりは、動画の41:27〜45:35で話しています。

「Claude Designを使って」と、頼み方に書いておく

今回、猫カフェのLPではこんな内容をお願いしました。
以下は、ライブ中の依頼を読みやすく整えたものです。

猫カフェのLPをClaude Designで作ってほしい。
実際に外に出してもおかしくないレベルのクオリティで、デザインにはこだわってほしい。
写真やLPのパーツなどは、必要に応じてCodexに作ってもらって。

「何を作るか」に加えて、「Claude Designを使うこと」「どのくらいの仕上がりを目指すか」「画像はCodexにお願いすること」を入れています。
私の環境では、Claude Designを使ってほしいと明確に伝えないと、別の方法で進めることがありました。

「いい感じに作って」だけだと、AIが考える“いい感じ”になります。
まず使ってほしい制作方法と仕上がりの基準を伝えておくと、その後の修正も話しやすいですね。

ここから試すなら、お店のLPのほか、勉強会の案内ページも題材にできます。
たとえば、こんなふうに内容を置き換えてみてください。
これは動画で使った文面ではなく、応用するときの例です。

初めて参加する人向けに、AI勉強会の案内ページをClaude Designで作って。
内容は、勉強会でできること・当日の流れ・持ち物・申込方法。
親しみやすく、スマートフォンで読みやすいデザインにして。
必要なイラストはCodexに依頼して。
日時・料金・会場は、私が渡す情報だけを使って。

ClaudeからCodexを呼ぶ準備

ライブで使ったのは、Claude Code側にCodexのプラグインを追加する方法です。
プラグインは、使える機能を追加する仕組みのこと。

47:58〜49:05では、Claudeの「カスタマイズ」から「プラグイン」を開き、Codexを追加する画面を確認しました。
Codexが見つからない場合は「マーケットプレイスを追加」から、概要欄にある次の識別子を追加する流れです。

openai/codex-plugin-cc

追加後にCodexプラグインを選びます。
画面の名前や配置は更新されることがあるので、見つからない場合はOpenAI公式のプラグイン案内も確認してみてください。

Claude Codeのコマンドから設定する場合は、公式案内では次の順番です。

/plugin marketplace add openai/codex-plugin-cc  
/plugin install codex@openai-codex  
/reload-plugins  
/codex:setup

/codex:setupでCodexが使える状態か確認できます。
公式案内の前提はNode.js 18.18以降と、ChatGPTアカウントでの利用またはOpenAI APIキーでの認証。
Codex側の利用枠も消費するため、「Claudeから呼ぶからCodex側は使い放題」ということではありません。

今回のライブでは画像を依頼する連携が動いていましたが、プラグインを入れれば、すべての環境で同じ画像生成機能が使えるとは限りません。
最初に「この環境でClaude DesignとCodexの画像生成を使えるか確認して」と伝えてから進めると、途中で作り方が変わったことにも気づきやすくなります。

出来上がったのは和風の猫カフェ。好みは言葉で直す

制作が進むと、猫カフェの画像が出来上がってきました。
ところが、出てきたのは結構和風の雰囲気。
「あ、和風なんだ」となりました（笑）。

こんな時も、私からClaude Codeへ「和風ではなく、洋風のカジュアルなカフェのイメージ」と追加で伝える、という進め方ができます。
画像担当とページ担当に、それぞれ同じ説明をし直す必要がないのは助かりますね。

1:13:51からの完成画面では、猫の紹介やドリンク、お店のルールなどが入ったページを確認しました。
全体のまとまりはいい感じでしたが、猫のイラストには「ここはちょっと気になる」という部分も。
一度出てきたものを完成扱いにせず、好みとずれているところを見て直す工程は残ります。

配信内で作った猫カフェLPのトップ画面

配信内で作った架空の「Catnap Coffee」のトップ画面です。店舗の正式な案内ではありません。

猫の写真とプロフィールを並べた紹介部分

下へ進むと、猫の写真・名前・プロフィールが並びます。写真だけでなく、情報の見せ方もページ全体でそろえています。

利用時間ごとに3枚のカードで整理した料金部分

さらに下には料金カードがあります。名前・プロフィール・料金はAIが作ったサンプルです。3枚は同じLPの異なる部分を実動画から切り抜いたもので、全ページをつないだ画像ではありません。

特に、お店の住所・料金・営業時間・予約先などは要確認。
今回もAIが内容を補って作ったサンプルなので、実在する店舗の案内としてそのまま使えるものではありません。
見た目が整っているほど、文章の中身も正しそうに見えてしまうんですよね( ;ㅿ; )

実際に使う時は、店舗情報を正しいものに差し替え、スマートフォンでの表示とリンク先も確かめてから仕上げましょう。

まずは1ページで、役割分担を試してみる

画像を別々に作ってから組み合わせる時と、ページ全体のデザインを考えてから画像を頼む時。
その違いが分かりやすかったのが、今回の猫カフェLPでした。

ClaudeとCodexを両方使っている方は、まず手元にあるサービス紹介や勉強会の案内を題材に、「Claude Designで構成を作り、必要な画像をCodexへお願いして」と頼んでみるのもいいですね：）
最初は1ページに絞ると、色・画像・文字のどこを直したいかも確認しやすいと思います。

Claude CodeからCodexにお願い！猫カフェLPの実演

元動画の該当場面を見る

出典

画像の引用

動画サムネイルとLPの実画面3枚は、上記neco.のYouTube配信から引用。
アイキャッチは内容を説明するイラストで、実際の操作画面ではありません。

著者

neco. 🐈‍⬛
AI活用コンサル／ITエンジニア歴20年。
「AIを“知ってる”から“使える”へ」をテーマに、仕事で使えるAIの活用方法を発信しています。
プロンプトや活用記事はこちら → ai-neco