Stitch UI Design プロンプティング

Google Labs が提供する AI 駆動型 UI デザインツール Google Stitch で効果的なプロンプトを作成するための専門的なガイダンスです。このスキルは、Web およびモバイルアプリケーション向けの高品質 UI デザインを生成するための正確で実行可能なプロンプトの作成を支援します。

Google Stitch とは

Google Stitch は Gemini 2.5 Flash を搭載した実験的 AI UI ジェネレータで、テキストプロンプトと視覚的参考資料を機能的な UI デザインに変換します。以下の機能をサポートしています：

• 自然言語プロンプトからのテキスト・UI 生成
• スケッチ、ワイヤーフレーム、スクリーンショットからの画像・UI 変換
• マルチスクリーンアプリフローとレスポンシブレイアウト
• HTML/CSS、Figma、およびコードへのエクスポート
• バリエーションや注釈による反復的な改善

コアプロンプティング原則

1. 具体的で詳細に説明する

汎用的なプロンプトは汎用的な結果を生み出します。明確な要件を含む具体的なプロンプトは、カスタマイズされたプロフェッショナルなデザインを生成します。

悪いプロンプト：

ダッシュボードを作成する

効果的なプロンプト：

メンバーダッシュボード。コースモジュールグリッド、進行状況トラッキングバー、
コミュニティフィードサイドバーを含む。紫色テーマとカードベースレイアウトを使用

なぜ効果的か： コンポーネント（モジュール、進行状況、フィード）、レイアウト構造（グリッド、サイドバー）、ビジュアルスタイル（紫色テーマ、カード）、コンテキスト（メンバーダッシュボード）を指定しています。

2. ビジュアルスタイルとテーマを定義する

常に色スキーム、デザイン美学、ビジュアル方向を含めて、汎用的な AI 出力を避けます。

指定すべきコンポーネント：

• カラーパレット（プライマリーカラー、アクセントカラー）
• デザインスタイル（ミニマリスト、モダン、遊び心のある、プロフェッショナル、ガラスモルフィック）
• タイポグラフィの好み（必要に応じて）
• スペーシングと密度（コンパクト、ゆったり、バランス）

例：

e-コマースの商品ページ。フルスクリーン画像ギャラリー、カートに追加 CTA、
レビューセクション、関連商品カルーセルを含む。クリーンなミニマリストデザイン、
セージグリーンアクセント、十分なホワイトスペース

3. マルチスクリーンフローを明確に構造化する

複数のスクリーンを持つアプリの場合、生成前に各スクリーンを箇条書きで列挙します。

アプローチ：

フィットネストラッキングアプリ：
- オンボーディング画面（目標選択付き）
- ホームダッシュボード（日次統計とアクティビティリング表示）
- ワークアウトライブラリ（カテゴリフィルター付き）
- プロフィール画面（実績とセッティング表示）

Stitch は生成前に確認を求め、ビジョンとの一致を確保します。

4. プラットフォームとレスポンシブ動作を指定する

デザインがモバイル、タブレット、デスクトップ、またはレスポンシブウェブ向けかを明記します。

例：

モバイルアプリログイン画面（iOS スタイル）。メール/パスワードフィールドと
ソーシャル認証ボタン付き

レスポンシブランディングページ。モバイル (320px) からデスクトップ (1440px) に対応。
折りたたみ式ナビゲーション付き

5. 機能要件を含める

インタラクティブ要素、状態、ユーザーフローを記述して、より完全なデザインを生成します。

指定すべき要素：

• ボタンアクションと CTA
• フォームフィールドとバリデーション
• ナビゲーションパターン
• ローディング状態
• 空の状態
• エラーハンドリング

例：

チェックアウトフロー：
- 数量調整機能付きカート概要
- バリデーション付き配送先住所フォーム
- 支払い方法選択（クレジットカード、PayPal、Apple Pay）
- 追跡番号付き注文確認

プロンプト構造テンプレート

包括的なプロンプトにはこのテンプレートを使用します：

[ユーザー/コンテキスト] 向けの [スクリーン/コンポーネントタイプ]

主な機能：
- [具体的な詳細を含む機能 1]
- [具体的な詳細を含む機能 2]
- [具体的な詳細を含む機能 3]

ビジュアルスタイル：
- [カラースキーム]
- [デザイン美学]
- [レイアウトアプローチ]

プラットフォーム：[モバイル/ウェブ/レスポンシブ]

例：

SaaS 分析プラットフォーム向けダッシュボード

主な機能：
- MRR、アクティブユーザー、チャーン率を示す上部メトリクスカード
- 収益トレンドの折れ線グラフ（過去 30 日間）
- ユーザーアクションを含む最近のアクティビティフィード
- レポートとエクスポート用のクイックアクションボタン

ビジュアルスタイル：
- ダークモード、青/紫グラデーションアクセント
- モダンなガラスモルフィックカード、微妙な影
- クリーンなデータビジュアライゼーション、アクセシブルな色

プラットフォーム：レスポンシブウェブ（デスクトップファースト）

反復戦略

注釈で改善する

Stitch の「注釈から編集」機能を使用して、プロンプト全体を書き直さずに対象を絞った変更を行います。

ワークフロー：

1. プロンプトから初期デザインを生成
2. 変更が必要な特定要素に注釈を付ける
3. 自然言語で修正を記述
4. Stitch が注釈付き領域のみを更新

注釈例：

• 「このボタンをもっと大きくして、プライマリーカラーを使用」
• 「これらのカード間にもっとスペースを追加」
• 「これを水平レイアウトに変更」

バリエーションを生成する

複数のバリエーションをリクエストして、異なるデザイン方向を探索します：

このヒーローセクションの 3 つのバリエーションを生成：
1. 画像中心、テキスト最小限
2. テキスト重視、サポートグラフィック付き
3. ビデオ背景、オーバーレイコンテンツ付き

段階的改善

まず広く始めて、フォローアッププロンプトで詳細さを追加します：

初期：

e-コマースホームページ

改善 1：

4 列グリッドとホバーエフェクト付きの注目商品セクションを追加

改善 2：

カラースキームをアースカラー（テラコッタ、セージ、クリーム）に更新し、
上部にプロモーションバナーを追加

よくあるユースケース

ランディングページ

[製品名] 用の SaaS ランディングページ

セクション：
- ヒーロー（見出し、サブ見出し、CTA、製品スクリーンショット）
- ソーシャルプルーフ（顧客ロゴ）
- 機能グリッド（3 列、アイコン付き）
- テスティモニアルカルーセル
- 価格表（3 プラン）
- FAQ アコーディオン
- フッター（リンク、ニュースレター登録）

スタイル：モダン、プロフェッショナル、信頼構築
カラー：紺色プライマリ、薄い青アクセント、白背景

モバイルアプリ

フードデリバリーアプリホーム画面

コンポーネント：
- 位置情報選択機能付き検索バー
- カテゴリチップ（ピザ、バーガー、寿司など）
- レストランカード（画像、店名、評価、配達時間、価格帯）
- ボトムナビゲーション（ホーム、検索、注文、プロフィール）

スタイル：鮮やか、食欲をそそる、スキャンしやすい
カラー：オレンジプライマリ、白背景、食品写真
プラットフォーム：iOS モバイル（375px 幅）

ダッシュボード

コンテンツ管理システムの管理ダッシュボード

レイアウト：
- 折りたたみ式メニュー付き左サイドバーナビゲーション
- 検索、通知、ユーザープロフィール付きトップバー
- メインコンテンツエリア：
  - 統計概要（4 メトリクスカード）
  - アクション付き最近の投稿テーブル
  - アクティビティタイムライン
  - クイックアクションパネル

スタイル：クリーン、データ重視、プロフェッショナル
カラー：ニュートラルなグレー、青アクセント
プラットフォーム：デスクトップウェブ（1440px）

フォームと入力

B2B プラットフォーム向けマルチステップサインアップフォーム

ステップ：
1. アカウント詳細（企業名、メール、パスワード）
2. 企業情報（業界、規模、職務）
3. チーム設定（メンバー招待）
4. 確認と成功メッセージ

機能：
- トップの進捗インジケータ
- インライン エラー付きフィールドバリデーション
- 戻る/次へナビゲーション
- ステップ 3 のスキップオプション

スタイル：ミニマル、フォーカス、低摩擦
カラー：白背景、成功状態に緑

デザイン・ツー・コード ワークフロー

エクスポートオプション

Stitch は複数のエクスポート形式を提供します：

1. HTML/CSS - ウェブプロジェクト向けクリーンなセマンティックマークアップ
2. Figma - デザインシステム統合用「Figma にペースト」
3. コードスニペット - フレームワーク向けコンポーネントレベルのエクスポート

エクスポートのベストプラクティス

エクスポート前：

• レスポンシブブレークポイントを検証
• カラーコントラストのアクセシビリティを確認
• インタラクティブ状態を定義
• コンポーネント命名と構造を確認

エクスポート後：

• 生成コードをプロダクション標準にリファクタリング
• 適切なセマンティック HTML タグを追加
• アクセシビリティ属性を実装（ARIA ラベル、alt テキスト）
• 画像とアセットを最適化
• アニメーションとマイクロインタラクションを追加

避けるべきアンチパターン

❌ 曖昧なプロンプト

素晴らしいウェブサイトを作成

✅ 具体的なプロンプト

フォトグラファー向けポートフォリオウェブサイト。フルスクリーン画像ギャラリー、
プロジェクトケーススタディ、お問い合わせフォーム。ミニマリストな黒と白の美学、
セリフフォント

---

❌ コンテキストなし

ログインページを作成

✅ コンテキスト豊富なプロンプト

医療ポータル用ログインページ。メール/パスワードフィールド、
「このデバイスを信頼」チェックボックス、「パスワードを忘れた」リンク、
SSO オプション（Google、Microsoft）。プロフェッショナルで信頼性の高い
デザイン、青の医療テーマ

---

❌ ビジュアル方向なし

タスク管理アプリを設計

✅ 明確なビジュアル方向

タスク管理アプリ。カンバンボードレイアウト、ドラッグ・アンド・ドロップカード、
優先度ラベル、期日インジケータ。モダンで生産性重視のデザイン、
紫/ティールグラデーションアクセント、ダークモード対応

より良い結果を得るためのコツ

1. 既存デザインを参考にする - テキストプロンプトと一緒に視覚的参考資料としてスクリーンショットやスケッチをアップロード

2. デザイン用語を使用する - 「ヒーローセクション」「カードレイアウト」「ガラスモルフィック」「ベントグリッド」などの用語は Stitch が意図を理解するのに役立ちます

3. インタラクションを指定する - ホバー状態、クリックアクション、トランジションを記述して、より完全なデザインを得ます

4. コンポーネント単位で考える - 複雑なスクリーンを再利用可能なコンポーネント（ヘッダー、カード、フォームなど）に分割

5. 段階的に反復する - 完全な再デザインではなく、小さく焦点を絞った変更を行う

6. レスポンシブ性をテストする - 複数のブレークポイント（モバイル、タブレット、デスクトップ）でデザインを常に検証

7. アクセシビリティを考慮する - プロンプトでカラーコントラスト、フォントサイズ、タッチターゲットサイズを記述

8. バリエーションを活用する - 複数のオプションを生成して、異なるデザイン方向を迅速に探索

開発ワークフローとの統合

Stitch → Figma → コード

1. 詳細なプロンプトで Stitch で UI を生成
2. Figma にエクスポートしてデザインシステム統合
3. デザイン仕様でデベロッパーにハンドオフ
4. プロダクション対応コードで実装

Stitch → HTML → フレームワーク

1. Stitch で UI を生成して改善
2. HTML/CSS コードをエクスポート
3. React/Vue/Svelte コンポーネントに変換
4. アプリケーションコードベースに統合

ラピッドプロトタイピング

1. 複数のスクリーンバリエーションを素早く作成
2. ユーザーまたは関係者とテスト
3. フィードバックに基づいて反復
4. 開発用にデザインを最終化

結論

効果的な Stitch プロンプトは具体的で、コンテキスト豊富で、ビジュアル的に説明的です。これらの原則とテンプレートに従うことで、プロダクションアプリケーション向けの強固な基盤となるプロフェッショナルな UI デザインを生成できます。

覚えておいてください： Stitch は出発点であり、最終製品ではありません。デザインプロセスを加速し、アイデアを迅速に探索し、ビジュアル方向を確立するために使用してください。その後、人間の判断とプロダクション標準で改善してください。

使用する場合

このスキルは、概要に記載されているワークフローまたはアクションを実行する場合に適用できます。

制限事項

• このスキルは、上記で説明されたスコープと明確に一致するタスクの場合にのみ使用してください。
• 出力を環境固有のバリデーション、テスト、または専門家のレビューの代替と見なさないでください。
• 必要な入力、許可、セーフティ境界、または成功基準が不足している場合は停止し、明確化を求めてください。