2026.03.21

GoogleのデザインツールStitchが「バイブデザイン」に大幅刷新——ワイヤーフレームなしでUIが作れる時代へ【2026年3月】

itpicks_admin

2026年3月18日、GoogleがデザインツールStitchを大幅に刷新しました。

Google LabsプロダクトマネージャーのRustin Banksは「AIがここ1年でソフトウェアの作り方を根本的に変えた」と書き、Stitchを完全リデザインしたと説明しています。

新しいStitchのコンセプトは「バイブデザイン（vibe design）」。ワイヤーフレームを描く代わりに、達成したいビジネス目標・ユーザーに感じさせたい感情・インスピレーションを自然言語で伝えるだけで、高品質なUIデザインが生成されます。

バイブコーディングの「コードを書かずにアプリを作る」が、デザインの世界にも来た——そういう位置づけのアップデートです。

この記事はこんな人向けです

デザインツールは難しそうで手が出なかった非デザイナー・エンジニア・起業家
Figmaを使っているが、アイデア出しの初期フェーズをもっと速くしたい
「バイブデザイン」という言葉を聞いたが、何のことか知りたい

Google Stitchとは？おさらい
「バイブデザイン」とは何か
今回のアップデートで追加された5つの機能
DESIGN.md：デザインシステムの持ち運び
開発ツールとの連携：MCP対応
料金：無料で使えるか
Figmaとの関係：競合か補完か
実際の使い方：どう試せばいいか
IT Picks的な所感
まとめ

Google Stitchとは？おさらい

Stitchは2025年5月にGoogleがGalileo AIを買収・リブランドした形で誕生し、Google I/O 2025で正式発表されたデザインツールです。現在はstitch.withgoogle.comで無料公開されており、Geminiが利用可能な全地域の18歳以上のユーザーが利用できます。

Google I/O 2025ではシンプルなテキスト→UIジェネレーターとして公開されましたが、2026年3月時点では音声インタラクション・バイブデザイン・インスタントプロトタイピング・本番コードへのパイプラインを備えるAIネイティブなデザインプラットフォームへと進化しました。

「バイブデザイン」とは何か

バイブデザインは、Stitchが提唱するデザインの新しいアプローチです。

従来のデザインツールでは、最初にグリッド・カラム・ブレイクポイントといった構造的な決定を何百も積み重ねることからスタートします。Stitchはこの順序を逆転させます。「何を感じさせたいか」という問いから始めるのです。

たとえばこういった指示から始められます

「瞑想アプリのランディングページ。Apple HealthとHeadspaceを参考に、穏やかでミニマルな雰囲気で」
「30秒以内にユーザーが登録したくなるデザイン。焦りを感じさせるが押しつけがましくなく」
「Duolingoにインスパイアされた、Z世代向けのカラフルで楽しい雰囲気」

この一文から、AIが複数のデザイン方向性を一気に生成します。スケッチでも、ムードボードでもなく、実際の画面UIとして。

バイブコーディングが「コードの雰囲気を伝えてAIにコードを書かせる」なら、バイブデザインは「デザインの雰囲気を伝えてAIにUIを作らせる」です。

今回のアップデートで追加された5つの機能

① 無限キャンバス（Infinite Canvas）

固定されたアートボードが廃止され、無限に広がるワークスペースに変わりました。テキスト・画像・コードスニペット・競合サイトのスクリーンショットを同じキャンバスに並べて、それらすべてをコンテキストとしてデザイン生成に使えます。

「アイデアの発散フェーズ」と「プロトタイプ完成フェーズ」を、同じキャンバス上でシームレスに行き来できるようになりました。

② AIデザインエージェント（Design Agent）

エージェントはプロジェクト全体のコンテキストを保持しながら作業します。新しい画面を依頼するとき、エージェントは既存のデザインシステム・フロー・制約をすでに把握した状態で答えます。「これらの画面」「あのボタン」と言えば、何のことか分かります。

頼めること

求められなくても改善提案をしてくれる
既存のビジュアル言語に合ったバリエーションを生成する
レイアウトをゴールに対して批評する
フローの次の画面を提案する

③ 音声キャンバス（Voice Canvas）

Voice Canvasはキャンバスに向かって話しかけることでデザインを操作できる機能です。AIエージェントは一方的に命令を受けるだけでなく、デザインゴールについてインタビューしてきたり、キャンバス上のものに対してリアルタイムで批評を加えたりします。

「メニューのバリエーションを3つ見せて」「ダークパレットにして」「もっと遊び心のある感じにして」——これを言葉で伝えれば、Stitchがリアルタイムで対応します。

④ ワンクリックインタラクティブプロトタイプ

静的なデザインをクリッカブルなプロトタイプに1ステップで変換できます。Figma・HTML/CSS・本番コードへの直接エクスポートにも対応しています。

ユーザーがボタンをクリックすると、Stitchがプロジェクト全体のコンテキストをもとに「次の画面はこうなるべき」と提案してくれる機能も追加されています。

⑤ ダイレクト編集（Direct Edits）

テキストの変更・画像の差し替え・細部の調整を、Stitch内で直接行えるようになりました。ローンチ当初から最も要望が多かった機能の一つです。

DESIGN.md：デザインシステムの持ち運び

今回のアップデートで地味に重要な機能がDESIGN.mdです。

StitchはDESIGN.mdファイルによってフォント・スペーシング・カラー・コンポーネントスタイルを保持し、プロジェクト間・デザインと開発の引き継ぎ時・新しいStitchキャンバスへの移行時に、AIがデザインシステムをすぐに把握した状態で作業できます。複数プロジェクトで同じデザイントークンを毎回再構築していたチームにとっては、1日分のセットアップ作業がなくなります。

「既存のサイトやアプリからデザインルール（色・フォント・スペーシング）を抽出してDESIGN.mdに保存→次のプロジェクトでそのまま流用」という使い方が現実的になります。

開発ツールとの連携：MCP対応

GoogleはStitch用のSDKとMCPサーバーを提供しており、Antigravity・Gemini CLI・Claude Code・Cursorと連携できます。バイブコーディングとバイブデザインを組み合わせた開発フローが作れます。

実際の開発ワークフローとしてはこのような流れが想定されます：

Stitchでアイデアを出しながらUIを生成（バイブデザイン）
  ↓
Figmaにエクスポートして磨き込む
  ↓
Antigravity / Claude Code / Cursorで実装（バイブコーディング）

2026年の現実的なワークフローとして「Stitchでアイデアを探索→Figmaで洗練→Antigravityで開発」という流れが広まりつつあります。

料金：無料で使えるか

ベータ期間中は無料で利用できます。標準モード（Gemini 2.5 Flash）で月350回生成、プロモード（Gemini 2.5 Pro）で月200回生成が可能です。160以上の国でアクセス可能で、ウェイトリストは通常数時間で承認されます。

モード	AIモデル	月間生成回数
標準	Gemini 2.5 Flash	350回
プロ（画像参照あり）	Gemini 2.5 Pro	200回

有料プランや永続的な料金体系はまだ発表されていません。Google Labsのベータとして公開されているため、今後変更される可能性があります。

Figmaとの関係：競合か補完か

Stitchの発表直後にFigmaの株価が8%下落し、AI時代のデザインツール市場の再編が本格化したことを印象づけました。

ただし、現時点では「競合というより補完」という見方が現実的です。

Stitchの最大の強みはアイデア探索のスピードです。漠然としたアイデアからクリッカブルなマルチスクリーンのプロトタイプまで、Figmaの新規ファイルをセットアップするより速く作れます。一方、最大の弱点は深さです。本番のデザインシステム・チームコラボレーション・ピクセルパーフェクトな仕上げにはFigmaが依然として必要です。

現状のベストプラクティスは「Stitchで初期アイデアを出す→Figmaで洗練する」という2ステップです。

実際の使い方：どう試せばいいか

アクセス方法
stitch.withgoogle.com にアクセス → Googleアカウントでサインイン → ウェイトリストに参加（数時間で承認）

プロンプト例
「SaaSの料金ページ。3つのプランを比較できるシンプルなデザイン。
Stripeのような信頼感と清潔感で」

コツ

最初から詳細な仕様を詰めようとしない（「バイブ」なので方向性を伝える）
参考にしたいサービス・サイト名を挙げると精度が上がる
複数のバリエーションを一度に出してもらい、気に入ったものをベースに調整する

IT Picks的な所感

「デザインツールは触ったことがない」「Figmaは難しそう」という人にとって、Stitchのバイブデザインはかなりの低い入口だと思います。ワイヤーフレームもグリッドも不要で、「こういう雰囲気で」という言葉から始められるのは、デザイン経験がない人にとっての壁を大きく下げます。

一方で、Slashdotなどの開発者コミュニティでは「感情や目標でデザインを作るなんて非現実的」「ローファイなプロトタイプにしかならない」という批判も根強くあります。この懐疑論は一定合理的で、本番品質のデザインシステムをStitchだけで完結させるのは現時点では難しいです。

IT Picksの読者層でいうと、個人開発者や副業でWebサービスを作っている方に最も刺さると思います。「デザインは苦手だけど、雰囲気だけ伝えてプロトタイプを作ってほしい」という場面で、Figmaの学習コストを払わずに動けるのは実用的なメリットです。今週のGoogle AI Studioのバイブコーディング強化とあわせて、「デザイン→開発」を一人でカバーできる環境がさらに整ってきた印象があります。