Google Stitch とは？
Google Stitch（スティッチ） は、Google Labs が提供する AI UIデザインツールです。2025年5月の Google I/O で発表され、2026年3月18日に大型アップデートが行われました。
最大の特徴は、テキストで指示するだけでプロ品質の UI デザインが生成されること。Google はこのコンセプトを「バイブデザイン（Vibe Design）」と呼んでいます。プログラミングの世界でいう「バイブコーディング」のデザイン版です。
しかも 完全無料。Google アカウントさえあれば、誰でもすぐに使い始められます。
Stitch でできること
1. テキストからUI生成
自然言語で指示するだけで、UIデザインが自動生成されます。
プロンプト例：
「SaaSのダッシュボード画面。
左にダークカラーのサイドバー、
メインエリアにデータチャートとKPIカード、
右上にユーザープロフィール」こうしたテキスト指示から、配色・レイアウト・タイポグラフィまで整った UI が数秒で出力されます。日本語のプロンプトにも対応しています。
2. 画像からUI生成
手書きのスケッチ、ホワイトボードの写真、既存サイトのスクリーンショットをアップロードすると、デジタルの UI デザインに変換してくれます。
ミーティング中にホワイトボードに描いたワイヤーフレームを写真に撮り、Stitch にアップロードするだけで、整ったUIデザインが手に入る ― そんな使い方が可能です。
3. インタラクティブなプロトタイプ生成
単体の画面デザインだけでなく、画面間の遷移を含むプロトタイプも自動生成できます。ログイン画面 → ダッシュボード → 詳細画面といったフローを Stitch が推論し、論理的な次の画面まで自動提案してくれます。
4. コード出力とFigma連携
生成したデザインは HTML/CSS コード として出力可能。さらに、Figma へのコピー＆ペーストにも対応しているため、既存のデザインワークフローに取り込むこともできます。
5. 音声操作（2026年3月の新機能）
2026年3月のアップデートで追加された目玉機能の一つが、Gemini Live と連携した音声操作です。キャンバスに向かって話しかけるだけで、デザインの指示や修正をリアルタイムで実行できます。
「このボタンをもう少し大きくして、色を青に変えて」と声で指示するだけで反映される ― まさに AI とペアデザインする体験です。
6. DESIGN.md（デザインシステムの自動生成）
生成したデザインから、カラーパレット・タイポグラフィ・角丸・スペーシングなどのデザインシステムを DESIGN.md として自動出力する機能も追加されました。
この DESIGN.md は構造化されたドキュメントなので、Claude Code や Cursor などの開発ツールにそのまま渡して、デザインと一貫したコードを生成させることができます。
2026年3月の大型アップデートまとめ
3月18日に発表されたアップデートでは、Stitch のインターフェースが根本から刷新されました。
| 新機能 | 内容 |
|---|---|
| AIネイティブ無限キャンバス | 画像・テキスト・コードを自由に配置し、コンテキストとして AI に渡せる |
| 音声操作 | Gemini Live 連携でハンズフリーのデザイン指示が可能に |
| DESIGN.md | デザインシステムをドキュメントとして自動出力 |
| 開発ツール連携 | Google AI Studio、Antigravity に加え、Claude Code・Cursor との連携を追加 |
| デザインエージェント | レイアウト決定・コンポーネント選択・反復改善を自律的に行う AI エージェント |
特に「無限キャンバス」への進化は大きく、従来のチャット型インターフェースからノードベースのキャンバス型に変わったことで、より直感的なデザインワークが可能になっています。
使い方（3ステップ）
ステップ1：アクセス
stitch.withgoogle.com にアクセスし、Google アカウントでログインします。
ステップ2：プロンプトを入力
テキストで作りたい UI を説明するか、参考画像をアップロードします。最初は簡単な指示から始めて、生成結果を見ながら追加指示で調整していくのがコツです。
ステップ3：出力を活用
生成されたデザインは以下の方法で活用できます。
- HTML/CSS コード としてダウンロード
- Figma にコピー＆ペースト
- DESIGN.md として開発チームに共有
- Google AI Studio / Antigravity でアプリ化
生成回数の上限
| モード | 使用モデル | 月間生成回数 |
|---|---|---|
| Standard | Gemini 2.5 Flash | 350回/月 |
| Experimental | Gemini 2.5 Pro | 200回/月 |
Standard モードは速度重視、Experimental モードは品質重視です。画像からの UI 生成は Experimental モードでのみ利用できます。
他の AI デザイン／開発ツールとの違い
AI を活用したデザイン・開発ツールは増えていますが、Stitch のポジションは明確です。
| ツール | 得意領域 | 弱み | 料金 |
|---|---|---|---|
| Google Stitch | 0→1 の UI 探索・デザイン品質 | コード出力が HTML/CSS のみ | 無料 |
| Figma AI (Make) | 既存 Figma ワークフロー内での精緻化 | 0→1 のアイデア出しは Stitch に劣る | 有料 |
| v0（Vercel） | React/Next.js のプロダクションレディなコード | デザイン探索よりコード生成志向 | フリーミアム |
| bolt.new | フロント＋バックエンド＋デプロイまで一括 | デザイン品質は Stitch に劣る | フリーミアム |
| Lovable | 完全なアプリデプロイまで対応 | デザインの自由度は限定的 | フリーミアム |
ポイント：Stitch は「デザイン探索」に特化
Stitch はアイデアを形にする最初のフェーズ（0→1）に最も強みを発揮します。「こんな感じの画面が欲しい」というイメージを素早くビジュアル化し、チームで議論するための叩き台を作る ― という使い方が最も効果的です。
一方で、生成されたデザインをプロダクションレベルのコードに落とし込む工程では、v0 や bolt.new といったコード生成に特化したツールと組み合わせるのが現実的です。
おすすめワークフロー：
Stitch でデザイン探索
↓
DESIGN.md / Figma にエクスポート
↓
v0 や Claude Code でコード化
↓
プロダクションにデプロイStitch が効果を発揮するユースケース
エンジニアがデザイナーを待たずにプロトタイプを作る
「デザイナーのリソースが空くまで実装が進められない」という状況は多くの開発チームが抱える課題です。Stitch を使えば、エンジニア自身がプロ品質の UI プロトタイプを素早く作成し、デザイナーとの議論のベースにできます。
クライアントへの提案を高速化する
Web 制作会社やフリーランスが、クライアントとの初回ミーティング後にすぐにデザイン案を複数提示する ― といったスピード感のある提案が可能になります。
非デザイナーがアイデアを可視化する
プロダクトマネージャーや営業担当が「こんなイメージの画面」を言葉で説明してもなかなか伝わらないことがあります。Stitch にプロンプトを入力して生成された画面を見せれば、認識のズレを大幅に減らせます。
知っておくべき制限事項
Stitch は強力なツールですが、万能ではありません。現時点の制限を把握した上で活用しましょう。
コード出力は HTML/CSS のみ React、Vue、Swift UI などのフレームワーク向けコード出力には対応していません。プロダクション向けには別のツールでの変換が必要です。
アクセシビリティは自動保証されない 色コントラストの不足やタッチターゲットサイズの問題など、アクセシビリティ基準を満たさない出力になるケースがあります。公開前には必ず手動チェックが必要です。
デザインが似通りやすい 同じような指示をすると似たレイアウトが生成される傾向があります。ユニークなデザインを求める場合は、参考画像を積極的に活用するか、生成後に手動で調整しましょう。
複雑な画面フローには弱い シンプルな画面単位では高品質ですが、10画面以上のマルチステップフローの設計は苦手です。
Experimental モードでは Figma エクスポート不可 高品質な Experimental モードで生成したデザインを直接 Figma にエクスポートすることはできません（Standard モードのみ対応）。
まとめ：AI デザインツールとの付き合い方
Google Stitch は、デザインの民主化を大きく前進させるツールです。完全無料でプロ品質の UI が生成できるという事実は、Web 制作やアプリ開発のワークフローを確実に変えていくでしょう。
ただし、Stitch が得意なのはあくまで「0→1のデザイン探索」フェーズです。プロダクションレベルの品質を保証するには、デザイナーによるレビュー、アクセシビリティチェック、コード生成ツールとの連携といった人間が介在する工程が依然として重要です。
AI はデザイナーの仕事を奪うのではなく、デザイナーの仕事を「最終的な品質の担保」にシフトさせる。 Stitch はその流れを加速させるツールといえます。
まずは stitch.withgoogle.com にアクセスして、「自社サービスのダッシュボード画面」などを試しに生成してみてください。AI デザインの可能性を体感できるはずです。
