Codex CLIには gpt-image-2 ベースの画像生成が公式スキル（imagegen）として内蔵されていて、APIキーなし・ChatGPTアカウントのサインインだけで使えます。ただし素のまま使うと保存先やファイル名を毎回勝手に決めてしまい、ワークフローに組み込むには挙動が不安定です。この記事では、ラッパースクリプト＋Claude Codeのスキル化で「一言頼めば生成からサイト反映まで終わる」状態にした構成を紹介します。
何がうれしいか
Webサイト制作中に画像が必要になるたびに、従来はこの5工程が挟まっていました。
- 画像生成AIのサイトを開く
- プロンプトを考えて入力する
- 生成画像をダウンロードする
- ファイル名を整えてプロジェクトに移動する
- コードに画像パスを書き込む
スキル化すると、Claude Codeに「信頼感のある、海と船のイメージの画像を作っておいて」と言うだけで、プロンプト組み立て→生成→命名規則どおりの保存→コードへの反映まで、1回の依頼で流れます。ツールの足し算ではなくワークフローの統合が本質です。
構成要素は2つだけ
Claude Code
└─ SKILL.md（手順書）… 依頼文→英語プロンプト変換、命名規則、スクリプト呼び出しの段取り
└─ ラッパースクリプト（shell）… Codex CLIの画像生成を決まった引数で呼び、指定パスに保存
1. ラッパースクリプト
Codex CLIの画像生成を「プロンプト」「出力パス」を引数に取る小さなシェルスクリプトで包みます。ポイントは、課金の追加契約が不要なこと。通常、プログラムから画像生成AIを使うにはAPIキー発行と従量課金の設定が必要ですが、CodexはChatGPTアカウントでのサインイン方式があり、利用分は既存のChatGPTプランの範囲に含まれます。
2. SKILL.md（Claude Code側の手順書）
Claude Codeのスキルは、Markdownの手順書をディレクトリに置くだけで、依頼内容に応じてAIが自分で選んで実行してくれる仕組みです。
---
name: image-gen-codex
description: 画像を生成する。「画像を作って」「サムネを作って」などの依頼で使用。
---
# 画像生成の手順
1. 依頼内容を英語の画像生成プロンプトに翻訳する
2. 保存先のファイル名を <slug>.png の規則で決める
3. ./scripts/imagegen.sh "<prompt>" "<path>" を実行する
4. 生成された画像を成果物（Webサイト等）に反映する
ハマりどころ: frontmatterはファイルの先頭に
SKILL.mdはYAML frontmatterを必ずファイルの先頭に置いてください。frontmatterより前にH1見出しなどを書くとfrontmatterが解釈されず、description（スキルの発動条件のヒント）が効かなくなります。私はこれで一度「スキルが呼ばれない」を踏みました。descriptionには機能説明だけでなく**「どんな言葉で頼まれたら使うか」の発動キーワード**まで書くのがコツです。
Claude Code×Codexのクロス構成という選択肢
この構成の面白いところは、Claude Code（Anthropic）からCodex（OpenAI）の機能を呼んでいる点です。画像生成はCodexにしかない強みなので、そこだけ相棒に借りる。逆にレビューをCodex側に投げて別系統のAIにチェックさせる、という使い方もできます。1社のエコシステムに閉じず、得意分野ごとに組み合わせる方が実務では強いというのが運用しての実感です。
まとめ
- Codex CLIの画像生成はAPIキー不要（ChatGPTアカウントのサインインでプラン内利用）
- 素のままだと挙動が不安定。ラッパースクリプトで入出力を固定し、SKILL.mdで段取りを渡す
- SKILL.mdのfrontmatterは先頭に。descriptionに発動キーワードを書く
この仕組みで実際にWebサイトの画像を全部作った話はブログに書いています: Claude Codeのスキルとは｜「こんな画像を作っておいて」の一言で生成からHP反映まで終わる実例