完成後は、フォルダに入れた商品写真と透過PNGロゴから、自動で合成した商品プレビューを一括生成できます。
この記事では、準備からOpenAI Codexへの依頼、動作確認、トラブル対応、権利の確認までを、画面操作で迷わないように順番に説明します。
この回のゴール
- できること：Tシャツやマグカップの写真に、透過PNGのロゴや柄を重ねた商品プレビューを自動生成する。
- 用意するもの：VS Code、Python 3.10以上、OpenAIアカウント、Pillow、商品写真（権利クリア）、透過PNGデザイン（権利クリア）。
- 大切な約束：APIキーは画面やコードに直書きしない。著作権・肖像権・商用利用可否を必ず確認する。料金や仕様は変わるため、各公式ドキュメントで最新情報を確認する。
最初に知っておきたい用語
- 透過PNG：背景が透明の画像。下にある写真を隠さずに重ねられる。
- レイヤー：画像を重ねる考え方。クリアファイルを重ねるイメージ。
- マスク：見せたい部分だけを切り抜く型紙のような画像。
- アルファ合成：透明度を使って画像を自然に重ねる計算。
- 環境変数：パソコンに一時的に覚えさせる設定。キーやパスワードを安全に渡す方法。
- Codex：OpenAIのコーディングを手伝うエージェント。VS Codeの拡張で会話しながらコードを作ってくれる。
- Pillow：Pythonで画像を開く・縮小する・保存するための道具箱。
- モックアップ：完成イメージを見せるための見本画像。
1. この記事でできること
この記事では、VS Code内のOpenAI Codexに依頼を送るだけで、商品写真と透過PNGロゴを合成し、日付ごとのフォルダに安全な名前で保存する最小アプリを完成させます。
家で料理を段取りよく作る感じで、材料（画像）を並べて、レシピ（手順）に沿って、片付け（保存と権利確認）まで一気通貫で進めます。
- Tシャツ写真×ロゴPNGを重ねた商品プレビューを自動生成
- VS Code＋OpenAI Codexだけで最小アプリを完成
- 入力・保存・権利確認のチェックリスト付き
2. 完成イメージ
ゴール後の見え方を、料理の盛りつけのように具体的に描きます。
- フォルダに入れた商品写真とデザインPNGから、合成済みプレビューを一括生成
- 出力は output/{日付}/商品名_デザイン名.png で保存（元画像は上書きしない）
- 透過PNGのロゴが所定位置に縮尺され、自然な重なりになる
3. 最初に知っておきたいこと
レイヤーは「透明のシートを重ねる」イメージ、マスクは「型紙」です。
本記事では、商品写真を下に、透過PNGのデザインを上に重ね、必要ならマスクで形を整えます。
こうする理由は、ECサイト用の見本画像を素早く量産し、修正を繰り返せるからです。例えば学校祭のTシャツでも、色違い・柄違いを一気に確認できます。
4. 対象読者
- 画像を使った小さな商品体験を短時間で形にしたい人
- Python初学者、デザイナー、EC担当
- Windows/Macいずれでも可
たとえるなら、文房具のセットでポスターを作る気持ち。ハサミやノリ（Pillow）を、手元の机（VS Code）で使い、作業手順をサポートする先生（Codex）に相談しながら進めます。
5. 必要なものと入れ方
VS Code
- これは何？：作業机のようなアプリ。ファイルを並べて、編集や実行をまとめて行えます。
- 用意するもの：インターネット接続、メールアドレス、Google ChromeやEdgeなどのブラウザ。
- 入れ方・開き方：
1) 公式サイト https://code.visualstudio.com/ を開く。
2) Windowsは「Windows」、macOSは「macOS」を選び、ダウンロード。
3) インストーラーを開き、案内に従って「次へ」「同意」を押す。
4) インストール後、アプリ「Visual Studio Code」を開く。 - 最初の設定：
1) 左の四角いアイコン「拡張機能」を押す。
2) 検索欄に「Codex」と入力。
3) OpenAIの「Codex」拡張を選び「インストール」。
4) 画面右上や拡張の案内にある「サインイン」を押し、OpenAIまたはChatGPTアカウントでログインする。
5) 左サイドバーに「Codex」アイコンが出たらクリックし、チャット欄を開く。 - できたか確認：左にCodexのチャット画面が表示され、テキスト入力欄にカーソルが置ければOK。
Python 3.10+
- これは何？：指示どおりに作業する「台所のコンロ」。アプリを動かす力になります。
- 用意するもの：PCの管理者権限、インターネット接続。
- 入れ方・開き方：
1) 公式サイト https://www.python.org/downloads/ を開く。
2) 「Download Python 3.xx」を押す。
3) Windowsはインストーラーで「Add Python to PATH」にチェックして次へ。macOSは.pkgを開いて案内に従う。
4) インストール後、VS Codeを開いておく。 - 最初の設定：VS Code左下に表示されるPythonバージョンをクリックし、3.10以上のインタープリタを選ぶ。
- できたか確認：VS Codeの右下に「Python 3.10+」などの表示があればOK。
OpenAIアカウントとAPIキー
- これは何？：Codexや画像APIを使うための「会員証」。
- 用意するもの：メールアドレス、支払い方法（必要な場合）。
- 入れ方・開き方：公式サイト https://developers.openai.com/api/docs/guides/images を開き、アカウント作成とAPIキー発行の流れを確認する。
- 最初の設定：実値は書かず、環境変数や.envで安全に保存します。詳しくは後の手順で説明します。
- できたか確認：VS CodeのCodex拡張でサインインが済み、サイドバーにステータスが表示されていればOK。
Pillow（画像処理ライブラリ）
- これは何？：画像を開く・縮小・重ね・保存するハサミとノリのセット。
- 用意するもの：Python 3.10以上。
- 入れ方・開き方：インストール作業は読者が直接コマンドを打たず、後の手順でCodexに依頼して行います。
- 最初の設定：特になし。プロジェクト作成時にCodexへ依頼します。
- できたか確認：後の「動かして確認する」で、実際に画像が生成されればOK。
素材（商品写真と透過PNGデザイン）
- これは何？：料理の材料。商品写真は背景付きでもOK、デザインは背景が透明のPNG。
- 用意するもの：商用利用の権利がある素材。人物が写る場合は肖像権の同意。
- 入れ方・開き方：PC上の分かりやすいフォルダにまとめておく。
- 最初の設定：ファイル名はシンプルに（英数字とハイフン/アンダースコア推奨）。
- できたか確認：画像ビューアで開けること、透過PNGは背景がチェッカー表示になること。
6. エージェントと作るものの全体像
作るアプリの設計を、家の「家事動線」のようにシンプルにまとめます。材料置き場（input）、調理場（処理）、完成品置き場（output）をはっきり分けるのがコツです。
- フォルダ構成：/input/products, /input/designs, /output/{date}
- 処理の流れ：読み込み → 位置/サイズ計算 → アルファ合成 → 保存
- OpenAI Images APIはオプション（背景透過や生成差し替えに使う）
料金やモデルは変わることがあります。最新の仕様と価格は、OpenAIの公式ガイド（OpenAI Images guide）で確認してください。
7. 手順1: ツールを準備する
目的を確認する
この手順では、VS CodeとCodex、Python、Pillowを使える状態にします。なぜ必要かというと、作業机（VS Code）と先生（Codex）とコンロ（Python）がそろわないと、調理（合成）が始められないからです。
画面で行う操作
- VS Codeを開く。左の拡張機能アイコンから「Codex」を検索し、OpenAIのCodex拡張をインストールする。
- 拡張の案内に従ってサインインする（OpenAIまたはChatGPTのアカウント）。
- 左サイドバーのCodexアイコンを押し、チャット欄を開く。
Codexに依頼して行うこと
Pillowの導入やプロジェクトの初期化は、後の「手順3」でCodexにまとめて依頼します。読者がコマンドを手入力する必要はありません。
成功の見分け方
- Codexのチャット欄に文字が入力できる。
- VS Code右下にPython 3.10以上が表示される。
つまずいたら
拡張が見つからない場合は、拡張機能の検索欄でスペルが「Codex」になっているかを確認。サインインができない場合は、ブラウザのポップアップ許可を見直します。
8. 手順2: APIキーを安全に用意する
APIキーは、施設の入館証のようなもの。落とすと悪用される危険があります。画面やコードに直書きはNGです。OpenAIの安全設計の考え方は、OpenAI API safety best practicesで確認できます。
目的
環境変数や.envで安全に管理し、Gitなどに公開されないようにします。
操作の流れ
- APIキーは各自のOpenAIアカウントで発行する（実値はこの記事に書かない）。
- 保存は環境変数または.envにし、.gitignoreに.envを追加する。
- 設定後はVS Codeを再起動し、アプリから読み取れるかを確認する。
うまくいかない時
アプリがキーを読めないときは、ファイル名が「.env」になっているか、再起動したか、キースペルに余計な空白がないかを確認します。
9. 手順3: エージェントにアプリを作ってもらう
ここからが本番です。下のボックスをコピーして、VS Code内のCodexチャットに送ります。読者がコードやコマンドを書く必要はありません。
Codexに送るプロンプト
目的：商品写真（products）と透過PNGデザイン（designs）を重ね、日付付きフォルダに安全なファイル名で保存する最小のPythonアプリを作ってください。
前提：私はコードやコマンドを手入力しません。必要なファイル作成、仮想環境、依存関係（Pillow）、実行方法の説明まで、VS Code内で完結させてください。
要件：
- ルート直下に input/products と input/designs、output/{YYYYMMDD} を使います。なければ自動作成。
- 入力はPNG/JPG/JPEGのうち、商品写真は products、デザインは designs（PNGのみ・透過前提）。
- 合成は、デザインを商品写真の短辺基準で max 40% 幅にリサイズ。位置プリセット（center, top-left, top-right, bottom-left, bottom-right）をサポート。デフォルトはcenter。
- アルファ合成で自然に重ねる（PillowでRGBA、paste時にマスク利用）。
- 出力ファイル名は「商品名_デザイン名.png」。商品名・デザイン名は拡張子を除いた英数字・ハイフン・アンダースコアのみを許可し、他はアンダースコアに置換。
- 保存先は output/{YYYYMMDD}/。同名があれば _1, _2… を自動で付与。
- 実行すると処理ログ（開始時刻、処理件数、各ファイルの入出力、所要時間、失敗理由）を console と logs/{YYYYMMDD}.log に出力。
- 進捗バー（tqdm等）を導入して進行状況を表示。
- 例外時は続行し、最後に失敗ファイルを列挙。
安全：
- APIキーなど秘匿情報はコードに直書きしない。必要なら .env を使い、.gitignore へ .env を追加。キーの実値は私に貼らせない実装と説明にしてください。
動作確認：
- ダミーの小さな商品写真1枚と透過PNGデザイン1枚を自動生成して試走できるテストスクリプト（またはセットアップタスク）を用意。
- 実行手順を、私がクリックで追える形でチャット内に箇条書きで示してください。
不明点：
- 画像解像度や位置プリセットの基準にあいまいさがあれば、私に質問してください。日本語でやりとりしましょう。Codexが作るものと、あなたが確認する点：
- プロジェクト構成（input, output, logs フォルダ）が自動で整う。
- Pillowの導入、テスト画像の自動生成、実行手順の案内が表示される。
- output/{日付}/ に合成画像が保存され、logs にログが出力される。
10. 手順4: 動かして確認する
最小データで試走
Codexが用意したテスト実行の手順に従い、最小の素材で一度走らせます。料理でいう「味見」です。
視覚チェック項目
- 解像度：拡大しても粗く見えないか。
- アルファ境界：ロゴの周りにギザギザや白い縁が出ていないか。
- 色のにじみ：元写真の色とロゴの発色のバランスが自然か。
- 位置：center指定で中央、他のプリセットで四隅に正しく置かれるか。
- 保存：output/{日付}に正しい名前で保存され、元画像は上書きされていないか。
OpenAI Images APIを併用する場合
背景透過を自動化したい、生成画像で差し替えたい場面では、OpenAIの画像APIをオプションで使えます。サイズ・透過PNGやマスクの扱い、レート制限、料金やモデルは変更される可能性があるため、必ずOpenAI Images guideで最新の指定方法と条件を確認してください。ここでは最小の使い分けだけを押さえます。
・背景透過：商品写真の背景を透過PNGにしたい場合は、マスク画像を用意し編集APIで適用します。
・生成差し替え：デザインそのものを生成して差し替える場合は、サイズと形式を合成の前提に合わせるのがコツです。
11. 手順5: エージェントと直す
ズレ・色味・輪郭を改善
写真により最適な縮尺や位置は変わります。以下の観点でCodexに調整を依頼します。家のカーテンの長さを微調整する感覚です。
- ズレ：短辺40%では大きい/小さいとき、基準を35%や45%に変更。
- 色味：ロゴのガンマ補正や明度を少し上げ下げする処理を追加。
- 輪郭：軽いぼかし（アンチエイリアス）を入れて境界をなめらかに。
高度化のアイデア
- デザイン別の位置カスタム：デザイン名ごとのJSONで位置とスケールを指定。
- バッチ処理：大量ファイルに対して並列や逐次のリトライ制御。
- 進捗バー改善：ETA（残り時間）や失敗件数のサマリを表示。
- ログ改善：処理時間、失敗ファイル、環境情報（Python/Pillowバージョン）を追記。
Codexに送る相談例
次のように自然文で依頼しましょう。「プリセットcenterのとき、縦長写真ではデザインが小さすぎます。短辺40%→45%に。top-rightは余白8%をとってください。」
12. よくあるエラー
Permission denied（保存できない）
- 画面で見えること：出力時に「Permission denied」または保存に失敗する表示。
- よくある原因：保存先フォルダがない/権限がない、ファイルが開きっぱなし。
- 最初に確認：outputフォルダの存在、他アプリで画像を開いていないか。
- Codexへの質問：このメッセージとプロジェクト構成を貼り「保存先の作成と権限確認を自動化してください」。
パス誤り・日本語ファイル名の問題
- 画面で見えること：入力が見つからない、文字化け。
- よくある原因：パスの区切りや全角文字、絵文字を含むファイル名。
- 最初に確認：ファイル名を英数字・ハイフン・アンダースコアへ変更。
- Codexへの質問：「ファイル名の正規化と存在チェックを強化してください」。
PillowのDecompressionBombWarning
- 画面で見えること：非常に大きい画像を開くと警告が出る。
- よくある原因：ピクセル数が極端に大きい画像。
- 最初に確認：画像サイズを確認し、事前の縮小を入れる。
- Codexへの質問：「安全な上限を設定し、大きすぎる画像はスキップしてログに警告を出してください」。
APIキー未設定・レート制限・サイズ超過
- 画面で見えること：画像API呼び出し時に認証エラーや429、サイズ上限エラー。
- よくある原因：環境変数が読めない、短時間の呼びすぎ、画像の縦横サイズ・容量超え。
- 最初に確認：.envのキー名・綴り、再起動、リトライ間隔、画像のサイズを見直す。
- Codexへの質問：「API呼び出しに指数バックオフと入力バリデーションを追加してください」。
13. 次に試すこと
- 曲面フィット（透視変換）で布やマグの丸みに沿わせる。
- 影/光の合成（Multiply/Overlay）で立体感を追加。
- OpenAIの画像編集（inpainting）で色替え・柄替えを試す。仕様や料金はOpenAI Images guideで最新を確認。
14. まとめ
まずは最小構成で回る合成ラインを作り、入出力と権利確認を習慣化しましょう。
その上で、Codexとの対話で位置や色味、ログの改善を重ねると、実務で使える精度に育ちます。
前回のシリーズ記事を読んでいない人は、必要ならAIを読む人から使う人へ：中学生にも分かるGoogleカレンダー連携AIアプリの考え方 #4も参考にしてください。
参考リンク
- OpenAI Images guide：画像生成・編集・バリエーションAPIの使い方、サイズや透過PNG、料金とモデルの最新確認先。
- OpenAI API safety best practices：安全な設計の基本（入力検証、秘匿情報、レート制限、監査ログ）。
- Python Pillow documentation：画像の読み込み、リサイズ、アルファ合成、保存方法。
