GPT Image 2で作った画面を「PSDにして」「HTMLにして」と依頼すると、見た目は同じでも中身がまったく異なる成果物が返ることがあります。画像を一枚置いただけのPSDも、スクリーンショットを一枚表示するだけのHTMLも、拡張子としては間違っていません。しかし、次の担当者は文字を直せず、ボタンを操作できません。
大切なのは、画像モデルが作るもの、Photoshopが保持するもの、コーディングエージェントが実装するものを分けて指定することです。
まず「次に何を変えるか」を決める
完成後に必要な作業から逆算すると、選択は難しくありません。
- 一枚の完成画像を配信したいなら、PNG、JPEG、WebPで十分です。
- コピー、商品、色調、人物の切り抜きを後から変えるなら、意味のあるレイヤーとマスクを持つPSDが必要です。
- データ接続、フォーム、ナビゲーション、スマートフォン対応が必要なら、HTML/CSSや既存フレームワークのコンポーネントとして実装します。
「PSDかHTMLか」は形式の好みではなく、誰がどの変更を担当するかという判断です。
gpt-image-2が直接返す形式
OpenAIはgpt-image-2を画像生成・編集モデルとして案内しています。現在の出力形式の説明では、Image APIの結果はデフォルトがPNGで、JPEGとWebPも指定できます。レスポンスはbase64で符号化された画像データです。
PSDやHTMLは記載されていません。Photoshopのレイヤーツリー、DOM、CSSのブレークポイント、コンポーネントの状態もImage APIのレスポンスには含まれません。デモの最後にPSDやWebページが現れたなら、モデルの外側で動くアプリやエージェントがファイルを作成しています。
透過画像は素材作りに有効です。ただし、gpt-image-2の透明背景は現時点でpreviewで、PNGまたはWebPを使う必要があります。透明な商品画像を得ても、商品名、影、背景、装飾が自動的に別レイヤーになるわけではありません。
マスク編集もPhotoshopの選択範囲と同じ精度ではありません。OpenAIは、マスクはモデルへの手掛かりであり、形状どおりに完全に従わない場合があると説明しています。輪郭、細い線、ロゴ、文字は変更後に確認してください。
レイヤー付きPSDを「編集可能」と判定する条件
Adobeによると、PSDはPhotoshopのレイヤーや効果を保持するネイティブ形式です。したがって、PNGを開いてPSDとして保存するだけでは、編集可能な納品データの目的を満たしません。
良いPSDでは、背景、主要人物や商品、装飾、文字、色調整が用途ごとに整理されています。差し替える可能性がある文字はライブテキストのままにし、局所的な処理はマスクや調整レイヤーで行います。レイヤー数を増やすこと自体は目標ではありません。用途不明の細片が50個あるより、役割が明確な5つのグループの方が扱いやすいことがあります。
AdobeのPhotoshop for ChatGPTのチュートリアルでは、チャットで始めた作業をPhotoshop Web版で開き、調整レイヤーやレイヤーマスクを編集する流れが示されています。この場合、画像の出発点にAIが関わっていても、PSDの編集構造を提供するのはPhotoshopです。
連携機能は更新されるため、最初に接続中のPhotoshopへ利用可能な操作を尋ねてください。そのうえで、納品後に必要な変更を具体的に伝えます。
textこのビジュアルを、引き継いで編集できるPhotoshopドキュメントにしてください。 背景、人物、商品、コピー、装飾、色調整を用途別に整理します。 変更予定のコピーはテキストのまま残し、局所調整にはマスクを使ってください。 レイヤーとグループに分かりやすい名前を付け、保存後に開き直して、 商品差し替えと見出し編集ができることを確認してください。
受け取ったら、複製ファイルで主要グループを一つずつ非表示にし、見出しを変更し、商品を差し替え、マスクの端を動かします。最後に保存・終了・再表示を行い、レイヤー名、フォント、効果、色が保持されるか確認します。背景に穴が開く、文字がすべて画像化されている、どの修正も全体の再生成になるなら、十分な分解とはいえません。
Web担当者にはPSD全体が不要な場合もあります。Photoshopは File > Export > Layers to Files でレイヤーを個別ファイルに書き出せます。名前を付けた画像、フォント情報、色、余白、画面幅による変化を渡した方が、巨大なPSDより誤解が少なくなります。
画像からHTML/CSSへ進むときに復元できない情報
一枚のUI画像から読み取れるのは、一つの画面幅での見た目です。GridかFlexboxか、文字量が増えたときの高さ、読み込み中の状態、エラーの通知、キーボードフォーカス、モバイルでの順番は写っていません。
Codexはスクリーンショットなどを画像入力として利用できます。OpenAIの画像入力ガイドは、画像が何を示すか、どこが重要か、求める結果と制約を文章で伝えるよう勧めています。つまり、画像は設計の参考資料であり、HTMLを内蔵したファイルではありません。
次のコードは見た目を表示できますが、画面を実装したことにはなりません。
html<main> <img src="screen.webp" alt="画面全体のデザイン画像" /> </main>
本当の実装では、見出しは見出し、操作はボタンやリンク、データのまとまりは適切なリストや表として表します。写真やイラストだけを画像として残し、文字や操作をピクセルに閉じ込めません。
Codexへの依頼では、再現度と同時にプロダクト要件を渡します。
text添付したUIモックを現在のリポジトリへ実装してください。 スクリーンショット全体を画像として貼らず、既存のコンポーネントとデザイントークンを再利用します。 本文と操作にはセマンティックなHTMLを使い、既存機能を変えないでください。 実データで文字量を確認し、必要なhover、focus、loading、empty、error、disabled状態を扱います。 ローカルで起動し、1440px、768px、390pxで表示、折り返し、キーボード操作、 画像の404、コンソールエラーを確認してから完了してください。
レスポンシブ画像も別途実装が必要です。MDNはsrcset、sizes、<picture>を使い、画面や解像度に合う画像をブラウザへ選ばせる方法を説明しています。単に大きな画像をCSSで縮小するだけでは、不要な転送量や不適切なトリミングを残します。
納品前の最終チェック
PSDは、文字編集、要素差し替え、レイヤー非表示、マスク修正、再表示を試します。HTMLは、狭い画面と広い画面、実際の文言、キーボード操作、読み込み・エラー状態、ネットワークとコンソールを確認します。見た目の比較は必要ですが、1pxの一致のためにセマンティクスや保守性を壊さないことも重要です。
Image APIで局所編集を行う場合は、本站のOpenAI画像編集マスクのガイドも参照できます。
役割を一文でまとめると、GPT Image 2は視覚素材を作り、Photoshopは編集可能な構造を作り、Codexは実際のコードを作ってブラウザで確かめます。 この分担を依頼時に明示すれば、「レイヤー付きPSD」も「画像からHTML」も、デモ映えする言葉ではなく検収できる成果物になります。
