※この記事の情報は2026年3月21日時点のものです
2026年3月18日、Googleが「Stitch」を発表しました。テキストや音声でUIデザインを生成できるツールで、Figmaのようなデザインツールの経験がなくても、画面設計からプロトタイプ作成、さらにReactコードのエクスポートまでを一気通貫で行えます。
発表翌日にFigmaの株価が12%下落したことからも、業界へのインパクトの大きさがうかがえます。この記事では、Stitchの新機能・料金・Figmaとの違いを整理し、「誰が使うべきか」まで踏み込んで解説します。
Vibe Designとは何か──「話すだけでUIができる」時代
「Vibe Design（バイブデザイン）」は、AIにデザインの意図を伝えるだけでUIを生成する手法のことです。2025年にAndrej Karpathy氏が提唱した「Vibe Coding」（AIにコードを書かせる開発手法）のデザイン版にあたります。
従来のUIデザインでは、FigmaやSketchを使いこなすスキルが前提でした。グリッドを引き、コンポーネントを配置し、カラーパレットを調整し、レスポンシブ対応を考える。この一連の作業に数時間から数日かかるのが普通です。
Vibe Designでは、これが「5画面のダッシュボードを作って。サイドバーにナビゲーション、メインエリアにグラフを3つ配置して」というテキスト指示や、音声での会話に置き換わります。AIがレイアウト・配色・タイポグラフィを自動で判断し、数秒でデザインを出力するわけです。
そしてこのVibe Designを実現するツールの本命として登場したのが、Google Stitchです。
Google Stitchの5大新機能（2026年3月18日アップデート）
Google Labsの公式ブログで、プロダクトマネージャーのRustin Banks氏が5つの新機能を発表しました。順番に見ていきます。
1. AI-Native 無限キャンバス
Stitchの作業スペースは「無限キャンバス」と呼ばれるフリーフォーム空間です。テキストの指示、参考画像、既存のコードスニペットをキャンバス上に自由に配置でき、それらをAIが文脈として読み取ります。
たとえば「このワイヤーフレーム画像を元に、青を基調としたダッシュボードを作って」と書いて画像を貼り付けると、その画像のレイアウトを踏襲したデザインが生成されます。テキストだけ、画像だけ、あるいは両方を組み合わせた入力が可能です。
2. デザインエージェント──5画面同時生成
Stitchのデザインエージェントは、プロジェクト全体のコンテキストを保持した状態で動きます。具体的には、1回の指示で最大5画面を同時に生成できます。
これが何を意味するかというと、「ログイン画面、ダッシュボード、設定画面、プロフィール画面、通知一覧の5画面をまとめて作って」という指示が通るということです。しかも、5画面の間でデザインの一貫性（配色、フォント、ボタンスタイルなど）が自動的に保たれます。
従来のデザインツールでは、画面ごとにスタイルガイドを参照しながら手動で整合性を取る必要がありました。この作業がまるごとなくなるのは、実務上かなり大きい変化です。
3. 音声コントロール（Gemini Live）
Stitchは、Googleの音声AIモデル「Gemini Live」を搭載しています。キャンバスに向かって話しかけるだけで、デザインのリアルタイム修正が可能です。
「ヘッダーの色をもう少し暗くして」「このボタンを右寄せにして」といった修正指示を、テキスト入力なしで口頭でやり取りできます。手が塞がっている状況や、チームでの画面共有中にも使いやすい機能です。
4. インタラクティブプロトタイプ──ワンクリック変換
生成されたデザインは、ボタン1つでクリッカブルなプロトタイプに変換できます。画面遷移やボタンの動作を実際に操作して確認できるため、クライアントへのデモやユーザーテストにそのまま使えます。
さらに、このプロトタイプはReactアプリケーションとしてエクスポート可能です。デザイン→プロトタイプ→実装コードという流れが、1つのツール内で完結します。
5. DESIGN.md──デザインルールの自動抽出
個人的に最も実用的だと感じたのがこの機能です。DESIGN.mdは、既存のWebサイトURLを入力すると、そのサイトのデザインルール（カラーパレット、フォント、余白のルールなど）を自動で抽出し、マークダウンファイルとして保存する機能です。
一度抽出したDESIGN.mdは、別のプロジェクトにも持ち運べます。つまり「自社サイトのデザインルールを抽出して、新しいランディングページに適用する」といった使い方ができます。ブランドの一貫性を保ちたい企業にとって、地味ですがかなり重要な機能です。
料金・利用条件──現時点では完全無料
Stitchは、stitch.withgoogle.comからすぐに使い始められます。Googleアカウントがあればログイン可能で、クレジットカードの登録は不要です。
利用にはStandardモードとExperimentalモードの2種類があり、それぞれ月間の利用上限が異なります。
| 項目 | Standardモード | Experimentalモード |
|---|---|---|
| 使用モデル | Gemini 2.5 Flash | Gemini 2.5 Pro |
| 月間利用回数 | 350回 | 50回 |
| 画像入力 | 非対応 | 対応 |
| 精度 | 標準 | 高精度 |
| 料金 | 無料 | 無料 |
Standardモードは月350回、Experimentalモードは月50回まで。Standardモードは応答速度が速く、日常的な作業向き。Experimentalモードは参考画像をアップロードしてデザインを生成できるため、「既存デザインをベースに新しい画面を作りたい」場合に向いています。
現時点では両モードとも無料で、有料プランに関する公式発表はありません。Google Labsのプロジェクトとして提供されているため、今後の正式リリース時に料金体系が変わる可能性はあります。
Vibe CodingとVibe Designの違い
似た名前の概念なので、ここで整理しておきます。
| 項目 | Vibe Coding | Vibe Design |
|---|---|---|
| 対象 | ソースコード | UIデザイン |
| 代表ツール | Cursor、Claude Code | Google Stitch |
| 入力 | テキスト指示 | テキスト / 画像 / 音声 |
| 出力 | 動作するコード | デザイン / プロトタイプ / コード |
| 主な対象者 | エンジニア | デザイナー / PM / 非デザイナー |
Vibe Codingは「AIにコードを書かせる」、Vibe Designは「AIにデザインを作らせる」。どちらも「意図を伝えてAIに実行させる」という点では同じですが、扱う対象が異なります。
重要なのは、この2つがつながり始めていることです。StitchはMCP（Model Context Protocol）とSDKに対応しており、Claude CodeやCursor、Gemini CLIといったVibe Codingツールと直接接続できます。つまり「Stitchでデザインを作り、MCPを通じてClaude Codeに渡してコードを生成する」というフルスタックのパイプラインが、すでに技術的に可能になっています。
デザインとコーディングの境界がツール間連携で溶けていく、というのが2026年の大きなトレンドになりそうです。
Figmaとの比較・棲み分け
Stitchの発表後、「Figmaは終わるのか？」という議論がSNS上で盛り上がりました。結論から言うと、現時点では「用途が違う」というのが正確です。
| 項目 | Google Stitch | Figma |
|---|---|---|
| 価格（20人チーム/年） | 無料 | 約$13,200 |
| AI生成 | 対応（コア機能） | 一部対応（AI機能追加中） |
| 手動デザイン編集 | 限定的 | 高機能 |
| プロトタイプ | ワンクリック変換 | 手動設定 |
| コードエクスポート | React | CSS / 各種プラグイン |
| デザインシステム管理 | DESIGN.md | コンポーネント / バリアブル |
| チーム向け機能 | 基本的 | 充実（Dev Mode等） |
| 音声操作 | 対応 | 非対応 |
Stitchは「ゼロからすばやくデザインを立ち上げる」ことに特化しています。アイデア段階のラフなイメージをAIに投げて、数秒でプロトタイプまで持っていける。この「初速の速さ」がStitchの最大の強みです。
一方、Figmaは「ピクセル単位の精密なデザイン」「大規模チームでのデザインシステム運用」「Dev Modeによるデザインとエンジニアの連携」など、プロフェッショナルなワークフローに強みがあります。
実際、StitchにはFigmaへの公式エクスポートプラグインが用意されています。つまりGoogle自身も「Stitchで素早く作って、Figmaで仕上げる」という使い分けを想定していると考えられます。
Figmaの株価が12%下落したのは事実ですが、これは「Figmaが不要になる」というよりも、「デザインツール市場にGoogleが本格参入した」ことへの市場の反応と見るのが妥当でしょう。
こんな人におすすめ
Stitchが向いている人
- 非デザイナー（PM・エンジニア・経営者）：デザインツールの学習コストをかけずに、アイデアをすぐ形にしたい人。テキスト指示だけで5画面同時に生成できるのは、プロトタイプ検証のスピードを大幅に上げてくれます。
- 個人開発者・スタートアップ：デザイナーを雇う予算がないチーム。無料でプロトタイプからReactコードまで出力できるのは、初期段階のプロダクト開発に直接効きます。
- Vibe Codingツールのユーザー：Claude CodeやCursorを使っている人。MCP連携でデザイン→コードのパイプラインが組めるため、開発ワークフロー全体が効率化されます。
Figmaのほうが向いている人
- プロのデザイナー：ピクセル単位の調整、複雑なアニメーション、大規模なデザインシステムの構築が必要な場合。
- 大規模チーム：Dev Modeや権限管理など、チーム向けの機能が充実しているFigmaのほうが運用しやすい場合が多いです。
まとめ
Google Stitchは、「デザインスキルがなくてもUIを作れる」という約束を、かなり現実的な形で実現したツールです。無限キャンバス、5画面同時生成、音声コントロール、ワンクリックプロトタイプ、DESIGN.mdによるデザインルール管理。この5つの機能が無料で使えるのは、率直に言ってインパクトがあります。
特にVibe Codingツールとの連携（MCP/SDK対応）は、デザインからコーディングまでの一気通貫ワークフローを現実のものにしています。「デザインはStitchで、コードはClaude Codeで」という組み合わせが2026年の標準になるかもしれません。
Google Labsのプロジェクトとして公開されている段階なので、今後の機能追加や料金体系の変更には注意が必要です。ただ、現時点では「とりあえず触ってみる」コストがゼロなので、気になった方は公式サイトで試してみてください。
あわせて読みたい
コメント