Figma UI スクリーンショットプロンプト: そのまま使える GPT Image 2 テンプレート

figma ui screenshot prompts が必要なら、まず画面をデザイン仕様書のように説明するプロンプトから始めてください。プロダクトの文脈、デバイス枠、レイアウト領域、表示する UI 文言、コンポーネントの状態、余白、そして読みやすさを保つべき要素を指定します。GPT Image 2 は、単に「clean modern UI」を求めるのではなく、インターフェース構造を指示したときに、強いスクリーンショット風モックアップを生成できます。

以下のテンプレートは GPT Image 2 workspace で使えます。ページ、アプリ、EC、ダッシュボードのパターンをさらに探したいときは、GPT Image 2 prompts library も参照してください。

最も効果的なプロンプト構造

信頼できる Figma 風スクリーンショットプロンプトには、6 つの要素があります。

プロンプト要素	含める内容	重要な理由
プロダクト文脈	アプリカテゴリ、ユーザー、達成したい仕事	汎用的な Dribbble 風画面になるのを防ぐ
キャンバス	デスクトップ、モバイル、タブレット、ダッシュボード、モーダル、デザインボード	スタイルより先にフレーミングを制御する
レイアウト領域	ナビゲーション、ヒーロー、カード、サイドパネル、テーブル、フォーム、CTA	階層を自然に保つ
正確な UI 文言	見出し、ラベル、タブ、ボタン、空状態	偽テキストや曖昧なブロックを減らす
ビジュアルシステム	タイポグラフィの雰囲気、配色、密度、角丸、影	スクリーンショット全体に一貫性を持たせる
制約	歪んだ文字なし、重複ナビなし、不可能な操作部品なし	AI UI でよく起きる失敗を防ぐ

ワークフローに別の screenshot-to-Figma ステップが含まれていない限り、編集可能な Figma ファイルを求めないでください。この用途では、GPT Image 2 は実際のインターフェースを再構築する前のビジュアル方針、関係者向けモックアップ、ピッチ用スクリーンショット、デザイン探索に向いています。

プロンプト 1: ラフな UI アイデアからスクリーンショットを再現

シンプルなプロダクトアイデアがあり、デザイナーや創業者と議論できる程度に整ったスクリーンショット風インターフェースが欲しいときに使います。

Create a realistic Figma-style UI screenshot for a [PRODUCT CATEGORY] app used by [TARGET USER].

Screen:
- Device: [desktop web app / mobile app / tablet dashboard]
- View name: [specific screen name]
- User goal: [what the user is trying to accomplish]

Layout:
- Top navigation with [logo text], [3-5 nav items], search, and account area
- Main content area with a clear page title: "[EXACT TITLE]"
- Primary action button: "[EXACT BUTTON TEXT]"
- [2-4] content cards or panels, each with readable labels and realistic values
- One secondary panel for status, activity, filters, comments, or recommendations

Visual style:
- Clean Figma mockup aesthetic, crisp UI, balanced spacing, believable component hierarchy
- Use [COLOR PALETTE], [TYPOGRAPHY MOOD], and [DENSITY: spacious / compact / enterprise]
- Subtle shadows, consistent border radius, aligned grid, no decorative clutter

Text requirements:
- All visible UI text must be readable
- Use realistic labels, not lorem ipsum
- Keep button labels short and practical

Avoid:
- Warped text, duplicated navigation bars, impossible controls, random icons, crowded cards, fake chart axes, and blurry small labels

Output:
- High-resolution screenshot-style mockup
- Straight-on view, not angled
- Looks like a polished Figma presentation frame

効果がある理由: このプロンプトは画面名を指定したうえで、ナビゲーション、コンテンツ階層、文言、制約を守るよう出力を強制します。make a Figma UI screenshot for a finance app とだけ書くより、はるかに強い指示になります。

プロンプト 2: Figma Make 風ランディングページモックアップ

後から再構築できるだけの構造を持った、プロダクトページ全体のコンセプトが欲しいときに使うテンプレートです。

Design a polished Figma-style landing page screenshot for [PRODUCT NAME], a [ONE-SENTENCE PRODUCT DESCRIPTION].

Canvas:
- Wide desktop website mockup, straight-on screenshot
- Include a smaller mobile preview on the right side only if there is enough space
- White or soft neutral background, realistic web spacing

Page sections visible in one screenshot:
1. Announcement bar with exact text: "[ANNOUNCEMENT]"
2. Header with logo "[LOGO TEXT]", nav items [NAV ITEMS], and one right-side CTA
3. Hero section with headline "[HEADLINE]" and subheadline "[SUBHEADLINE]"
4. Prompt/input/search module or product preview module in the hero
5. Feature row with [3 FEATURES]
6. Social proof, rating, or customer count

Design system:
- [BRAND PERSONALITY: calm SaaS / premium ecommerce / playful creator tool / enterprise analytics]
- Palette: [COLORS]
- Typography: readable modern sans-serif, clear H1 scale, compact UI labels
- Components: consistent cards, buttons, inputs, tabs, badges, and icons

Quality constraints:
- All important text must be legible
- Do not invent unrelated sections
- Do not crop the primary CTA
- Keep alignment, spacing, and visual hierarchy credible
- No placeholder gibberish or broken letters

Output:
- High-resolution UI screenshot
- Presentation-ready, like a Figma frame exported for a product review

重要なのはセクションの順番です。GPT Image 2 には、ファーストビューに何が出るのか、どのモジュールが見えるのか、どの文言を読める状態にするのかを伝える必要があります。プロンプトが単に「SaaS landing page」だけだと、モデルは見た目は整っていても使いにくい空想的なレイアウトを生成しがちです。

プロンプト 3: スクリーンショットからリデザインするプロンプト

ラフなスクリーンショット、ワイヤーフレーム、古い UI があり、情報設計を保ったまま GPT Image 2 により整った案を出してほしいときに使います。

Use the attached screenshot as the source structure. Redesign it as a modern Figma-style UI mockup while preserving the same user task, page hierarchy, and core content.

Preserve:
- The same screen purpose
- The same primary navigation groups
- The same important labels and actions
- The same data relationships, tables, forms, or cards
- The same relative priority between primary and secondary actions

Improve:
- Visual hierarchy
- Spacing and alignment
- Typography scale
- Button and input consistency
- Empty states, filter states, or status badges where appropriate
- Overall polish for a product review presentation

Style direction:
- [DESIGN SYSTEM DIRECTION]
- [COLOR PALETTE]
- [DENSITY]
- [PLATFORM: web dashboard / iOS app / Android app / responsive website]

Constraints:
- Do not remove important controls from the original screenshot
- Do not add unrelated product features
- Do not turn the interface into a marketing poster
- Keep readable UI text
- Keep the result as a flat screenshot, not an angled device render

Output:
- A clean redesigned UI screenshot
- Looks like an exported Figma frame

これはスクリーンショットのリデザインで画像プロンプトを使う、より安全な方法です。まず関係性の維持を求め、その次にスタイル改善を求めます。

プロンプト 4: 再現性のある UI スクリーンショット用プロンプトシート

チームで一貫した出力が必要な場合は、プロンプトを仕様書のように書きます。ブログ記事、広告、ローンチページ向けに多数のアプリスクリーンショットを作るコンテンツチームには特に有効です。

{
  "type": "figma_style_ui_screenshot",
  "product": {
    "name": "[PRODUCT NAME]",
    "category": "[CATEGORY]",
    "audience": "[TARGET USER]",
    "screen_goal": "[USER GOAL]"
  },
  "canvas": {
    "platform": "[desktop_web | mobile_app | tablet_dashboard]",
    "view": "[SCREEN NAME]",
    "framing": "straight-on exported Figma frame",
    "density": "[spacious | balanced | compact]"
  },
  "layout": {
    "navigation": "[NAV STRUCTURE]",
    "primary_zone": "[MAIN MODULE]",
    "secondary_zone": "[SUPPORTING MODULE]",
    "states": ["[STATE 1]", "[STATE 2]", "[STATE 3]"]
  },
  "copy": {
    "headline": "[EXACT HEADLINE]",
    "primary_cta": "[EXACT CTA]",
    "labels": ["[LABEL 1]", "[LABEL 2]", "[LABEL 3]"]
  },
  "style": {
    "palette": "[COLOR PALETTE]",
    "typography": "[TYPOGRAPHY DIRECTION]",
    "components": "consistent buttons, tabs, cards, fields, badges, and icons"
  },
  "constraints": [
    "readable text",
    "no fake lorem ipsum",
    "no duplicated nav",
    "no distorted controls",
    "no angled device perspective"
  ]
}

JSON 形式のプロンプトは魔法ではありませんが、抜け漏れを見つけやすくします。生成されたスクリーンショットがテーブル状態を落としたり、ボタンを繰り返したりした場合でも、プロンプト全体を書き直さずに該当フィールドだけを修正できます。

Figma で再構築する前に確認すること

GPT Image 2 の結果は完成したプロダクトデザインではなく、ビジュアルブリーフとして扱ってください。Figma で再作成する前に、以下を確認します。

• 画面に明確な主要アクションが 1 つあるか？
• カード、タブ、テーブル、フォームが自然なグリッドに沿っているか？
• 関係者レビューに使える程度に文言が具体的か？
• 重要な操作部品が適切な優先度で見えているか？
• モバイル版は同じタスクを保っているか、それともデスクトップ画像を縮小しただけか？
• チャート、指標、バッジはもっともらしいか？
• 長いラベルや実データが入っても、この UI は機能するか？

Screenshot-to-Figma ワークフローでは、画像を編集可能なレイヤーに変換するツールがトレースに役立つことがあります。ただし、階層、コンポーネント、バリアント、レスポンシブ対応、アクセシビリティは、最終的にデザイナーが修正する必要があります。

よくあるプロンプト修正

出力の問題	次のプロンプトに追加する文
文字が崩れる	"Use fewer visible text elements; only the headline, nav labels, and buttons need readable text."
レイアウトが装飾的すぎる	"Prioritize realistic product UI over marketing illustration or poster composition."
カードが多すぎる	"Limit the screen to one primary module and three supporting cards."
ボタンが切れる	"Keep all primary controls fully visible inside the frame."
テンプレートっぽく見える	"Include product-specific labels, realistic data, and one distinctive workflow detail."
Figma らしさが弱い	"Straight-on exported Figma frame, aligned grid, consistent components, no angled device mockup."

デザインへ渡す前の UI スクリーンショット確認

GPT Image 2 の UI スクリーンショットは、チームが構造を議論できるときに価値があります。編集可能な Figma ファイルである必要はありませんが、製品、ページ階層、コンポーネント関係が再構築できる程度に明確であるべきです。共有前に、これは何の画面か、誰が使うのか、主操作は何か、実デザインに残すべき UI 詳細は何かを確認します。

よいプロンプトは、スタイルより構造を先に置きます。製品文脈と画面目的、レイアウト領域、正確な UI コピー、最後に視覚スタイルの順に書きます。「beautiful modern dashboard」だけでは、きれいでも使いにくい画面になりがちです。ワークフロー、状態、主操作を指定すると、評価しやすくなります。

確認項目	良い出力	修正方法
製品文脈	ラベルが業界と作業に合う	ドメイン固有の対象、状態、目的を追加
階層	主操作、ナビ、内容領域が明確	領域名を書き、カード数を制限
UI コピー	ボタンや見出しが短く読める	正確なラベルを指定し lorem ipsum を禁止
再構築価値	デザイナーが部品に分解できる	グリッド、状態、余白、一貫した形を指定

GPTIMG2 AI は方向探索に使い、承認された構造を Figma やコードで再構築します。近い結果が出たら、装飾を減らす、表ラベルを読めるようにする、重複ナビを消す、右パネルをアクティビティにするなど、狭く直します。

レビュー例：粗い製品アイデアを使える画面にする

たとえば、顧客会話を要約する AI inbox を作りたいとします。弱いプロンプトは「modern SaaS inbox UI」とだけ書きます。強いプロンプトは、ユーザー、ワークフロー、判断状態、階層を指定します。support lead、未解決会話、urgency score、summary panel、suggested reply、escalation button、activity history などです。この文脈があると、GPT Image 2 の出力は実際に議論できる画面になります。

生成後は 3 層で見ます。戦略層では、すべてのラベルを読まなくても製品の約束が見えるか。操作層では、主操作が明確で副操作が控えめか。実装層では、navigation、filters、card list、detail panel、empty state、status chips に分解できるか。失敗した層を次のプロンプトで直接直します。

近い結果なら、構造を保ち、主操作を強め、装飾グラデーションを減らし、表やカードのラベルを読めるようにし、重複ナビを消し、UI 文言を短く保つ、と狭く修正します。

FAQ

GPT Image 2 は編集可能な Figma ファイルを生成できますか？

いいえ。GPT Image 2 はスクリーンショット風モックアップやビジュアル方針の作成に使ってください。編集可能なレイヤーが必要な場合は、Figma でデザインを再構築するか、別ステップとして screenshot-to-Figma ワークフローを使います。

既存のスクリーンショットをアップロードすべきですか？

構造を保ちたい場合は、はい。どの部分を維持するか、どの部分を改善するか、どのコンテンツを読みやすく残す必要があるかを GPT Image 2 に伝えてください。

最適なプロンプトの長さはどれくらいですか？

UI スクリーンショットでは、1 行のプロンプトよりも中程度の長さの仕様書型プロンプトのほうがうまく機能することが多いです。画面の目的、レイアウト領域、正確な文言、ビジュアルシステム、制約を含めます。見えるインターフェースに影響しない詳細は削除してください。

生成結果をもっと汎用的でなくするには？

プロダクト固有のワークフロー、実際にありそうなラベル、現実的なデータ、1 つか 2 つの領域固有のディテールを追加します。医療の受付画面、AI プロンプトライブラリ、EC 商品ページが同じカード構成になるべきではありません。

構造化プロンプトから始める

最速のワークフローはシンプルです。上のテンプレートを 1 つ選び、角括弧のフィールドを置き換え、GPT Image 2 で最初の案を生成し、問題を 1 つずつ修正します。さらに例が必要な場合は、GPT Image 2 prompts library を完成画像の一覧としてではなく、再利用できるプロンプト構造の素材として使ってください。