Google Stitch 使い方を知りたい方へ。Google Labsが開発したAI搭載UIデザインツール「Stitch」は、テキストを入力するだけでアプリのUIを自動生成し、HTML/CSSコードまで出力してくれる。2026年3月の大型アップデートでVoice Canvas（音声デザイン）、無限キャンバス、Vibe Designなど革新的機能が追加された。この記事では、Google Stitch 使い方の基礎から応用、他ツールとの使い分けまで徹底解説する。
【実体験】Google Stitch 使い方で自作アプリのUIが激変した話
筆者が開発中のピクセルアートゲーム「Pixel Office」のUIリデザインで、Google Stitch 使い方を実際に試した結果を共有する。
Before: 最低限のUIだった状態
もともとのPixel Officeは、基本的なレイアウトだけの素朴な画面だった。部屋の配置はあるものの、インテリアは最低限、直員のプロフィール画面もなく、昼夜の区別もない。「機能としては動くが、見た目に魅力がない」という状態だ。
After: Stitchで生まれ変わったUI
Stitchにプロンプトを入れて約1分。出力されたデザインをベースに、以下の改善が実現した。
1. インテリアショップの追加
オフィス家具を購入して配置するショップ画面が生まれた。エルゴチェア、ゲーミングデスク、ウォーターサーバー、観葉植物、ホワイトボード、コーヒーマシン——価格付きの購入UIまで含めて、Stitchが1回のプロンプトで生成した。
2. 直員プロフィールの個性化
各スタッフのプロフィールカードが追加された。アバター、役職名、エネルギーゲージ、ストレスゲージ、アクションボタン（チャット・分析・休憩）まで揃ったUIが、プロンプト1つで出てくる。
3. 昼夜モードの実装
昼は明るいオフィス、夜は暖色の照明が灯る雰囲気に——同じレイアウトで2つの表情を持つUIが生成された。窓の外の車が行き交う道路まで再現されている。
所要時間と驚きのポイント
| 項目 | 結果 |
|---|---|
| 1回の生成にかかった時間 | 約1分 |
| 無料で使える回数 | 1日15回 |
| MCP連携 | Stitch → Claude Code に直接接続して実装まで自動化 |
驚いたのは、StitchのMCP Serverを使えばClaude Codeと直結できる点だ。筆者は実際にMCP ServerでClaude Codeと接続して使っているが、Stitchでデザインしたものがそのままコーディングエージェントに渡り、実装まで一気通貫で進む。デザイン→コードの手作業がゼロになる。この体験は「もう戻れない」レベルで快適だ。
「デザインは専門外だから」と後回しにしていたUIが、1日で完全に別物になった。これは革命だと思った。
Google Stitch 使い方の前に——Stitchとは何か
Google Stitchは、Google Labsが2025年5月のGoogle I/Oで発表したAI搭載のUIデザインプラットフォームだ。Googleの最新AIモデル「Gemini 3.0 Flash / 3.1 Pro」を基盤にしており、テキストプロンプト・画像・手書きスケッチ・音声から高品質なWebおよびモバイルアプリのUIを数秒で生成する。
従来のUIデザインは、Figmaなどの専門ツールでワイヤーフレームを引き、コンポーネントを配置し、開発者にコードとして渡すという長いプロセスが必要だった。Stitchはこの工程を「プロンプト1行→完成UI＋コード」に圧縮する。
| 項目 | 内容 |
|---|---|
| 開発元 | Google Labs |
| AIモデル | Gemini 3.0 Flash / Gemini 3.1 Pro / Nano Banana Pro（3モデル選択制） |
| 料金 | 完全無料（2026年3月時点） |
| 生成上限 | 1日15回（無料）/ Standardモード: 月350回 / Proモード: 月200回 |
| 出力形式 | HTML + CSS（Tailwind CSS）/ Figmaエクスポート |
| 対応デバイス | Web・モバイル（iOS / Android） |
| URL | stitch.withgoogle.com |
Figmaが「デザイナーのためのコラボツール」なら、Stitchは「アイデアを持つすべての人のためのUIジェネレーター」と位置づけられる。デザイン経験がゼロでも、言葉で伝えるだけでプロ品質のUIが手に入る。
Google Stitch 使い方——5ステップで始める実践ガイド
Google Stitch 使い方は驚くほどシンプルだ。Googleアカウントさえあれば今すぐ始められる。
Step 1: Stitchにアクセス＆ログイン
stitch.withgoogle.com にアクセスし、Googleアカウントでログインする。18歳以上であれば誰でも利用可能。Geminiが利用できるリージョンであれば、日本からもアクセスできる。
Step 2: プロンプトを入力してUIを生成
メイン画面のプロンプト入力欄に、作りたいUIの説明を入力する。
プロンプト例：
- 「ダッシュボード付きの家計簿アプリ。今日の支出、カテゴリ別集計、最近の取引履歴を表示」
- 「ミニマルなブログのトップページ。ダークモード対応、カード型記事一覧」
- 「フィットネスアプリのワークアウト記録画面。タイマー、セット数、消費カロリーを表示」
英語の方が精度が高い傾向があるが、日本語でも十分に動作する。
Step 3: バリエーションから選択＆修正
Stitchは複数のデザインバリエーションを生成する。気に入ったものを選び、会話形式のプロンプトで修正を指示できる。
修正指示の例：
- 「背景をもっと暗くして」
- 「ナビゲーションバーを下に移動して」
- 「フォントサイズを大きくして、丸みのあるボタンに変えて」
2026年3月のアップデートで、テキスト要素のクリック編集やスペーシングの手動調整も可能になった。プロンプトを打ち直さなくても、直接UIを編集できる。
Step 4: 画面をつなげてプロトタイプ化
複数の画面を生成したら、Stitchの「Stitch」機能（名前の由来）で画面同士を接続できる。ボタンやリンクにトランジションを設定し、「Play」を押せばインタラクティブなプロトタイプとして動作する。
ある要素をクリックしたときの遷移先がまだない場合、Stitchが文脈を読んで「次の画面」を自動生成してくれる機能もある。
Step 5: エクスポート（コード or Figma）
完成したデザインは2つの方法でエクスポートできる。
3つのAIモデルを選べる
Stitchでは用途に応じて3つのAIモデルを切り替えられる。
| モデル | 特徴 | 用途 |
|---|---|---|
| Gemini 3.0 Flash | 高速生成。HTMLで高品質なデザインを作成し、コーディングエージェントにエクスポート可能 | スピード重視の日常利用 |
| Thinking with 3.1 Pro | Gemini 3.1 Proを使用。速度より品質と推論を優先 | 複雑なUIや高品質が求められる場面 |
| Redesign（Nano Banana Pro） | 既存アプリやサイトのスクリーンショットからリデザイン | 既存UIの改善・リニューアル |
豊富なエクスポート方法
| エクスポート方法 | 内容 | 用途 |
|---|---|---|
| HTMLコードダウンロード | クリーンなHTML + Tailwind CSSを.zipでダウンロード | そのまま開発に使う |
| Paste to Figma | Auto Layout付きでFigmaにコピー&ペースト | デザイナーが微調整する |
| コーディングエージェントへ直接エクスポート | MCP Server経由でClaude CodeなどのAIコーディングツールに直結 | デザイン→実装を完全自動化 |
| DESIGN.md | デザインシステムをマークダウン形式で出力 | 複数プロジェクトでデザインルールを共有 |
| プロトタイプリンク | インタラクティブなプロトタイプをURL共有 | チームレビュー・クライアント確認 |
コードは実用レベルのクオリティで、そのままバイブコーディングツール（Cursor、Lovableなど）に渡してフル機能の実装に進める。
AI業務自動化に興味がある方は、Instagram（@taro_taro609）にDMで「診断」と送ってください →
2026年3月アップデート——Stitchが「別物」になった5つの新機能
2026年3月のアップデートは、Google Stitch 使い方を根本から変えるレベルの変更だった。単なるUI生成ツールから「AI搭載デザインスタジオ」へ進化している。
1. 無限キャンバス（AI-Native Infinite Canvas）
MiroやFigJamのような無限キャンバスだが、すべてのノードがAI生成可能なデザインフレームになっている。アイデアのスケッチからワイヤーフレーム、ハイファイデザイン、プロトタイプまで、1つのキャンバス上で完結する。ツールの切り替えが不要になった。
2. Voice Canvas（音声デザイン）
マイクに向かって話すだけでデザインが生成・修正される。「メニューのレイアウトを3パターン見せて」と言えばバリエーションが表示され、「左のやつをダークパレットに」と続ければ即座に反映される。
Stitchはただ言われた通りに作るだけでなく、こちらに質問を投げかけてくる。「ターゲットユーザーの年齢層は？」「既存のブランドカラーはある？」といった確認を経て、より精度の高いデザインを出す。
3. Vibe Design（バイブデザイン）
「具体的な仕様」ではなく「雰囲気」からデザインを始めるアプローチ。
例えば「ユーザーに安心感と信頼を感じさせる金融アプリ」とだけ伝えれば、Stitchがその「バイブ」に合った色、フォント、レイアウト、コンポーネントを自動で選択する。バイブコーディングのデザイン版と言える。
4. Design Agent（デザインエージェント）
キャンバス全体のコンテキストを理解するAIエージェントが搭載された。プロジェクトの進捗を横断的に把握し、一貫性のあるデザインシステムを維持しながら新しい画面を生成する。複数のデザイン方向を並行して探索する「Agent Manager」機能もある。
5. DESIGN.md＆MCP Server
DESIGN.mdは、デザインシステム（カラートークン、タイポグラフィ、スペーシング、コンポーネントロジック）をマークダウンファイルとして書き出す仕組みだ。任意のURLからデザインシステムを抽出することもできる。
MCP Serverは、IDEからStitchのデザインを直接取得してコード化する接続手段。Google Antigravityなどのコーディングツールと連携し、デザイン→コードのパイプラインを自動化する。
Google Stitch 使い方の応用——v0・Lovableとの使い分け
Google Stitch 使い方を理解したうえで重要なのが、他のAIツールとの使い分けだ。2026年現在、AIデザイン・開発ツールの「三本柱」が確立している。
| ツール | 強み | 弱み | 最適な用途 |
|---|---|---|---|
| Google Stitch | デザイン品質が圧倒的。Figma連携。無料。 | バックエンドのコード生成はできない | UIデザインの探索・プロトタイプ |
| v0（Vercel） | React/Next.jsのコード品質が高い。フルスタック対応。 | デザイン品質はStitchに劣る | プロダクションレベルのフロントエンド |
| Lovable | 認証・DB・API統合まで一気通貫。ワンクリックデプロイ。 | デザインのカスタマイズ性は低い | バックエンド込みの完全なアプリ構築 |
最も生産性の高いワークフロー：
- Stitchでビジョンを固める（デザイン探索・プロトタイプ）
- v0でコードに変換する（React/Next.jsとして実装）
- Lovableで完成品としてデプロイする（バックエンド・認証・DB追加）
3つのツールは競合ではなく補完関係にある。Stitchで生成したHTMLをv0に渡す、StitchのDESIGN.mdをCursorに読み込ませるなど、組み合わせることで真価を発揮する。
関連記事：Lovable 使い方 日本語完全ガイド【2026年最新】
関連記事：バイブコーディング 始め方【2026年】5ステップ完全ガイド
Google Stitch 使い方——Gemini 3.1 Pro vs 3.0 Flash 実比較
同じプロンプト「A landing page for a vintage car rental service with a large hero image」で、3.1 Proと3.0 Flashの出力を比較した。
Gemini 3.1 Pro（Thinking）の出力
3.1 Proはレイアウトの完成度が高い。タイポグラフィの選択、余白の取り方、セクション間の視覚的な流れが洗練されている。「The Heritage Collector」というブランドストーリーまで自動生成し、Featured Collection・サービス紹介・CTA・フッターまで一貫したデザインシステムで構成している。
Gemini 3.0 Flash の出力
3.0 Flashは生成速度が速い。デザインの方向性は似ているが、3.1 Proと比べるとレイアウトがややシンプルになる。一方で、コーディングエージェントへの直接エクスポートに最適化されており、日常的なUI生成にはこちらが向いている。
使い分けのポイント
| 場面 | 推奨モデル |
|---|---|
| クライアント提案・ポートフォリオ | 3.1 Pro（品質最優先） |
| 日常の素早いUI生成・プロトタイプ | 3.0 Flash（速度優先） |
| 既存アプリのリデザイン | Redesign（Nano Banana Pro） |
同じプロンプトでもモデルによってこれだけ差が出る。目的に応じて切り替えることが、Google Stitch 使い方の最大のコツだ。
Google Stitch 使い方のコツ——プロが実践する7つのテクニック
1. 英語プロンプトを使う
Gemini 3.0 Flash / 3.1 Proは英語の方が精度が高い。UIのテキスト要素は後から日本語に書き換えればいい。
2. 参照画像を活用する
Proモード（月200回）では画像をアップロードして参照できる。競合アプリのスクリーンショットや手書きスケッチを渡すと、意図通りのデザインが出やすい。
3. Vibe Designで広げてから絞る
最初は「信頼感のあるフィンテック」「遊び心のあるSNS」のように抽象的に始め、複数の方向性を見比べてから具体的な修正に入る。最初から仕様を細かく決めると、可能性を狭めてしまう。
4. DESIGN.mdを使い回す
一度作ったDESIGN.mdは他のプロジェクトにインポートできる。ブランドの統一感を保ちながら複数のアプリUIを素早く生成できる。
5. Voice Canvasでブレスト
考えながら話すと、Stitchがリアルタイムで形にしてくれる。キーボードで打つより思考の速度でデザインが進む。チームでのアイデア出しにも使える。
6. 自動プロトタイプで検証
画面を作ったらすぐにPlayモードで操作感を確認する。遷移先がない要素はStitchが自動で次の画面を生成してくれるので、フロー全体を素早く検証できる。
7. MCP連携でコーディングに直結
Stitch MCP Serverを設定すれば、IDE上からStitchのデザインを直接取得してコード実装に移れる。デザインとコードの間でコピペする手間がなくなる。
Google Stitch 使い方でよくある質問
Q: Google Stitch 使い方は日本語でも大丈夫？
日本語プロンプトでも動作する。ただし、英語の方がデザインの精度が高い傾向がある。UIの中のテキスト要素は生成後にクリックして日本語に書き換えられる。
Q: Google Stitchは本当に無料？制限は？
2026年3月時点で完全無料。1日15回の生成が可能。Google Labsの実験プロジェクトとして提供されている。
Q: FigmaとStitchはどちらを使うべき？
両方使うのが正解。Stitchでアイデアを素早く形にし、Figmaで細部を調整する。Stitchの「Paste to Figma」機能でAuto Layout付きのまま渡せるので、ワークフローに無理がない。
Q: 生成されたコードはそのまま使える？
HTML + Tailwind CSSとして出力され、実用レベルの品質がある。ただし、バックエンドロジックやデータベース接続は含まれない。フロントエンドのスターティングポイントとして使い、CursorやLovableで機能を追加していくのが現実的なワークフローだ。
Q: バイブコーディングとの関係は？
バイブコーディングが「言葉でコードを書く」なら、StitchのVibe Designは「言葉でデザインを作る」。両者を組み合わせれば、アイデアからデザイン、コード、デプロイまでを言葉だけで完結させることが可能になる。
まとめ——Google Stitch 使い方を覚えて、デザインの壁をなくそう
- テキスト・音声・スケッチからプロ品質のUIを自動生成する無料ツール
- 2026年3月アップデートで無限キャンバス・Voice Canvas・Vibe Designが追加
- HTML/CSSコード出力＆Figmaエクスポートでそのまま開発に直結
- v0・Lovableと組み合わせるのが2026年型の最強ワークフロー
- MCP Server・DESIGN.mdでコーディングツールとシームレス連携
「デザインができないからアプリが作れない」という時代は終わった。Stitchは、バイブコーディングの最後のピースを埋めるツールだ。
会員登録（無料）で限定プロンプト集を受け取る → 登録はこちら
🤖 AI導入を迷っているあなたへ──30分無料診断
「どのAIツールが合うかわからない」「自動化できる業務を知りたい」方は、
Instagramの @taro_taro609 にDMで 「診断」 とメッセージを送ってください。
30分のビデオ通話で、あなたの業務に最適なAI活用プランを無料でご提案します。
バイブコーディング入門ガイドPDF（¥1,480）でゼロから始めよう →
著者: 稲邉舜太朗（Lovable公式アンバサダー）
参考ソース：
- Google公式ブログ: blog.google
- Google Developers Blog: developers.googleblog.com
- Stitch公式サイト: stitch.withgoogle.com
- NxCode完全ガイド: nxcode.io