メインコンテンツへ移動
AIチュートリアル

乔木 Codex画像生成チュートリアル：Claude、Cursor、あらゆるAgentでスタイルを選んでから画像を生成

このチュートリアルでは、qiaomu-codex-imagegenをインストールし、Agent、MCP、コマンドラインを使って、スタイルの推薦、プロンプトの構成、画像生成、画像編集、結果の検証を行う方法を解説します。

約17分で読了
乔木 Codex画像生成チュートリアル：Claude、Cursor、あらゆるAgentでスタイルを選んでから画像を生成

プロジェクト概要

qiaomu-codex-imagegen は、Codex に組み込まれた画像生成機能を MCP サービス、コマンドラインツール、Agent Skill として利用できるようにします。インストール後は、Claude Code、Codex、Cursor、その他コマンドを実行できる Agent が、自然言語のリクエストに応じて画像ファイルを生成できます。

一般的な「プロンプトを1文入力して画像を生成する」方式とは異なり、デフォルトではまず suggest_directions によって、仕組みの異なるスタイル方向を少なくとも4つ提案します。ユーザーが方向を選択した後、compose_prompt で完全なプロンプトを展開し、最後に生成結果を確認します。

Agent画像生成ワークフロー

プロジェクトには24種類のシーンテンプレート、48個のプリセット、66種類の汎用スタイル、20名のMondoポスターデザイナーのスタイルが組み込まれています。さらに、文字、事実、構図、検収に関するルールも備えており、カバー、ポスター、SNS用画像、プロダクトビジュアル、参考画像を使った編集に適しています。

主なワークフロー

  1. 方向を提案：テーマと用途に基づき、文字主体、平面構成、人物写真、プロダクトのクローズアップ、素材空間など、仕組みの異なる方向を少なくとも4つ提示します。
  2. 方向を選択：ユーザーは1つまたは複数の方向を選択できます。Agentに任せることも可能です。気に入らない場合は、既存の方向を除外して再提案できます。
  3. プロンプトを展開：テンプレート変数を完全なプロンプトに反映し、同時に避けるべき要素、検収条件、仮定、不足情報も提示します。
  4. 画像を生成：選択した各方向について1枚ずつ画像を生成し、再現やシリーズ制作に利用できるよう、実際に使用したJSON情報を画像の横に保存します。
  5. 検収と再生成：Agentが検収条件に沿って画像を項目ごとに確認し、不合格の場合は該当部分だけを修正して再生成します。

ユーザーが「Mondoスタイルを使用」のようにスタイルを明確に指定した場合や、直接 T03 を指定した場合は、方向選択を省略し、プロンプト作成または生成の段階に直接進めます。

インストール前の準備

使用前に以下の環境を準備してください。

  • Node.js 18以上：node --version で確認できます。
  • Codex CLI：インストールしてログインし、codex --version でコマンドが利用できることを確認します。
  • 画像生成権限：現在のCodexアカウントで画像生成を利用できる必要があります。まずCodex上で画像を1枚手動生成して確認することを推奨します。

プロジェクト自体は依存関係のないNode.jsプロジェクトですが、実際の画像生成には、ローカルで利用可能なCodex CLIとアカウントの利用枠が必要です。

Agent Skillをインストール

使用するAgentがAgent Skillsに対応している場合は、次のコマンドを直接実行できます。

npx skills add joeseesun/qiaomu-codex-imagegen

Skillは、シーン選択、スタイル選択、説明文の作成、検収方法をAgentが理解するのを助け、MCPまたはプロジェクト付属のコマンドラインツールを通じて画像を生成します。

MCPサービスを登録

Claude Codeで登録

以下のパスを、プロジェクトが実際に存在するディレクトリに置き換えてください。

claude mcp add --scope user qiaomu-codex-imagegen -- node /絶対パス/qiaomu-codex-imagegen/scripts/mcp-server.mjs

その他のMCPクライアントで設定

Cursor、Codex、その他のMCPクライアントでは、設定ファイルに次の内容を追加できます。

{
  "mcpServers": {
    "qiaomu-codex-imagegen": {
      "command": "node",
      "args": ["/絶対パス/qiaomu-codex-imagegen/scripts/mcp-server.mjs"]
    }
  }
}

MCPサービスは7つのツールを提供します。

  • suggest_directions：無料で即時に、仕組みの異なるスタイル方向を少なくとも4つ提案します。
  • compose_prompt：テンプレートとプリセットを完全なプロンプトに展開し、避けるべき要素、検収条件、不足情報を返します。
  • generate_image：新しい画像の生成または参考画像を使った編集を実行し、ファイルパスとピクセルサイズを返します。
  • search_prompts と get_prompt：ローカルの参考プロンプトコーパスを検索・取得します。
  • build_prompt：簡易ルートで生成されるプロンプトをプレビューします。実際の画像生成は行いません。
  • list_catalog：シーンプリセット、テンプレート、スタイルキー、ローカルコーパスの状態を確認します。

コマンドラインのみを使用

MCPが不要な場合は、リポジトリを直接クローンしてCLIを実行できます。

git clone https://github.com/joeseesun/qiaomu-codex-imagegen
cd qiaomu-codex-imagegen
node scripts/cli.mjs "窓辺で開かれた本、本のページから立ち上るコーヒーの湯気" --preset xiaohongshu

デフォルトでは、生成された画像は ~/Pictures/qiaomu-codex-imagegen/<日付> に保存されます。--out、--name、--json によって、出力先ディレクトリ、ファイル名、機械可読な結果を指定することもできます。

基本的な使い方：まず方向を提案

ポスター、カバー、SNS用画像の制作では、まず「提案してから生成する」ワークフローを使うことを推奨します。次のコマンドは「カフェの読書イベント」向けに複数の方向を提案しますが、画像生成の利用枠は消費しません。

node scripts/cli.mjs suggest "1か月間のカフェ読書イベント" --for 動画カバー

通常、各方向のビジュアルの仕組み、スタイルの固定条件、追加が必要な情報、参考事例が結果に示されます。1つの方向を選択することも、Agentに複数の方向を並行生成させて比較することもできます。

複数の画像スタイル方向

テンプレートプロンプトを展開

方向を決めたら、完全なプロンプトと検収条件を先に確認できます。

node scripts/cli.mjs compose --template T03-1 --var topic=穀雨 --var subject=新芽 --var headline=穀雨

テンプレートは変数に基づいて構造化された説明を生成します。主体やスタイルに加え、文字の階層、余白、安全領域、失敗条件、確認基準が含まれる場合もあります。生成前にプロンプトを確認しておくと、変数の不足や文案の長さ超過を発見しやすくなります。

テンプレートで画像を生成

プロンプトに問題がないことを確認したら、直接生成できます。

node scripts/cli.mjs generate --template T03-1 --var topic=穀雨 --var subject=新芽 --var headline=穀雨

プロジェクトには、巨大な文字と小さな物語、物体が枠を突き抜ける構成、中央の光の隙間、東洋水墨画のエディトリアル、紙彫刻と布地の地形、写真ポートレート、食品のクローズアップ、テクノロジー製品のメインビジュアル、建築図面、情報カードなど、24種類のテンプレートが含まれています。各テンプレートは色やフィルターだけでなく、構図の仕組み、素材の関係、文字の階層、主体同士の関係も変更します。

テンプレートで生成したポスター例

プリセットとスタイルで素早く生成

シーンとスタイルがすでに決まっている場合は、方向の提案を経由しない簡易ルートを利用できます。たとえば、動画カバーを3案生成する場合は次のようにします。

node scripts/cli.mjs "巨大な赤い再生ボタンが日の出のように昇る" --preset video-cover --style saul-bass --count 3

よく使われるシーンプリセットには、次のものがあります。

  • xiaohongshu と xiaohongshu-square：小紅書向けの3:4または正方形のカバー。
  • video-cover：YouTube、Bilibiliなど向けの16:9横長カバー。
  • video-vertical：Douyin、WeChat Channels、Reels向けの9:16縦長カバー。
  • wechat-cover：WeChat公式アカウント向けの2.35:1ヘッダー画像。
  • x-cover：Xプロフィールページ向けの5:2カバー。
  • moments：WeChat Moments向けの4:5ポスター。
  • poster と movie-poster：汎用ポスターと映画ポスター。
  • book-cover、album-cover、article、paper：書籍、アルバム、記事、科学解説用の画像。

たとえば、Mondoスタイルで文字のない映画ポスターを制作する場合は次のようにします。

node scripts/cli.mjs "砂漠に浮かぶ巨大なサンドワームの輪郭と小さな人影" --preset movie-poster --style olly-moss

画像内の文字を制御

ポスターやカバーには通常、タイトルだけでなく、サブタイトル、情報行、バッジなども必要です。--text で文字を指定できます。

node scripts/cli.mjs "一座の灯台" --preset wechat-cover --text "夜航船"

中国語や長い文案を含める場合は、短いフレーズを1文字ずつ明確に指定し、生成後に拡大して確認することを推奨します。プロジェクトの説明によると、モデルが中国語や小さい文字の情報行を生成する際には、依然として細かな誤りが発生する可能性があります。ポートレートや情報レイヤーが不要なプロダクトのクローズアップでは、文字なしの方式を使用できます。

参考画像を使った編集

--ref で1枚または複数枚の参考画像を指定できます。参考画像のパスは絶対パスでなければなりません。

node scripts/cli.mjs "同じ鉛筆を保ち、背景を暖色系のベージュの紙に変更" --ref /abs/pencil.png --ratio 1:1

この方法は、背景の置き換え、主体の維持、局所的なビジュアル調整に適しています。プロジェクトが画像を暗黙にトリミングすることはありません。最終的な比率が要求と一致しない場合、結果にサイズの差異が示されます。

プロンプトのプレビューとローカル事例の検索

画像を生成せず、プロンプトだけを確認したい場合は、次のコマンドを使用できます。

node scripts/cli.mjs "コーヒーと本" --preset xiaohongshu --show-prompt

オプションのローカルコーパスを構築済みの場合は、類似事例を検索することもできます。

node scripts/cli.mjs search "節気 茶" --limit 5

コーパスには約689件の参考プロンプトとサムネイルが含まれますが、これらの第三者データはリポジトリには含まれていません。コーパスがなくても、テンプレート、スタイル、画像生成のワークフローは通常どおり使用できます。

高度な設定と実践のヒント

シリーズ画像の方向を固定

小紅書用の画像や複数のカバーを制作する場合は、まず1枚目のテンプレートとスタイルを選び、その後の画像にも同じスタイルの固定条件、比率、情報構造を適用することを推奨します。各画像に個別に「似たスタイル」と入力するよりも、一貫性を保ちやすくなります。

並列バリエーションの利用時は利用枠を管理

--count を使用すると、1〜4個のバリエーションを並列生成できますが、画像1枚ごとに Codex または OpenAI アカウントの利用枠を消費します。画像1枚の生成には通常約30〜60秒かかり、並列数が多いほど消費量も増加します。

透明背景の問題に対処する

プロジェクトは生成結果内の透明領域を検出します。デフォルトでは、透明領域が検出されると白い背景に平坦化されます。透明背景を実際に保持する必要がある場合は、transparent_background: true を使用できます。この処理は、一部の画像ビューアーで透明領域が黒い縁として表示されるのを防ぐためのものです。

Codex のパスとタイムアウト時間を指定する

システムが Codex を見つけられない場合は、環境変数 QIAOMU_CODEX_BIN で実行ファイルのパスを指定できます。生成がタイムアウトする場合は、--timeout の値を大きくするか、まず説明を簡略化してください。

node scripts/cli.mjs "コーヒーショップの読書イベント用カバー" --preset video-cover --timeout 120000

ローカルコーパスパッケージを構築する

独自のアーカイブディレクトリがあり、その中に archive.json、prompts/、images/ が含まれている場合は、次を実行できます。

node scripts/build-corpus.mjs /path/to/プロンプトアーカイブ

デフォルトのコーパスディレクトリは ~/.local/share/qiaomu-codex-imagegen/corpus です。QIAOMU_CORPUS_DIR で別の場所を指定することもできます。コーパスパッケージはローカルでのみ使用することを推奨します。許可を得ていない第三者のコンテンツをコミットしたり転送したりしないでください。

インストールが成功したか確認する

プロジェクトには、オフラインテストとディレクトリチェック用のコマンドが用意されています。

npm test
node scripts/cli.mjs --list
node scripts/cli.mjs "赤い円" --show-prompt

npm test は画像生成の利用枠を消費しないため、テンプレートの組み立て、テキストモード、構造置換、方向の多様性、コーパス検索、透明背景処理、プロトコルなどの機能を検証できます。

よくある質問

  • cannot start codex：Codex CLI がインストールされていることを確認するか、QIAOMU_CODEX_BIN を設定してください。
  • codex finished without producing an image：Codex のログイン状態と、アカウントに画像生成の権限があるかを確認してください。
  • timed out：タイムアウト時間を延長するか、説明の複雑さを減らしてください。
  • アスペクト比が期待どおりにならない：説明の中でもう一度アスペクト比を強調するか、--ratio を使用してください。ツールが自動的に無言でトリミングすることはありません。
  • 参照画像が見つからない：--ref の値を絶対パスに変更してください。

おわりに

qiaomu-codex-imagegen の重点は、単に一文を画像モデルへ転送することではありません。シーン、スタイル、構図の関係、テキストの階層、受け入れ基準を、再利用可能なワークフローとして組み立てることにあります。Agent Skill または MCP から始めて、Agent に推奨と調整を任せることもできます。また、CLI を使ってプリセット、スタイル、アスペクト比、テキスト、参照画像を正確に制御することもできます。

カバー、ポスター、シリーズ用画像を安定して制作する必要がある場合は、「まず方向性を推奨し、次にプロンプトを展開し、生成後に条件に沿って受け入れ確認を行う」という手順を推奨します。また、正式に使用する画像内のテキストとサイズについては、必ず人手で再確認してください。