UI モックアップ向け GPT Image プロンプトの書き方
ダッシュボード、アプリ画面、デバイスモックアップを、予測しやすいレイアウトと読みやすいラベルで生成するための GPT Image 2 プロンプトの書き方。
UI モックアップ向けの優れた GPT Image プロンプトは、プロダクト、画面とその主要コンポーネント、表示するデバイスやフレーム、ビジュアルスタイル、そして確実に読ませたいテキストを正確に指定します。モデルは段落のような UI テキストよりも少数の大きなラベルのほうをはるかに確実に描画できるため、コンポーネントは読む順に並べ、画面上のテキストは短くまとめましょう。
ワイヤーフレームのように画面を説明する
まず画面の目的と構成要素を、ナビゲーション、ヘッダー、メインコンテンツ、サブパネル、アクションと、ユーザーが読む順番で書き出しましょう。「モダンなダッシュボード」のようなスタイルワードでほのめかすより、コンポーネントを列挙したほうが、モデルのレイアウトは予測しやすくなります。
- プロダクトと画面を明記する：「SaaS 請求管理ツールの分析ダッシュボード」や「瞑想アプリのオンボーディング画面」。
- 領域を順番に並べる：サイドバーナビゲーション、検索付きのトップバー、3枚の KPI カード、折れ線グラフ、最近の取引テーブル。
- 密度を指定する：ゆとりのある余白、揃ったカードサイズ、明確な整列。
フレームを選ぶ：フラットな画面、デバイス、シーン
事例紹介用のフラットな UI キャプチャが必要なのか、ランディングページ用のデバイスモックアップか、マーケティング用の撮影風シーンかを決めましょう。それぞれ必要な言い回しが異なります。
- フラット：「フラットな UI スクリーンショット、デバイスフレームなし、16:9」。
- デバイス：「薄型ノートパソコンにやや角度をつけて表示、画面はカメラ正面向き、柔らかな映り込み」。
- シーン：「自然光が差す木製デスクに置かれたノートパソコン、浅い被写界深度」（インターフェースは小さく、読みにくくなる点に注意）。
UI テキストは短く正確に
生成 UI で最もよくある失敗は、テキストが読めないことです。重要な少数のラベルだけを引用符で指定し、それ以外はダミーテキストの行として表現させましょう。
- 見出しとボタンは正確に引用する：「売上」「プランをアップグレード」。
- 本文にはダミーテキストの行を指定する。
- 実データの長い表は避け、代わりにサンプル取引を5行と指定する。
ビジュアルシステムを指定する
グラスモーフィズムのようなスタイルワードも役立ちますが、簡潔なビジュアルシステムを示すほうが、複数の画面でより一貫した結果が得られます。
- カラー：背景、サーフェス、メインのアクセント、ステータスカラー。
- タイポグラフィ：サンセリフ書体、明確なウェイトの階層、見出しとラベルのサイズのコントラスト。
- コンポーネント：角丸、シャドウ、ボーダー、アイコンスタイル。
プロンプトチェックリスト
- プロダクト、画面の目的、対象ユーザーが明記されている。
- コンポーネントが読む順に並んでいる。
- フレーム（フラットなキャプチャ、デバイス、シーン）が決まっている。
- 読ませる必要があるのは、引用符で指定した短いテキストだけになっている。
- カラー、タイポグラフィ、コンポーネントのスタイルが定義されている。
- アスペクト比が用途に合っている（デスクトップは 16:9、スマートフォンは 9:16）。
よくある質問
GPT Image 2 で実用的な UI デザインは作れますか？
プレゼン資料、ランディングページ、ムードボード向けの説得力あるビジュアルコンセプトやモックアップを生成できます。ただし余白、アイコン、小さな文字は仕様として引き渡せるほど正確ではないため、出力は本番用のデザインではなくビジュアルリファレンスとして扱いましょう。
UI モックアップの文字を読みやすくするには？
読ませたいテキストは引用符で指定した少数のラベルに限定して大きく表示させ、それ以外はすべてダミーテキストの行として記述します。すっきりしたサンセリフ書体の短い単語が、最も安定して描画されます。
複数の画面に統一感を持たせるには？
すべてのプロンプトで同じビジュアルシステムの段落を使い回し、画面の説明だけを変えましょう。ひとつのテンプレートから生成した画面は、毎回ゼロから記述した画面よりも統一感が保たれます。
関連プロンプトテンプレート
実際のプロンプトでこのガイドを活用する
ライブラリの対応カテゴリからプロンプトテンプレートを探し、その構成を自分の画像ワークフローに合わせてアレンジしましょう。