stitch-ui-design

Stitch UI デザインのプロンプト作成

Google Labs が提供する AI 搭載の UI デザインツール Google Stitch で、効果的なプロンプトを作成するための専門的なガイダンスです。このスキルは、Web アプリやモバイルアプリ向けに、高品質な UI デザインを生成するための、正確で実行可能なプロンプトの作成に役立ちます。

プロトタイプとプライバシーの境界

製品固有の手順を使用する前に、現在の公式ドキュメントで実際のアカウント機能、エクスポートのオプション、データの取り扱い条件を確認してください。許可された参照画像やアセット、および合成データまたはマスキングしたデータのみを使用してください。スクリーンショットをアップロードすると、機密性の高い UI、個人情報、認証情報が漏えいするおそれがあります。プロンプトで指定した機能状態は視覚的な仕様であり、認証、決済、検証が実装されている証拠でも、アクセシビリティの証拠でもありません。エクスポートしたコードや依存関係を確認し、本番環境で使用する前に、実機でセマンティック構造、キーボード操作／フォーカス、ズーム／リフロー、コントラスト、視差効果の軽減をテストしてください。サンプルのロゴ、推薦文、評価、指標、セキュリティバッジはプレースホルダーです。根拠や許可なしに、事実に基づく主張として公開してはなりません。エクスポート、共有、デプロイ、外部アカウントの変更には許可が必要です。

Google Stitch とは？

Google Stitch は実験的な AI UI ジェネレーターです。利用可能なモデルや機能は現在の製品バージョンによって異なり、テキストプロンプトや視覚的な参照を機能的な UI デザインに変換します。以下をサポートしています。

• 自然言語のプロンプトからのテキストから UI への生成
• スケッチ、ワイヤーフレーム、スクリーンショットからの画像から UI への変換
• 複数画面のアプリフローとレスポンシブレイアウト
• HTML/CSS、Figma、コードへのエクスポート
• バリエーションや注釈を使った反復的な調整

プロンプト作成の基本原則

1. 具体的かつ詳細にする

一般的なプロンプトからは、一般的な結果しか得られません。要件を明確にした具体的なプロンプトを使うと、要望に合ったプロフェッショナルなデザインを作成できます。

よくないプロンプト：

Create a dashboard

効果的なプロンプト：

Member dashboard with course modules grid, progress tracking bar, 
and community feed sidebar using purple theme and card-based layout

効果的な理由： コンポーネント（モジュール、進捗状況、フィード）、レイアウト構造（グリッド、サイドバー）、ビジュアルスタイル（紫のテーマ、カード）、コンテキスト（会員向けダッシュボード）が指定されています。

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

一般的な AI 出力を避けるため、色の組み合わせ、デザインの美学、ビジュアルの方向性を必ず指定してください。

指定するコンポーネント：

• カラーパレット（基本色、アクセントカラー）
• デザインスタイル（ミニマリスト、モダン、遊び心のあるスタイル、プロフェッショナル、グラスモーフィズム）
• タイポグラフィの好み（あれば）
• 余白と密度（コンパクト、ゆとりのある、バランスの取れた）

例：

E-commerce product page with hero image gallery, add-to-cart CTA, 
reviews section, and related products carousel. Use clean minimalist 
design with sage green accents and generous white space.

3. 複数画面のフローを明確に構成する

複数画面で構成されるアプリの場合は、生成前に各画面を箇条書きで列挙してください。

方法：

Fitness tracking app with:
- Onboarding screen with goal selection
- Home dashboard with daily stats and activity rings
- Workout library with category filters
- Profile screen with achievements and settings

生成前に、意図した画面の一覧を確認してください。製品側に確認ゲートを用意してもらえることを前提にしないでください。

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

デザインの対象がモバイル、タブレット、デスクトップ、レスポンシブ Web のいずれかを指定してください。

例：

Mobile app login screen (iOS style) with email/password fields and social auth buttons

Responsive landing page that adapts from mobile (320px) to desktop (1440px) 
with collapsible navigation

5. 機能要件を含める

より完成度の高いデザインを生成できるよう、インタラクティブな要素、状態、ユーザーフローを説明してください。

指定する要素：

• ボタンのアクションと CTA
• フォームフィールドと検証
• ナビゲーションのパターン
• 読み込み状態
• 空の状態
• エラー処理

例：

Checkout flow with:
- Cart summary with quantity adjusters
- Shipping address form with validation
- Payment method selection (cards, PayPal, Apple Pay)
- Order confirmation with tracking number

プロンプト構成のテンプレート

包括的なプロンプトを作成するには、このテンプレートを使用してください。

[Screen/Component Type] for [User/Context]

Key Features:
- [Feature 1 with specific details]
- [Feature 2 with specific details]
- [Feature 3 with specific details]

Visual Style:
- [Color scheme]
- [Design aesthetic]
- [Layout approach]

Platform: [Mobile/Web/Responsive]

例：

Dashboard for SaaS analytics platform

Key Features:
- Top metrics cards showing MRR, active users, churn rate
- Line chart for revenue trends (last 30 days)
- Recent activity feed with user actions
- Quick action buttons for reports and exports

Visual Style:
- Dark mode with blue/purple gradient accents
- Modern glassmorphic cards with subtle shadows
- Clean data visualization with accessible colors

Platform: Responsive web (desktop-first)

反復的な調整方法

注釈を使って調整する

Stitch の「注釈で編集」機能を使うと、プロンプト全体を書き直さずに、対象を絞って変更できます。

ワークフロー：

1. プロンプトから初期デザインを生成する
2. 変更が必要な特定の要素に注釈を付ける
3. 自然言語で変更内容を説明する
4. 対象を絞った変更を依頼し、意図しない変更がないか全体を確認する

注釈の例：

• 「このボタンを大きくして、基本色を使ってください」
• 「これらのカードの間隔を広げてください」
• 「これを横方向のレイアウトに変更してください」

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

異なるデザインの方向性を検討するため、複数のバリエーションを依頼してください。

Generate 3 variants of this hero section:
1. Image-focused with minimal text
2. Text-heavy with supporting graphics
3. Video background with overlay content

段階的な改善

まずは広く指定し、続くプロンプトで具体性を高めます。

初回：

E-commerce homepage

改善 1：

Add featured products section with 4-column grid and hover effects

改善 2：

Update color scheme to earth tones (terracotta, sage, cream) 
and add promotional banner at top

一般的なユースケース

ランディングページ

SaaS landing page for [product name]

Sections:
- Hero with headline, subheadline, CTA, and product screenshot
- Social proof with customer logos
- Features grid (3 columns) with icons
- Testimonials carousel
- Pricing table (3 tiers)
- FAQ accordion
- Footer with links and newsletter signup

Style: Modern, professional, trust-building
Colors: Navy blue primary, light blue accents, white background

モバイルアプリ

Food delivery app home screen

Components:
- Search bar with location selector
- Category chips (Pizza, Burgers, Sushi, etc.)
- Restaurant cards with image, name, rating, delivery time, and price range
- Bottom navigation (Home, Search, Orders, Profile)

Style: Vibrant, appetite-appealing, easy to scan
Colors: Orange primary, white background, food photography
Platform: iOS mobile (375px width)

ダッシュボード

Admin dashboard for content management system

Layout:
- Left sidebar navigation with collapsible menu
- Top bar with search, notifications, and user profile
- Main content area with:
  - Stats overview (4 metric cards)
  - Recent posts table with actions
  - Activity timeline
  - Quick actions panel

Style: Clean, data-focused, professional
Colors: Neutral grays with blue accents
Platform: Desktop web (1440px)

フォームと入力欄

Multi-step signup form for B2B platform

Steps:
1. Account details (company name, email, password)
2. Company information (industry, size, role)
3. Team setup (invite members)
4. Confirmation with success message

Features:
- Progress indicator at top
- Field validation with inline errors
- Back/Next navigation
- Skip option for step 3

Style: Minimal, focused, low-friction
Colors: White background, green for success states

デザインからコードへのワークフロー

エクスポートオプション

Stitch では、複数の形式でエクスポートできます。

1. HTML/CSS - Web プロジェクト向けの、クリーンでセマンティックなマークアップ
2. Figma - デザインシステムとの統合に使える「Paste to Figma」
3. コードスニペット - フレームワーク向けのコンポーネント単位のエクスポート

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

エクスポート前：

• レスポンシブ対応のブレークポイントを確認します
• アクセシビリティのため、色のコントラストを確認します
• インタラクティブな状態が定義されていることを確認します
• コンポーネントの命名と構造を見直します

エクスポート後：

• 生成されたコードを本番環境の標準に合わせてリファクタリングします
• 適切なセマンティック HTML タグを追加します
• アクセシビリティ属性（ARIA ラベル、alt テキスト）を実装します
• 画像とアセットを最適化します
• アニメーションとマイクロインタラクションを追加します

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

❌ 曖昧なプロンプト

Make a nice website

✅ 具体的なプロンプト

Portfolio website for photographer with full-screen image gallery, 
project case studies, and contact form. Minimalist black and white 
aesthetic with serif typography.

---

❌ コンテキストの不足

Create a login page

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

Login page for healthcare portal with email/password fields, 
"Remember me" checkbox, "Forgot password" link, and SSO options 
(Google, Microsoft). Professional, trustworthy design with 
blue medical theme.

---

❌ ビジュアルの方向性がない

Design an app for task management

✅ 明確なビジュアルの方向性

Task management app with kanban board layout, drag-and-drop cards, 
priority labels, and due date indicators. Modern, productivity-focused 
design with purple/teal gradient accents and dark mode support.

より良い結果を得るためのヒント

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 は出発点であり、完成品ではありません。デザインプロセスを加速し、アイデアをすばやく試し、ビジュアルの方向性を定めるために活用したうえで、人の判断と本番環境の基準に沿って仕上げてください。

使用するタイミング

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

制限事項

• このスキルは、タスクが上記の範囲に明確に当てはまる場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中止して確認を求めてください。