Google Stitch は、Google Labs が 2025 年 5 月の Google I/O で発表し、2026 年 3 月のリニューアルで Gemini 3 を搭載した AI UI デザインツールだ。自然言語プロンプトや手書きスケッチ画像を投げるだけで、モバイル・Web 両対応の UI デザインとフロントエンドコードを数分で生成してくれる。しかも Figma に直接エクスポートでき、月 550 回まで完全無料で使える。
本記事では Google Stitch の機能・使い方・料金・Figma 連携・競合ツールとの違いを、実際に触った感触を交えながら解説する。結論から言うと、「プロダクト初期のプロトタイピング」と「ノンデザイナーが UI を立ち上げる用途」では現時点で最強クラスの選択肢だ。
- Google Stitch とは？ ― Google の AI ネイティブ UI デザインプラットフォーム
- 2026 年 3 月大型アップデートの 4 つの目玉
- Google Stitch の料金 ― 月 550 回まで完全無料
- Google Stitch の使い方 ― 5 ステップでプロトタイプ完成
- Figma エクスポート ― Auto Layout 保持で即編集可能
- Google Stitch の実力検証 ― 3 つのケースで試してみた
- Google Stitch は Figma を殺すのか？ ― 競合比較
- Google Stitch が向いている人・向いていない人
- Google Stitch の制限事項 ― 使う前に知っておくべきこと
- まとめ ― Google Stitch は「AI UI 生成」の現時点でのベストプラクティス
- 関連する AI ツール・ワークフロー記事
- Turn this idea into a working AI workflow.
Google Stitch とは？ ― Google の AI ネイティブ UI デザインプラットフォーム
Google Stitch は、テキスト・画像・音声のマルチモーダル入力から UI デザイン + フロントエンドコードを同時生成する Google Labs 発のデザインツールだ。
| 項目 | 内容 |
|---|---|
| 提供元 | Google Labs |
| 初期リリース | 2025 年 5 月（Google I/O 2025） |
| 2026 年 3 月アップデート | Gemini 3 統合、Vibe Design、Voice Canvas、マルチスクリーン生成 |
| 対応モデル | Gemini 3.0 Pro / Flash、Gemini 2.5 Pro / Flash |
| 入力形式 | 自然言語（日英対応）、画像（スケッチ・スクリーンショット）、音声 |
| 出力形式 | HTML/CSS、Tailwind、React、Figma、Firebase Studio |
| 料金 | 完全無料（月 550 回まで） |
| アクセス URL | https://stitch.withgoogle.com/ |
Figma や Adobe XD が「人間がデザインを組むための道具」であるのに対し、**Google Stitch は「AI がデザインを起案し、人間がそれを磨くための道具」**というポジション。デザイナーとエンジニアの往復を大幅に短縮する設計になっている。
2026 年 3 月大型アップデートの 4 つの目玉
2026 年 3 月 19 日のアップデートで Google Stitch は別ツールと言えるくらい進化した。主要な変更点を 4 つ押さえておこう。
① Gemini 3 統合による生成精度の向上
Gemini 3.0 Pro と Gemini 3.0 Flash が選択可能になり、2.5 系と比較して UI の一貫性・日本語理解・コード出力の品質が一段上がった。ボタンのアライメント崩れや色の不整合が目に見えて減り、「微修正なしでそのまま使える」ケースが増えた印象。
② Vibe Design ― 空気感で UI を指定する新パラダイム
「ミニマル」「Z 世代っぽく」「Duolingo のような遊び心」といった抽象的なテイスト指定をプロンプトに入れると、Stitch がその空気感を解釈してデザインに反映してくれる機能。従来のガチガチな仕様書プロンプトと違い、ムードボードを AI に渡す感覚で使える。
③ Voice Canvas ― 喋るだけでデザインが育つ
Voice Canvas を有効にすると、音声で「このボタンもっと大きく」「配色をダークモードに変えて」と話しかけるだけで、AI が即座にキャンバスを更新してくれる。対話しながら設計できるので、手を動かさずに思考だけでプロトタイプが進む。
④ マルチスクリーン生成 ― 5 画面フローを一括生成
アプリの画面遷移を自然言語で記述すると、相互リンクされた最大 5 画面の UI を一度に生成する機能。ログイン → ダッシュボード → 詳細画面 → 設定画面、の一連の流れをワンプロンプトで組める。
Google Stitch の料金 ― 月 550 回まで完全無料
Google Stitch の料金設定は、2026 年 4 月時点で完全無料のまま据え置かれている。
| プラン | 生成回数 | モデル | 価格 |
|---|---|---|---|
| Standard | 月 350 回 | Gemini 3.0 Flash / 2.5 Flash | 無料 |
| Experimental / Pro | 月 200 回 | Gemini 3.0 Pro / 2.5 Pro | 無料 |
| 合計 | 月 550 回 | 両モデル使い分け可 | 無料 |
v0 by Vercel（$20/mo〜）、Figma AI（Professional プラン必須）、UIzard（$12/mo〜）と比較すると、月 550 回を無料で使える Stitch のコスパは群を抜いている。Google が「Labs 実験枠」として提供している間は、使い倒しておいて損はない。
Google Stitch の使い方 ― 5 ステップでプロトタイプ完成
ステップ 1: Google アカウントでログイン
stitch.withgoogle.com にアクセスし、Google アカウントでログインする。現時点では日本リージョンからも利用可能で、VPN などは不要。
ステップ 2: プロンプトで UI を記述
テキスト入力欄に「ミニマルな日本語の家計簿アプリのダッシュボード画面。ダークモード、収入と支出をカード形式で表示」のように記述。日本語プロンプトでも Gemini 3 が正確に意図を汲んでくれる。
ステップ 3: モデルを選択して生成
右上のモデル切替で Gemini 3 Pro / Flash を選択。初稿は Flash で素早く出して、細部を詰める段階で Pro に切り替えるのが効率的な使い方。
ステップ 4: Vibe Design / Voice Canvas で磨き込み
生成された UI を Canvas 上で確認し、「もう少しポップに」「フォントを丸くして」といった指示を追加入力（またはボイスで指示）。差分だけが即座に反映される。
ステップ 5: 出力 ― HTML/CSS / Figma / Firebase Studio
完成したら右上の Export から出力形式を選択:
- HTML/CSS/Tailwind/React: コードパネルから直接コピー
- Figma エクスポート: Auto Layout とレイヤー名が保持された形で貼り付け可能
- Firebase Studio: ワンクリックで本番用プロジェクトへ
Figma エクスポート ― Auto Layout 保持で即編集可能
Google Stitch の Figma エクスポートは、単なるスクリーンショットの貼り付けではない。Auto Layout 構造・レイヤー名・コンポーネント階層が保持された状態で Figma に取り込まれるため、そのままチームデザイナーが継続編集できる。
この「AI で初稿 → Figma で磨き込み」のワークフローは、2026 年のデザイン現場ではすでに主流になりつつある。Figma 内で一から作るのが馬鹿らしくなるレベルで速い。
Google Stitch の実力検証 ― 3 つのケースで試してみた
ケース ① 日本語の家計簿アプリ UI
プロンプト: 「ミニマルな日本語の家計簿アプリ。収入・支出をグラフで表示、カテゴリ別の円グラフ、今月の予算残高カード。ダークモード」
結果: 約 25 秒で 3 画面のダッシュボードが生成された。日本語フォントの選択は Noto Sans JP で自然。グラフの配置も実サービスに近い完成度で、微修正 3 箇所で公開できるレベル。
ケース ② 英語の SaaS ランディングページ
プロンプト: "A minimalist SaaS landing page for an AI-powered invoice automation tool. Hero section, 3-column feature grid, pricing table, CTA"
結果: 約 30 秒で 1 ページの LP が完成。Tailwind で出力されたコードは変数名も綺麗で、そのまま Next.js プロジェクトに貼れた。これは便利。
ケース ③ 手書きスケッチからの UI 起こし
iPad で描いた雑なワイヤーフレーム画像を投げ、「このスケッチを元にモバイル SNS アプリの投稿画面を作って」と指示。
結果: スケッチの構造を忠実に保ちつつ、UI コンポーネントが整理された完成デザインが生成。「スケッチ → UI」の変換は想像以上に実用的で、Figma で同じ作業をやるより 10 倍速い。
Google Stitch は Figma を殺すのか？ ― 競合比較
| ツール | 料金 | 強み | 弱み |
|---|---|---|---|
| Google Stitch | 無料（月 550 回） | AI 初稿の速さ、コード出力、Figma 連携 | コラボ機能なし、バージョン管理なし |
| Figma | $15/mo〜 | コラボ、コメント、プラグイン生態系 | AI 初稿は Stitch に劣る |
| v0 by Vercel | $20/mo〜 | React/Next.js 統合、shadcn/ui 前提 | UI デザインの自由度は Stitch より低い |
| UIzard | $12/mo〜 | ワイヤーフレーム変換 | Gemini 3 ほどの精度なし |
| Adobe XD | 停止（2023 年） | ― | ― |
結論: Stitch は Figma の代替ではなく、Figma の前工程を AI 化するツール。チーム制作・詳細磨き込みは Figma、初稿生成・個人プロトタイプは Stitch、という棲み分けが現実的。
Google Stitch が向いている人・向いていない人
✅ 向いている人
- ソロ開発者・個人でアプリや SaaS を立ち上げたい人
- ノンデザイナーのエンジニアで UI 初稿を短時間で欲しい人
- Figma の Auto Layout まで自分で組むのが面倒な人
- Firebase / Next.js で素早くプロトタイプを作りたい人
- 複数案を比較検討してから磨き込みたい人
❌ 向いていない人
- チーム 5 人以上で同時編集するデザイン現場
- 細かい Figma プラグインや Variant 設計に依存した運用
- バージョン履歴・コメント管理を重視するエージェンシー案件
- ピクセル単位の精密レイアウトが必要な印刷物デザイン
Google Stitch の制限事項 ― 使う前に知っておくべきこと
- リアルタイム共同編集はできない（Figma のような同時カーソル機能は非対応）
- バージョン履歴の外部共有なし（URL でのスナップショット共有は可能）
- コメント・レビュー機能なし（デザインレビューは Figma へ移行する必要あり）
- チームワークスペースなし（個人アカウント単位の運用）
- 月 550 回の生成制限（超過分は月初リセット待ち）
これらは「Google Labs の実験枠だから」という理由で割り切るしかない部分。正式製品化の段階で整う可能性が高いが、現時点ではこの制約を前提に使うことになる。
まとめ ― Google Stitch は「AI UI 生成」の現時点でのベストプラクティス
Google Stitch は、自然言語・スケッチ・音声から UI + コードを生成できる、2026 年時点で最も完成度の高い無料 AI デザインツールだ。特に以下の 3 点が強い:
- 月 550 回の完全無料枠（Gemini 3 Pro 含む、競合の有料枠を凌駕）
- Figma への Auto Layout 付きエクスポート（チームデザイナーへの引継ぎが即可能）
- Vibe Design と Voice Canvas（AI ネイティブ UI が「喋って作る」時代へ）
まずは公式サイトにアクセスして、今作っているアプリの 1 画面を投げ込んでみてほしい。ツールの価値が 3 分で理解できるはずだ。
関連する AI ツール・ワークフロー記事
- $20/Month AI Stack: How I Run a 700K-View Content Business in 2026
- 2026 Guide: Fully Automated AI Agent Workflows for Blog Monetization
- Claude Code vs Cursor in 2026: Which AI Coding Tool Actually Ships Faster?
本記事は筆者が Google Stitch を実際に使用した上で執筆しています。情報は 2026 年 4 月時点のもので、Google Labs の仕様変更により機能・料金が変動する可能性があります。
コメント