「UIデザインのプロトタイプを作りたいけど、Figmaを使いこなすのはハードルが高い」「デザイナーに依頼する前に、自分のアイデアを形にして見せたい」——そんな悩みを持っている方は多いのではないでしょうか。
Google Stitchは、テキストで「こんなアプリが作りたい」と伝えるだけで、要件定義からデザインシステムの作成、実際のUI画面の生成までを自動で進めてくれるツールです。2025年5月のGoogle I/Oで発表され、2026年3月に大型アップデートが入りました。
今回は実際に「AI人材・スキルのマッチングプラットフォーム」というプロンプト1行だけを入力し、LP（ランディングページ）が完成するまでの流れを紹介します。結論から言うと、プロトタイプ作成の用途ではかなり実用的です。
Google Stitch のトップページ。「Design at the speed of AI」のキャッチコピー通り、プロンプトを入力するだけでUI生成が始まる
Google Stitch とは？——Googleが作った「バイブデザイン」ツール
Google Stitchは、Google Labsが提供するAI搭載のUIデザインツールです。もともとGalileo AIとして知られていたサービスをGoogleが買収し、Geminiモデルと統合してリブランドしました。
ざっくり言えば、「テキストや画像でアイデアを伝えると、プロ品質のUI画面を生成してくれるツール」です。Googleはこれを「バイブデザイン（vibe design）」と呼んでいます。バイブコーディングのデザイン版ですね。
テキスト → UI生成
自然言語でアプリの概要を伝えるだけで、要件定義→デザインシステム→画面生成まで自動で進行。
Figmaエクスポート
生成されたUIをコピー→Figmaに貼り付けるだけ。レイヤー構造・Auto Layoutも維持される。
コード出力
HTML + Tailwind CSSのクリーンなコードを出力。そのままClaude Code等に渡して開発に着手できる。
無料で利用可能
StandardモードはGemini Flash利用で月350回、Experimentalモードは月50回まで無料。
v0（Vercel）やBolt（StackBlitz）などの「バイブコーディング」ツールとよく比較されますが、Stitchは「デザイン」に特化しています。バックエンドの生成やデプロイ機能はありません。その代わり、UIの品質とFigmaとの連携に力を入れています。
実際にやってみた：プロンプト1行からLP完成まで
百聞は一見に如かずということで、実際にやってみました。入力したプロンプトはたったこれだけです。
💡 入力したプロンプト
「AI人材・AIスキルのマッチングプラットフォーム」
これだけの入力で、Stitchは以下の流れを自動的に進めてくれました。
🔄 Stitch の自動生成フロー
ステップ1：AIが要件定義を提案する
プロンプトを入力すると、まずStitchのAIエージェントが「どんなプラットフォームにしましょうか？」と聞いてきます。こちらが「いいね、進めて」と返すだけで、必要な画面構成を自動で整理してくれました。
提案された画面構成は以下の通りです：
- ランディングページ：サービスの特徴、PULLポイント、主要なAIスキルのカテゴリ一覧
- AI人材検索一覧ページ：全ての登録AI人材を閲覧でき、スキル・実績・料金・稼働ステータスで絞り込める検索機能
- 人材プロフィール・詳細ページ：個人の経歴、ポートフォリオ、保有スキル（LLM、機械学習、データ分析など）
- 採用企業・管理ダッシュボード：企業側が候補者を比較し、応募状況管理が可能
Stitchが自動で画面構成を提案してくれる。「いいね、進めて」と返すだけで次のステップに進む
ステップ2：デザインシステムを自動生成
要件定義の次に、Stitchはデザインシステムの構築に取りかかります。カラーパレット、タイポグラフィ、ボタンスタイル、共通コンポーネント（ナビゲーション、カード、ボタンなど）を自動で定義してくれました。
ここが地味にすごいポイントです。通常、デザインシステムの策定はデザイナーが数日〜数週間かけて行う作業です。それが「承知いたしました！」の一言で、カラースキーム・タイポグラフィ・コンポーネントパターンが一式揃います。
自動生成されたデザインシステム。カラーパレット、フォント、ボタンスタイルが一覧で確認できる
ステップ3：複数画面が一気に生成される
デザインシステムが固まると、いよいよ実際のUI画面が生成されます。LP、人材検索一覧、人材プロフィール詳細、採用企業ダッシュボードの4画面がキャンバス上に一気に並びました。
率直な感想としては、想像以上に品質が高いです。「AIが作ったデザイン」という雑な感じがなく、コンポーネントの配置やスペーシング、色使いがしっかりしています。そのまま打ち合わせのプロトタイプとして見せられるレベルです。
4画面が一気に生成された。LP、検索一覧、プロフィール詳細、ダッシュボードまで揃う
日本語対応はまだ発展途上
1点気になったのは、日本語のプロンプトを入力したにもかかわらず、初回の生成結果が英語のLPだったことです。まだベータ版なので仕方ないですが、「日本語のLPにして」と追加で指示すればちゃんと修正してくれました。
ただし、日本語化した後もデザインのテイストはどうしても「海外っぽい」印象が残ります。欧米のSaaSサイトでよく見るレイアウトやフォントの使い方がベースになっているので、日本のWebサイトに馴染むテイストにするにはFigmaに持っていった後の調整が必要です。
とはいえ、ここまでの一連の流れ——プロンプト入力から要件定義、デザインシステム、4画面の生成まで——にかかった時間は数分程度です。通常なら数日〜数週間かかるプロセスが10分で終わるインパクトは相当大きいです。多少の日本語調整を差し引いても、プロトタイプの初速としてはこれ以上ない速さです。
Figmaエクスポートの品質が想像以上だった
Stitch で生成したデザインが良くても、その後のワークフローに繋がらなければ意味がありません。ここで重要になるのがFigmaエクスポートです。
操作は非常にシンプルです。Stitch の画面右上にある「エクスポート」ボタンをクリックし、フォーマットから「Figma」を選択。あとは「変換」を押してクリップボードにコピーされたデータを、Figma上でCtrl+Vで貼り付けるだけです。
エクスポートダイアログ。Figma以外にもAI Studio、Jules、MCP、コード、zipなど多彩な出力先がある
驚いたのは、貼り付けた後のFigmaでのコンポーネント構造です。レイヤーがきちんと名前付きで分かれており、Auto Layoutも効いています。「SideNavBar」「Main Content」「Talent Grid」といった意味のあるレイヤー名が付いていて、デザイナーが手で作ったかのような構造になっていました。
Figmaに貼り付けた結果。レイヤー構造がきちんと整理されており、Auto Layoutも維持されている
これは実質的に、Figma が2024年に発表した「Figma Make（旧 Make Design）」と同じようなことを、Google のプラン内で実現しているわけです。Figma Make は有料のAIアドオンですが、Stitchは現時点で無料。Google経済圏のユーザーにとっては大きなメリットです。
📊 従来のプロトタイプ作成 vs Stitch
❌ Before（従来）
→ ワイヤーフレーム作成（1-2日）
→ デザインシステム策定（3-5日）
→ UIデザイン（3-5日）
→ Figma整理（1日）
合計：約1-3週間
✅ After（Stitch）
→ AI要件定義（自動）
→ デザインシステム生成（自動）
→ 4画面一括生成（数分）
→ Figma貼り付け（Ctrl+V）
合計：約3分
もちろん、Stitchの出力がそのまま最終デザインになるわけではありません。しかし「まずプロトタイプを見せて方向性を擦り合わせる」というフェーズでは、十分すぎる品質です。
コード出力とClaude Code連携の可能性
Stitchのもう一つの注目ポイントは、コード出力の品質です。生成されたUIのHTMLコードを確認したところ、Tailwind CSSベースのクリーンなコードが出力されていました。
実際に出力されたコードの特徴をまとめます：
- Tailwind CSSのユーティリティクラスで構成されており、冗長なカスタムCSSがほとんどない
- Material Symbols（Googleアイコンフォント）を使用しており、アイコンの品質が高い
- レスポンシブ対応の基本構造（
md:プレフィクス）が組み込まれている - コンポーネントの粒度が適切で、ヘッダー・サイドバー・メインコンテンツ・カードがきちんと分離されている
このコードをそのままClaude CodeやCursorなどのAIコーディングツールに渡して「これをReact/Next.jsに変換して」と指示すれば、開発の起点として十分に使えます。デザイン → コード変換 → 開発という流れが、ほぼシームレスに繋がります。
💡 MCP連携でさらにスムーズに
2026年3月のアップデートでMCPサーバーが追加されました。これにより、Gemini CLI・Claude Code・Cursorから直接Stitchのデザインを参照できるようになります。「Stitchのデザインに合わせてコンポーネントを実装して」という指示が通るようになる可能性があります。
2026年3月アップデートの新機能
2026年3月18日（Googleブログ公開日）の大型アップデートで、Stitchは「UIジェネレーター」から「AIネイティブなデザインキャンバス」へと進化しました。主な新機能を紹介します。
AIネイティブ無限キャンバス
従来の「プロンプトを入力→結果を見る」という一方通行のUIから、無限キャンバス上でアイデアを自由に配置・発展させるデザインツールに変わりました。画像・テキスト・URL・コードなど、あらゆる素材をキャンバスにドロップしてコンテキストとして使えます。
新しいAIネイティブキャンバス。アイデアの初期段階からプロトタイプまで、1つのキャンバス上で作業を進められる
Voice Canvas（音声入力）
キャンバスに向かって話しかけるだけでデザインを操作できる機能です。「ダークモードに切り替えて」「メニューのレイアウトを3パターン出して」といった指示が音声で通ります。手書きスケッチからのUI生成にも対応していますが、テキスト入力で十分に高品質なUIが出てくるので、使うシーンは限られるかもしれません。
Voice Canvas機能。音声でAIエージェントに指示を出し、リアルタイムでデザインを更新できる
DESIGN.md
デザインルール（カラー、タイポグラフィ、スペーシング、コンポーネントパターン）をMarkdownファイルとして書き出す機能です。AIエージェントが読める形式でデザインシステムを記録できるため、他のプロジェクトへの流用やコーディングエージェントとの共有が容易になります。
DESIGN.md：デザインルールをAI可読なMarkdown形式で出力。プロジェクト間での再利用やコーディングツールとの連携に使える
v0・Bolt・Figma Makeとの違い
「AIでUIを作る」ツールは他にもあります。よく比較される主要ツールとの違いを整理しました。
| 比較項目 | Google Stitch | v0（Vercel） | Bolt（StackBlitz） | Figma Make |
|---|---|---|---|---|
| 主な用途 | UIデザイン生成 | UIコンポーネント生成 | フルスタックアプリ生成 | Figma内でAIデザイン |
| 出力形式 | HTML/Tailwind | React/Vue/HTML | フロント+バックエンド | Figmaデザイン |
| Figma連携 | ✓ ワンクリック | なし | なし | ✓ ネイティブ |
| バックエンド生成 | なし | なし | ✓ あり | なし |
| デザインシステム自動生成 | ✓ DESIGN.md | なし | なし | 一部対応 |
| 音声入力 | ✓ Voice Canvas | なし | なし | なし |
| プロトタイプ | ✓ 画面遷移対応 | なし | ライブプレビュー | ✓ あり |
| 料金 | 無料（月350回） | 無料枠+$20/月 | 無料枠+有料プラン | Figma有料プラン+追加課金 |
ポイントはStitchが「デザインフェーズ」に特化していることです。v0やBoltは「動くアプリを作る」ことが目的ですが、Stitchは「デザインを作って、Figmaに渡す or コードに変換する」ことが目的です。
特にFigma Makeと比較すると、Stitchの立ち位置が明確になります。Figma Makeは月額$33（Figma Proプラン）+ 追加のAI料金がかかりますが、StitchはGoogleアカウントさえあれば無料です。Google経済圏（Google Workspace / Gemini）を使っている方にとっては、追加コストなしで同等以上の機能が使えるわけです。
📍 AIデザイン/コーディングツールのポジション
注意点と制限事項
実際に使ってみて感じた制限事項も正直に書いておきます。
⚠️ 現時点での制限事項
React/Vue等のフレームワーク出力は未対応：コード出力はHTML + Tailwind CSSのみ。React/Next.jsへの変換はClaude Code等で別途行う必要があります（React出力は近日対応予定）。
バックエンドは生成されない：フォームやログイン画面は見た目だけ。サーバーサイドの処理やデータベース連携は自分で実装する必要があります。
アニメーション・インタラクションは未対応：ホバーエフェクト、スクロールアニメーション、マイクロインタラクションは含まれません。
生成結果にバラツキがある：同じプロンプトでも出力品質が異なることがあります。ExperimentalモードのGemini Proの方が安定していますが、月50回の制限があります。
日本語対応が不完全：日本語プロンプトでも初回は英語UIが生成されることがあります。「日本語にして」で修正可能ですが、デザインのテイストは海外寄りのまま。日本市場向けのデザインに仕上げるにはFigma等での調整が必要です。
リアルタイムコラボレーションは未対応：チームで同時編集する機能はまだありません。
一方で、プロトタイプや企画段階のモックアップとしてはこれらの制限は大きな問題にはなりません。「完成品を作るツール」ではなく「アイデアを形にして議論の材料を作るツール」と考えれば、現時点でも十分に使えます。
まとめ：まずプロンプト1行で試してみよう
Google Stitchは「デザインのプロトタイプ作成」において、かなり実用的なレベルに達しています。
- プロンプト1行でLP完成——要件定義→デザインシステム→複数画面生成まで自動。打ち合わせ用のプロトタイプなら十分な品質
- Figma連携が高品質——Ctrl+Vで貼り付けるだけ。レイヤー構造・Auto Layoutも維持され、そのままデザイン作業を引き継げる
- コード→開発もスムーズ——Tailwind CSSベースのクリーンなコード。Claude CodeやCursorに渡して開発に着手できる
- 無料で使える——Googleアカウントだけで利用可能。Figma Makeのような追加課金が不要
今後はReactアプリの出力や3Dスペーシャルワークスペースなどの機能追加が予定されています（2026年5月のGoogle I/Oで発表される見込み）。「デザインツールとしてのStitch」は、今後のスタンダードになる可能性があります。
Google経済圏を使っている方にとっては特に注目です。Figma Makeに追加課金するよりも、まずStitchで試してみる価値があります。
グーグル