Google Stitchの使い方：誰でもプロ級UIをAI生成できるFigmaキラーが大型アプデ

2026年3月18日、Google Labsがテキスト・画像・音声からUIデザインを自動生成するAIツール「Stitch」の過去最大となるアップデートを発表した。

AIがUIデザインの世界も食い尽くすのではという懸念からか、「Stitch」発表後にFigma株が大きく下落している。

Stitchアップデートの大きな目玉は、「バイブデザイン（Vibe Design）」の導入だ。

自然言語で大まかな指示を出すだけでAIがコードを書く「バイブコーディング」のデザイン版であり、ワイヤーフレームを描く代わりに「こんな雰囲気のアプリにしたい」と伝えるだけで、複数のUI候補が生成される。

AIコーディングエージェントが急速に進化する中、どうしても「AIっぽさ」が残ってしまうUIデザインの世界に、大きな革新が起きることを期待させる。

Stitchは無料で利用でき、ブラウザだけで動作する（月間生成上限あり）。本記事では、Stitchの概要と、実際にサクッと5分で使ってみる方法まで紹介する。

今回の「Stitch」超絶アップデートの概要

Stitchをそもそも知らなかった、という人がほとんどではないだろうか。

Stitchの前身は、2022年に登場したUI生成ツール「Galileo AI」だ。2025年5月のGoogle I/OでGoogleがGalileo AIを買収し、Gemini 2.5を搭載した「Stitch」として発表。同年12月にはGemini 3の統合によりUI生成品質が向上し、プロトタイプ機能も追加された。

そして、今回のアップデートでは、無限キャンバス、音声操作、デザインエージェント、MCP/SDK連携などの機能が一挙に搭載されている。

急激に機能が進化し、UIデザインツールとして実用的なレベルに達したことから、ここに来て大きな注目を集めているのだ。

Vibe Design：「こんな雰囲気のアプリにしたい」だけでUI案が出る

従来のUIデザインツールでは、まずワイヤーフレームを描き、コンポーネントを配置し、色やフォントを選ぶ工程が必要だった。

Stitchが可能にする「Vibe Design」は、この定番の工程を大きく簡略化してしまう。

ユーザーが入力するのは、ビジネス目標やターゲットユーザーに感じてほしい感情、参考にしたいデザインの方向性だけだ。たとえば以下のようなプロンプトで複数のUI案が生成される。

• 「Stripeのようなプレミアム感とミニマルさで、SaaSの料金ページを作りたい」
• 「Z世代向けの遊び心あるデザインで、30秒以内にサインアップさせたい」
• 「大学の学園祭で使うイベント管理アプリのホーム画面」

Google Labs PMのRustin Banks氏は公式ブログで、「ワイヤーフレームではなく、達成したいビジネス目標やユーザーに感じてほしいこと、インスピレーション元を言語化するところから始められる」と述べている。

コードを書かずにアプリを作れるようになったのと同じ要領で、デザインスキルがなくてもUI案を高速に探索できる。ワイヤーフレームを1枚描く時間で、複数パターンのデザイン候補を比較検討できるのが大きい。

無限キャンバス・Voice Canvas・Direct Edits：対話しながらUIを育てられる

UIも全面刷新された。新しい無限キャンバス（Infinite Canvas）は、テキスト、画像、コードスニペットなどを自由に配置できるワークスペースである。

AI生成の結果を並べながら比較・編集できるため、アイデアの発散から収束、プロトタイプの完成まで1つの画面で完結する。

実際に、当サイトのトップページ、アーカイブページ、記事ページを生成してもらった様子が以下である。Figmaのような無限キャンパスに、各ページが並んでいる。

Voice Canvas（音声キャンバス）はGemini Liveを活用した新機能で、キャンバスに向かって声で指示を出せる。「3パターンのメニューレイアウトを見せて」「このページをダークカラーのパレットに変更して」といった指示が音声でリアルタイムに反映される。

AIが「ターゲットユーザーの年齢層は？」と質問を返してきたり、「このレイアウトだとCTAボタンが目立ちにくい」とデザインに対する批評を行ったりもするため、壁打ち相手のような感覚で使える。

ただし、実際に試してみたところ、現状は英語での会話となってしまった。

Direct Editsは、生成されたUIのテキストや画像を直接クリックして編集できる機能だ。

従来は微調整のたびにプロンプトを書き直して再生成する必要があったが、もうその手間はいらない。

「プロンプト → 生成 → 再プロンプト」の繰り返しから、「対話しながらデザインが育つ」体験へと進化している。

Instant Prototypes：静的な画面案で終わらず、動きまで確認できる

AIが生成するのは静止画だけではない。Instant Prototypes機能を使えば、複数の画面をつなぎ合わせてインタラクティブなプロトタイプに変換できる。

操作は極めてシンプルで、デザインした画面を選択して「Play」ボタンを押すだけだ。画面遷移やアプリフローがブラウザ上でシミュレーションされる。

さらに、Stitchはクリック先の次の画面を自動的に推測・生成する。たとえばログイン画面を作れば、遷移先のホーム画面を自動で提案してくれる。

この機能があると、企画段階で「このアプリはこう動きます」と関係者に見せるための資料をすぐに作れる。静的な画面の絵を見せるだけでは伝わりにくい操作感やフローの妥当性を、動くプロトタイプで検証できるのは大きな差だ。

開発ツール連携：MCP/SDKでデザインと実装をつなぐ

開発者にとって特に注目すべきなのが、Stitch MCPサーバーとSDKの公開だ。

MCP（Model Context Protocol）はAIツール同士をつなぐ共通インターフェースで、これを経由してStitchのデザイン情報をコーディングエージェントから直接参照できるようになった。

対応ツールにはGoogleのAntigravity（Google製AI搭載IDE）やGemini CLIに加え、Claude CodeやCursorも含まれる。GitHubにはstitch-skillsリポジトリも公開されており、開発環境上でStitch Skillsをインストールすれば、デザインからコード生成までのパイプラインが1本でつながる。

生成したデザインはワンクリックでFigmaファイルとして出力でき、Auto Layout構造やテキスト情報を保持した編集可能なレイヤーとしてインポートされる。HTML/CSSコード出力も引き続き利用可能で、設計から実装への橋渡しが一段と強化された。

ブランドルールの再利用：DESIGN.md

DESIGN.mdは、デザインシステム（ブランドカラー、フォント、レイアウトルールなど）をMarkdownファイルとしてインポート/エクスポートできる仕組みだ。

先述のGitHub の stitch-skills リポジトリに、design-mdスキルも公開されている。

Antigravity、Claude Code、Codex、Cursorなどでの開発時に、「AGENTS.md」などの開発挙動をコントロールするドキュメントとともに、「DESIGN.md」を決めておくことで、AIにUIのデザインルールを遵守させることができる。

任意のURLからデザインシステムを自動抽出する機能もある。おしゃれなサイトを見つけたら、それをAI向けのデザインシステムとして抽出することも可能だ。

「社内のブランドガイドラインに沿ったUIを生成してほしい」という要件に応えやすくなった。異なるStitchプロジェクト間でもデザインルールを再利用できるため、毎回ゼロからルールを設定し直す手間が省ける。

併せて追加されたAgent Managerは、プロジェクト全体の履歴を理解しながら複数のデザイン方向性を並行探索できるAIデザインエージェントの管理機能だ。「こっちの路線とあっちの路線、両方試してみたい」というときに便利である。

5分で試せるStitchの基本的な使い方

機能の説明だけでは実感が湧きにくいので、実際に触ってみることを強くオススメする。

驚くほど簡単に使え、しかもクオリティの高いUIを一瞬で生成できるので、バイブコーディングにハマっているライトユーザーから、プロのデザイナーまで、全ての人に体験してほしい。

アクセスからUI生成までの3ステップ

1. stitch.withgoogle.com にアクセスし、Googleアカウントでログインする。すぐにキャンバスが表示される
2. 画面中央のプロンプトバーに、作りたいUIの説明を入力して生成する。「フィットネスアプリのオンボーディング画面。目標選択とトレーニング好みの設定を含む」のように、用途とターゲットを含めると品質が上がる

3. デザイン候補が生成されるので、追加のプロンプトやDirect Editsで微調整を重ねる。Voice Canvasで音声による指示も可能だ

試してみたいプロンプト例

以下のようなプロンプトを入力すると、Stitchの実力をすぐに体感できる。

• 「大学生向けのイベント管理アプリ。ホーム画面に今週のイベント一覧と参加ボタンを配置」
• 「SaaSのプロジェクト管理ダッシュボード。タスク進捗、チーム活動、締切一覧を1画面に」
• 「カフェの注文アプリ。メニュー一覧、カート、決済画面の3画面フロー」
• 「ポートフォリオサイトのトップページ。ミニマルでモダンな雰囲気、プロジェクト一覧とAboutセクション」

プロンプトは日本語でも動作するが、海外のUIトレンドを反映させたい場合や、参考にしたいサービス名を含める場合は英語の方が精度が上がりやすい。

より質の高い出力を得るテンプレートとしては、「誰向けか + 何を達成したいか + 雰囲気 + 参考にしたいUI」の4要素を含めるとよい。

例：「20代の女性をターゲットにした美容サブスクのランディングページ。〇〇（ブランド）のようなクリーンで柔らかい雰囲気。ヒーローセクション、料金プラン、レビューを含む」

使用できるモデルとクレジット制限

現在のStitchは、Geminiのうち以下の二つのモデルを利用できる。

使用量制限があるため贅沢に使いすぎると上限に達してしまうが、どちらかといえば「Thinking with 3.1 Pro」モードを使用した方が質の高いデザインが得られる。

• Gemini 3 Flash：高速生成。テキストプロンプトからの基本的なUI生成に最適
• Gemini 3.1 Pro：高品質生成。複雑なデザイン指示や、画像入力、精緻な調整に対応

どちらのモードも無料で利用できる。例えば、最初は慣れるまでGemini 3 Flashモードで数をこなし、方向性が固まったらThinking with 3.1 Proモードで仕上げるのが効率的だろう。

Stitchは無料で利用できるが、無制限ではない。1日あたりの上限クレジットは400である。

Figmaやv0とどう使い分けるか：Stitchの強みと制限

Stitch・Figma・v0の比較表

Stitchは「AIによるUI探索の高速化」に特化しており、FigmaやVercelのv0とは異なる領域をカバーしている。

現時点の制限事項

Stitchは非常に強力だが、万能ではない。以下の制限を理解した上で使うべきだ。

• コード出力はHTML/CSS中心：React、Vue、SwiftUIなどのフレームワーク向けコードは直接出力されない。v0のようにReactやTailwind CSSのモダンなコンポーネントを直接生成するわけではないため、実装に直結するコード生成力ではv0に分がある。Antigravity等のAIエディタを経由してReact/Tailwindへ変換する経路はあるが、ネイティブ対応ではない
• コード品質はモックアップ向け：出力されるHTML/CSSはレスポンシブ対応やアクセシビリティの面で追加調整が必要なケースが多く、そのまま本番投入するというよりはプロトタイプやモックアップの出発点として使うのが現実的だ
• コラボレーション機能がない：リアルタイム共同編集、コメント、バージョン履歴の共有など、チーム開発で当たり前の機能がまだ実装されていない
• デザインシステムの本格運用には弱い：DESIGN.mdで基本的なルールのインポートは可能だが、Figmaのようなコンポーネントライブラリやデザイントークンの管理機能はない
• Google Labs実験プロダクト：正式な製品ラインではないため、将来の提供継続やサポート体制に保証がない。長期的なワークフローの中核に据えるにはリスクがある

Stitchで探索、Figmaで仕上げ、開発ツールで実装

Stitchは「デザインの最初のフェーズを高速化するツール」として位置づけるのが現時点では最も合理的だ。

具体的なワークフローとしては、以下の流れが推奨される。

1. Stitchで探索：短時間で複数パターンのデザイン案を生成し、方向性を絞る。Voice Canvasで壁打ちしながらアイデアを発散させる
2. Figmaで仕上げ：選んだ案をFigmaにエクスポートし、ブランドガイドラインに合わせた微調整、コンポーネント化、レスポンシブ対応を行う
3. 開発ツールで実装：Figma Dev Modeから開発チームに引き渡すか、StitchのMCP経由でCursorやClaude Codeに接続して直接コードを生成する

開発者であればMCP連携、PMであればInstant Prototypes、学生であれば無料のUI探索ツールとして、それぞれの場面でStitchは即戦力になる。

Googleアカウントだけで今すぐ試せるので、まずは1つプロンプトを打ってみてほしい。