効果的な Google Stitch プロンプトの書き方：完全ガイド

プロンプトの質がデザインの質を決める

Google Stitch では、プロンプトが AI と対話する唯一の手段です。良いプロンプトと曖昧なプロンプトでは、生成されるデザインが大きく変わります。

良いプロンプトの 5 つの要素

1. プラットフォームを明確にする

まず、どのプラットフォーム向けにデザインするのかを Stitch に伝えます。

プラットフォーム	プロンプト例
iOS アプリ	"Design an iOS mobile app..."
Android アプリ	"Design an Android mobile app..."
Web	"Design a web application..."
管理画面	"Design an admin dashboard..."

2. レイアウト構造を記述する

明快なレイアウトの記述が、AI のページ骨格の理解を助けます。

✅ 良い書き方：
「レイアウトはトップナビゲーションバー、左サイドバーメニュー、メイン領域に 4 つの KPI カードとデータチャートを含む」

❌ 悪い書き方：
「いい感じのページ」

3. 主要機能を列挙する

ページに必要な機能を 1 つずつ挙げます。

主要機能：
- ユーザーログインフォーム（メール＋パスワード＋ログイン状態を保持）
- ソーシャルログインボタン（Google、Apple）
- パスワードを忘れた場合のリンク
- 新規アカウント登録の入口

4. ビジュアルスタイルを指定する

具体的なデザイン用語でスタイルを記述します。

よく使うスタイルのキーワード：

• Minimalist（ミニマル）：豊富な余白、簡潔なタイポグラフィ
• Glassmorphism（グラスモーフィズム）：半透明のガラス効果、ぼかし背景
• Material Design：カード型レイアウト、シャドウの階層
• Dark Mode（ダークモード）：暗い背景、高コントラストの文字
• Neumorphism（ニューモーフィズム）：柔らかなシャドウ、隆起／凹みの効果

5. ディテールを補足する

最後に、デザインをより正確にするディテールを加えます。

ディテールの補足：
- Inter フォントを使用
- メインカラーは青 (#2563EB)
- 角丸は 12px
- カードのシャドウは 0 4px 6px rgba(0,0,0,0.1)

よくある間違いと修正

間違い 1：曖昧すぎる

❌ 「いい感じのログインページをデザインして」
✅ "Design a modern login page for a SaaS web app with:
   - Email and password input fields
   - 'Remember me' checkbox
   - Blue gradient submit button
   - Google and GitHub social login options
   - Clean white background with subtle geometric patterns
   - Centered card layout, max-width 420px"

間違い 2：情報過多

❌ 一度に 10 ページ分の内容を記述する
✅ 一度に 1 ページ、または 1 つの主要機能だけを記述する

間違い 3：スタイルの指示がない

❌ 「チャートとテーブルのあるダッシュボードをデザインして」
✅ "Design a SaaS analytics dashboard in dark mode with:
   - Sidebar with collapsible menu sections
   - Top KPI cards with sparkline charts
   - Main area: area chart for trends + bar chart for comparison
   - Data table with sort and filter controls
   - Color scheme: dark gray (#1E1E2E) background with blue (#3B82F6) accents"

実戦テンプレート集

ログインページのテンプレート

Design a [スタイル] login page for [プラットフォーム] with:
- [メール／電話番号] input field
- Password input with show/hide toggle
- [ソーシャルログインの選択肢] login buttons
- Remember me checkbox
- Forgot password link
- Sign up link
- Background: [説明]

商品一覧のテンプレート

Design a [プラットフォーム] product listing page with:
- Search bar with filter icon
- Category tabs/pills
- [グリッド／リスト] product view toggle
- Product cards: image, title, price, rating, add to cart button
- Sort dropdown and results count
- Style: [説明]

まとめ

効率的な Stitch プロンプトを書くのは難しくありません。プラットフォーム → レイアウト → 機能 → スタイル → ディテールという 5 つの中核要素を覚えてください。この順序でプロンプトを組み立てれば、AI はあなたのデザイン意図を正確に理解します。