CodexとClaude Codeで画像のスタイルを揃える制作規約と生成ツールのつなぎ方

コーディングエージェントへ画像制作を頼む価値は、文章から一枚を生成する部分よりも、その前後の工程を進められる点にあります。エージェントは、記事本文、デザイン規約、既存画像、表示先のコードを同じ作業フォルダーから読んだうえで、画像モデルへ指示を渡し、出力ファイルを開いて確認し、適切な寸法へ直し、ページへ組み込み、ビルドまで試せるからです。

一回の依頼は、実際には次の七つの仕事へ分かれます。

1. 画像の用途と表示寸法を確認する
2. 本文から一枚で伝える主張を選ぶ
3. 参照画像からスタイルの規則を抽出する
4. 画像モデルまたは組版プログラムを選ぶ
5. 生成し、原寸と実際の表示幅で検査する
6. 一度に一箇所だけ修正する
7. 採用画像、代替テキスト、制作条件を保存する

画像生成モデルはこのうち四番目と五番目の一部を担当します。どの主張を残し、文字を画像へ焼き込むか、どの失敗を許さないかを決めるのは、前後を動かすエージェントの仕事です。役割の分担を押さえると、CodexとClaude Codeを同じ軸で比較できます。

現在のCodexには、GPT Image 2を使う画像生成機能が組み込まれています。自然文で頼むだけでも起動できますが、$imagegenを依頼文へ含めれば画像生成Skillの明示になり、参照画像を添えて編集や新規生成を頼むことも可能です。組み込み経路はCodexの利用枠に含まれ、大量生成をAPI課金へ分けたい場合はOPENAI_API_KEYを設定して画像APIを使う方法が案内されています。1

たとえば記事の冒頭画像なら、次のように頼めます。

$imagegen を使ってこの記事のhero画像を作ってください。
用途は一覧カードと記事冒頭で共用する16:9の画像です。
まず article.md と brand/style.md を読み、中心命題を一つに絞ってください。
参照画像 reference.png からは配色だけでなく、余白率、線の太さ、
形の角、情報密度、文字の階層も抽出してください。
生成後は原寸、740px、360pxで確認し、採用画像を
public/images/articles/example/hero.png に保存してください。

この依頼文の要点は、画像の説明だけでなく、読むファイル、用途、検査寸法、保存先まで指定している点です。CodexのSkillには手順、参考資料、スクリプト、テンプレートをまとめられるため、画像の寸法確認、余白検査、ファイル名、代替テキストの書式まで入れておけば、画像モデルを呼ぶ前後の品質管理を再利用できます。2

OpenAIの公式ガイドは、プロンプトを用途、主題、構図、視覚様式、制約へ分け、編集では「変えるもの」と「維持するもの」を明示するよう勧めています。参照画像が複数ある場合も、画像1は製品、画像2はスタイルというように役割を番号付きで指定します。3

Claude Codeは画像を読み、内容やレイアウトを評価できますが、Claudeの現行モデルは画像入力とテキスト出力のモデルです。Claude自身が画像ファイルを描いて返すわけではありません。4

そのためClaude Codeへ「画像を作って」と頼むには、実行できる道具を別に用意します。接続方法は三つあります。

Claude CodeのMCP設定は、外部サービスや道具をClaudeへ接続する公式の拡張経路です。プロジェクト用の接続は.mcp.jsonへ保存でき、チームで共有できます。Claude Codeはプロジェクト由来のMCPサーバーを初めて使う際に承認を求めます。5

Skillは、接続先だけでなく制作手順を固定するのに向く方法です。Claude Codeでは.claude/skills/<名前>/SKILL.mdへ指示を書き、必要に応じてスクリプトや作例を同じフォルダーへ置けます。依頼に合うと自動で読み込まれるほか、/skill-nameで明示的に呼び出す使い方も選べます。6

---
name: brand-image
description: 記事や製品ページのブランド画像を生成し検査する
---

1. article.md と references/style-contract.md を読む
2. content spec と style spec を分けて書く
3. scripts/generate_image.py を実行する
4. 出力を原寸 740px 360pxで確認する
5. 一度に一つの対象だけを修正する
6. 採用画像とprompt.jsonを指定先へ保存する

このSkillから呼ぶgenerate_image.pyは、OpenAI Images API、Google Imagen、各社の画像生成API、またはローカルのComfyUIへ接続できます。Claude Codeが制作の判断を行い、別の画像モデルが画素を生成する分業です。

二つのエージェントで、画像品質を決める考え方はほぼ共通しています。違うのは、最初から画像生成器が道具箱に入っているかどうかです。

Codexでも、常に組み込み機能が最適とは限りません。同じモデル、シード、ControlNet、LoRA、アップスケール、マスク処理を固定したい制作では、ComfyUIやDiffusersの方が工程を細かく管理できます。反対に、一枚の記事画像を会話の中で作り、すぐコードへ配置する用途では、組み込み機能の方が準備を減らせます。

「もっと格好よく」「洗練された感じで」という指示は、評価基準がありません。画像モデルは不足部分を、よくある営業資料、光沢のある3D、ネオン、カードの列、抽象的なAIアイコンで埋めます。その結果、整ってはいるものの、その媒体らしくない画像になります。

参照スタイルは、少なくとも次の七項目へ分解します。

配色と紙の質感だけを参照させた場合、構図はモデルの既定値へ戻りがちです。構図まで似せたいなら、「左上に大見出し」「中央は一つの非対称な関係」「キャンバスの三割を空ける」のような見える規則へ落とす必要があり、逆に参照画像の内容や配置を複製したくない場合は、どの項目だけを引き継ぐかを明記します。

ここで有効なのが、内容の仕様とスタイルの仕様を分けることです。

Content spec:
- 主張: エージェントが参照 分析 生成 検査 修正を一つの工程にする
- 関係: 左から右へ進み 検査から修正だけが小さく戻る
- 必須要素: 参照 制作規約 画像モデル 検査 採用画像

Style spec:
- 非対称な編集図版
- 大きな形を3つだけ使う
- 余白はキャンバスの30%以上
- 紙色を主面積にする
- 線と影を最小限にする
- カード列 3Dロボット 発光する脳 点の装飾を使わない

内容とスタイルが混ざっていると、修正時に何が失敗したか分かりません。分けて保存すれば、構図はよいが色が違う、内容は正しいが密度が高い、という診断をエージェントへ返せます。

実際にCodexの組み込み画像生成を四回呼び、題材と配色を固定したまま、視覚様式だけを変えました。共通の題材は、左の参照紙、中央の生成面、右の検査枠、検査から生成へ戻る一本の修正線です。四枚とも正方形、文字なし、紙色、濃紺、青緑、水色という条件もそろえています。

変更したのは、媒体、線、質感、奥行き、光だけです。

1. 左上は、切り紙とシルクスクリーンを組み合わせた編集図版
2. 右上は、厳格な格子と均一な線を使うスイス様式
3. 左下は、紙、アクリル、金属、ケーブルを撮影した製品写真
4. 右下は、単純な立体を斜め上から描く等角投影の技術イラスト

四案へ共通して渡した内容は次の通りです。実際の生成では、この共通部分へ各様式の指定を一つずつ足しました。

同じ画像制作工程を描く
必須要素は参照紙 青緑の生成面 濃紺の検査枠 一本の修正線
配置は左から参照 生成 検査  修正線は検査から生成へ戻る
紙色 濃紺 青緑 水色を使用
文字 数字 ロゴ 人物 ロボット AIの脳 追加画面を入れない

四案は見た目が変わりましたが、題材を構成する物の形はよく似ています。スタイルの指定が効いた部分と、共通の内容指定へ引っ張られた部分を分けると、改善点が見えます。

第一の敗因は、内容の形を固定しすぎると、スタイルを変えても構図が収束する点です。今回は左右の配置と四つの必須要素を厳密に指定したため、すべてが「三つの物体と戻り線」という同じ骨格になりました。媒体ごとの構図差まで見たい場合は、保持するのを意味関係だけにし、物の形と配置は各様式へ任せます。

第二の敗因は、様式名だけでは視覚規則を十分に指定できないことです。「スイス様式」と書いても、線幅、格子の列数、面積比、整列位置まで自動では決まりません。右上では余白と整列は変わりましたが、避けるよう指定したグラデーションが残りました。禁止事項は保証ではなく、生成後に確認する検査項目です。

第三の敗因は、媒体を変えると抽象記号の意味も変わることです。平面図の線は「修正が戻る」という関係として読めますが、写真ではケーブル、等角投影では配線のような物体になります。抽象的な因果を保ちたい画像では、写真や立体化が本当に必要かを先に判断します。

一方、四案を同じ題材で作る方法が向くのは、ブランドの候補を探す初期段階です。一枚ずつ異なる題材を生成するより、紙の質感、余白、線、奥行きのどれが媒体に合うかを比較できます。採用後は、選んだ一案だけを基準に、構図、色、文字階層を狭く調整します。

参照画像は、増やせば精度が上がるとは限らず、枚数より一枚ごとの役割の明確さが効きます。製品写真、人物、色見本、誌面、競合広告を説明なしで渡すと、どの画像の何を維持するかが曖昧になるからです。

複数の参照を使うときは、入力ごとに役割と優先順位を付けます。

Image 1: 主役となる製品の形とラベルを維持
Image 2: 色 面の分割 余白率だけを参照
Image 3: 見出しと本文の文字階層だけを参照

優先順位は製品の同一性 構図 色の順
Image 2とImage 3の被写体や文章は引き継がない

編集では、変更点と不変条件を毎回書き直すのが基本です。OpenAIの公式ガイドも、「Xだけを変え、ほかは同じにする」と指定し、配置、矢印、ラベル、カメラ角度など維持すべき項目を反復する方法を示しています。3

一度に「文字を直し、色を暗くし、余白を増やし、アイコンを消す」と頼むと、正しかった部分まで変わります。最初の修正は「右下の装飾アイコンだけを削除。ほかの形、文字、色、配置は維持」のように一対象へ限定し、編集が重なるたびに劣化する場合は、採用候補へ戻って別の修正枝を作ります。

GPT Image 2は文字描画を改善しており、公式ガイドは表示したい文言を引用符で囲み、書体、色、大きさ、位置を制約として渡す方法を案内しています。小さな文字や密な情報で推奨されるのは、mediumまたはhigh品質です。3

それでも、固有名詞、数値、日付、法的な注意書き、長い日本語を一字も誤れない画像は、画像生成だけで完結させない方が確実です。次の分担が扱いやすくなります。

• 写真、イラスト、質感、背景は画像生成モデルで作る
• 見出し、数値、図表、ロゴはHTML/CSS、SVG、Canvas、Figmaなどで組む
• 生成画像と文字を最後に合成し、ブラウザまたは画像比較で検査する

記事の概念図でも、短い分類語が三つ程度なら画像生成へ任せられます。製品名を正確に並べる比較表、料金、年表、手順図は、Webページの実HTMLまたはSVGで作る方が検索、読み上げ、修正にも有利です。画像にする必要がある場合だけ、決定論的な組版からPNGへ書き出します。

この判断は品質だけでなく保守性にも効きます。モデルや料金が変わったとき、画像全体を再生成せず、データまたは文字だけを直せるからです。

生成直後の大きな画像では、細い線も小さな文字も読めます。しかし記事幅や一覧カードへ縮めると、関係が消えて箱だけが残ることがあるため、検査は少なくとも三段階で行います。

1. 原寸で誤字、崩れ、余計な指、接合、透かしを探す
2. 本文の掲載幅で主要ラベルと視線の流れを見る
3. カード幅で大見出しと一つの関係だけが残るかを見る

カード幅で読めないときは、文字をさらに太くする前に情報を削るのが先です。一枚に複数の主張、四段以上の階層、多数の小さなアイコンがある場合は、画像を分けるか、本文の表へ戻します。

エージェントへは「良し悪しを見て」ではなく、判定項目を渡します。

- 360px幅で見出しを読める
- 文字を読まなくても左から右の関係が分かる
- 主要要素は5個以内
- 余白が全体の25%以上
- 追加ラベル ロゴ 透かしがない
- article.mdにない因果や優劣を足していない

視覚評価に加え、画像寸法、縦横比、ファイル容量、透明部分、指定色、OCR結果はスクリプトでも検査できます。人の好みをすべて自動化するのではなく、機械で落とせる失敗を先に除く使い方です。

クラウドの画像APIを使わず、ローカルモデルをエージェントから動かす代表的な道具がComfyUIです。ComfyUIはモデル、プロンプト、画像入力、ControlNet、拡大、保存などをノードでつなぐOSSで、ローカル端末上で動かせます。サーバーは/promptへワークフローを送るAPIと、進行を受け取るWebSocketを持ちます。7

人がComfyUIで一度ワークフローを作り、API形式のJSONとして保存すれば、CodexやClaude Codeはプロンプト、参照画像、シード、出力先だけを書き換えて実行できます。制作担当がノード構成を管理し、エージェントが記事ごとの内容を流し込む分担です。

よりコード中心に組む場合はHugging Face Diffusersがあります。DiffusersのPipelineは、モデル、スケジューラ、前後処理を一つの推論経路へまとめ、text-to-image、image-to-image、inpainting、ControlNetなどをPythonから実行できます。8

InvokeAIはノード型の反復可能なワークフローとHTTP APIを提供します。AUTOMATIC1111のStable Diffusion WebUIもtxt2img、img2img、inpainting、拡張機能、APIを備えた広く使われるOSSです。910

ローカル生成でも、GPUメモリ、モデルのライセンス、学習素材の扱い、ダウンロード元、カスタムノードのコード、生成物の利用条件は確認が必要です。特にComfyUIのカスタムノードは任意のPythonコードを実行するため、エージェントへ自動インストールを許す範囲を限定します。

一枚をうまく作れたら、長い完成プロンプトだけを保存するより、判断手順をSkillへ残します。同じ文章でも、記事、広告、図解、製品写真では適切な工程が違うためです。

再利用するSkillには、次の内容を入れます。

• 起動条件と対象画像
• 必ず読むブランド規約と作例
• 内容仕様とスタイル仕様のテンプレート
• 画像生成とHTML/SVGを選ぶ分岐
• 参照画像の役割付け
• 禁止表現と不変条件
• 原寸、本文幅、カード幅の検査
• 一度に一対象だけを直す編集規則
• 保存先、ファイル名、代替テキスト、制作記録

プロンプト、モデル、品質、寸法、参照画像、採用理由、修正履歴もprompt.jsonやvisuals.mdへ保存します。乱数だけではクラウドモデルの更新まで固定できないものの、何を狙い、どの条件で採用したかを後から追えるのが利点です。

画像生成を繰り返す組織では、最終画像より不採用理由が価値を持ちます。「青緑が弱い」より「カード列になり媒体の非対称な構図が消えた」、「文字が多い」より「360pxで主張が二つに割れた」と記録すれば、次の依頼から判断基準として使えます。

Codexは組み込み画像生成をすぐ使えるのに対し、Claude Codeは外部の画像生成器を道具として接続する構成です。しかし、最終的な差は入口より制作工程に現れます。

ここからは筆者の見立てです。AIエージェントで画像をうまく作る要点は、強いモデルを一回呼ぶことではなく、次の四点にあります。

• 内容とスタイルを別の仕様へ分ける
• 参照画像ごとに維持する役割を決める
• 生成へ任せる部分と正確に組版する部分を分ける
• 掲載サイズで検査し、一度に一対象だけ修正する

「格好よく」は感想のままでは再現できません。余白、面積比、線、形、文字階層、禁止事項へ翻訳し、生成、検査、修正の記録を残すことで、スタイルは個人の勘からチームで使える制作規約へ変わります。AIエージェントの役割は、その規約を守りながら画像モデルとコードと人の判断を一つの工程へつなぐことです。