Google Stitch 2.0 — Vibe Designで変わるUIデザインの民主化
Google Labsが2026年3月18日、UIデザインツール「Stitch」を大幅にアップデートしました（Google Blog）。テキストからUIを生成するだけのツールだったStitchが、「AIネイティブなソフトウェアデザインキャンバス」へと進化しています。
公式が掲げるコンセプトはVibe Design。コードを書かずに自然言語で「こういうUIがほしい」と伝えるだけで、デザインシステムの構築からプロトタイプの生成までを一気通貫で行うというものです。
実際に触ってみたので、何が変わったのかを一つずつ見ていきます。
何が変わったのか — 5つの主要アップデート
1. AIネイティブの無限キャンバス
以前のStitchは1画面ずつ生成する形式でしたが、今回のアップデートで無限キャンバスが導入されました。
キャンバス上にはデザイン画面だけでなく、デザインシステム、ドキュメント、プロトタイプといった複数種類のアセットを自由に配置できます。Figmaのような感覚ですが、すべてがAIエージェントとの対話によって生成・編集される点が異なります。
実際に「ダークテーマの分析ダッシュボード」をプロンプトで指示したところ、AIエージェントが以下の手順を自動で実行しました。
- デザインシステム「Obsidian Metric」を生成（カラーパレット、タイポグラフィ、ボタンスタイル、アイコン）
- ダッシュボード画面をデザインシステムに沿って生成
- チャットで修正点の概要と次のアクション候補を提示
従来は「画面生成→手動でコピー→別ツールで調整」という流れでしたが、すべてがキャンバス上で完結するようになりました。
2. デザインシステムの自動生成
最も印象的だったのが、プロンプトからデザインシステムが自動生成される点です。
「ダークテーマで紫アクセント」と指定しただけで、以下が自動的に作られました。
| 要素 | 生成内容 |
|---|---|
| Primary | #9D50FF（紫）+ T0〜T100の11段階トーン |
| Secondary | #925FC6（薄紫）+ 同様のトーンスケール |
| Tertiary | #C05177（ピンク）+ 同様のトーンスケール |
| Neutral | #121212（ダークグレー）+ 同様のトーンスケール |
| タイポグラフィ | Headline / Body / Label の3段階 |
| ボタン | Primary / Secondary / Inverted / Outlined の4種 |
| アイコン | Material Icons準拠 |
このデザインシステムは後から手動で編集することもできますし、ウェブサイトのURLからインポートすることも可能です（ただし、インポート機能は不安定という報告もあります）。
DESIGN.mdという自然言語形式のファイルとしても保存でき、他のツールやプロジェクトとの一貫性を維持しやすい設計になっています。
3. チャットベースの反復修正
生成後のUIは、チャットで指示を出すだけで修正できます。
実際に「Make the charts more interactive」というフォローアップ提案をクリックしたところ、AIエージェントが自動で以下の修正を行いました。
- Performance Growthチャートにツールチップとホバーステートを追加
- Regional Distribution世界地図にパルスするインタラクティブインジケーターを実装
- デザインシステム「Obsidian Metric」に沿った紫アクセントの強化
修正のたびに新しい画面がキャンバスに追加され、バージョン履歴として残ります。エージェントログで過去の操作を遡ることもでき、「あの時点の状態に戻したい」というケースにも対応しています。
4. エクスポートの多様化
エクスポートオプションが大幅に増えています。
| エクスポート先 | 説明 |
|---|---|
| AI Studio | Google AI Studioに直接エクスポート |
| Figma | Figmaファイルとして出力 |
| Jules | GoogleのAIコーディングエージェントへ連携 |
| .zip | HTML/CSSファイルをダウンロード |
| コードをクリップボードにコピー | コードを直接コピー |
| MCP | Model Context Protocol経由でClaude Code、Cursor等と連携 |
| Instant Prototype（新規） | インタラクティブなプロトタイプを即座に生成 |
| Stitch React アプリ | Reactアプリとして出力 |
特に注目すべきはMCP（Model Context Protocol）連携です。従来のエクスポートは「一方通行」でしたが、MCPを使うことでClaude Code、Gemini CLI、CursorなどのAIコーディングエージェントとの双方向連携が可能になります。コーディングエージェントがStitchのデザインを参照し、レイアウトの編集を直接リクエストしたり、テスト用のデザインバリアントを自動生成したりできます。
5. マルチスクリーン生成とInstant Prototype
1回のプロンプトで最大5画面を同時生成できるようになりました。生成された画面はインタラクションホットスポットで接続でき、クリックスルーのプロトタイプとしてそのまま動作します。
右クリックメニューから「Instant Prototype」を選択すると、静的なデザインが即座にインタラクティブなプロトタイプに変換されます。QRコード生成にも対応しており、モバイルで実際の操作感を確認できます。
モデル選択
StitchはGeminiモデルで動作しており、現在はGemini 3.0 Flashがデフォルトで選択されています。モデル選択のドロップダウンから切り替えが可能です。月に350回の無料生成が提供されています。
触ってみた所感
良かった点:
- デザインシステムの自動生成が秀逸。カラーパレットのトーンスケール（T0〜T100の11段階）が自動生成される精度は高く、プロンプトの「紫アクセント」という曖昧な指示から一貫性のあるカラーシステムが作られる
- チャットベースの反復修正が自然。フォローアップ提案がコンテキストを理解しており、「もっとインタラクティブに」のような曖昧な指示にも的確に応答する
- エクスポートの選択肢が豊富。特にMCP連携とReactアプリ出力は開発者にとって実用的
- エージェントログで何が行われたかを追跡できる透明性
気になった点:
- 生成に時間がかかる（デザインシステム＋画面で約2分）
- 生成結果の細かい制御が難しい（後述）
- ウェブサイトからのデザインシステムインポートが不安定
- 無限キャンバスはまだFigmaほどの操作性ではない
「imaginationがimaginativeすぎる」問題
Stitchを使っていて最も実感するのが、生成結果の制御の難しさです。
AIデザインツールの専門家であるXinran Ma氏のハンズオンレビューに、象徴的な表現があります。Ma氏はdesignwithai.co（購読者20,000人以上）の運営者で、ADPListのトップ1%メンター、Mavenで「AI for Product Designers」コースを開講するなど、AIツールをデザインワークフローに統合する実践の第一人者です。
A caveat though is that the imagination can be very ‘imaginative’.
プロトタイプ生成時に新しい画面を追加するよう指示すると、AIが「創造的すぎる」結果を返すことがあるという指摘です。同氏は「I usually look for higher precision and intentions behind each generation, so I still wish I could have more control」（各生成の背後にある意図と精度がもっとほしい）とも述べています。日常的にAIデザインツールを実務で使い込んでいる立場からの評価だけに、この指摘には重みがあります。
この問題は複数のレビュアーが異なる角度から報告しています。
視覚的な均質性。Murat Esmer氏のレビューでは「a lot of that work shares familiar structural DNA」（生成結果の多くが似たような構造的DNAを共有している）と指摘されています。ダッシュボードを作ればよくあるダッシュボード、ヒーローセクションを作れば定型的なヒーローセクションになる。Vibe Designの「だいたいこんな感じ」が強みである反面、独自性のあるデザインを求めると限界にぶつかります。
実際のUI問題での検証。Rituraj Sambherao氏は荷物追跡画面をStitchで設計した結果、以下の問題を報告しています。
- カード構造がAI生成デザインの典型パターンに見える
- 装飾的で実用性に欠ける
- タイムラインが画面上で過度なスペースを消費
- アクセシビリティ、エッジケース、ローカライズへの配慮が欠如
修正プロンプトで「情報階層の強化」「ビジュアルノイズの削減」を指示すると一定の改善は見られたものの、根本的な設計判断はAIに任せきれないという結論です。
アクセシビリティの問題も見逃せません。Esmer氏は「Stitch does not guarantee accessibility. Contrast can be weak. Hit areas can be too small.」（コントラストが弱い、タップ領域が小さすぎる場合がある）と報告しており、プロダクション投入前に別途アクセシビリティレビューが必要になります。
デザインシステムで制御できるのか
この「制御不能」問題に対するStitch側の回答が、今回のアップデートで導入されたデザインシステム機能とDESIGN.mdです。
以前のStitchは既存デザインのスタイルを参照して生成できたものの、それを制御する手段がありませんでした。今回のアップデートでは、カラーパレット・タイポグラフィ・コンポーネントをデザインシステムとして定義し、生成時の制約として適用できるようになっています。
ただし制限もあります。デザインシステムをゼロから手動で構築することはできず、AIが生成したものをカスタマイズするか、ウェブサイトURLからインポートする形式です。つまり「AIが作ったものをAIの制約として使う」という構造であり、完全な制御とは言い難い面があります。
結局のところ、Stitchの現在の立ち位置は「最初の80%を高速に生成するツール」です。Esmer氏の言葉を借りれば「the last 20% still belongs to designers and developers」（残りの20%はデザイナーと開発者の仕事）。Vibe Designという概念は「最初の方向性を素早く形にする」フェーズで真価を発揮しますが、ピクセル単位の精度や実装品質が求められるフェーズでは、人間の判断が不可欠です。
Figmaとの棲み分け
アップデート直後にFigmaの株価が約12%下落したと報じられましたが、現時点でStitchがFigmaを置き換えるとは考えにくいです。
StitchはアイデアのラピッドプロトタイピングやVibe Design — つまり「だいたいこんな感じ」をすばやく形にする用途で強力です。一方で、ピクセル単位の微調整、複雑なインタラクション設計（条件分岐やマイクロインタラクション）、チーム全体のデザインワークフロー管理はFigmaの領域です。
実践的なワークフローとしては「Stitchで生成 → Figmaで精緻化 → コードで実装」という流れが現実的でしょう。
ただし、MCP連携でコーディングエージェントとの双方向ループが成立したことで、「デザイン→コード」のパイプラインがStitch側で完結しうる可能性が出てきました。この方向の進化が続けば、プロトタイピングフェーズにおけるFigmaの立ち位置は変わるかもしれません。
まとめ
Google Stitch 2.0は「テキストから1画面を生成するツール」から「AIエージェントがデザインシステムごと構築するキャンバス」へ進化しました。
特にデザインシステムの自動生成、MCP連携、Instant Prototypeの3つは、デザインと開発の境界をさらに曖昧にする機能です。Googleアカウントがあれば無料で使えるので、まずはstitch.withgoogle.comで触ってみることをおすすめします。