本記事を10秒でまとめると
- Google Stitchは、テキストや音声で指示するだけで高品質なUI画面を生成できる無料ツール。 Googleアカウントがあれば今すぐ使えます
- 2026年3月の大型アップデートで、複数画面の一括生成・音声操作・プロトタイプ・コード出力まで一気通貫でカバーする設計ツールに進化しました
- デザイン経験ゼロでも、アプリやLPのモックアップが20分程度で形になる。 「こんな画面がほしい」を自分の手で可視化できる時代が来ました
- 無料で使えるのはGoogle Labs実験期間の今だけ。試すなら今がベストです
「こんな画面がほしい」を、自分で形にできたら
社内で新しい業務ツールのアイデアを思いついたとき。顧客向けのランディングページが急ぎで必要になったとき。デザイナーに頼む前に、まず「こんなイメージです」と見せられるモックアップがあれば、話は格段に早く進みます。
ただ、それを作ろうとすると壁にぶつかります。FigmaやAdobe XDはプロ向けで、学習コストが高い。PowerPointで代用しても、見た目がチープで説得力に欠けます。
その壁を一気に取り払おうとしているのが、GoogleのAI UIデザインツール「Stitch（ステッチ）」です。
テキストで「こんなアプリの画面がほしい」と伝えるだけで、プロが作ったような画面デザインが数秒で生成されます。しかも無料です。この記事では、デザイン経験のないビジネスパーソンがStitchを使ってLPのモックアップを作るまでの流れを、ステップごとに解説します。
Google Stitchとは
Stitchは、Googleが「Google Labs」（実験的プロダクトの公開テスト枠）で提供しているAI UIデザインツールです。自然言語のプロンプトを入力すると、GeminiのAIモデルが高品質なUI画面を自動生成してくれます。
もともとは「Galileo AI」というスタートアップの技術で、Googleが2025年初頭に買収。同年5月のGoogle I/O 2025で「Google Stitch」として初公開された。当初はテキストから1画面を生成するだけのシンプルなツールだったが、わずか10か月で大きく進化しています。
（出典：Google公式ブログ「Introducing vibe design with Stitch」（2026年3月18日））
ひとことで言えば、「デザインの知識がなくても、言葉でUIを作れるツール」です。 対象はデザイナーだけではありません。開発者、プロダクトマネージャー、起業家、そしてデザイン経験のないビジネスパーソンも想定ユーザーに含まれています。
何が変わったのか──2026年3月アップデートの要点
2026年3月19日、Stitchは「これまでで最大のアップデート」を実施しました。Googleはこのアップデートで「バイブデザイン（Vibe Design）」という概念を打ち出しています。
「バイブコーディング」（自然言語でコードを書かせるスタイル）が開発者の間で広まっているが、その“デザイン版”がバイブデザインです。 ワイヤーフレームを描くところから始めるのではなく、「こんなビジネス目標がある」「ユーザーにこう感じてほしい」「StripeのサイトのようなミニマルなUI」といった“雰囲気（バイブ）”を伝えるところからデザインを始めます。
主要な新機能を整理します。
| 新機能 | 概要 |
| AIネイティブ無限キャンバス | 画像・テキスト・コードなど、あらゆる素材を1つのキャンバス上に配置し、AIがそれらを文脈として読み取りながらデザインを生成する |
| 最大5画面の同時生成 | アプリのフロー全体（例：商品一覧→カート→決済→完了画面）を1回のプロンプトで一括生成。画面間のトンマナも自動で統一される |
| Voice Canvas（音声操作） | マイクに向かって「もっと目立つCTAボタンにして」「ダークモードで見せて」と話すだけで、リアルタイムにデザインが更新される |
| インスタントプロトタイプ | 生成した画面をつなげてクリック可能なプロトタイプを即座に作成。「Play」ボタンで動きを確認できる |
| Direct Edit（手動微調整） | テキストの書き換え、画像の差し替え、余白の調整など、AIに再指示しなくても手動で細かい修正が可能 |
| DESIGN.md | デザインシステム（配色、タイポグラフィ、レイアウトルール）を自然言語のMarkdownファイルとして出力。他のツールと共有できる |
| MCP連携 | Claude Code、Cursor、Gemini CLIなどのコーディングエージェントとStitchを直結。デザインからコード実装への橋渡しを自動化する |
従来のStitchが「1画面を生成して、コードをコピペするツール」だったとすれば、今回のアップデートで「アイデア出しからプロトタイプ、コード出力まで一気通貫でカバーするデザインワークスペース」に変わった、と言えるでしょう。
結論：単なるアップデートではなく、ツールの位置づけ自体が変わりました。 「UI画像ジェネレーター」から「AIネイティブなデザインプラットフォーム」への進化です。
実際にやってみた──LPを1枚作る手順
ここからは、Stitchを使ってランディングページ（LP）のモックアップを作る流れを実演します。デザイン経験がなくても、この手順通りに進めれば形になるはずです。
Step 1｜アカウント作成＆キャンバスを開く
stitch.withgoogle.com にアクセスし、右上の「Try now」からGoogleアカウントでログインします。ウェイトリストもクレジットカード登録も不要です。ログインすると、すぐにキャンバス画面が表示されます。
中央にキャンバス、下にチャット入力欄、左にプロジェクト一覧が表示されます。
モードは以下の4つから選べます。
| モード | 特徴 | 月間生成回数 |
| Ideate | 方向性が決まっていないときの初期探索用 | 350回（Standard枠） |
| Flash | 作りたいものが明確なときの高速生成 | 350回（Standard枠） |
| Thinking | Gemini 2.5 Proを使った高品質出力。最終仕上げ向き | 200回（Pro枠） |
| Redesign | 既存デザインの作り変え専用 | — |
初めて使うなら、まずはIdeateもしくはFlashモードで試してみるのがおすすめです。
Step 2｜プロンプトを入力してデザインを生成
画面下部のプロンプト入力欄に、作りたいページの説明を入力します。「アプリ」か「ウェブ」を選んで、プロンプトを入力します。
ここで重要なのは、デザインの指示ではなく「何を伝えたいページなのか」を書くことです。バイブデザインの考え方に沿って、目的と雰囲気を伝えましょう。
プロンプト例：
AIライティングツール「InkFlow」のランディングページ。ヒーローセクションにはキャッチコピー、サブコピー、CTAボタン。3つの主要機能を紹介するカードセクション。導入企業ロゴのソーシャルプルーフセクション。2つの料金プランを並べた価格セクション。フッターにリンク一覧。トーンはプレミアムかつミニマル、Stripeのサイトのような雰囲気で。
「Generate」をクリックすると、数秒で複数のデザインバリエーションが生成されます。気に入ったものを選んでキャンバスに配置すれば、これがたたき台になります。
Step 3｜生成結果を手動で微調整（Direct Edit）
生成されたデザインは、そのままでもかなりの完成度ですが、デフォルト設定だとすべて英語表記になっていますので、テキストや画像など、自分の内容に差し替えたい場面は当然あります。
↓「すべて日本語にして」で、日本語表記に変更↓
2026年3月のアップデートで追加されたDirect Edit機能を使えば、AIに再指示しなくても、画面上のテキストをクリックして直接書き換えたり、画像を差し替えたりできます。
もう少し大きな変更（「CTAボタンの色を変えたい」「セクションの順番を入れ替えたい」など）は、プロンプト入力欄から追加指示を出せばOKです。Voice Canvasを使って「ヒーローセクションの背景をもっとダークにして」と話しかけるのも手です。
↓生成されたランディングページ↓
Step 4｜プロトタイプを作成して動きを確認
デザインが固まったら、次はプロトタイプ化です。画面を右クリック（またはトップバーの「Generate」メニュー）から「Instant Prototype」を選択します。
プロトタイプ専用の画面に切り替わり、左パネルから遷移先の画面を選んだり、Stitchに次の画面を自動生成させたりできる。画面間の遷移を設定したら「Play」ボタンを押せば、実際にクリックして画面を行き来できるプロトタイプが動きます。
これを社内共有すれば、PowerPointの静止画を見せるよりも、はるかに具体的なフィードバックが得られるでしょう。
Step 5｜HTML/CSSコードをエクスポート
Stitchで生成したデザインは、すべてHTML/CSSのコードとしてエクスポートできます。
画面を選択すると表示される「コードを表示」ボタンをクリックすれば、そのままコピーして使えるコードが表示されます。Tailwindにも対応しており、開発者にそのまま渡せるレベルです。
さらに、Figma形式でのエクスポートにも対応している。Auto Layout付きの状態で書き出されるので、Figma上でそのまま編集を続けることも可能です。
コードを書かない読者にとっても、このステップの意味は大きい。「デザインのモックアップを社内の開発者に渡すとき、コード付きで渡せる」というのは、コミュニケーションコストの大幅な削減につながります。
無料でどこまで使える？──料金と制限の整理
Stitchは現在、Google Labsの実験プロダクトとして完全無料で提供されています。クレジットカードの登録も不要です。
ただし、生成回数には月間の上限があります。
| 項目 | Standard（Gemini 2.5 Flash） | Pro（Gemini 2.5 Pro） |
| 月間生成回数 | 350回 | 200回 |
| 生成速度 | 高速（数秒） | やや遅いが高品質 |
| 複数画面の一括生成 | 5画面で1回消費 | 同左 |
5画面の一括生成が1回としてカウントされるため、見かけの数字以上に多くのデザインを試せます。手動での微調整（Direct Edit）はカウントされません。
参考までに、競合ツールの料金と比較してみましょう。
| ツール | 料金（月額） | 主な特徴 |
| Google Stitch | 無料 | AI UIデザイン＋コード出力＋プロトタイプ |
| Figma Professional | $15/ユーザー | 業界標準の協調デザインツール。AI機能はプラグイン経由 |
| v0（Vercel） | $20〜 | AIコード生成に強み。デザインよりもコード寄り |
結論
現時点では、AIデザインツールとしてのコストパフォーマンスは圧倒的です。 ただし、Google Labsの実験が終了すれば有料化される可能性が高いです。業界では2026年後半の有料化が見込まれており、無料でフル機能を使える期間は限られています。
使ってみた所感／メリット・デメリット
ここが良い
- デザインスキルが不要。 プロンプトを書ける人なら誰でもモックアップが作れます。「Figmaの使い方を覚える」というハードル自体がなくなります
- スピードが桁違い。 LP1ページなら、プロンプト入力から形になるまで本当に20分程度で済みます。従来、外注すれば数日〜数週間かかっていたフェーズが激縮します
- コード出力まで一気通貫。 デザインから開発への受け渡し（いわゆる「デザインハンドオフ」）で毎回発生していた認識ズレを減らせる可能性があります
- Voice Canvasの操作体験が新しい。 「もうちょっと○○な感じにして」という、言語化しづらいフィードバックをそのまま口頭で伝えられます。会議中のブレストとの相性がよさそうです
ここは割り切りが必要
- ピクセル単位の細かい調整は苦手。 Direct Editで一定の微調整は可能になったが、Figmaのように1px単位でコントロールしたい場面ではまだ力不足です
- デザインシステムの本格管理は未対応。 共有コンポーネントライブラリ、バージョン管理、チームでの同時編集といったFigmaの得意領域はカバーされていません
- 生成品質にブレがある。 同じプロンプトでも、生成ごとに出てくるデザインのクオリティに差がある。特にStandardモード（Flash）では顕著です。ここぞという場面ではThinkingモード（Pro）に切り替えるのが無難です
- Google Labs実験プロダクトであるリスク。 突然の仕様変更や、最悪の場合はサービス終了もありえます。本番環境のデザインワークフローに全面移行するのは時期尚早でしょう
結論
「探索とたたき台づくり」にはStitch、「仕上げと本番運用」にはFigma。 現時点ではこの使い分けが現実的です。Stitchで素早くアイデアを可視化し、方向性が固まったらFigmaに移して磨き込む──というワークフローが最も無駄がありません。
まとめ
Google Stitchは、「デザインができる人」だけのものだったUI制作を、言葉で考えられる人すべてに開放しようとしているツールです。2026年3月のアップデートで、アイデア出しからプロトタイプ、コード出力までを1つのキャンバス上で完結できるようになりました。
もちろん、プロのデザイナーの仕事がすぐに不要になるわけではありません。ただ、「まず形にして見せる」というスピードが、チームの意思決定を加速させる場面は確実にあります。
次に「こんな画面があったらいいな」と思ったら、stitch.withgoogle.com を開いて、まずはプロンプトを1行打ってみてほしい。デザイン経験ゼロでも、20分後にはプロ級のモックアップが手元にあるかもしれません。
なお、Googleの生成AIツール活用に興味がある方は、「手書きメモで生成AIをより賢く｜GoodNotes × Gemini連携のススメ」もあわせて読んでみてほしい。AIツールを日常業務に組み込むヒントが見つかるはずです。
