·8 分で読めます

Stitch プロンプトガイド：AI で UI を構築する効率的な戦略

Stitch プロンプトの戦略を網羅したガイド。基礎から応用まで、AI で高品質なユーザーインターフェースを効率的に構築する方法を解説します。

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

AI で UI を構築する新しいパラダイム

Google Stitch は UI デザインを会話のようにシンプルにしました。しかし AI の能力を最大限に引き出すには、正しいプロンプト戦略を身につける必要があります。本ガイドは基礎から応用まで、Stitch プロンプトのスキルを体系的に高めていきます。

AI で UI を構築する

戦略 1：レイヤード記述法

1 つのプロンプトにすべての情報を詰め込もうとしないこと。レイヤード記述を採用し、段階的に複雑さを加えていきます。

第 1 層：基本の枠組み

Design a mobile fitness tracking app

第 2 層：レイアウトを追加

Design a mobile fitness tracking app with:
- Header with user greeting and profile avatar
- Main area with activity summary cards
- Bottom navigation with 4 tabs

第 3 層：ディテールを豊かに

Design a mobile fitness tracking app with:
- Header: greeting text ("Good morning, Alex") + circular profile avatar
- Main area: 3 summary cards (Steps, Calories, Active Minutes) with icons
- Below cards: weekly trend line chart
- Bottom nav: Home, Workout, Stats, Profile tabs with icons
- Style: Clean white background, green (#22C55E) accent, rounded cards

戦略 2：参照オブジェクト法

既知のデザインパターンを借りることで、AI が要件をより速く理解します。

例

Design a dashboard similar to Spotify's artist analytics page:
- Left sidebar with navigation
- Top section with key metrics (total plays, followers, revenue)
- Middle section with streaming trends chart
- Bottom section with top tracks list
- Dark theme with green accent (like Spotify)

戦略 3：制約条件法

制約条件を加えることで、AI の出力をより制御しやすくします。

よく使う制約の種類

制約の種類例
色の制約「青と白の 2 色だけを使う」
サイズの制約「すべてのボタンの最小高さは 48px」
数の制約「ナビゲーションバーは最大 5 項目」
スタイルの制約「シャドウとグラデーションを使わない」
コンテンツの制約「すべての文字は英語」

実践例

Design a mobile weather app with strict constraints:
- ONLY 3 colors: dark blue (#1E3A5F), white, and light yellow (#FCD34D)
- No gradients, no shadows — flat design only
- Maximum 5 navigation items
- All text in English
- Touch targets minimum 44px
- No images — use weather icons only

戦略 4：シナリオ叙事法

ストーリー形式でユーザーシナリオを記述し、AI に文脈を理解させます。

A busy professional opens the app during their morning commute.
They need to quickly see:
- Today's schedule at a glance
- Upcoming meetings with join links
- Quick actions: add task, start timer
The design should be information-dense but not overwhelming,
optimized for one-handed phone use.

戦略 5：イテレーティブ最適化法

最初の生成が完璧になることはまれです。効率的な戦略は複数ラウンドのイテレーションです。

イテレーションのワークフロー

  1. ベースとなる版を生成する
  2. 不足を分析する：どこを改善すべきか？
  3. 的を絞って修正する：プロンプトで調整内容を明確にする
  4. 再生成する：前後の差分を比較する
  5. 満足するまで繰り返す

プロンプト修正の例

前回のデザインは概ね満足ですが、以下を調整してください：
1. メインカラーを青から紫 (#7C3AED) に変更
2. カードの間隔を 8px から 16px に増やす
3. 見出しのフォントをボールドに変更
4. ページ上部に検索バーを追加

戦略 6：コンポーネント思考

複雑なページを独立したコンポーネントに分解し、個別に生成して組み合わせます。

例：EC ホームページの分解

コンポーネントプロンプト
検索バー"Design a search bar with filter button and voice search icon"
カテゴリナビ"Design a horizontal scrollable category pills with 8 items"
商品カード"Design a product card with image, title, price, rating stars, and add-to-cart button"
ボトムナビ"Design a bottom tab bar with Home, Categories, Cart, Profile icons"

実用プロンプト早見表

デザインの種類キーワード
ログインlogin, sign in, email/password, social login
ダッシュボードdashboard, KPI cards, charts, sidebar navigation
ECproduct grid, shopping cart, filters, checkout
ソーシャルfeed, stories, profile, messaging
ツールsettings, preferences, account, notifications
コンテンツarticle, blog, media player, comments

まとめ

この 6 つの戦略を押さえれば、Google Stitch を使って高品質な UI デザインを体系的に構築できます。

  1. レイヤード記述——シンプルから複雑へ
  2. 参照オブジェクト——既知のパターンを借りる
  3. 制約条件——出力の範囲を制御する
  4. シナリオ叙事——文脈を提供する
  5. イテレーティブ最適化——継続的に改善する
  6. コンポーネント思考——全体を細かく分ける

覚えておきましょう。良いプロンプトは一度で書けるものではなく、絶えずイテレーションを重ねて磨き上げられるものです。

← ← ブログに戻る