UIプロンプトの基本構成は？
画面タイプ、デバイス、テーマ、ナビ、主要コンテンツ、コンポーネント数、文字ラベル、デザインシステムの順に書くと安定します。
UIデザインプロンプト：読めるラベル付きモックアップを作る
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
これらのプロンプトは GPTImager 上で GPT Image 2 向けに使う前提です。公開前には文字、ブランド、人物、権利表示を確認してください。
UIモックアップでは、見た目の雰囲気よりも、画面タイプ、デバイス、デザインシステム、ナビゲーション、カード数、テーブル列、ボタン文言を具体的に指定することが重要です。GPT Image 2はラベルやUI文言を画像内に入れやすいため、初期提案、ピッチ資料、Figma制作前の方向性確認に向いています。生成物をそのまま実装するのではなく、構成案として使うと効果的です。
UIデザイン ページでは、プロンプトを実行可能な制作ブリーフとして扱います。用途、被写体、場面、表示したい文字、カメラ、光、質感、公開前の確認項目まで順番に書くと、GPT Image 2 の出力が安定します。
日本語・韓国語・中国語の短い文字、価格、メニュー、商品ラベル、UI 文言を入れる場合は、表示したい語句を引用符で指定してください。GPT Image 2 は文字に強い一方、公開前の校正と権利確認は必須です。
UIデザインプロンプト例
UIデザイン例 #1
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #2
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #3
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #4
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #5
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #6
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #7
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #8
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #9
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #10
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #11
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #12
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #13
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #14
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #15
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #16
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →
UIデザイン例 #17
GPT Image 2でSaaSダッシュボード、モバイルアプリ、LP、設定画面などのUIモックアップを作るプロンプト集。読めるラベルとレイアウト指定を解説。
プロンプトを見る →UIデザインプロンプトの書き方
UIデザインプロンプトは、用途、主体、背景、文字、光、構図、仕上げの順に書くと安定します。
- •用途と画像形式を先に決める。
- •画像内に入れる文字は引用符で短く書く。
- •構図、光、色、レンズ、媒体感を具体化する。
- •不要な要素は短い否定指定にまとめる。
- •公開前に文字、ブランド、人物、権利を確認する。
- •読ませたい文字は短くし、見出し・ラベル・ボタン・看板・吹き出しのどこに置くかを指定します。
- •シリーズ画像では、被写体の特徴、色、レンズ、レイアウトを固定し、変更する変数を一つに絞ります。
- •生成後は文字、手、ブランド表示、価格、法的な注記を優先して確認してから公開します。
安定しやすい書き方
良い例：UIデザインの用途、主体、背景、短い文字、カメラ位置、光、仕上げを具体的に書く。
避けたい書き方
避けたい例：「きれいなUIデザイン画像」だけで、文字、構図、光、用途がない指定。
結果がぶれる場合は、形容詞を増やすより、抜けている構造情報を補ってください。
よくある質問
ラベルを読めるようにするには？
ボタン名、タブ名、列名、空状態メッセージを短く引用符で指定します。長い説明文は画像内でなく、別途資料に入れる方が安全です。
どのデザインシステムを指定できますか？
Material 3、iOS HIG、Ant Design、shadcn/ui風、Tailwind系など、一般的なUI語彙として指定できます。固有ブランドの完全再現は避けてください。
生成したUIはそのまま使えますか？
設計案や提案用としては有用ですが、アクセシビリティ、実装可能性、情報設計、文言の正確性はデザイナーと開発者が確認する必要があります。
関連プロンプトカテゴリ
UIデザインプロンプト：読めるラベル付きモックアップを作る
UIモックアップでは、見た目の雰囲気よりも、画面タイプ、デバイス、デザインシステム、ナビゲーション、カード数、テーブル列、ボタン文言を具体的に指定することが重要です。GPT Image 2はラベルやUI文言を画像内に入れやすいため、初期提案、ピッチ資料、Figma制作前の方向性確認に向いています。生成物をそのまま実装するのではなく、構成案として使うと効果的です。
UIモックアップ用プロンプトを試す* 料金、クレジット、利用条件はGPTImagerの最新ページで確認してください。公開前の校正と権利確認は利用者側で必要です。