# GPT Image 2の画像を編集できるPSDにする方法：文字・商品・背景を分けて納品

> GPT Image 2はPSDを直接出力しません。生成画像をPhotopeaやPhotoshopで組み立て、文字を編集できるレイヤー付きPSDとして保存する手順と、HTML/CSSへ渡す際の注意点を解説します。

- Source: https://www.aifreeapi.com/ja/posts/gpt-image-2-psd-layers-image-to-html
- Language: ja
- Published: 2026-09-03
- Updated: 2026-10-05
- Publisher: AI Free API (https://www.aifreeapi.com)

> **2026年10月5日追記：** OpenAI は2026年9月8日に GPT Image 2.5 を公開しました。API のモデル ID は `gpt-image-2.5-flare` と `gpt-image-2.5-sunburst` で、`gpt-image-2` も引き続き利用できます（画像出力はどちらも100万トークンあたり $30）。以下の手順は新モデルにもそのまま使えます。違いは [GPT Image 2.5](/ja/posts/gpt-image-2-5) を参照してください。

**GPT Image 2で作った画像は、PhotopeaやPhotoshopで編集用のレイヤーを作り、PSDとして保存できます。ただし、画像をPSD形式に変えるだけでは、文字や商品が自動で分かれるわけではありません。**

たとえば、商品告知の画像で「価格だけ来月変更する」「商品を右へ移動する」という修正を予定しているなら、価格は文字レイヤー、商品は背景から独立したレイヤーにします。完成画像を一枚入れたPSDでは、この変更をそのまま行えません。本記事では、生成画像から修正を引き継げるPSDを作る手順と、その素材をWeb実装へ渡す方法を説明します。

## 納品後の修正から、必要なレイヤーを決める

![画像、レイヤー付きPSD、HTML/CSSそれぞれの用途と納品時の確認事項](https://www.aifreeapi.com/posts/ja/gpt-image-2-psd-layers-image-to-html/img/delivery-final-checklist.webp)

PSDは[レイヤーや効果などを保持できるPhotoshopの形式](https://helpx.adobe.com/photoshop/desktop/save-and-export/export-files-to-different-formats/image-file-formats-supported-in-photoshop.html)です。保存時に存在する構造を残すための形式であり、完成画像に焼き込まれた文字や、商品に隠れた背景を復元する機能ではありません。

| 後から行いたい変更 | 用意するもの | 開いたときの確認方法 |
|---|---|---|
| 価格、日付、見出しを直す | 文字レイヤー | 文字ツールで一部を書き換えられる |
| 商品を移動・差し替えする | 独立した商品素材と、商品が写っていない背景 | 商品を非表示にしても背景に元の商品が残らない |
| 人物の輪郭を調整する | 人物レイヤーと編集用のマスク | 背景を変えながら輪郭を調整できる |
| 色だけを変更する | 対象に適用した調整レイヤーなど | 元の画像を残したまま調整を戻せる |
| ページ内の文字やボタンを操作する | HTML/CSSと必要な動作の実装 | ブラウザで文字選択や操作ができる |

すべてを細かく分解する必要はありません。差し替えない写真部分は一枚にまとめても構いません。レイヤー数ではなく、合意した修正が行えることを完成条件にします。

## GPT Image 2から取り出すのは画像素材

OpenAIの[Image APIの出力形式](https://developers.openai.com/api/docs/guides/image-generation#output-format)はPNG、JPEG、WebPです。結果はbase64で符号化された画像データとして返され、PSDは出力形式に含まれていません。チャットからPSDをダウンロードできる場合も、ファイルを作っている編集ツールや実行環境の機能を別途確認する必要があります。

最初から納品後の修正が分かっている場合は、背景、商品や人物、文字を分けて準備すると作業を進めやすくなります。価格や日付まで完成画像へ描き込ませず、後から文字ツールで配置すれば、生成された文字を消す工程を減らせます。

`gpt-image-2`の[透明背景はプレビュー機能](https://developers.openai.com/cookbook/examples/multimodal/image-gen-models-prompting-guide)です。APIでは`background="transparent"`とPNGまたはWebPを使用します。PNGの場合は`output_compression`を指定しません。JPEGには透過情報がないため、切り抜き素材を途中でJPEGに変換すると透明部分を保持できません。利用しているサービスの画面に、同じ設定があるとは限りません。

背景と素材のキャンバス寸法をそろえておくと配置の目安になりますが、別々に生成した画像の位置や大きさが完全に一致する保証はありません。配置後に拡大率と座標を合わせます。また、白い背景の画像と透過画像は別物です。白色を一括で消す方法では、商品の白い部分まで失うことがあります。

## Photopeaでレイヤー付きPSDを作る

以下は、背景の上に商品を置き、価格を変更できる告知画像を作る手順です。用意するのは背景画像、独立した商品素材、掲載する正確な文言です。完成画像しかない場合の処理は次の節で説明します。

### 背景を開き、素材を同じドキュメントへ配置する

[Photopeaのファイル操作ガイド](https://www.photopea.com/learn/opening-saving)に沿って、まず **File > Open** で背景画像を開きます。背景を選んでいることが分かるように、レイヤー名を「背景」に変更します。

続いて、商品素材を開いているドキュメントの**中央のキャンバスへドラッグ＆ドロップ**します。この操作では、画像がスマートオブジェクトのレイヤーとして挿入されます。上部のドキュメントタブ付近へ落とす操作とは区別してください。商品が別タブで開いただけなら、まだ背景と同じPSDに入っていません。

レイヤーパネルに背景と商品の両方があることを確認し、商品を配置します。商品を非表示にして、背景だけが残るかも確認してください。元の背景に同じ商品が写っていると、移動後に二重に見えてしまいます。スマートオブジェクトにしただけで、商品素材の内部まで自動分解されるわけでもありません。

### 価格や見出しを文字レイヤーで作る

文字ツールを選び、キャンバス上で新しく文字を入力します。価格、日付、見出しなど、個別に差し替える項目は分けておくと扱いやすくなります。フォント、サイズ、色、行間を設定し、実際に使う長さの文言で収まりを確認します。

Photopeaの[文字編集ガイド](https://www.photopea.com/learn/text)では、文字レイヤーには**Tの付いたサムネイル**が表示されます。レイヤー名が「見出し」でも、画像レイヤーなら一文字ずつ書き換えることはできません。文字レイヤーをラスタライズすると画素になるため、変更予定の文字は文字のまま残します。

元の画像に書かれた文字をOCRで読み取れても、元のフォントや文字間隔まで再現されたとは限りません。納品先でも使用できるフォントを選び、フォント名を添えて渡します。

### PSDで保存し、保存したファイルを開き直す

背景、商品、文字の位置を確認したら、**File > Save as PSD** で保存します。確認用のPNGなども別に書き出しておくと、納品先で見た目を比較できます。画像として書き出したファイルと、編集を続けるPSDの両方を区別して渡してください。

次に、保存したPSDを実際の納品先で使うエディターで開きます。複製したファイルで価格を一度変更し、商品を少し移動して保存、もう一度開き直します。文字、レイヤー、配置が保たれれば、少なくともその修正は引き継げます。元の作業画面で編集できることだけでは、保存されたPSDの互換性まで確認したことにはなりません。

## 完成画像一枚しかない場合は、隠れた部分を作り直す

文字も商品も背景に焼き込まれている場合は、元画像を参照用として残し、修正したい要素だけを作り直します。元デザインのレイヤーを取り戻す作業ではなく、必要な変更ができる構造を新しく作る作業です。

価格だけを変更するなら、まず元の価格を消した背景を用意します。その上に新しい文字レイヤーを置きます。元の文字を残したまま新しい文字を重ねると、桁数や文言が変わった際に古い文字がはみ出します。

商品を動かすなら、商品の切り抜きに加えて、商品があった場所の背景も必要です。完成画像の上に切り抜きだけを重ねると、移動した先の商品と背景に残った商品が二つ見えます。背景の模様や影が隠れていた箇所は補う必要があり、生成や修復による再構成は元の画素の復元とは異なります。

GPT Image 2のマスク編集を背景の補修や素材作りに使うことはできますが、OpenAIは[マスクの形状に厳密に従わない場合がある](https://developers.openai.com/api/docs/guides/image-generation#edit-an-image-using-a-mask)と説明しています。ロゴ、輪郭、周囲の模様など、維持すべき箇所を元画像と比較してください。具体的なマスクの使い方は[OpenAI画像編集APIのマスク解説](/ja/posts/openai-image-editing-api)で確認できます。

必要な素材を用意できたら、前節と同様に一つのドキュメントへ配置し、文字を作り、PSDで保存します。差し替えない部分まで分割するより、実際の修正に必要な部分へ作業を絞る方が納品条件を明確にできます。

## ChatGPTのAdobe連携を使うときの入口と確認点

2026年8月6日更新の[Adobe公式案内](https://helpx.adobe.com/firefly/web/app-integrations/adobe-connectors/adobe-for-chatgpt.html)では、従来のPhotoshopプラグインが**Adobeプラグインに置き換わった**と説明されています。現行の手順は、ChatGPTのサイドバーで **Plugins** を開き、**Adobe** を選んで **Install plugin** を実行する流れです。以前のPhotoshop連携を使っていた場合も、Adobe側の案内に従って再接続します。表示や使える操作は環境によって異なります。

Adobeが2026年4月に公開した[PhotoshopとChatGPTのチュートリアル](https://www.adobe.com/learn/photoshop/web/photoshop-in-chatgpt)は、色相・彩度の調整をマスク付きの調整レイヤーとしてPhotoshopへ引き継ぐ例です。これを、ポスター全体が元の文字レイヤーや商品レイヤーへ自動で分解される実証として扱うことはできません。

連携を使う前に、現在のチャットでPSDの作成・保存・ダウンロードが可能か、どの編集操作を使えるかを確かめます。そのうえで「価格を文字として変更したい」「商品を動かしても背景に元の商品を残したくない」と、納品後の修正を伝えます。PSDを保存する機能が使えなければ、素材を取り出してPhotopeaやPhotoshopで組み立てます。

指示文を長くすること、JSON形式にすること、Thinkingを選ぶこと自体は、PSD作成機能や文字レイヤーの存在を保証しません。ダウンロードできた場合も、前述の保存後の編集確認まで行ってください。

## PSDの素材をHTML/CSSへ引き継ぐ

![画面画像だけでは分からない操作や表示状態をHTML/CSSの実装で補う図解](https://www.aifreeapi.com/posts/ja/gpt-image-2-psd-layers-image-to-html/img/missing-ui-implementation-info.webp)

Webページとして公開する場合、PSDの保存で制作は終わりません。一枚の画像に写っているのは、ある画面幅での見た目です。文字が増えた場合の高さ、モバイルでの並び順、入力エラー、読み込み中の表示、キーボード操作は別途決める必要があります。

Codexなどへ画像を渡すときは、参考画像とともに、使用する既存コンポーネント、実際の文言、必要な操作、画面幅に応じた変更を伝えます。OpenAIの[画像入力ガイド](https://learn.chatgpt.com/docs/image-inputs)も、求める結果と制約を文章で補足する方法を案内しています。画像モデルがHTMLを直接出力することとは別の工程です。

たとえば、次のHTMLは画面の見た目を表示しますが、画像内のボタンを操作することはできません。

```html
<main>
  <img src="screen.webp" alt="画面全体のデザイン画像" />
</main>
```

実装では見出しを見出し要素に、操作をボタンやリンクにし、写真やイラストだけを画像として使います。納品前には狭い画面と広い画面で文字の折り返しを確認し、キーボードで操作できるか、読み込み・空データ・エラー時にも使えるかを確かめます。画像の404やコンソールエラーも確認対象です。

素材を渡す際は、Photoshopの **File > Export > Layers to Files** による[レイヤーの個別書き出し](https://helpx.adobe.com/photoshop/desktop/save-and-export/export-files-to-different-formats/export-layers-as-files.html)を利用できます。用途が分かる画像名、使用フォント、色、余白、スマートフォンでの配置方針も添えると、実装担当者が判断しやすくなります。

画像の配信はレイアウトとは別に調整します。MDNの[レスポンシブ画像の説明](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)にある`srcset`と`sizes`は表示条件に合う画像の選択に、`picture`は画面に応じて異なる切り抜きなどを使う場合に役立ちます。大きな画像をCSSで縮めるだけでは、適切な容量やトリミングまで自動で決まりません。

PSD納品なら、受け取った人が予定どおり文字や素材を変更できること。Web納品なら、ブラウザで内容を読み、操作できること。この完成条件を依頼時に決めておくと、生成したビジュアルを次の制作工程へ渡せます。