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

- 媒体: 知能圏（CHINOUKEN）
- 公開日: 2026-08-21
- カテゴリー: エージェント・ソフトウェア
- タグ: Codex、Claude Code、画像生成、Agent Skills
- 想定読了時間: 約21分
- 調査基準日: 2026年8月21日
- 出典: 10件（末尾の「参照リンク」に番号順で記載）
- ページ: https://www.chinouken.com/articles/ai-agent-image-generation-style-workflow
- このMarkdown: https://www.chinouken.com/articles/ai-agent-image-generation-style-workflow.md
- 利用条件: 引用する場合は出典として「知能圏（chinouken.com）」と該当ページのURLを明記してください。本文の再配布は行わず、要約や引用の範囲で使ってください。

CodexやClaude Codeは、画像の内容を考えるだけでなく、参照画像とブランド規約を読み、画像生成モデルを呼び、出力を検査し、修正してリポジトリへ配置できます。Codexの組み込み画像生成とClaude Codeから外部ツールへ接続する方法を比べ、スタイルを再現可能な制作規約へ変える工程を整理します。

![参照と制作規約から画像を生成し 掲載サイズで検査して局所修正を戻す一連の制作工程](https://www.chinouken.com/images/articles/ai-agent-image-generation-style-workflow/hero.png)

*画像モデルを一度呼ぶ作業から、参照、生成、検査、局所修正を含む制作工程へ広げます。*

## エージェントは画像を描くより制作を進める

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

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

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

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

## Codexは組み込みの画像生成Skillを呼べる

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

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

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

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

| 接続方法 | 仕組み | 向く場面 | 注意点 |
| --- | --- | --- | --- |
| MCP | 画像生成サービスを道具として登録 | 複数プロジェクトやチームで共用 | 接続先の権限と送信内容を確認 |
| SkillとCLI | `SKILL.md`からローカルスクリプトを実行 | 制作規約と保存処理をGitで管理 | APIキーをコードへ入れない |
| ローカルAPI | ComfyUIなどへHTTPで仕事を送る | ローカルモデルと固定ワークフロー | GPU、モデル、更新を自分で管理 |

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

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

```markdown
---
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とClaude Codeの違いは入口にある

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

| 項目 | Codex | Claude Code |
| --- | --- | --- |
| 画像の理解 | 参照画像と生成物を読める | 参照画像と生成物を読める |
| 画像の生成 | 組み込み`$imagegen`を利用可能 | 外部ツールへの接続が必要 |
| 再利用手順 | `SKILL.md`と補助ファイル | `SKILL.md`と補助ファイル |
| 外部接続 | Skill、MCP、CLI、API | MCP、Skill、CLI、API |
| ローカル生成 | ComfyUIや独自CLIも呼べる | ComfyUIや独自CLIも呼べる |
| 大量生成 | API経路へ分ける | 接続先のAPIまたはローカル処理 |

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

## 格好よさは形容詞ではなく規則へ分解する

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

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

| 項目 | 決めること | 例 |
| --- | --- | --- |
| 構図 | 主役の位置、視線、余白率、左右の重さ | 左に主役、右半分は余白 |
| 形 | 直線か曲線か、角の丸み、面の重なり | 角丸カードを使わず大きな面で分割 |
| 線 | 太さ、端、輪郭の有無 | 均一な細線、外枠なし |
| 色 | 背景、文字、主色、補助色、面積比 | 紙色70%、濃紺20%、青緑10% |
| 質感 | 紙、写真粒子、筆触、光沢 | 微細な紙粒子、影なし |
| 文字 | 書体の系統、太さ、行長、階層 | 太い見出し一つ、短いラベル三つ |
| 禁止事項 | 出したくない既定表現 | 3D、ネオン、点線、装飾アイコン禁止 |

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

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

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

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

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

## 同じ題材でスタイル差を確かめる

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

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

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

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

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

![同じ参照紙 生成面 検査枠 修正線を 編集図版 スイス様式 製品写真 等角投影の四つで作り分けた比較](https://www.chinouken.com/images/articles/ai-agent-image-generation-style-workflow/figure-four-style-comparison.png)

*左上から編集図版、スイス様式、製品写真、等角投影です。題材と配色を固定し、媒体と質感だけを変えました。*

## 四案から見えたスタイル指定の敗因

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

| 位置と様式 | 強く変わった部分 | 残った問題 |
| --- | --- | --- |
| 左上 編集図版 | 紙の粒子、切断面、平面的な色面 | 三要素が横に並び、工程図の既定構図が残った |
| 右上 スイス様式 | 格子、均一な細線、大きな余白 | 禁止したグラデーションが生成面に残り、厳格さが弱まった |
| 左下 製品写真 | 紙、アクリル、金属、影の質感 | 修正線が物理ケーブルになり、抽象的な工程が装置へ変わった |
| 右下 等角投影 | 奥行き、面の厚さ、斜め上からの視点 | 読みやすい一方で、一般的な3D製品図へ近づいた |

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

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

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

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

## 参照画像には一枚ごとの役割を与える

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

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

```text
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. カード幅で大見出しと一つの関係だけが残るかを見る

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

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

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

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

## ローカルで組むならComfyUIとDiffusers

クラウドの画像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です。[9][10]

| 道具 | 操作単位 | エージェントとの接続 | 向く使い方 |
| --- | --- | --- | --- |
| Codex `$imagegen` | 自然文と参照画像 | 組み込み | 少数の画像を会話から制作 |
| 画像生成API | JSON要求 | CLI、Skill、MCP | 管理されたクラウド生成 |
| ComfyUI | ノードのワークフロー | ローカルHTTP API | 複雑な固定工程とローカル生成 |
| Diffusers | PythonのPipeline | スクリプト | コードで細部まで管理 |
| InvokeAI | ノードと保存ワークフロー | HTTP API | 制作画面と自動実行の併用 |
| AUTOMATIC1111 | WebUIとAPI | HTTP API、CLI | Stable Diffusion系の幅広い拡張 |

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

## 制作規約をSkillとして残す

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

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

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

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

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

## 一発生成から制作システムへ

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

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

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

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

## 参照リンク

1. [OpenAI: Image generation](https://learn.chatgpt.com/docs/image-generation)
2. [OpenAI: Build skills](https://learn.chatgpt.com/docs/build-skills)
3. [OpenAI: GPT Image Generation Models Prompting Guide](https://developers.openai.com/cookbook/examples/multimodal/image-gen-models-prompting-guide)
4. [Anthropic: Models overview](https://platform.claude.com/docs/en/about-claude/models/overview)
5. [Anthropic: Connect Claude Code to tools via MCP](https://code.claude.com/docs/en/mcp)
6. [Anthropic: Extend Claude with skills](https://code.claude.com/docs/en/slash-commands)
7. [ComfyUI: Local server routes](https://docs.comfy.org/development/comfyui-server/comms_routes)
8. [Hugging Face: Diffusers Pipelines](https://huggingface.co/docs/diffusers/main/api/pipelines/overview)
9. [InvokeAI: Using Workflows](https://invoke.ai/features/workflows/)
10. [AUTOMATIC1111: Stable Diffusion WebUI](https://github.com/AUTOMATIC1111/stable-diffusion-webui)

2026年8月21日時点の公式資料を確認しています。仕様は更新される可能性があります。

---

© 知能圏 https://www.chinouken.com/articles/ai-agent-image-generation-style-workflow