Webアプリのヒーロー画像は、画像単体の見栄えだけでは決められません。見出しを置けるか、スマートフォンで切り抜いても主役が残るか、修正後も同じ画面に収まるか。この記事では、GPT Image 2.5での制作を想定して、こうした条件をプロンプトと確認項目に分ける方法を紹介します。
筆者はDreamMMerの運営者です。本記事の構成・執筆にはAIを利用しています。以下は設計用のサンプルであり、生成結果の実測レポートやモデル間の性能比較ではありません。
まず、モデルの説明と制作上の要件を分ける
OpenAIの発表では、ChatGPT Images 2.5の編集精度や複数ターンでの一貫性の改善が説明されています。ただし、これは提供元による説明です。「変更しない」と指定した部分が必ず保持される、という保証としては扱わないようにします。
ここでは、架空のタスク管理アプリのヒーロー画像を題材にします。APIの実装方法ではなく、入力する指示と出力後の確認方法が対象です。利用するサービスによって選択できるモデルや設定が異なるため、生成前に画面上のモデル名・出力設定を確認してください。
1. 「どんな絵か」より先に「どこに置くか」を決める
最初に、画面側の制約を書き出します。下表の数値は今回の設計例で、モデルの出力仕様ではありません。
| 項目 | 今回の要件 | 確認方法 |
|---|---|---|
| 用途 | タスク管理アプリのヒーロー背景 | 見出しとボタンを重ねて見る |
| 掲載比率 | デスクトップでは16:9を想定 | 実際の表示枠に入れる |
| 主役の位置 | 右側に抽象的なカード群 | 狭い表示幅でも意味が残るか確認 |
| 余白 | 左側約45%は低密度 | 見出しと装飾が重ならないか確認 |
| 配色 | アイボリーと落ち着いた青 | アプリの配色と並べる |
| 文字 | 画像には入れない | 不要な文字やロゴがないか拡大確認 |
この段階で要件が衝突していれば、生成前にレイアウトを見直します。たとえば「大きな主役を中央に置く」と「中央に見出しを重ねる」は、同時に満たしにくい条件です。
2. 生成指示は、配置まで具体的に書く
次のプロンプトは、そのまま試して調整するための例です。記載した比率や余白が厳密に出力されることを保証するものではありません。
タスク管理Webアプリのヒーローセクションに使う背景画像を作成してください。
用途：見出しと操作ボタンをHTMLで重ねるための装飾画像。
構図：横長、16:9の掲載枠を想定。
右側に、タスクの整理を連想させる抽象的なカードを配置する。
左側の約45%は、文字を重ねられるように装飾を少なくする。
背景：明るいアイボリー。カードには落ち着いた青を使う。
質感：控えめな立体感。強すぎる反射や複雑な模様は避ける。
含めないもの：文字、数字、ロゴ、透かし、実在サービスの画面。
カードが画面の端に密集しないように余裕を持たせる。
「洗練された画像」のような形容だけでなく、どの領域に何を置くかを書くのがポイントです。サービスにサイズや縦横比の設定欄がある場合は、プロンプトだけに任せず、そちらも合わせます。
見出しやボタンの文字は、今回は画像に焼き込まずHTML側で表示する設計にします。文言変更や翻訳のたびに背景画像を作り直さずに済むためです。画像内に文字を含める用途では、文字の正確さを別の確認項目として追加してください。
3. 修正指示は「変えるもの」と「残すもの」に分ける
出力に気になる点があっても、毎回すべての条件を変更すると、どの指示が結果に影響したか追いにくくなります。まずは一つの問題に絞ります。
画像編集に対応した環境で、対象画像を選択・入力したうえで使う指示例です。
この画像について、左側の余白だけを調整してください。
変更するもの：
左側に残っている小さな装飾を取り除き、背景を整理する。
保持するもの：
右側のカードの数、形、位置関係。
背景のアイボリーとカードの青。
光の向きと全体の立体感。
新しい文字、ロゴ、オブジェクトは追加しないでください。
修正後は、左側が改善したかだけでなく、右側のカードが変わっていないかも比較します。保存を指示した部分に変化が出た場合は、その結果を採用せず、元画像からやり直す判断も必要です。
4. 採用判定は生成画面ではなく、掲載画面で行う
今回の例なら、次の順番で確認します。
- デスクトップの実際の表示枠に画像を入れる。
- 本番で使う見出しとボタンを重ね、読みにくい箇所がないかを見る。
- スマートフォンの表示幅でも確認し、主役の欠け方を見る。
- 修正前後を並べ、変更対象ではない部分の差を確認する。
- 書き出した画像の寸法・ファイル容量・見た目を確認する。
デスクトップで確保した左側の余白が、スマートフォンでもそのまま役立つとは限りません。横長画像を大きく切り抜く必要があるなら、モバイルでは画像と文章を上下に分けるか、別構図を用意する方法も検討します。
また、きれいに見えることと、ページの読み込みが速いことは別です。圧縮後の見た目と、実際のページでの読み込みを確認してから採用します。本記事では速度や容量の改善値は測定していません。
5. 指示と判断をセットで残す
再利用するなら、成功したプロンプトだけでなく、不採用の理由も記録します。以下は記録用テンプレートで、実測結果ではありません。
用途：
使用サービス／画面上のモデル名：
生成日：
出力設定：
初回プロンプト：
修正指示：
元画像と修正後画像の保存先：
掲載画面で確認した幅：
採用／不採用：
判断理由：
「雰囲気が違う」ではなく、「モバイル表示で右側の主役が切れる」「修正後にカードが一つ増えた」のように書くと、次の変更方針を決めやすくなります。
関連する制作ページについて
運営サービスの関連ページとして、DreamMMerのGPT Image 2.5ページがあります。OpenAIの公式サイトではありません。上記のプロンプトは特定サービスの操作手順に依存しない設計例で、このページでの実測結果を示すものではありません。
まず掲載画面の条件を決め、生成後はその条件に戻って確認する。画像の印象だけで採用を決めず、この往復を制作の手順に組み込むことをおすすめします。