Google Stitchとは？
使い方・料金・Figma連携
完全解説
テキスト一行でUIデザインとHTML/CSSコードを同時生成——Googleが2025年5月に発表したAIネイティブUIデザインツール。2026年3月の大型アップデートでFigmaの株価が8%急落するほどの衝撃を与えた。Galileo AI買収の経緯・Stitch 2.0の新機能・正確な料金制度・コード出力の実態・Figmaとの使い分けまで、競合記事を全部読んで書いた完全版。
1. Google Stitchとは——Galileo AI買収から始まった経緯
Google Stitch（グーグル・スティッチ）は、Google Labsが提供するAIネイティブUIデザインツールだ。テキストや画像からWebやアプリのUIデザインとHTML/CSSコードを自動生成する。2025年5月のGoogle I/Oで発表され、同年ベータ版として公開された。
Google Stitchの実態は、Googleが2025年半ばに買収したAIデザインスタートアップ「Galileo AI」の技術をGoogleブランドで再始動したものだ。Galileo AIはテキストからUIを生成するAIとして先行していた。Googleはその技術を取り込み、Geminiの言語モデルと組み合わせてStitchとして展開した。
そして2026年3月18日、大型アップデート「Stitch 2.0」（Vibe Designアップデート）が発表された翌日、Figmaの株価（NYSE: FIG）が約8%急落した。市場が「完全無料のGoogleのAIデザインツールがFigmaを脅かす」と判断したのだ。
- 2026年3月 Stitch 2.0の主要新機能4つ（Vibe Design・Voice Canvas・DESIGN.md・MCPサーバー）
- 料金の正確な実態：月次制（Standard 350回+Experimental 200回）→ 日次制（1日400クレジット）に変更済み
- コード出力の実態：HTML+Tailwind CSS出力。「React/Vue/Angular対応」は2026年3月時点では不正確
- 画像入力はExperimentalモードのみ・FigmaエクスポートはStandardモードのみ——両立不可という重要な制約
- DESIGN.mdとは何か——デザインルールをMarkdownで管理してAIエージェントに渡す仕組み
- MCP連携の具体的な手順——Claude Code・Cursor・Gemini CLIからStitchを操作する方法
- 実際の課題：ドラッグ&ドロップ不可・再現性が低い・AI生成画像しか使えない・リアルタイム共同編集非対応
- 「0→1はStitch、1→100はFigma」という業界の定論と、具体的な使い分け判断フロー
2. Figma株を8%急落させた——2026年3月 Stitch 2.0の全新機能
2026年3月18日のアップデートは、StitchをシンプルなUI生成ツールから本格的なデザインプラットフォームへと変貌させた。AIsmileyを含む多くの競合記事がこの重要な変化を十分に記載していない。
Vibe Design——「雰囲気から形に」の新思想
従来の「プロンプト→結果」という一方通行から、AIエージェントが対話しながらデザインを進化させる設計に変わった。「こんな雰囲気にしたい」という抽象的な指示でも、AIが複数の方向性を提案しながら形にする。ビジネス目標を言葉で伝えるだけで複数の画面デザイン案が生成される。
Voice Canvas——音声入力でデザインを操作
テキスト入力に加え、音声でもデザインへの指示が出せるようになった。「ヘッダーをもう少し大きくして」「ボタンの色を青にして」と話しかけるだけでリアルタイムに変更される。手を動かさずにデザインを調整できる。
DESIGN.md——デザインルールをAIに渡す仕組み
ブランドカラー・タイポグラフィ・コンポーネントルールなどのデザインシステムをMarkdownファイルとして定義し、AIエージェントに渡せる機能。Claude CodeやCursorなどのコーディングエージェントがこのルールを参照しながらコード生成できる。「デザインと開発の壁」を壊す革新的な機能。
無限キャンバス——アイデアを自由に配置
従来の「1プロンプト→1画面」という制約から、無限キャンバス上に複数の画面やアイデアを自由に配置・発展させる設計になった。画像・テキスト・URL・コードなどをキャンバスにドロップしてコンテキストとして使える。
3. 主な機能——AIデザイン生成から開発連携まで
| 機能 | 詳細 | Standard | Experimental |
|---|---|---|---|
| テキスト→UIデザイン生成 | 自然言語のプロンプトからUIデザインを自動生成。20秒程度で複数案を提示 | ◯ | ◯ |
| 画像入力（スケッチ・参考画面） | 手描きスケッチや既存UIのスクリーンショットを読み込んでデザイン化 | × | ◯ |
| リアルタイム調整 | チャット形式で「ボタンを青に」など追加指示してその場で変更 | ◯ | ◯ |
| HTML/CSSコード出力 | Tailwind CSSベースのHTMLコードを出力。プロトタイプ・たたき台として使用 | ◯ | ◯ |
| Figmaへのエクスポート | 編集可能なレイヤー構造を保ったままFigmaに直接出力 | ◯ | × |
| DESIGN.md生成 | デザインシステムをMarkdownファイルとして出力・AIエージェントに渡せる | ◯ | ◯ |
| MCP連携（SDK） | Claude Code・Cursor・Gemini CLIなどから直接Stitchを操作 | ◯ | ◯ |
| Voice Canvas（音声入力） | 音声でデザインへの指示・修正が可能 | ◯ | ◯ |
| マルチスクリーンプロトタイプ | 複数画面を一括生成し、画面遷移まで設計 | ◯ | ◯ |
| リアルタイム共同編集 | 複数メンバーによる同時編集 | × | ×（非対応） |
4. 使い方——ログインから生成・エクスポートの全手順
始め方（事前準備）
-
1公式サイトにアクセスしてGoogleアカウントでログイン
stitch.withgoogle.com にアクセス。Googleアカウントでログインするだけで即使える。インストール不要でブラウザ上で完結。日本語インターフェース対応で英語が苦手でも問題ない。
-
2【重要】AIモデルのトレーニング設定をオフにする
右上プロフィールアイコン→「Stitchの設定」→「AIモデルのトレーニングを許可する」のチェックを外す。デフォルトでON（許可状態）のため、業務情報を使う場合は必ずオフにする。設定画面で使用量の確認も可能。
-
3モードを選択する（目的によって使い分け）
「Standard Mode（標準）」：テキストプロンプト中心。Figmaエクスポート可。「Experimental Mode（試験運用）」：画像入力可能。Figmaエクスポート不可。目的に応じてどちらかを選択。
-
4プロンプトを入力してUIを生成する
テキスト入力欄に希望するUIの内容を記述。日本語での入力も可能。「ログイン画面を作って」のようなシンプルな指示でも、「日本企業向けの営業管理ダッシュボード。KPIカード・売上グラフ・活動履歴テーブルを含む」のような詳細な指示でも動作する。初めての方はシンプルなコンポーネントから試すのがおすすめ。
-
5生成後にチャットで追加調整する
生成されたデザインに対して「ボタンの色をもう少し明るくして」「ヘッダーを削除して」など自然言語で追加指示。生成ごとにクレジットが消費されるため、大きな変更は一度にまとめて指示するとクレジット効率が上がる。
-
6コードまたはFigmaにエクスポートする
ツールバーの「View Code」からHTML/CSSを確認・コピー、またはダウンロード。Standardモードでは「Export to Figma」ボタンでFigmaに直接転送も可能。
5. 2つのモードの違いと使い分け——重要な制約あり
→ Figmaエクスポートしたい場合はこちら
- テキストプロンプトによるUI生成
- Figmaへの直接エクスポート対応
- 高速な編集・調整
- リアルタイム変更が反映しやすい
→ 画像を使いたい場合はこちら
- 画像入力対応（スケッチ・参考画面・ワイヤーフレーム）
- 手描きのラフからデザイン化が可能
- Gemini 2.5 Proまたは2.5 Flashを選択可能
- 新機能のテスト・実験的デザイン探索向け
6. 料金——2026年4月時点の正確なクレジット制度
Google Stitchは2026年4月時点で完全無料。有料プランは存在せず、クレジットカード登録も不要。ただしクレジット制の利用制限がある。
| 時期 | 制限の仕組み | 内訳 |
|---|---|---|
| リリース初期（2025年） | 月次クレジット制 | Standard：月350回 ＋ Experimental：月200回（合計550回/月） |
| 2026年4月時点（現在） | 日次クレジット制（変更済み） | 1日400デザインクレジット ＋ 1日15リデザインクレジット（月換算で約12,450クレジット相当） |
| 作業内容 | 消費クレジット目安 |
|---|---|
| シンプルな単一画面の生成 | 約3クレジット |
| 複雑な複数画面アプリの生成 | 約6〜9クレジット |
| 追加調整・再生成（リデザイン） | リデザインクレジットを使用（1日15回まで） |
7. コード出力の実態——「React対応」は誤解を招く表現
Google Stitchのコード出力について、競合記事（AIsmileyを含む）の多くが「React・Vue・Angularに対応」と記載しているが、2026年3月時点ではこの表現は不正確だ。
| 項目 | 実態 |
|---|---|
| 出力形式 | HTML + Tailwind CSS が基本。シンプルなレイアウトでは高品質 |
| React/Vue/Angularへの対応 | 2026年3月時点では未対応。今後のロードマップには含まれているが現状は静的HTMLのみ |
| コードの品質 | カンプの見た目を短時間で再現する用途では十分。プロトタイプ・たたき台として実用的 |
| 本番利用できるか | そのままでは不可。静的モックアップに近い構成 |
| コンポーネント化 | KPIカードや繰り返し要素が個別に記述されており、再利用可能な形にはなっていない |
| データ連携 | 数値・一覧データはダミー値が埋め込まれており、API・DBとの接続は別途実装が必要 |
| 依存関係 | Tailwind CSS・Chart.jsなどをCDN経由で読み込む構成。保守性は低い |
本番利用に向けて必要な追加作業
| 必要な作業 | 内容 |
|---|---|
| フレームワークへの組み込み | 出力はHTML静的ベース。React/Vueに移行するにはコンポーネント構造への整理が必要 |
| コンポーネント化 | 似たUIが個別記述されているため、再利用可能なコンポーネントへの分割が必要 |
| データ接続 | ダミー値をAPIやデータベースからの実データに差し替える実装が必要 |
| インタラクション実装 | 検索・フィルター・サイドバー操作などの動作は別途実装が必要 |
| ビルド環境の整理 | CDN経由の依存をパッケージ管理に移行し、本番ビルド環境に合わせる |
8. Figma連携の詳細——手順・品質・使い分け判断フロー
Figmaへのエクスポート手順（Standardモードのみ）
-
1Standardモードでデザインを生成する
FigmaエクスポートはStandardモードのみ対応。Experimentalモードでは不可。
-
2「Export to Figma」ボタンをクリック
生成されたデザインのツールバーに表示される「Export to Figma」ボタンをクリック。FigmaのURLまたはファイルIDを入力して転送先を指定する。
-
3Figmaで確認・編集する
Figmaに取り込まれたデザインは単なる画像ではなく、編集可能なレイヤー構造を保っている（Auto Layout維持・Ctrl+Vで貼り付けるだけ）。テキストの差し替え・余白の調整・不要な要素の削除などをFigma上で行いやすい。日本語UIでも高い精度で再現される。
StitchとFigmaの役割分担——「0→1はStitch、1→100はFigma」
| フェーズ | 推奨ツール | 理由 |
|---|---|---|
| アイデア出し・ブレインストーミング（0→1） | Stitch | Figmaのファイルをセットアップする時間で10のコンセプトを生成できる。無料・速い・試行錯誤しやすい |
| 初期プロトタイプ・クライアント提案用モック | Stitch→Figma | StitchでUI案を生成→Figmaにエクスポートしてブラッシュアップしてクライアントに提示 |
| ブランド一貫性のある本番デザイン（1→100） | Figma | デザインシステム管理・コンポーネントライブラリ・バージョン管理・チームコラボはFigmaが依然として最強 |
| コード実装への引き渡し | Stitch→Claude Code/Cursor | StitchのHTMLたたき台をClaude CodeやCursorに渡して実装を進める。DESIGN.mdを活用するとさらに精度が上がる |
9. MCP連携——Claude Code・Cursor・Gemini CLIと繋げる
2026年3月のStitch 2.0アップデートでMCPサーバーとSDKが追加された。これにより、AIコーディングツールからStitchのデザイン情報に直接アクセスできるようになった。
- Claude Code からStitchを操作：「Stitchのデザインに合わせてReactコンポーネントを実装して」という指示が通る
- DESIGN.md の共有：Stitchが生成したデザインルール（カラー・フォント・余白等）をMarkdownでClaude Code/Cursorに渡せる
- Figma MCP との組み合わせ：FigmaのURLからコンポーネント構造・カラー・フォントを取得→Stitch用プロンプトに変換→精度の高いデザイン生成というフローが可能
- デザイン→実装の全自動パイプライン：Stitch（デザイン生成）→DESIGN.md（ルール共有）→Claude Code（実装）という一気通貫フローが現実になりつつある
具体的な設定方法：StitchのSDKページからAPIキーを発行し、Claude CodeやCursorの設定ファイル（mcp_config.json等）に登録するだけで連携できる。
10. メリット・デメリット——正直な評価
- 完全無料・クレジットカード不要
- 20秒程度でUIデザイン案を複数生成
- 日本語プロンプト対応
- Figmaに編集可能なレイヤー構造で出力
- デザイントークンを自動認識してブランドカラーを適用
- MCP連携でClaude Code/Cursorから操作可能
- DESIGN.mdで開発チームへのハンドオフが効率化
- 非デザイナー・エンジニア・PO/PMでも使いやすい
- ドラッグ&ドロップによる直感的な編集不可
- 編集のたびに意図しない要素が変わる（再現性が低い）
- 実写写真が使えない（AIイラスト調の画像のみ）
- リアルタイム共同編集に非対応（シングルユーザー専用）
- クレジット消費量の予測が難しい
- 「この要素だけ変更」のピンポイント編集が難しい
- APIが不安定な場合がある（ベータ版のため）
- 本番コード出力ではなくたたき台止まり
11. v0・Lovable・Figma AIとの比較
本記事対象
- デザイン特化（UI生成）
- 完全無料
- Figmaエクスポート対応
- MCP/DESIGN.md対応
- バックエンドなし
コード出力特化
- React/Next.jsコードを出力
- 実装指向・コンポーネント化済み
- 無料枠あり（制限多め）
- Figmaエクスポートなし
- 開発者向け
フルスタック生成
- フロント+バックエンド生成
- Supabase連携でデプロイまで
- 有料（月$20〜）
- コードの完成度が高い
- デザイン品質はStitchより低め
チームコラボ特化
- Figma内でAI支援
- チームリアルタイム編集
- 有料（Figmaプラン込み）
- デザインシステム管理が強い
- 本番デザイン品質向け
| あなたの目的 | 推奨 | 理由 |
|---|---|---|
| アイデアを素早く形にしてFigmaに渡したい | Google Stitch | 無料・速い・Figmaエクスポートがそのまま使える。非デザイナーでも使いやすい |
| 実装可能なReactコンポーネントを生成したい | v0 | コンポーネント化済みのReactコードを出力。開発者向けに最適化されている |
| バックエンドも含めてアプリ全体を作りたい | Lovable | フロント+バックエンド+デプロイまで一気通貫。MVPを素早く作りたいスタートアップ向け |
| チームで本番デザインシステムを管理したい | Figma AI | コラボ・バージョン管理・デザインシステム管理はFigmaが依然として最強 |
