·7 分で読めます

Google Stitch 応用プロンプトの公式：プロ品質の UI デザインを生み出す

Google Stitch の応用プロンプト公式をマスターし、構造化されたプロンプトテンプレートでプロ品質の UI デザインを生成し、デザインの質と効率を高めます。

S
Stitch Prompt Team
Content Team
Stitch プロンプトAI デザイン

なぜ応用プロンプトが必要か？

基本のプロンプトでもシンプルな画面は生成できますが、より精密でプロフェッショナルなデザインが必要なときは、応用プロンプトの公式を押さえることが重要です。本記事では、検証済みのプロンプト公式を紹介し、目を引く UI デザインの生成を支援します。

応用プロンプトのテクニック

中核の公式：P-L-A-C-E 構造

最良の Stitch プロンプトは P-L-A-C-E の公式に従います。

文字意味例
Platform（プラットフォーム）対象のデバイスとシステムiOS mobile app / Web dashboard
Layout（レイアウト）ページ構造Sidebar + main content area
Action（機能）中核のインタラクションDisplay real-time analytics
Color/Style（配色／スタイル）ビジュアルの基調Dark mode with purple accents
Extra（追加のディテール）微調整の項目Rounded corners, subtle shadows

5 つの応用プロンプトテンプレート

1. SaaS ダッシュボード

Platform: Web dashboard
Layout: Left sidebar navigation + main content grid
Action: Display analytics with 4 KPI cards, line chart for monthly trends,
        bar chart for category comparison, and sortable data table below
Color: Professional dark mode with blue (#3B82F6) accent colors
Extra: Clean typography (Inter font), 24px spacing, rounded card corners,
       subtle drop shadows, responsive grid

2. EC モバイルアプリ

Platform: iOS mobile app
Layout: Full-width hero banner at top, 2-column product grid below,
        fixed bottom tab navigation (Home, Search, Cart, Profile)
Action: Product cards with image, title, price, and star rating;
        floating cart badge showing item count
Color: White background, warm orange (#FF6B35) CTA buttons,
       dark gray (#1A1A1A) text
Extra: Product card shadows, smooth hover states,
       clean sans-serif typography, 16px padding

3. 健康トラッキングアプリ

Platform: iOS mobile app
Layout: Card-based single scroll view with bottom tab bar
Action: Circular progress ring for daily water intake,
        quick-add buttons (250ml, 500ml, custom),
        weekly history bar chart, streak counter
Color: Gradient background (light teal to white),
       green (#10B981) accent for progress elements
Extra: Rounded cards with 16px radius, soft shadows,
       playful illustration style, 44px touch targets

4. AI チャット UI

Platform: Web application
Layout: Centered chat container (max-width 720px),
        full-width input bar at bottom
Action: Message bubbles alternating left (AI) and right (user),
        typing indicator animation, suggested replies chips
Color: Light gray (#F3F4F6) background, white chat bubbles,
       blue (#2563EB) user bubbles, system purple for AI
Extra: Avatar icons for each message, timestamp labels,
       smooth scroll, modern rounded design

5. レストラン予約システム

Platform: Web landing page
Layout: Full-width hero with restaurant image overlay,
        3-column feature cards, booking form section, footer
Action: Date picker, time slot selection, party size dropdown,
        special requests text area, confirmation button
Color: Warm earth tones — cream (#FFF8F0) background,
       deep brown (#5D4037) headings, terracotta (#E07A5F) CTAs
Extra: Elegant serif font for headings, high-quality food imagery,
       subtle animations on scroll, mobile-responsive

応用テクニック

ネガティブ指定を使う

含めたくないものを AI に伝えると、精度が上がります。

含めないこと：ユーザーログイン画面、複雑なフォーム、ポップアップ通知

余白と寸法を指定する

正確な余白がデザインをよりプロフェッショナルにします。

余白のルール：要素間の余白 16px、カードの内側余白 24px、ページの余白 32px

デザインシステムを引用する

具体的なデザインシステムに言及すると一貫性が向上します。

Material Design 3 の規約に従い、標準のコンポーネントと配色システムを使用

まとめ

P-L-A-C-E の公式を押さえれば、高品質な Stitch プロンプトを体系的に書けるようになります。鍵は構造が明快＋ディテールが豊富＋制約が明確。練習を重ねれば、すぐにプロ品質の UI デザインを生成できるようになります。

← ← ブログに戻る