- 2025年5月のGoogle I/Oで初お披露目されたが、今回のアップデートで「Vibe Design（バイブデザイン）」という新しいデザイン手法が採用
- 無限キャンバス、音声操作、デザインエージェント、Reactアプリ書き出しなど、新機能が追加された
- 2026年3月19日時点では、Google Labsの実験的プロジェクトでありプレビュー公開
2026年3月19日、Google Labsは自社のAI搭載UIデザインツール「Stitch」の大型アップデートを発表しました！
もともと2025年5月のGoogle I/Oで初めてお披露目されたStitchですが、今回のアップデートでは「Vibe Design（バイブデザイン）」という新しいデザイン手法を打ち出し、無限キャンバス、音声操作、デザインエージェント、Reactアプリ書き出しなど、まったく新しい体験が追加されています。
Figma株が一時8.8%下落するほどのインパクトを市場に与えたこのツールについて、本記事では、概要から使い方、活用シーンまで徹底的に解説していきます。
ぜひ最後までご覧ください！
＼生成AIを活用して業務プロセスを自動化／
Stitchとは？
Stitchは、Google Labsが提供するAI搭載のUIデザインプラットフォームです。自然言語のテキストプロンプトや、手描きスケッチ・ワイヤーフレームなどの画像をもとに、Webやモバイルアプリ向けの高品質なUIデザインを自動生成してくれます。
もともとGoogleが買収したGalileo AIの技術をベースとしており、2025年5月のGoogle I/Oで初公開されました。バックエンドには、Googleの大規模言語モデル「Gemini」が搭載されており、Standard Modeでは、Gemini 2.5 Flash、Experimental ModeではGemini 2.5 Proがそれぞれ使用されているそうです。
今回の2026年3月19日のアップデートで、Stitchは単なるUI生成ツールから「AI-native Software Design Canvas（AIネイティブなソフトウェアデザインキャンバス）」へと進化しました。Googleはこの新しいアプローチを「Vibe Design」と名付けています。
従来のワイヤーフレームから始めるデザインフローとは異なり、ユーザーが実現したい体験のイメージや雰囲気を言葉で伝えるだけで、AIがUIを組み立ててくれるという考え方です。
Stitchの仕組み
Stitchの動作は大きく分けて「入力 → AI処理 → 出力」の3ステップで構成されています。
まず入力フェーズでは、ユーザーがテキストプロンプトや画像（スケッチ、スクリーンショット、ワイヤーフレーム）をキャンバス上に投入します。今回のアップデートからは、音声入力にも対応しました。
次にAI処理フェーズでは、Geminiのマルチモーダル能力を活かして、入力された情報を解析し、UIデザインの候補を複数パターン生成します。ここでは、デザインエージェントがプロジェクト全体の文脈を把握しながら、複数のアイデアを同時に探索します。
最後に出力フェーズでは、生成されたデザインをFigma形式、HTML/CSS、JSX/Reactコードなどで書き出せます。静的なデザインをクリック可能なプロトタイプへ自動変換する機能も備わっています。
また、新たに導入された「DESIGN.md」は、デザインルール（タイポグラフィ、カラースキーム、コンポーネント仕様など）をマークダウン形式で記述・共有できるフォーマットです。他のデザインツールやコーディングツールとデザインルールをやり取りするための「デザインの設計書」のような役割を果たします。
Stitchの特徴
Stitchの特徴として、まず注目すべき点は無限キャンバスです。従来のフラットなキャンバスから大きく進化し、画像、テキスト、コードをすべてコンテキストとしてドロップできる空間が用意されました。アイデアの初期段階から動作するプロトタイプまで、一つのキャンバス上でシームレスに作業できます。
デザインエージェントも強力な新機能です。プロジェクト全体の履歴を分析し、複数のデザイン方向性を同時に探索できるAIエージェントが、コンパクトなウィジェットとしてキャンバス上に常駐します。デザインモードとプロトタイプモードの切り替えに合わせて位置が変わり、まるで隣で一緒に作業しているような感覚を与えてくれます。
Voice Live Mode（音声操作）では、キャンバスに向かって直接話しかけることができます。たとえば「メニューのバリエーションを3つ見せて」「このスクリーンを別のカラーパレットで表示して」と指示すると、リアルタイムでデザインが変更されます。音声のバリエーションも複数用意されており、まさにデザインパートナーと会話しているような体験が得られます。
Reactアプリ書き出しは、選択した画面群から完全に動作するReactアプリケーションを生成する機能です。単なるクリック可能なプロトタイプではなく、AI StudioやAntigravityなどの開発ツールへそのままエクスポートできる実際のコードが出力されます。
なお、Google Antigravityについて、詳しく知りたい方は以下の記事も参考にしてみてください。
Stitchの安全性・制約
Stitchは2026年3月19日時点で、Google Labsの実験的プロジェクトという位置づけです。そのため、利用にあたってはいくつかの制約があります。
まず年齢制限として、18歳以上のユーザーのみが利用可能です。利用可能地域はGeminiが提供されているすべての地域に順次拡大されており、30カ国以上で利用できるようになっています。
月あたりの生成回数には上限が設けられています。Standard Modeで350回、Experimental Modeで50回が目安です（上限は変更される場合があります）。また、Experimental Modeで画像入力から生成したデザインはFigma形式ではなくHTML/CSSコードのみでの出力となる制約があります。
プライバシーについては、設定画面から「AIモデルのトレーニングを許可する」のチェックを外すことで、入出力データがGoogleのモデル学習に使用されないよう設定できます。
Stitchの料金
Stitchは2026年3月19日時点で、Google Labsの実験的プロジェクトとして完全無料で提供されています。
Googleアカウントさえあれば、クレジットカードの登録なしですぐに使い始められます。ただし、無制限に使えるわけではなく、モードごとに月間の生成回数に上限が設定されています。
| プラン | 料金 | 使用モデル | 月間生成回数 | Figma書き出し | 画像入力からの生成 |
|---|---|---|---|---|---|
| Standard Mode | 無料 | Gemini 2.5 Flash | 350回 | 対応 | 非対応 |
| Experimental Mode | 無料 | Gemini 2.5 Pro | 50回 | 非対応（HTML/CSSのみ） | 対応 |
2026年3月19日時点では、有料プランに関する公式アナウンスはありません。
Stitchのライセンス
Stitch本体はGoogle Labsの実験的サービスとして、Googleの利用規約に準拠して提供されています。
Googleは2024年に利用規約を更新し、AIツールで生成されたコンテンツの所有権をユーザーから奪わない方針を明確にしました。
一方、Stitch Skills（MCP ServerやAgent Skills）のソースコードは、GitHub上でApache License 2.0のもとで公開されています。以下はStitch Skillsのライセンス情報を整理したものです。
| 項目 | 可否 | 備考 |
|---|---|---|
| 商用利用 |  | |
| 改変 | | 変更したファイルには変更の旨を明記する必要あり |
| 再配布 | | |
| 特許利用 | | |
| 私的利用 | |
なお、上記はStitch Skillsのオープンソース部分に関するライセンスです。
Stitchの使い方
Stitchは非常に直感的なインターフェースで、デザインの専門知識がなくてもすぐに使い始められます。ここからは基本的なテキストからのUI生成と、画像からのUI生成、そしてVoice Live Modeの3つの使い方をご紹介していきます。
テキストプロンプトからUIを生成する
1番スタンダードな使い方です。自然言語で作りたいUIのイメージを伝えるだけで、AIがデザインを生成してくれます。
プライバシー設定を確認する
プロフィールアイコンから設定を開き、「AIモデルのトレーニングを許可する」のチェックを外しておきます。クライアント案件などの機密性が高いプロジェクトでは、この設定を推奨します。
プロンプトを入力する
プロンプト入力欄に、作りたいUIの説明を入力します。たとえば以下のように、具体的に書くほど精度が高くなります。
A modern fitness tracking app with a dark theme. The home screen should show
daily step count, calories burned, and active minutes in card-style widgets.
Include a bottom navigation bar with Home, Workouts, Progress, and Profile tabs.生成結果を確認・調整する
AIが複数のUIデザイン候補を生成します。気に入ったデザインを選び、追加のプロンプトで色やレイアウトを調整できます。「もう少しミニマルにして」「フォントサイズを大きくして」など、自然言語での指示が可能です。
書き出す
完成したデザインは、Figmaへコピー（Standard Modeのみ）、HTML/CSSコードとしてダウンロード、またはReactコンポーネントとしてエクスポートできます。
画像・スケッチからUIを生成する
手描きのスケッチや既存アプリのスクリーンショットをもとに、UIデザインを生成する方法です。この機能はExperimental Mode（Gemini 2.5 Pro）で利用可能です。
Experimental Modeに切り替える
設定からExperimental Modeを選択します。
画像をアップロードする
キャンバスにスケッチやワイヤーフレーム、参考にしたいUIのスクリーンショットをドラッグ＆ドロップするか、アップロードボタンから画像を選択します。
補足プロンプトを入力する
画像だけでも生成可能ですが、「このワイヤーフレームをもとに、SaaS向けのダッシュボードUIを生成して」のように補足テキストを添えると、よりイメージに近い結果が得られます。
生成結果をコードで書き出す
Experimental Modeで生成したデザインはHTML/CSSコードとして書き出せます（Figma書き出しは非対応です）。
Voice Live Modeで音声操作する
今回のアップデートで追加された音声操作機能です。キャンバスに向かって話しかけることで、リアルタイムにデザインを変更できます。
Voice Live Modeを有効にする
プロンプト入力欄右下のVoice Modeアイコンをクリックして音声入力を開始します。
音声で指示を出す
たとえば「このランディングページのヒーローセクションの背景色を紺色に変更して」「ナビゲーションメニューのバリエーションを3パターン見せて」など、自然な言葉で指示します。
リアルタイムで変更を確認する
デザインエージェントが指示内容を即座にキャンバスに反映します。音声でのやり取りを続けながら、デザインを仕上げていくことができます。
【業界別】Stitchの活用シーン
Stitchはデザインの民主化を掲げるツールだけあって、デザイナーに限らず、さまざまな業界・職種の方にとって有用です。こちらでは、業界ごとの具体的な活用シーンを紹介します。
スタートアップ・新規事業
限られた予算とリソースの中でMVP（最小限の実用的プロダクト）を素早く形にする必要があるスタートアップにとって、Stitchは強力な味方になってくれると思います。
プロンプト1つでアプリ全体のUI案をすぐに生成できるので、ピッチ資料用のモックアップやユーザーテスト用のプロトタイプをデザイナーを雇わずに短期間で準備できます。
生成AIを用いたサービス開発は下記で開発
SaaS・プロダクト開発
Stitchは、既存プロダクトの新機能開発において、UIの方向性を検討する初期段階で活躍してくれます。
エンジニアやプロダクトマネージャーが自然言語でUIのイメージを入力し、デザインチームとの認識合わせに使うことで、コミュニケーションコストを大幅に削減できるかと思います。
生成AI搭載のSaaSは下記で解説
教育・研究
UIデザインの教育現場では、学生がデザインの基本原則を学ぶ際の補助ツールとして活用できます。
プロンプトによるデザイン生成を通じて、レイアウト・配色・タイポグラフィの基礎を体験的に理解できるようになります。研究者にとっては、ユーザー実験用のプロトタイプを迅速に作成する手段として有用です。
なお、教育業界における生成AI活用について、詳しく知りたい方は以下の記事も参考にしてみてください。
【課題別】Stitchが解決できること
Stitchがどんな課題を抱えている方に向いているのか、課題別に整理します。
デザイナー不在でもUIの方向性を固める
開発チームにデザイン専門のメンバーがいない場合、UI設計の初期段階で方向性が定まらず、開発が停滞することがあると思います。
そこで、Stitchを使えば、プロダクトマネージャーやエンジニアが自分の言葉でUIの完成イメージを形にできるので、外部デザイナーへの発注前にチーム内での合意形成を進められます。
プロトタイプ作成時間の短縮
ユーザーテストや社内レビューのためのプロトタイプ作成に数日〜数週間かかっていた工程を、Stitchなら数分〜数十分に短縮できます。
複数画面のフローを一度に生成し、クリック可能なプロトタイプとして書き出すことも可能です。
デザインと実装の間のギャップ解消
デザインカンプからコードへの変換時に、意図しないズレが生じることはよくある問題だと思います。
Stitchは、デザインとHTML/CSS/Reactコードを同時に出力するため、デザインと実装の乖離を最小限に抑えられます。DESIGN.mdを使ってデザインルールを共有すれば、ツール間の一貫性もさらに向上します。
Stitchを使ってみた
それでは、実際にStitchを使って、「SaaS向けダッシュボードUI」を生成する検証を行いました。
今回入力したプロンプトは以下のとおりです。
Create a SaaS analytics dashboard with a sidebar navigation, top header with
user avatar and notifications. The main content area should display:
- Monthly revenue chart (line graph)
- Active users count (big number card)
- Conversion rate (progress ring)
- Recent transactions table with 5 rows
Use a clean, modern design with a white background and blue accent color.実行したところ、約1分ほどでダッシュボードの全画面が出力されました。サイドバーナビゲーションボタン、ヘッダー、カード型のKPIウィジェット、折れ線グラフエリア、テーブルなど、プロンプトで指定した要素がすべて含まれた状態になっています。
特に印象的だったのは、明示的に指定していないにもかかわらず、レスポンシブ対応のレイアウト構造が維持されていた点です。モバイルプレビューに切り替えても、各カードが自然にスタックされた状態で表示されました。
続いて「ダークモードに変えて。アクセントカラーは紫にして」と追加プロンプトを入力すると、10秒ほどでカラースキームが変更されました。一貫性のあるダークテーマが適用され、テキストのコントラストも適切に調整されています。
率直な感想として、プロンプト1つでここまで完成度の高いUIがすぐに生成されるのは驚きでした。
もちろん、実務で使うにはデザインの細部を手動で調整する必要はありそうですが、初期のデザイン検討やMVPのプロトタイピングにおいては大幅な時間短縮が見込めます。
よくある質問
最後に、Stitchについてよくある質問とその回答をご紹介します。
Stitchでバイブデザインを体験してみよう！
Google Stitchは、今回のアップデートで「Vibe Design」という新しいデザイン体験を提示し、AI搭載UIデザインツールとして大きく進化しました。無限キャンバス、デザインエージェント、Voice Live Mode、Reactアプリ書き出し、DESIGN.md、MCP Serverなど、プロフェッショナルの実務にも耐えうる機能が無料で提供されている点はありがたいですね。
デザイナーの仕事を奪うツールというよりは、アイデアを形にするまでのスピードを劇的に加速させるツールとして捉えるのが適切でしょう。
2026年3月19日時点では、Google Labsの実験的プロジェクトのため、機能や制限が変わる可能性はありますが、すでに実用的なレベルに達しているので、UIデザインに関わるすべての方は、ぜひ一度試してみてください。
最後に
いかがだったでしょうか？
弊社では、AI導入を検討中の企業向けに、業務効率化や新しい価値創出を支援する情報提供・導入支援を行っています。最新のAIを活用し、効率的な業務改善や高度な分析が可能です。
株式会社WEELは、自社・業務特化の効果が出るAIプロダクト開発が強みです！
開発実績として、
・新規事業室での「リサーチ」「分析」「事業計画検討」を70％自動化するAIエージェント
・社内お問い合わせの1次回答を自動化するRAG型のチャットボット
・過去事例や最新情報を加味して、10秒で記事のたたき台を作成できるAIプロダクト
・お客様からのメール対応の工数を80％削減したAIメール
・サーバーやAI PCを活用したオンプレでの生成AI活用
・生徒の感情や学習状況を踏まえ、勉強をアシストするAIアシスタント
などの開発実績がございます。
生成AIを活用したプロダクト開発の支援内容は、以下のページでも詳しくご覧いただけます。
︎株式会社WEELのサービスを詳しく見る。
まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。
「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。
セミナー内容や料金については、ご相談ください。
また、大規模言語モデル（LLM）を対象に、言語理解能力、生成能力、応答速度の各側面について比較・検証した資料も配布しております。この機会にぜひご活用ください。
