「Figmaはもう不要になるのでは」と言われるほど、Google Stitchの進化は速いです。Galileo AIから始まり、Geminiを核にしたデザインキャンバスへと変わったStitchは、ひとことの指示から一見そのまま使えそうなUIを数分で生成できます。ただし、結論は少し落ち着いて見たほうがいいでしょう。Stitchが作るのは出荷用の完成画面ではなく、コーディングエージェントに引き渡すための優秀な初稿です。
Google Stitchでできること
- できること：アプリの内容を文章で伝えるか、スクリーンショットやワイヤーフレームを渡すと、編集可能なUIを生成します。ビジュアルキャンバスに加え、HTML/CSSとして書き出せます。
- 料金：Googleアカウントがあれば、stitch.withgoogle.comで無料で使えます。インストールも不要です。
- 注意点：最終的なデザインツールとしてではなく、コード化へ引き渡す用途に最適化されています。
採用モデルの更新もかなり速いです。2026年7月時点で、モデル選択画面には4つのモードがあります。
- 3 Flash（デフォルト）— Gemini 3 Flash。初稿を素早く作るためのモードで、「export to coding agents」向けに設計されています。
- Thinking with 3.1 Pro — Gemini 3.1 Pro。複数画面にまたがるフローでも一貫性を保ちたい場合に向いています。
- Redesign — Nano Banana Pro。スクリーンショットをもとに既存画面を作り直します。
- Ideate — 方向性を決める前に、複数のアイデアを探るためのモードです。
2026年アップデートで変わったこと
2026年3月18日の「vibe design」アップデートにより、Stitchは単なる画面生成ツールから、プロジェクト全体を扱えるエージェントへ近づきました。
- 無限キャンバス — 生成した案を横並びで配置できます。画像、テキスト、コードもコンテキストとして追加可能です。
- デザインエージェント — プロジェクト全体を踏まえて考えるエージェントに加え、並行するアイデアを管理する仕組みが用意されました。
- DESIGN.md — 色、タイポグラフィ、レイアウトなどのデザインシステムを保持するMarkdownファイルです。ツール間で持ち運べます。
- インタラクティブなプロトタイピング — 画面同士をつなぎ、Playを押してクリック操作を試せます。
- 音声操作 — キャンバスに話しかけると、その場で編集が反映されます。
MCPサーバー、SDK、AI StudioおよびAntigravityへのエクスポートも追加されました。重要なのはこのエクスポート層です。Stitchだけで作業が終わるのではなく、開発パイプラインへ組み込めるようになります。
Google Stitchは本当に無料？
はい。有料プランはありません。ただし、利用上限については情報がはっきりしておらず、Googleも詳細を公表していません。
| 項目 | 状況 |
|---|---|
| 無料、有料プランなし、Googleアカウントのみで利用可能 | 公式サイトで確認済み |
| 月間・日次の正確な上限 | 未公表。第三者の報告は食い違う（350+200、350+50、約400/日） |
| クレジットは周期ごとにリセットされ、追加購入できない | 報告はあるが、公式文書には記載なし |
実用上は、アプリ内のカウンターを確認するのが確実です。上限がある前提で使い、ブログで見かけた枠数を締め切り計画の根拠にはしないほうがいいでしょう。単純なプロンプトの消費は少ない一方、複数画面のフローはすぐに枠を使います。
複数画面でデザインを揃えにくい問題
Stitchで最もよく指摘される弱点が、複数画面の整合性です。この点は改善されてきたものの、経緯を知っておく価値があります。
- リリース当初：r/UXDesignのユーザーは、バリエーション作成には便利だとしつつ、「多くの画面を持つフロー作成は苦手」と評価しました。テスターからは「洗練されたモックアップというより色付きワイヤーフレーム」との声や、エクスポートしたフォームの送信ボタンが動かないという報告もありました。
- 2026年4月9日：公式アカウントは改善点を公表しました。エージェントが既存のデザインシステムを尊重するようになり、DESIGN.mdの編集は同期され、レイアウトの重なりも減っています。
- なお残る課題：4月下旬、ある開発者はUIから本番環境への引き渡しについて「依然として興味深い未解決問題であり、Stitch 2.0は改善したが完全には解決していない」と要約しています。
エクスポート後の実践フロー
2026年の現実的な使い方は、「Stitchでデザインして、そのままStitchから出荷する」ことではありません。バトンをつなぐ流れになります。
1. StitchでUIとDESIGN.mdを生成する。2. エクスポートまたはMCP経由でコードをコーディングエージェントへ渡す。たとえばClaude Code、Codex、Cursorです。3. エージェントが実行できるReactアプリへ仕上げる。ある開発者は、MCPを通じてStitchからClaude Codeへ流す方法を「『AI slop』を完全になくすパイプライン」と表現しました。
書き出したコードを信用する前に、Stitchが省略しがちな部分を確認してください。レスポンシブ対応、機能するフォーム、ローディング・エラー状態、ルーティング、そしてコンポーネントが再利用されているか、重複していないかがチェックポイントです。
コスト面でひとつ注意があります。コーディングエージェントはStitchの無料キャンバスとは別に、LLM APIを利用します。この工程にはGemini or Claudeのようなモデルが必要で、Stitch自体は無料でも、利用量に応じてコストが積み上がるのはエージェント側です。
Stitch・v0・Figma Makeの違い
| ツール | アプローチ | 得意な出力 | 料金 |
|---|---|---|---|
| Google Stitch | デザイン優先：プロンプト → UI + コード | 複数画面のコンセプトを素早く作る | 無料 |
| v0 by Vercel | コンポーネント優先：プロンプト → React | そのまま組み込めるshadcn/uiコンポーネント | 月額約$20から |
| Figma Make | キャンバス内完結：Figma内のAI | ファイルを離れずに編集 | Figmaプラン |
これらは競合というより補完関係にあります。Stitchで方向性を探り、v0でコンポーネントを生成し、CursorまたはClaude Codeで組み上げる、という使い分けができます。
Google Stitchを使うべき人
- 使う価値がある人：コンセプトをすぐ形にしたい創業者、PM、開発者。Figmaを学ばずに説得力のあるUIを作りたい非デザイナー。Googleのスタックをすでに使っているチーム。
- 最終仕上げ用としては避けるべき人：統制されたコンポーネントライブラリが必要なエンタープライズチーム、ピクセル単位の操作性と本番投入可能な成果物を求めるデザイナー。
結論：アイデアを、デザイン済みでコードの土台もあるUIへ数分で変えるという点で、Google Stitchは2026年でも有力な無料ツールのひとつです。ただし、最後の仕上げはコーディングエージェントに任せる前提で考えるべきです。
FAQ
Google Stitchは無料ですか？
はい。有料プランはなく、必要なのはGoogleアカウントだけです。利用量には未公表の上限があるため、アプリ内カウンターを確認してください。
Google StitchはどのAIモデルを使っていますか？
2026年7月時点では、Gemini 3 Flash（デフォルト）、Gemini 3.1 Pro（Thinkingモード）、Nano Banana Pro（Redesign）です。以前のGemini 2.5構成から置き換えられています。
Google Stitchは動作するコードを生成できますか？
フロントエンドのHTML/CSSを生成しますが、あくまで出発点です。動かないボタンやロジックの欠落も報告されているため、出荷前にコーディングツールで調整する必要があります。
既存のデザインシステムを維持できますか？
2026年4月以降、エージェントは定義済みのデザインシステムを尊重しようとし、DESIGN.mdを通じてルールを入出力できます。リリース当初より改善していますが、画面をまたいだ確認は依然として必要です。
Google StitchはFigmaより優れていますか？
コンセプト作成までの速さではStitchが有利です。一方で、コラボレーション、デザインシステム、本番品質の制御では依然としてFigmaに強みがあります。多くの人はStitchで始め、別のツールで仕上げることになるでしょう。