GPT イメージ 2.5 UI プロンプト: ハンドオフに耐える画面を構築する

便利な UI プロンプトは製品仕様のようなものです。キャンバス、階層、実際のコンテンツ、コンポーネント、状態、応答ルール、および受け入れチェックに名前を付けます。ビジュアル スタイルは、これらの決定の後に決まります。この順序により、GPT Image 2.5 には、設計者がレビューし、開発者が解釈できるモックアップを作成するのに十分な構造が与えられます。

画像3 ホームページ から開始して GPT イメージ 2.5 フレア ワークスペース を開き、以下のプロンプトをテストする間、GPT Image 2.5 モデル ページ を近くに置いておきます。 Flare は、迅速な反復のための実用的な最初のパスです。サンバーストは、後のより忠実度の高いレビュー フレームのオプションです。その違いを普遍的なベンチマークとして扱うのではなく、自分の画面に対して両方をテストしてください。

上の画像と短いビデオは、このワークフローの編集図です。これらは、出荷された製品のベンチマーク出力やスクリーンショットではありません。

簡単な答え: 画面の背後にあるシステムにプロンプトを表示します

「最新の財務ダッシュボードを作成する」ことから始めないでください。その要求により、モデルは製品、データ、ナビゲーション、そして現代の定義を発明することになります。代わりに画面コントラクトを与えます。

製品: 小規模ソフトウェア会社のサブスクリプション分析。
ユーザーの仕事: 毎月の収益減少の原因を 30 秒以内に見つけます。
キャンバス: デスクトップ Web アプリ、1440 x 1024、コンテンツ幅 1200。
階層: ページ タイトル、日付範囲、4 つの概要メトリック、傾向グラフ、変更表。
ナビゲーション: 概要が選択された状態の左側のレール。以下の請求、顧客、設定。
正確なコピー: DATA ブロックで指定されたラベルと値のみを使用します。
コンポーネント: メトリック カード、セグメント化された日付コントロール、折れ線グラフ、並べ替え可能なテーブル、ステータス チップ。
状態: 小さな状態シートに表示される読み込みパターンと空のテーブルのバリアントを含めます。
スタイル: 落ち着いた B2B 製品 UI、ニュートラルな背景、青いアクセント、コンパクトな間隔。
避けてください: でっち上げられたロゴ、偽の紹介文、装飾的なガラス効果、小さな読めないテキスト。
出力: 1 つのメイン画面と、狭いコンポーネント状態ストリップ。

このプロンプトにより、重要な決定を検査できるようになります。グラフがページの大部分を占めている場合は、階層を変更できます。空の状態が見つからない場合は、直接リクエストできます。気分のみのプロンプトにより、修復のためのハンドルが少なくなります。

魅力的な UI モックアップがハンドオフで失敗する理由

生成された画面は、動作が未定義のままでも完成したように見えます。ナビゲーションには、デスクトップでは 5 つの目的地が含まれ、モバイルでは 7 つの目的地が含まれる場合があります。カードには成功状態が表示されても、読み込みやエラーが表示されない場合があります。データ テーブルには、誰も指定しなかったもっともらしい数値が使用される場合があります。これらのギャップは実装中に製品の決定事項となり、解決には時間がかかり、よりコストがかかります。

画像も平坦化されたアーティファクトです。コンポーネント名、トークン、ブレークポイント、セマンティック構造、キーボード順序、データ コントラクトは含まれません。視覚的な提案として扱ってください。ハンドオフ パケットには、ピクセルでは見えないルールを記述する必要があります。

モックアップを使用して、視覚的な質問に答えます。情報の順序は意味がありますか?主なアクションは明らかですか?密集した領域は呼吸できるでしょうか?動作に関して書面化された要件を使用します。データのロード中に何が起こるか? 768 ピクセル以下で消える列はどれですか?検証テキストはどこに表示されますか?色がなくてもアクセス可能なものは何でしょうか?

画面コントラクトの 7 つのフィールド

すべての実稼働指向の UI プロンプトは 7 つのフィールドをカバーする必要があります。テキストは 1 ページに収まります。

コンテンツを別のブロックとして書き込みます。モデルがフィラーを発明する可能性がある場合は、どこで発生したかを述べてください。すべてのラベルが管理されている場合は、すべてのラベルを引用します。検証済みの数値を提供しない限り、グラフは定性的に保ちます。現実的に見えるグラフでも事実を主張します。

コンテンツポリシー
次のナビゲーション ラベルを正確に使用してください: ホーム、旅行、保存済み、プロフィール。
まさにこのページ タイトルを使用してください: 次の旅行を計画してください。
次のサンプル カードを使用してください: 沿岸脱出、都市探検、山道。
価格、評価、レビュー数、バッジ、目的地、または宣伝コピーを追加しないでください。
テキスト領域が指定されていない場合は、テキストを作成せずに空白のままにしてください。

次の決断でフレアかサンバーストを選択してください

モデルの選択は、必要な決定に従って行う必要があります。レイアウトが移動している間にフレアを使用します: 画面の順序、コンポーネントのスケール、密度、ナビゲーション、応答性の高い構造。初期のドラフトのほとんどは破棄されるべきであるため、より迅速なイテレーションが重要です。

スクリーン契約が落ち着いてから、詳細なレビューフレームが役立つと思われる場合は、Sunburst を試してください。これには、洗練されたプレゼンテーション イメージ、微妙な視覚的方向性、または詳細な検査が必要な難しい編集が含まれる場合があります。視覚的な忠実度を高めても、不完全な製品要件は修復されません。曖昧なサンバースト プロンプトでも、曖昧な画面が生成される可能性があります。

AI画像生成器 はより広範なエントリ ポイントを提供しますが、GPT イメージ 2 プロンプト ライブラリ は UI 作業を超えてプロンプト構造を比較する場合に役立ちます。選択したモデルと品質設定を引き継ぎメモに記録しておくと、別のチームメイトが生成コンテキストを再現できます。

モバイル オンボーディング プロンプト

オンボーディングには有限の作業が必要です。この例は、新しいユーザーが画面をマーケティング カルーセルに変えることなくカレンダーに接続し、通知のタイミングを選択するのに役立ちます。

カレンダー アシスタント用の 3 画面のモバイル オンボーディング フローを作成します。

キャンバス
- 390 x 844 の 3 つの iPhone 風のアートボードを並べて表示します。
- 安全な場所を尊重します。 1 つの一貫した 8 ポイント間隔システムを使用します。

画面 1: 接続
- 見出し: 「カレンダーを接続する」
- サポート ライン: 「既存のイベントを変更せずにオープン時間を確認します。」
- 主なボタン: 「カレンダーを接続」
- セカンダリ テキスト リンク: 「今は行いません」

画面 2: 選択してください
- 見出し: 「いつ通知する必要がありますか?」
- 3 つのラジオ オプション: 10 分前、30 分前、1 時間前。
- 30分前を選択します。

画面 3: 準備完了
- 見出し: 「準備は完了です」
- 2 つのイベントを含むコンパクトなサンプル議題を表示します。
- 主ボタン: 「一日を開く」

システムルール
- 3 つの画面すべてでボタンの位置を安定させます。
- 1 つのイラスト スタイルと 1 つのアイコン ファミリーを使用します。
- 1/3、2/3、3/3 として進行状況を表示します。
- お客様の声、価格設定、グラデーション、ロゴ、または追加のセットアップ手順はありません。

出力をシーケンスとして確認します。戻るナビゲーションは、画面 2 と 3 で可能である必要があります。選択した通知値には、表示可能な選択状態が必要です。最後の画面では、プロンプトで定義されていない新しい権限リクエストを導入するべきではありません。

SaaS ダッシュボード プロンプト

ダッシュボードのプロンプトには、単なるウィジェットのリストではなく、質問が必要です。以下のユーザー ジョブによってページ階層が決定されます。

サポート運用リーダー向けのデスクトップ SaaS ダッシュボードを設計します。
ユーザーは、今日のバックログの原因となったチケット カテゴリを特定する必要があります。

レイアウト
- 240 ピクセルの左ナビゲーション レールを備えた 1440 x 1024 のキャンバス。
- ヘッダー:「サポート概要」、現地の日付、チームセレクター。
- 最初の行: オープン、待機中、今日解決済み、最初の応答の中央値。
- メイン領域: 左側に時間別バックログのグラフ、右側にカテゴリ表。
- 一番下の領域: 所有者と年齢が記載された 5 つの最も古いオープン チケット。

データ
184を開きます。待機中 36;本日解決済み 92;初回反応時間の中央値は 18 分。
カテゴリ: 請求 71、ログイン 48、世代 39、エクスポート 26。
パーセンテージやトレンドの主張を追加しないでください。

インタラクションキュー
- 請求行が選択され、時間別チャートがフィルターされます。
- チャートの上に「フィルターのクリア」コントロールが 1 つ表示されます。
- ソートインジケーターはバックログ列にのみ表示されます。

スタイル
コンパクトな操作 UI、オフホワイトのキャンバス、濃いインクのテキスト、青の選択アクセント。
装飾的なイラスト、特大カード、ガラス効果、偽の警告は避けてください。

すべての数値をデータ ブロックと照合します。次に、選択した請求行とフィルタリングされたグラフが色だけに頼らずに理解できるかどうかを尋ねます。関係があいまいな場合は、アイコン、ラベル、または境界線の処理を追加します。

価格ページのプロンプト

視覚的な強調によってオファーがサイレントに変更されると、価格設定ページは失敗します。プラン名、価格、含まれる項目、除外、CTA ラベルを制御します。

チームメモ作成アプリの応答性の高い価格設定ページを作成します。

計画
無料: $0、3 プロジェクト、1 GB ストレージ、コミュニティ サポート。 CTA: 「無料で始めてみましょう」。
チーム: メンバーあたり月額 12 ドル、無制限のプロジェクト、50 GB のストレージ、電子メール サポート。
CTA: 「チームトライアルを開始する」。このプランを「最も選択されている」とマークします。
ビジネス: メンバーあたり月額 28 ドル、SSO、監査ログ、優先サポート。
CTA: 「営業担当者にお問い合わせください」。

デスクトップ
- 1440 ピクセルのキャンバス、3 つの等しいプラン列、チームの中心。
- 毎月の請求書を、離れたフッターではなく、価格の横に配置します。

モバイル
- 390 ピクセルのキャンバス、プランは無料、チーム、ビジネスに積み重ねられています。
- 水平カルーセルを使用せずに、すべての価格と CTA を表示できるようにします。

ルール
- 割引、年間価格、保証、顧客数、または機能をでっち上げないでください。
- 同梱品にのみチェックマークを付けてください。除外をプレーンテキストとして書き込みます。
- 価格を大きくすることなく、Team の境界線のコントラストを強化します。

生成後、計画を行ごとに比較します。たとえページが信頼できるように見えても、除外が欠落していたり​​、割引が作られていたりすると、商品エラーとなります。生成されたタイポグラフィをプロダクションアートワークとして扱うのではなく、コード内で正確な価格設定テキストを再構築します。

空、読み込み中、およびエラー状態のプロンプト

参照画面のコンポーネント システムが安定した後でステートを生成します。レイアウトが状態間でジャンプしないように、同じコンテナーの寸法を再利用します。

承認済みプロジェクト リスト画面を視覚的な参照として使用して、状態シートを作成します。

同じ 720 x 420 コンテンツ パネルの 4 つのバージョンを表示します。
1. デフォルト: 名前、所有者、ステータス、更新日を含む 3 つのプロジェクト行。
2. 読み込み: 偽の単語や数字を含まない 3 つのニュートラルなスケルトン行。
3. 空: 見出し「まだプロジェクトはありません」、一文、「プロジェクトを作成」ボタン。
4. エラー: 見出し「プロジェクトを読み込めませんでした」、メッセージ「接続を確認して再試行してください。」、
   プライマリボタン「再試行」、セカンダリテキストリンク「ステータスの表示」。

保存する
パネルサイズ、タイトル位置、列配置、背景、境界線、半径、
タイプのスケール、間隔、アクションの配置。

アクセシビリティのヒント
色だけでエラーや読み込み状態を伝えないでください。
プロジェクトの再試行と作成時にフォーカスのアウトラインを表示したままにします。
アイコン内に説明だけを入れないでください。

上の図は、このガイドのために作成された QA リファレンスです。実稼働コンポーネント ライブラリではなく、検査するカテゴリが表示されます。

モバイルおよびデスクトップの応答性の高いプロンプト

2 つの無関係なアートボードは、応答動作を定義していません。最初に不変条件を述べてから、許可される変換をリストします。

同じ旅行計画製品に対して、ペアのモバイル画面とデスクトップ画面を作成します。

不変式
- 同じコンテンツの順序: 検索、カテゴリ フィルター、注目の旅行、残りの旅行。
- 両方のキャンバスで同じカードのタイトルと宛先。
- 同じ青色のアクセント、画像処理、タイプ ファミリー、およびカード半径。
- どちらの幅でも検索が主なアクションです。

390 ピクセルのモバイル
- ホーム、検索、保存済み、プロフィールの下部ナビゲーション。
- 16 ピクセルのページ パディングを備えた 1 列の旅行カード。
- カテゴリチップは 1 行で水平にスクロールします。

デスクトップ 1440 ピクセル
- [旅行]、[探索]、[保存済み]、[プロフィール] のトップ ナビゲーション。
- 1200 ピクセルのコンテンツ領域内の 3 列のトリップ グリッド。
- 検索フィールドはヘッダーにあります。カテゴリチップはグリッドの上にあります。

しないでください
カードのコピーを変更したり、宛先を追加したり、検索アクションを非表示にしたり、別のビジュアルテーマを作成したりできます。

このペアのプロンプトにより、意図的に違いが生じます。ハンドオフ中に、各変換をルールに変換します。デスクトップ ブレークポイントでは、下部のナビゲーションが上部のナビゲーションになります。カードリストは 1 列から 3 列に変わります。検索コントロールは移動しますが、同じジョブとラベルは維持されます。

設定と権限のプロンプト

設定ページでは、モックアップがシステムの動作を理解しているかどうかが公開されます。コントロールを結果ごとにグループ化し、破壊的なアクションを誤ってトリガーするのを困難にします。

共有ワークスペースのデスクトップ設定ページをデザインします。

セクション
プロフィール: 名前、役割、プロフィール画像のアクション。
通知: 電子メール ダイジェストの選択、製品アップデートの切り替え、メンション アラートの切り替え。
セキュリティ: アクティブなセッションのリンク、パスワード変更ボタン、2 要素ステータス。
ワークスペースの危険ゾーン: ワークスペースを離れるボタン。

行動の手がかり
- 編集後にプロファイルの横に保存された状態を表示します。
- フィールドが変更されていない場合は、無効になっている [保存] ボタンを表示します。
- テキスト ラベルを使用して、スイッチに明確なオンとオフの状態を与えます。
- 「ワークスペースを離れる」を説明コピーとともに分離された危険ゾーンに置きます。
- 同じメイン画面内に破壊確認モーダルを表示しないでください。

レイアウト
1440 x 1024、240 ピクセルの左レール、720 ピクセルの設定列、十分なセクション ギャップ。
マーケティングのランディング ページではなく、通常の製品 UI を使用します。

レビュー担当者に、各コントロールの機能を推測せずに説明してもらいます。スイッチにラベルがない場合、保存された状態に期間がない場合、または危険アクションが通常のナビゲーション リンクのように見える場合は、ビジュアルを修復する必要があり、要件にはより詳細な情報が必要です。

画面を失わずに 1 つの領域を修復する

便利な編集プロンプトは、1 つの欠陥、1 つの領域、置換、および不変条件に名前を付けます。タイポグラフィの修復と色の再デザインやレイアウトの変更を混同しないでください。

デスクトップダッシュボードのヘッダーのみを編集します。
ページ タイトル「サポート概要」を正確に「サポート概要」に置き換えます。
タイトルを 1 行に保ち、現在の位置、文字サイズ、太さ、色を維持します。
日付、チームセレクター、ナビゲーションレール、メトリクス、チャート、テーブル、間隔を保持します。
背景、境界線、その他すべての目に見える単語。
新しいラベルやアイコンを追加しないでください。

編集するたびに完全な出力を検査します。モデルが 2 つの指標も変更した場合、タイトルを修正しても役に立ちません。付随的な変更が発生した場合は、最もクリーンな以前のバージョンに戻り、編集リクエストをさらに絞り込みます。以降の画面間で視覚的な一貫性を保つために、ブランドスタイルのリファレンスワークフロー では、アイデンティティ、パレット、ライティング、構成ルールを固定しておく方法について説明しています。緻密な視覚階層の場合は、インフォグラフィック プロンプト ワークフロー を使用します。

開発者ハンドオフ パケットを構築する

最終的なモックアップは、パケット全体ではなく、ハンドオフ パケット内の 1 つのアイテムです。承認された画面を添付し、ピクセルでは伝えられない決定を記録します。

1. 各画面とそのユーザー ジョブに名前を付けます。
2. 承認された正確なコピーとサンプル データをリストします。すべてのプレースホルダーにマークを付けます。
3. 繰り返される視覚的な部分を提案されたコンポーネントにマッピングします。
4. 間隔、タイプ、色、半径、および標高トークンを実装値として記録します。
5. 読み込み中、空、エラー、無効、成功、および許可の状態を定義します。
6. ブレークポイント ルールを不変条件および変換として記述します。
7. キーボード、フォーカス、ラベル、コントラスト、ターゲット サイズ、動きの減少、およびエラー回復チェックを追加します。
8. 製品に関する未解決の質問を、コードに黙って回答させるのではなく、所有者とともにリストアップします。

開発者は、不可能なジオメトリ、アクセスできないインタラクション、プラットフォームの規約を自由に修正できる必要があります。モックアップは意図を確立します。動作しているソフトウェアをオーバーライドすることはありません。

実装前に画面を監査する

4 つのレビュー パスを使用します。まず、表示されているすべての単語と数字を、承認されたコンテンツ ブロックと比較します。次に、メインのユーザー ジョブをトレースし、階層とアクションがそれをサポートしていることを確認します。 3 番目に、状態と応答動作を検査します。 4 番目に、イメージでは表現できない詳細についてハンドオフ パケットを確認します。

最大解像度で、スペル、一貫性のない間隔、歪んだアイコン、偶発的な重複、でっち上げられたデータを探します。 390 ピクセルで、見出し、主要なアクション、状態メッセージが読み取れる状態であることを確認します。プレゼンテーション サイズでのみ機能するデザインは、実装の準備ができていません。

インターフェイスがアクセス可能、使用可能、または技術的に実現可能であるという証拠としてモックアップを使用しないでください。これらの主張には、プロトタイプ、コード、ユーザーまたは自動テストが必要です。生成された UI は、製品の決定を議論できるほど可視化する迅速な提案として最も強力です。

再利用可能な最終プロンプト

以下のテンプレートは、視覚的な装飾よりも製品要件を優先させています。適用されないフィールドは削除しますが、形容詞に置き換えないでください。

[製品] の [モバイル/デスクトップ/レスポンシブ ペア] UI を作成します。

ユーザージョブ
[ユーザーが完了する必要がある 1 つのタスク。]

キャンバス
[正確な寸法、コンテンツの幅、安全領域、グリッド、および外側のパディング。]

情報の注文
1. 【第一地域とその目的】
2. 【第二領域とその目的】
3. 【第三地域とその目的】

正確な内容
[承認されたナビゲーション、見出し、ラベル、値、メッセージ、CTA コピー。]
このブロックの外でテキストやデータを作成しないでください。

コンポーネント
[名前付きコントロール、カード、テーブル、ナビゲーション、チャート、フォーム、繰り返しパターン。]

州
[デフォルト、ホバー、フォーカス、読み込み、空、エラー、無効、成功、許可。]

応答ルール
保持: [コンテンツ、順序、アクション、および視覚システムの不変条件]。
変換: [各幅でナビゲーション、列、折り返し、非表示、または並べ替えが可能]。

視覚的な方向性
[特定の製品スタイル、文字の役割、パレットの役割、密度、境界線、画像。]

品質チェック
発明されたロゴ、データ、機能、紹介文、バッジ、透かし、判読できないマイクロコピー、
一貫性のないコンポーネント スタイル、または色のみの状態信号。

GPT イメージ 2.5 フレア ワークスペース でテンプレートを実行します。他の画像ワークフローを比較する場合は 画像3 ホームページ に戻り、GPT Image 2.5 モデル ページ を使用して次世代ルートを選択します。落札プロンプト、承認されたイメージ、修復履歴、および書面による引き継ぎルールを一緒に保管してください。このパケットは、生成された画面をレビュー可能な製品決定に変えるものです。

よくある質問

UI モックアップにはどの GPT Image 2.5 モデルを使用する必要がありますか?

レイアウトとコンテンツがまだ変更されている場合は、Flare から始めてください。より忠実度の高いレビュー フレームによって決定が変わる可能性がある場合は、サンバーストをテストします。結果は実際のワークロードに依存するため、モデルと設定を記録します。

GPT Image 2.5 は実稼働対応の UI コードを生成できますか?

いいえ。出力は視覚的な参照であり、コンポーネント ツリーや動作仕様ではありません。コードでインターフェイスを構築し、書面に記載された受け入れ基準に照らしてテストします。

UI モックアップ内のテキストを正確に保つにはどうすればよいですか?

正確なコピーを提供し、画面ごとのテキストの量を減らし、すべてのラベルと番号を検査します。画像の残りの部分を保持しながら、一度に 1 つのテキスト領域を修復します。

モバイル版とデスクトップ版のプロンプトを表示するにはどうすればよいですか?

両方のキャンバスの幅を指定します。ブレークポイント間で変更される可能性がある不変のコンテンツとアクションを、ナビゲーション、グリッド、およびラッピング ルールから分離します。

すべてのアプリの状態を 1 つのイメージで生成する必要がありますか?

まず 1 つの参照画面を安定させます。次に、寸法、タイプ、間隔、色、コントロールを再利用するコンパクトな状態シートをリクエストします。

洗練されたモックアップはアクセシビリティを証明しますか?

いいえ。実装されたインターフェイスのセマンティクス、キーボードの順序、フォーカス、ラベル、コントラスト、ターゲット サイズ、モーション設定、およびエラー回復を確認してください。