GPT Image 2.6 で UI デザイン。

OpenAI は 2026 年 11 月 4 日に ChatGPT Images 2.6 をリリースし、あわせて 2 つの新しい API モデル、GPT-Image-2.6 Flare と Sunburst を公開しました。UI 制作で役立つ変更点は、参照画像、SVG 書き出し、アニメーション GIF、マークアップによる部分編集です。何が変わったのか、アプリや Web サイトのモックアップにどう使うのかを解説します。

2026年11月6日 更新 · 約 7 分で読めます

GPT Image 2.6 の新機能

• ChatGPT と Codex で使える。 OpenAI によると、Images 2.6 は Web、デスクトップ、モバイルの ChatGPT と Codex で、すべてのプランで利用できます。
• 参照画像と GIF。 今回のリリースで、ChatGPT Images にアニメーション GIF と参照画像が加わりました。
• 2 つの API モデル。 gpt-image-2.6-flare は、スピードを最優先するワークフロー向けの小型モデルです。gpt-image-2.6-sunburst は、ディテールと精密な編集に向いたベースモデルです。OpenAI によると、Flare は最短 6 秒ほどで画像を生成できます。
• 新しい出力形式。 PNG、JPEG、WebP に加えて、svg と gif でも出力できます。どちらのモデルも透過背景に対応しています。
• マークアップによる編集。 編集時に、たとえば 1 つの要素を丸で囲んだ透過オーバーレイをアップロードし、変更内容を説明できます。
• 複雑さの設定。 complexity（low、medium、high）で、描画前にモデルがどれだけ計画するかを調整できます。どちらのモデルも既定値は high です。

Flare と Sunburst の違い

OpenAI の移行に関するアドバイスはこうです。GPT Image 2.5 Flare を使っていたなら 2.6 Flare から、2.5 Sunburst を使っていたなら 2.6 Sunburst から始めましょう。Sunburst で求める品質に届いているなら、同じプロンプトで Flare も試して比べてみてください。

UI デザインでの使い方

• ChatGPT で使う： チャットでモックアップを頼み、リファレンスがあれば添付します。
• Codex で使う： 画像の内容を説明するか、$imagegen を含めて画像生成スキルを明示的に呼び出します。参照画像を添付すると、結果を狙った方向に導けます。
• API で使う： gpt-image-2.6-flare または gpt-image-2.6-sunburst を指定して、画像生成（images generations）エンドポイントを呼び出します。

インターフェースのプレビューについて、OpenAI 自身は次のように勧めています。プロダクトがすでに存在するかのように描写し、レイアウト、情報の優先順位、余白、実際のインターフェース要素に焦点を当て、コンセプトアート的な言葉を避けること。そうすれば、スケッチではなくリリース済みのインターフェースのような仕上がりになります。正確に表示したいテキストは引用符で囲みましょう。

UI モックアップ向けのプロンプト

さらに 42 個のプロンプトは、UI デザイン向け GPT Image 2.6 プロンプトのコレクションにまとめています。

スマホアプリの画面

[読書習慣アプリ]のリアルなモバイルアプリ UI モックアップを作成してください。再訪ユーザーのホーム画面を表示します。あいさつ文のあるヘッダー、今日の 20 分の目標を示す大きな進捗リング、ページ進捗つきの今読んでいる本、"Start a 6-minute session" と書かれたメインボタン、Today、Library、Stats、Profile が並ぶ下部のタブバー。背景はクリーム色、アクションは深いグリーン、アクセントにコーラルを 1 色、タイポグラフィは明快に、装飾は最小限に。実際にリリースされているアプリのように見せてください。iPhone の画面で、デバイスのフレームはなし。

ランディングページのヒーローを 3 方向で

[フリーランス向けの請求書アプリ]のデスクトップ用ランディングページのヒーローセクションを 3 つ作成してください。見出しはすべて同じ "Get paid 9 days faster."、ボタン 2 つも同じにして、スタイルを 3 通りに変えます。セリフ体の見出しを使った温かみのあるエディトリアル調、ライムのアクセントを 1 色だけ使った大胆でダークなスタイル、角の丸いカードを使った柔らかく親しみやすいスタイル。リアルな UI で、指定したテキストのみを表示。16:9、デバイスのフレームはなし。

ダッシュボード

[コーヒー焙煎所]向けのリアルな Web ダッシュボード UI を作成してください。左側のサイドバーナビゲーション、4 枚の KPI カード（アクティブな定期便 1,284、出荷袋数 642、解約率 2.1%、売上 $38.4k）、8 週間分の週ごとの出荷数を示す棒グラフ、ステータスタグつきの今週のロースト一覧。落ち着いた温かみのある配色、明快な情報の優先順位、実際のインターフェース要素で。16:9。

SVG アイコンセット（API）

API を呼び出すときに output_format="svg" と background="transparent" を指定し、次のようなプロンプトを使います。

アプリのタブバー用のシンプルな線画アイコン 6 個のセット：ホーム、ライブラリ、統計、プロフィール、検索、設定。線幅は 2px で統一、線端は丸く、単色、テキストなし。1 行に均等な間隔で並べてください。

マイクロインタラクションを GIF で

モバイルのボタンがタップされる短いループアニメーション："Add to cart" ボタンが少し縮んで緑色に変わり、チェックマークが表示されたあと、元の状態に戻ります。フラットな UI スタイル、白背景、余計なテキストはなし。

マークアップで 1 つの要素だけを編集する

画像と同じサイズの透過オーバーレイ上で、変更したい要素を丸で囲み、その変更だけを説明します。

丸で囲んだボタンだけを変更してください。濃いグリーンのベタ塗り背景に白いラベル "Continue" を載せた、プライマリスタイルにします。画面のそれ以外の部分は、すべてまったく同じに保ってください。

画像から実際の画面へ

モックアップ画像はあくまで絵です。クリックも、サイズ変更も、そのままリリースすることもできません。気に入った方向性が見つかったら、HTML として作り直すよう Codex に頼みましょう。

添付したモックアップ画像を、[390×844] の 1 つの完結した HTML ファイルとして作り直してください。CSS はインラインで、フォントはシステムフォントを使います。レイアウト、余白、色、テキストを正確に合わせてください。アイコンとイラストは HTML と CSS で描いてください。

Codex Design のキャンバスなら、生成した画像と HTML 版を横に並べられるので、再現度を確かめてから、フォント、色、余白を見ながら編集できます。ワークフロー全体は、AI で UI モックアップを作る方法をご覧ください。

よくある質問

GPT Image 2.6 は無料で使えますか？

OpenAI によると、Images 2.6 は Web、デスクトップ、モバイルを含め、ChatGPT のすべてのプランで利用できます。利用上限はプランによって異なります。Flare と Sunburst の API 利用は、OpenAI の API 料金に従って課金されます。

GPT Image 2.6 と 2.5、どちらを使うべきですか？

新しく UI のワークフローを組むなら、2.6 から始めましょう。OpenAI は 2.5 Flare の移行先を 2.6 Flare、2.5 Sunburst の移行先を 2.6 Sunburst としており、同じプロンプト、リファレンス、サイズ、品質で比較するよう勧めています。

GPT Image 2.6 で UI モックアップは作れますか？

はい。OpenAI のプロンプトガイドにも、ユースケースとしてインターフェースのプレビューが含まれています。結果は画像なので、小さな文字や余白を確認し、実際の画面が必要になったら、選んだ方向性をコードで作り直しましょう。

あわせて読みたい

• AI で UI モックアップを作る方法ワイヤーフレーム、高精度モックアップ、画像の使い分け。
• ChatGPT で UI デザインする方法チャット、画像生成、Codex をいつ使い分けるか。