GPT Image 2.5でUI案を作る：レイアウトと文字の確認手順

GPT Image 2.5でUIの画像案を作るときは、画面の役割と表示する文字を先に決め、編集のたびにレイアウトと文言を確認します。 生成されるのは画像です。HTMLやFigmaのコンポーネント、操作できるアプリが完成するわけではありません。

この記事では、開発前に画面の方向性を検討するためのプロンプト例と確認項目を紹介します。本稿の日本語プロンプトで新たな生成テストは行っておらず、日本語の正確さや成功率を実証したものではありません。

画面の役割と階層を指定する

「美しい未来的な画面」だけでは、必要な情報の多くをモデルが補うことになります。主な操作、必要な領域、正確なラベルを指定すると、出力を評価しやすくなります。

2026年9月16日に撮影した公式のUIプレビュー例です。出典を確認できるよう英語画面のまま掲載しています。表示されている例はOpenAIの資料であり、Ofoxの実測結果ではありません。

日本語の画面を想定した、書き換え用の例です。

プロジェクト管理アプリのデスクトップ画面を、1枚のUI画像として作成してください。
淡い背景を使い、装飾目的のグラフは入れないでください。
左のナビゲーションには「概要」「プロジェクト」「設定」を表示してください。
メイン見出しは「プロジェクト一覧」です。
その下に、状態と担当者の列を持つプロジェクト行を3行配置してください。
右上に「新規作成」という主ボタンを1つ置いてください。
指定したラベルをそれぞれ1回だけ、読みやすいコントラストで表示してください。
行と列をそろえ、十分な余白を確保してください。
ブラウザー枠、端末枠、架空の利用統計は追加しないでください。

モデル、サイズ、品質はAPIの設定として指定します。APIの使い方と画像サイズのガイド（英語）で確認してください。プロンプトにサイズを書くだけで、APIの設定を代替できるとは考えないでください。

最初の比較では条件をそろえる

OpenAIはFlareを速度重視、Sunburstを高い品質が必要な用途向けと位置付けています。個々の画面での結果を保証する説明ではありません。FlareとSunburstの比較を出発点にして、実際の要件で確かめます。

最初はプロンプト、参照画像、明示した品質設定をそろえます。不足があれば記録してから変更してください。設定も指示も同時に変えると、何が改善につながったか分かりません。

過去の英語文字の小規模な生成例は、日本語の密度が高い画面でも正確に描けるという証拠にはなりません。

編集は一つの変更に絞る

承認した画像を保存し、それを次の編集の参照にします。変える内容を一つ指定し、保持したい情報も書き直します。

主ボタンの文字だけを「新規作成」から「プロジェクトを作成」に変更してください。
ナビゲーション、見出し、行の内容、列の位置、ボタンの位置、色、余白は維持してください。
アイコン、別のラベル、新しい領域を追加しないでください。

これも未検証の例であり、他の部分が完全に固定される保証はありません。ボタンだけでなく画面全体を比較します。文字が直った一方で列が移動したり、別の文言が変わったりしていないか確認してください。

段階的な編集では、承認済みの版と変更内容を残します。ピクセル単位で変えてはいけない領域がある場合は、通常の画像編集で変更部分を合成する方が確実です。

文字と配置は別々に確認する

実際に表示する大きさで読んでください。OCRは怪しい箇所を探す補助になりますが、目視や日本語の確認を置き換えるものではありません。誤字、切れた文字、重複したラベルを分けて確認します。

日本語の文言修正に絞りたい場合は、文字を直しながらレイアウトを保つ手順も参照してください。

実装に渡すときは画像以外の情報も残す

文字サイズ、余白、部品の状態、操作時の動作は別途仕様にします。キーボード操作、フォーカス、エラー表示、画面幅への対応、実データは実装後の確認が必要です。UIの画像だけでは検証できません。

文字の正確さが特に重要なら、画像モデルで素材を作り、ラベルは通常のUI部品で組む方法もあります。