Google Stitch AI UI デザインガイド

Google Stitch は「テキストから UI を生成するツール」と説明されることが多いですが、AI UI デザインのパートナーと捉えるほうが実用的です。短い依頼から画面全体を作れますが、その品質は、製品・ページ・ビジュアルシステム・制約をどれだけ明確に伝えられるかで決まります。この記事では、最初のプロンプトからデザインの引き継ぎまで、再現できる進め方を紹介します。

目的は画面をたくさん生成することではありません。正しい画面を生成し、開発者に渡せる一貫したシステムへ育てることです。

Stitch における AI UI デザインとは

AI UI デザインは、生成・批評・改善・システム化のループです。Stitch が最も得意なのは最初の 2 ステップです。数秒で複数の方向性を出せますが、製品戦略、アクセシビリティ要件、必要な状態までは知りません。最終的な判断は自分で行います。

Stitch が向いている用途：

デザインシステムを決める前に、レイアウトとビジュアルの方向性を探る；
色・書体・余白・コンポーネントパターンでデザインシステムの土台を作る；
文章の製品アイデアを、レビューできる初稿にする；
コーディングエージェントやフロントエンドチーム向けのデザイン参考を作る。

プロンプト集を作る前に、Stitch のプロンプトとデザインモードの説明を読んでおきましょう。

5 つの要素で作る AI UI プロンプト

使える AI UI プロンプトは 5 つの問いに答えます。1 つでも欠けると、Stitch は一般的な仮定で補ってしまいます。

1. プラットフォームとデバイス

まず画面の種類を伝えます。Web アプリ、マーケティングのランディングページ、ダッシュボード、iOS、Android です。同じ製品でも、ナビゲーション、情報密度、タッチターゲットは変わります。デバイスの扱いが不明な場合はデバイスタイプを確認してください。

2. 製品の文脈

誰が使い、何を終わらせたいのかを書きます。「プロジェクト管理ツール」では弱すぎます。「毎朝ブロックされた作業を確認する運用チーム向けのプロジェクト管理ツール」なら、Stitch に実際の設計課題を渡せます。

3. ページの目的

1 画面につき主アクションは 1 つです。ダッシュボードにウィジェットが多くても、目的は「ブロックされたプロジェクトを見つけて開く」かもしれません。ランディングページなら「無料トライアルを開始する」が唯一の目的です。

4. レイアウトとコンポーネント

ナビゲーションの形と主要なコンテンツブロックを指定します。Web アプリなら、左サイドバー、検索付きトップバー、KPI カード、グラフ、データテーブルなどです。モバイルアプリなら、ボトムタブバーとカードフィードかもしれません。

5. ビジュアルスタイルと制約

「ミニマル」「プレミアム」といった言葉だけでは足りません。色のルール、タイポグラフィ、角丸、余白、アクセシビリティの制約を加えます。既知の方向性を使いたい場合は、ギャラリーのスタイルから始め、コピーではなく適応させます。たとえば Linear はダークで精密な SaaS 画面の参考、Stripe はフィンテックの明快さの参考です。

再利用できるプロンプトの型

次の構造を出発点にし、角括弧を製品固有の情報に置き換えます。

Design a [platform] [page type] for [product] used by [audience].
Primary goal: [one action the page should make easy].
Layout: [navigation model] + [main content structure].
Components: [4-6 components, in priority order].
Data: [key fields, data volume, loading / empty / error states].
Style: [visual direction, color rules, typography, spacing, radius].
Constraints: [responsive behavior, accessibility, brand rules].

この型はあえて地味です。Stitch に任せる前に、自分で決めることを強制します。

適切なスタイルの選び方

SaaS と生産性ツール

SaaS は、情報密度を支えられる製品スタイルから始めます。Linear と Notion は良い参考です。一方は精密でダーク、もう一方は落ち着いた内容優先の画面です。ブランドを複製するのではなく、制約を設定するために使います。

フィンテックとエンタープライズ

フィンテック画面には信頼感、明確な階層、読みやすい数字が必要です。Stripe は余白とタイポグラフィの強い参考になります。エンタープライズ製品では、より一般的なナビゲーションと厳しいコントラストが求められることがあります。

コンシューマーと AI 製品

コンシューマーや AI 製品は個性を出せますが、主アクションは明確にします。ギャラリーを見て 2〜3 個の参考を選び、色・書体・余白・コンポーネントの動きのどこを取り入れるかを書き留めます。

Web アプリ、ダッシュボード、モバイルは別物

ダッシュボードはカードが多い Web アプリではなく、モバイルアプリは狭いデスクトップ画面でもありません。ダッシュボードは走査と比較を優先します。Web アプリはナビゲーション、権限、設定、長時間のタスクを加えます。モバイルはタッチ、片手操作、短いセッションを優先します。デスクトップ用プロンプトからモバイル画面を作ると、違う場所で詰まりすぎたり空きすぎたりします。

同じ製品を画面ごとに生成し、ナビゲーション、密度、状態を比較します。Stitch のバリアントは差異の探索に役立ちますが、プロンプトで画面の種類を指定する必要があります。

再現できる AI UI ワークフロー

ステップ 1：2〜3 の方向性を生成する

製品の文脈とページ目的は固定し、レイアウトかビジュアルの方向だけを変えます。ランダムな画面ではなく、比較できる選択肢が得られます。

ステップ 2：批評して改善する

階層、余白、コントラスト、コンポーネント数、不足している状態を確認します。そのうえで「レイアウトは維持し、テーブル密度を上げる。空状態を明確に追加する」のように的を絞って依頼します。ゼロから作り直すのは避けます。

ステップ 3：システムを統一する

方向性が決まったら、色、文字サイズの階層、角丸、余白を抽出し、次の画面にも適用します。一貫性は、すべての画面を 1 つのプロンプトで生成することではなく、共通の制約から生まれます。

ステップ 4：コードへ引き継ぐ

ルールを DESIGN.md に書くか、Stitch SDK と CLI でデザインからコードへ進みます。URL からデザインシステムを作る方法やコードからデザインへのワークフローも参考にしてください。書き出しの詳細は成果物のダウンロードを参照してください。

3 つのプロンプト例

SaaS 分析ダッシュボード

Design a desktop SaaS analytics dashboard for a B2B project management tool.
Users: operations leads who check pipeline health every morning.
Primary goal: spot blocked projects and open the right one.
Layout: left sidebar (Home, Projects, Reports, Settings), top bar with search and avatar, main content grid.
Components: four KPI cards, a line chart, a stacked bar chart, and a project table with status and owner.
Data: include loading, empty, and error states for the table.
Style: Linear-inspired dark interface, near-black surfaces, one indigo accent, tight typography.
Constraints: 1440px desktop first, responsive down to 1024px; WCAG AA contrast.

フィンテックのオンボーディング

Design a three-step onboarding flow for a personal finance app.
Users: first-time savers who want to set a monthly budget.
Primary goal: finish setup and see a personalized budget.
Layout: progress indicator, one question per step, primary button at the bottom.
Components: goal selector, income input, spending category chips, summary card.
Data: show validation errors and a final confirmation state.
Style: Stripe-inspired clarity, white canvas, restrained blue accent, generous spacing.
Constraints: mobile web first; keyboard accessible; no more than five choices per step.

AI チャット Web アプリ

Design a web app for an AI research assistant.
Users: analysts who need to compare sources and save findings.
Primary goal: ask a question, review cited answers, and save a finding.
Layout: left conversation list, center chat, right source panel.
Components: message thread, citation cards, source preview, save button.
Data: show streaming, empty, and error states for answers.
Style: calm editorial interface with warm neutrals and a single accent.
Constraints: 1280px desktop; readable line length; citations must remain visible.

よくある失敗と QA チェックリスト

よくある失敗：

1 画面に主アクションを 3 つ置く；
レイアウトや内容のルールなしでスタイルの形容詞だけを使う；
空・読み込み・エラー・権限の状態を忘れる；
参考ブランドをそのままコピーし、制約を抽出しない；
各画面を孤立して生成し、一貫性を失う。

画面を完了とする前に確認します：

主アクションが 1 つに絞られているか；
ナビゲーションが画面の種類に合っているか；
階層が明確な 4〜6 個の主要コンポーネントがあるか；
空・読み込み・エラー・成功の状態があるか；
コントラストと文字サイズが読みやすいか；
次のブレークポイントへのレスポンシブ方針があるか；
色・書体・余白・角丸を再利用できるか。

よくある質問

AI UI デザインと従来の UI デザインの違いは？

従来の UI デザインは空白のキャンバスとデザインシステムから始まります。AI UI デザインは説明と制約から始まります。作業の中心は、すべての要素を描くことから、ルールを定義し、出力をレビューし、システムを改善することへ移ります。

Google Stitch は本番用コードを生成できますか？

Stitch はデザイン参考やコード指向の出力を作れますが、リリース前にレビューが必要です。生成コードを出発点として、自社のアーキテクチャ、アクセシビリティ、テスト基準を適用してください。

複数画面の一貫性を保つには？

製品の文脈、スタイルルール、制約を含む共通のプロンプト接頭辞を書きます。すべての画面で同じトークンとコンポーネント語彙を再利用します。画面がずれたら、プロンプトでごまかさず制約を修正します。

次のステップ

Web アプリを設計する場合は、Google Stitch Web App デザインガイドに進んでください。ギャラリーを見る、エディタを試す、チュートリアルで体系的に練習するのもおすすめです。