Google Stitch（グーグル・スティッチ）は、テキストや画像を入力するだけで、WebサイトやアプリのUIデザインとフロントエンドコードを同時に自動生成してくれるGoogle Labs発のAIツールです。2025年5月のGoogle I/Oでベータ公開されて以来、2026年3月の大型アップデートで「無限キャンバス」「音声でのデザイン指示」「複数画面の同時生成」などが追加され、Figmaの株価が一晩で約8.8%下落するほど業界に衝撃を与えました。デザイン未経験のブロガーや個人開発者でも、チャットで話しかけるだけでプロ品質のUIが手に入ります。
Googleが提供する無料のAI UIデザイン生成ツール。Geminiモデルを搭載し、自然言語・画像・音声からWeb／モバイルのUIデザインを生成。FigmaへのワンクリックペーストやHTML/CSS・Reactコードの書き出しにも対応しています。
Google Stitchとは？2026年3月の大型アップデートで何が変わった？
一言でいうと「文章を打つだけでUIデザインが出てくる」Googleの無料ツールです。
2026年3月のアップデートで、ほぼ別物に進化したんですよ。
それを文章だけで作れちゃうんですか？
さらに2026年版では、無限に広がるキャンバスの上で最大5画面を同時に生成したり、マイクに話しかけるだけでデザインを修正できる「Voice Canvas」も追加されました。
Figmaの株価が下がったって聞いたんですけど、本当ですか？
無料でここまでできるツールが出てきたインパクトの大きさがわかりますよね。
主な機能一覧【2026年最新】
| 機能名 | できること | 対応 |
|---|---|---|
| テキストからUI生成 | 「ECサイトの商品詳細ページ」など自然言語の指示でUIデザインを数秒で生成 | 無料 |
| 画像・ワイヤーフレームから生成 | 手描きスケッチやスクリーンショットをアップロードしてUI化（Experimental Mode） | 無料 |
| AIネイティブキャンバス | 無限に広がるキャンバス上で最大5画面を同時生成・比較・分岐 | 2026年新機能 |
| Voice Canvas（音声デザイン） | マイクに話しかけるだけでリアルタイムにレイアウトを修正 | 2026年新機能 |
| デザインエージェント | プロジェクト全体の文脈を理解し、既存画面と一貫性のあるデザインを提案 | 2026年新機能 |
| Figmaエクスポート | 生成したUIをワンクリックでFigmaにペースト。レイヤー構造も保持 | 無料 |
| コード書き出し | HTML/CSS・React・Tailwindのコードを出力。ZIPダウンロードも可能 | 無料 |
| DESIGN.md／MCP連携 | デザインルールをMarkdownで書き出し、Claude CodeやCursorと連携 | 2026年新機能 |
Google Stitchの使い方（ステップガイド）
難しい設定は不要。Googleアカウントさえあれば、誰でも今すぐ無料で使い始められます。
公式サイトにアクセスし、お持ちのGoogleアカウントでログインします。クレジットカード登録などの手続きは不要です。
テキストのみで生成する「Standard Mode」と、画像・ワイヤーフレームを使う「Experimental Mode」から選びます。Figmaへのエクスポートをしたい場合はStandard Modeを使いましょう。
「カフェのブランディングサイトのトップページ、すっきりとしたUI」のように作りたい画面を具体的に説明します。日本語入力にも対応しています。
数秒〜数分でデザインが生成されます。「CTAボタンをもっと目立たせて」のように追加指示するだけで、その場で修正されます。
「Copy to Figma」ボタンでレイヤー付きのデザインをそのままFigmaに反映。「View Code」からHTML/CSSやReactコードもコピーできます。
日本語プロンプトでも動きますが、英語の方が安定して精度が高い傾向があります。重要なプロジェクトでは「場所・雰囲気・含めたい要素」を英語で具体的に書くと再現度が上がります。
📺 動画で学ぶ
▲ Google Stitchを使ってプロ級Webデザインを作る方法！（🇯🇵 日本語）
▲ GoogleのUI生成AI「Stitch」使ってみた！（🇯🇵 日本語）
Google Stitchのメリット・デメリット
- Googleアカウントだけで完全無料、登録もすぐ完了
- テキスト・画像・音声のどれからでもUI生成できる
- Figmaへのワンクリックペースト＋コード書き出しが両方できる
- デザインスキルがなくてもプロ品質の初稿を作れる
- Claude CodeやCursorとMCP連携できる（2026年新機能）
- 無限キャンバスで複数画面を比較しながら検討できる
- 日本語UIの生成精度はまだ英語に比べて伸び代がある
- ピクセル単位の細かい調整は苦手（仕上げは別ツール推奨）
- 10画面を超える大規模サイトの一括管理には不向き
- Google Labsのベータ版のため、仕様変更の可能性がある
- プロンプトの指示忠実度はClaude Codeなどに劣る場面も
料金プラン
| 項目 | 内容 |
|---|---|
| 基本利用 | 完全無料（Googleアカウントのみで利用可能） |
| Standard Mode | 月間 約350回まで生成可能 |
| Experimental Mode（画像入力） | 月間 約200回まで生成可能 |
| Figmaエクスポート | ✓ 無料で利用可能 |
| コード書き出し（HTML/CSS・React） | ✓ 無料で利用可能 |
| 有料プラン | 2026年6月時点では未提供（Google Labsベータのため今後変更の可能性あり） |
2026年6月時点ではすべての機能が無料で利用可能です。ブログ用のバナーやLP（ランディングページ）のラフ案づくりなど、まず試しに使ってみるハードルが非常に低いツールです。
Figma・Claude Codeとの連携で何ができる？
Stitchの強みは出力の多様さです。生成したデザインはFigmaにそのままペーストできるだけでなく、DESIGN.mdという形式でデザインルール（カラー・フォント・余白など）を書き出し、別プロジェクトやAIコーディングツールに引き渡すことができます。
- Figma：「Copy to Figma」でレイヤー・レイアウト情報を保持したまま貼り付け
- Claude Code / Cursor：MCP連携でStitchのデザインを直接読み取り、コード生成に活用
- Google AI Studio / Antigravity：Google系AI開発環境とシームレスに連携
- ZIPダウンロード：HTML/CSS・Reactのソースをまとめて取得
得意なところを組み合わせて使うのがおすすめですよ。
利用時の注意点
Google StitchはまだGoogle Labsの実験的プロジェクトです。料金体系や機能が予告なく変更される可能性があるため、商用プロジェクトで使う場合は最新の利用規約を都度確認しましょう。また日本語UIラベルが英語のまま混在することがあるため、公開前に必ず目視チェックを行ってください。
よくある質問
Google Stitchは無料で使えますか？
はい、2026年6月時点ではすべての機能が無料です。Googleアカウントでログインするだけで、月間の生成回数の上限内であれば追加料金なしに利用できます。
日本語で使えますか？
日本語プロンプトの入力は可能ですが、UIラベルに英語が混在するなど、英語プロンプトに比べて精度が安定しない場合があります。重要な場面では英語プロンプトも併用するのがおすすめです。
Figma初心者でも使えますか？
はい。StitchだけでもUIデザインの初稿とコードを完成させられるので、Figmaを持っていない方でも利用できます。仕上げの細かい調整をしたい場合のみ、Figmaへのエクスポートを活用してください。
商用利用はできますか？
現時点ではベータ版のため、商用利用前に必ず公式サイトの最新の利用規約を確認してください。今後の正式版で条件が変わる可能性があります。
同じツールを実際に使ってレビューしているブロガーさんの記事をピックアップしました。
