はじめに
Google Stitchは、2025年5月のGoogle I/Oで発表された、AI駆動型のUIデザイン生成ツールです。テキストプロンプトや画像から数分でWeb/モバイルアプリのUIを自動生成し、HTMLコードやFigmaへの出力まで可能にする革新的なツールとして注目を集めています。
基本情報
-
アクセス: stitch.withgoogle.com
-
料金: 完全無料（ベータ期間中）
-
必要なもの: Googleアカウントのみ
Stitchの2つのモード
Stitchには、目的に応じて使い分けられる2つのモードがあります。
標準モード（Standard Mode）
-
使用AI: Gemini 2.5 Flash
-
月間生成回数: 350回
-
主な機能:
- テキストプロンプトのみでUI生成
- 高速な生成スピード
- Figmaへの直接エクスポート
- カラーテーマ・フォントの編集
- HTML/CSSコード出力
標準モードは、素早くプロトタイプを作りたいときや、複数案を試したいときに最適です。
試験運用モード（Experimental Mode）
-
使用AI: Gemini 2.5 Pro
-
月間生成回数: 100回
-
主な機能:
- テキスト + 画像入力に対応（手描きスケッチなどもOK）
- より高精度・高品質なデザイン生成
- HTML/CSSコード出力
- ⚠️ Figmaへの直接エクスポートは非対応
試験運用モードは、既存のスケッチをデジタル化したいときや、完成度の高いビジュアルを求める場合に向いています。
効果的な使い方: 「大きな指示 → 細かい修正」
Stitchを使いこなすコツは、「まず大まかに作らせて、後から細かく詰める」ことです。
ステップ1: 大きな指示を与える
まず、作りたいUIの全体像を明確に伝えましょう。
プロンプト例:
美容サロン向けのランディングページを作成してください。
以下の要素を含めてください:
- ヘッダーにロゴとナビゲーション
- ヒーローセクションにサロンの雰囲気を伝える大きな画像
- サービス一覧をカード形式で3つ
- 予約ボタンを目立つ位置に配置
- お客様の声セクション
- フッターに営業時間と連絡先
カラーは落ち着いたベージュとゴールドで統一し、
高級感のあるエレガントなデザインにしてください。
ポイント:
-
セクションや構成を具体的に書く
-
デザインのトーン&マナーを明示
-
ターゲット層やブランドイメージを伝える
ステップ2: 細かい修正を指示する
生成されたデザインを確認し、気になる箇所を具体的に修正します。
修正指示の例:
-
ヒーローセクションのボタンを大きくし、中央に配置
-
サービスカードの背景を白から薄いベージュに変更
-
フォントをモダンな印象に変更
-
「Salon」というロゴテキストを追加
ポイント:
-
一度に1〜3個の修正に絞る
-
「もっと良く」ではなく「どう変えるか」を明示
-
色・サイズ・配置など具体的に伝える
ステップ3: 繰り返して理想の形へ
このサイクルを繰り返すことで、AIと対話しながら理想のUIに近づけていけます。AIを「試行錯誤の相棒」として使うイメージです。
Figmaへの出力と後処理
標準モードでの出力
-
完成したら「Copy to Figma」ボタンをクリック
-
Figmaを開き、キャンバスに貼り付け（Ctrl+V / Cmd+V）
-
オートレイアウトやレイヤー構造も維持された状態で反映
メリット:
-
レイヤーがそのまま編集可能
-
オートレイアウトも保持される
-
そのままFigmaで調整・共有できる
試験運用モードの代替手法
Figma直接出力には非対応ですが、以下の方法で取り込み可能です。
-
「Code」ボタンからHTML/CSSをコピー
-
html.to.design を利用
-
コードを貼り付けてFigmaデザインに変換
使ってみた感想
簡単にUIを生成するには、かなり良いツールだと感じました。ラフなプロトタイプを作る分には十分な性能です。
ただ、しっかりとしたUIを作り込もうとすると、何度指示しても意図通りに直してくれないことがあり、少し困る場面もありました。それでも、無料で使えることやFigmaへのインポート機能は、かなり魅力的だと思います。
個人的には、GitHub Copilotの設定ファイルのように、デザインの前提条件やスタイルガイドを記述できる機能があれば、さらに使いやすくなるのではないかと感じました。
まとめ
Google Stitchは、デザイナーだけでなくエンジニアやプロダクトマネージャーにとっても、アイデアを素早く形にできる強力なツールです。完璧を求めるよりも、まずは気軽に試してみることをおすすめします。