Claude×Codex でトップページを作り直した｜素材はぜんぶ Codex の画像生成で作った

Claude Code で作ったサイトのトップページを、Codex（OpenAI のコーディング AI。ChatGPT のプランで使えます）の画像生成で作り直しました。トップを開いて最初に出る大きな絵も、その下に並ぶ入口ごとの絵も、素材はぜんぶ Codex で作っています。

Claude は写真やイラストを生成するモデルではないので、絵の素材は別で用意する必要がありました。そこを Codex で作ったら、のっぺりしていたトップがやっと「いい感じ」になりました。

Claude Code に足りない画像生成やクリエイティブの面は、Codex を組み合わせれば補えます。しかも Claude Code から Codex に頼めるので、指示を出す相手は Claude だけで済みました。

作り直す前のトップ｜素材が無くてのっぺりしていた

作り直す前のトップがこちらです。

Claude を使い始めた最初の頃に作ったもので、今見るとデザインがいまいち。。なんとなく、のっぺりしている感じが気になっていました。

レイアウトは Claude Code に頼めば組めます。ただ、絵の素材が無いままだと、いい感じになりませんでした。

ここで困るのが、Claude は写真やイラストを生成しないこと。Anthropic のヘルプにも、Claude は画像生成ツールのように写真やイラストを作るものではない、と書かれています（Can Claude produce images?）。

素材はぜんぶ Codex の画像生成で作った

そこで、絵は Codex に任せました。Claude と Codex を VS Code で併用している記事で書いたとおり、Claude Code と並べて Codex も使っています。プランは ChatGPT Plus です。

作った素材は 2 種類です。

• ヒーローの絵（トップを開いて最初に出る大きな絵）
• 棚の絵（その下に並ぶガイド・ラボ・ブログの入口に 1 枚ずつ）

ヒーローは 4 案を出してもらい、「夜の部屋でパソコンに向かう」絵に決めました。AI とパソコン・ゲームのつながりがあったほうが、このサイトの中身に合うと思ったからです。

棚は、最初は入口のカード 1 枚ずつに絵を付けようとしました。でも、カードにまでキャラを入れるとやりすぎ。キャラを外してアイコンだけにすると、今度は微妙。最終的に、棚ごとに 1 枚の絵を置く形に落ち着きました。

キャラの三面図を渡すと、同じキャラで場面を描き分けられる

このサイトには、Kana（女の子）と Lyze（犬）という 2 体のキャラがいます。絵を作るときに効いたのが、キャラの三面図（正面・横・後ろから見た絵）を参照画像として一緒に渡すことです。

三面図は、前から使っていたキャラの絵をもとに、Codex で直してそろえたものです。これを渡すようにしてから、後ろ姿や動作まで結構安定するようになりました。

棚の絵は、入口ごとに場面を変えています。

• ガイド：教室で、Lyze の説明を Kana が聞いている
• ラボ：作っているところより、楽しんでいるところ。Kana がゲームで遊んでいる
• ブログ：日記みたいなものなので、夜の部屋でノートを書いている

破綻は出る。数を出して選び、切り出して直す

それでも、AI の破綻はどうしても出ます。今回も、指の本数がおかしい・Lyze の前足が増える、といった崩れがありました。

やったことは 2 つです。

• 同じプロンプトで何枚も作って、いちばん良いものを選ぶ。プロンプトは AI に渡す指示の文章のこと。同じ文章でも毎回少しずつ違う絵が出るので、構図が決まったら数を出して選びます
• 小さな部品は切り出して直す。絵全体を渡して「指を直して」と頼んでも、指の本数は変わりませんでした。手のところだけ切り出して大きくしてから渡すと、ちゃんと 4 本になりました

絵全体のまま直したときは、Codex は「4 本に直しました」と報告してきたのに、見てみたら 3 本のままでした。それからは、指や小物は拡大して数えて確かめるようにしました。

Claude Code から Codex に画像生成を頼めた

Codex を自分で開いてプロンプトを打たなくても、Claude Code から Codex に画像を作らせられたのが楽でした。Codex を動かすスクリプトを自作しておいて、絵が要るときは Claude Code がそれを使って頼む形です。

流れはこうです。

1. Claude Code に「ここに絵が欲しい」と伝える
2. Claude Code が Codex への依頼文（Codex に渡す作業の指示）を書いて、Codex に渡す
3. Codex が画像を作って保存する
4. 候補の中から自分で選び、指や小物は拡大して確かめる
5. Claude Code がサイトに組み込む

実際に Claude Code が Codex に渡した依頼文の一部です。

## 目的
サイトのトップの棚に置く 1 枚絵を、3 種類 × 各 4 枚（計 12 枚）作る。
人があとで選ぶので、選べる状態で保存したら終わり。

## 進め方
- 1 枚ずつ生成して保存し、progress.md に 1 行足してから次へ進む。
  同じ種類の 4 枚は同じプロンプトで作る（違いは生成のランダム性だけ）
- 途中で質問しない。迷ったら上の指示どおりに続ける

使ってみて良かったのはこの 3 つです。

• 指示が 1 つで済む。サイトの作り直しを Claude Code と進めている途中で、絵が要るところだけ Claude が Codex とやり取りしてくれる
• プロンプトを自分で考えなくていい。ブログのアイキャッチも、記事の中身を分かっている Claude がプロンプトを考えてくれる
• ChatGPT Plus の枠で足りた。まとめて作らせても、5 時間ごとの利用枠の 13% ほどでした

呼び出しの仕組みと依頼文の書き方は、AI 活用ガイドに詳しくまとめる予定です。

まとめ：Claude Code と Codex は組み合わせると強い

• Claude は写真やイラストを生成しないので、サイトの絵の素材は別で用意する必要があった
• Codex の画像生成で、ヒーローの絵も棚の絵もぜんぶ作れた
• キャラの三面図を参照画像に渡したら、後ろ姿や動作まで結構安定して、場面を描き分けられた
• 破綻は出るけど、同じプロンプトで数を出して選ぶ・小さな部品は切り出して直す、で実用レベルにできた
• Claude Code から Codex に頼めば、指示を出す相手は 1 つで済み、プロンプトも Claude が考えてくれる

設計とコードは Claude Code、絵は Codex。組み合わせたら、のっぺりしていたトップに、ようやく絵が入りました。

Codex をまだ使っていない人は、Claude と Codex を VS Code で併用している記事から読んでみてください。

よくある質問

Q. Claude Code だけで画像は作れない？

Claude は写真やイラストを生成するモデルではありません（Anthropic のヘルプ）。今回は絵の素材が欲しかったので、Claude Code から Codex に頼んで、Codex の画像生成で作りました。

Q. Codex で画像を作るのに、どのプランを使った？

ChatGPT Plus です。一度にまとめて作らせたときで、5 時間ごとの利用枠の 13% ほどでした。

気になる人は X でも感想聞かせてください！