Google Stitch を使い始めて最初に試すのは、たいていテキストプロンプトだ。「ダッシュボードUI」「ログイン画面」——説明的に書いて、生成する。それで十分なことが多いし、私もずっとそうしていた。
でも Vibe Design という入力方法を試したとき、「これは全然違うアプローチだ」と思った。仕様を書くのではなく、感覚を書く。「こういう画面が欲しい」ではなく「ユーザーにこう感じてほしい」から始める——その発想の転換が、自分のデザインプロセスを少し変えた。
この記事は、Vibe Design を使い始めて感じた変化を、「まだ試していないけど気になっている」人に向けて正直に書いたものだ。
結論から言うと
Vibe Design とは、「完成形を説明するのではなく、ユーザーに感じさせたい体験・感情・雰囲気を出発点にしてデザインを生成する入力アプローチ」のことです。従来の「〇〇ページを作って」という機能仕様ベースのプロンプトと比べて、デザインの方向性探索フェーズで特に力を発揮する。
Vibe Design とは何か
2026年3月のアップデートで登場した新しい入力方法
Vibe Design は、Google が 2026年3月の Stitch 大型アップデートで導入した、AI との新しいインタラクション方式だ。Google は Vibe Design を「プロジェクトを始める根本的に異なるアプローチ」と説明している。ワイヤーフレームを先に描くのではなく、達成したいビジネス目標・ユーザーに感じてほしいこと・自分がインスピレーションを受けているものを起点に、Stitch が複数のデザイン方向性を生成する。
「Vibe（バイブ）」とは直訳すると「雰囲気・感覚・ムード」のことだ。「こういう雰囲気のUIが欲しい」という感覚的な入力を AI が解釈してデザインを生成する——それが Vibe Design の基本的な考え方だ。
従来のプロンプト入力と Vibe Design の違い
従来のプロンプト入力は、「何を作るか（What）」を記述する。
「SaaS のダッシュボード画面。左サイドバーにナビゲーション。メインエリアに折れ線グラフと KPI カード4枚。右上にユーザーアバターとベルアイコン」
これは要素の仕様書だ。作りたいUIの構造を説明している。
Vibe Design は、「なぜ作るか・どう感じさせたいか（Why・How it feels）」から記述する。
「チームの成果を毎朝確認するためのダッシュボード。数字を見るのが少し億劫なメンバーでも、『今日も頑張ろう』と前向きになれるトーン。清潔感があってデータが整理されている印象。参考：Notion や Linear のシンプルさ」
後者のプロンプトからは、感情・体験の方向性が伝わる。Stitch はこの「バイブ」を解釈して、雰囲気に合ったビジュアルを生成する。
実際に使って気づいたこと——変わった3つのこと
1. 「これじゃない」が減った
従来の仕様ベースのプロンプトで生成すると、「仕様は満たしているけど、なんか違う」という感覚になることがあった。カードの数も揃っている、グラフもある、ナビゲーションも正しい——でも「これじゃない」。
Vibe Design で「ユーザーに感じてほしいこと」を書いてから生成すると、その「なんか違う」が減った。自分でも言語化できていなかった「このUIが持っていてほしい雰囲気」を先に言語化する作業が、AI への指示精度を上げていたのだと気づいた。
つまり Vibe Design の価値は「AIへの指示方法」だけでなく、「自分の設計意図を言語化させる仕組み」にもある。
2. クライアントへの方向性説明がしやすくなった
Vibe Design で書いたプロンプト文章は、そのままクライアントへの「デザイン方針の言語化」として使えることに気づいた。
「ユーザーに感じさせたいこと：初めて使う人でも迷わない親しみやすさ。でも業務ツールとしての信頼感も持ち合わせている。参考サービス：Notion・Figma・Asana の中間くらいのトーン」
このような記述は、デザインブリーフの一部として機能する。スライドの「ビジュアルの方向性」スライドに書く文章として、そのまま使えた。Vibe Design のプロンプトを書く作業が、クライアントへの提案準備を兼ねるようになった。
3. 方向性探索が圧倒的に速くなった
デザインの初期フェーズで「どういう方向性にするか」を探るとき、従来は「パターンA」「パターンB」を別々に仕様化して生成する必要があった。
Vibe Design では「3つのデザイン方向性を提案して」という指示で、雰囲気の異なる複数のデザイン案を一度に生成できる。「ミニマル＆モノトーン系」「カラフル＆フレンドリー系」「コーポレート＆ダーク系」のような方向性の違いをAIが解釈して並べて出してくれる。
実際にこのアプローチで医療系スタートアップのアプリUIの方向性を探ったとき、「清潔感・安心感・でも冷たくない」というバイブを書き、3方向の提案を出させた。その中から「このトーンを使いたい」を決めるのに10分かからなかった。以前なら方向性決定に1〜2日かかっていたプロセスが大幅に短縮された。
Vibe Design の効果的な書き方
「ユーザーに感じてほしいこと」を3つの軸で書く
Vibe Design のプロンプトを書くとき、私が使っているフレームワークは「感情・参照・否定」の3軸だ。
感情（ユーザーにどう感じてほしいか）：「シンプルで迷わない」「プロ感があって信頼できる」「楽しくて少し遊び心がある」
参照（何を参考にしたいか）：「Notion のシンプルさ」「Apple のクリーンなデザイン」「Linear のテック感」のように具体的なサービス名を入れると精度が上がる。
否定（避けたいトーン）：「重くなりすぎない」「企業サイト感は出したくない」「派手すぎない」のように「やりたくないこと」を書き添えると、生成の方向性が絞られる。
この3軸を組み合わせたプロンプト例：「フリーランスのタイムトラッキングツール。ユーザーに感じてほしいこと：仕事管理が少し楽しくなる感覚。参考：Toggl・Harvest のトーン。避けたいこと：重たい業務システム感、カラフルすぎること」
「Vibe Design × Voice Canvas」の組み合わせが最強だった
Vibe Design で最初の方向性を生成した後、Voice Canvas（音声入力）で細部を調整するワークフローが最も効率的だった。
「もう少しヘッダーを軽くして」「この色のトーンをもう少し落ち着かせて」「フォントを細くして」——仕様ではなく感覚的な修正指示を声で伝えると、AI がリアルタイムでキャンバスを更新する。Vibe Design で方向性を言語化し、Voice Canvas で感覚的にチューニングする。この2つの組み合わせが、「自分の頭の中にあるUIを最速で形にする」フローとして機能した。
Vibe Design が向いていない場面
仕様が厳密に決まっているUIへの適用
Vibe Design は方向性探索フェーズで力を発揮するが、「この要素はこの位置に・このサイズで」という厳密な仕様が決まっている場合には、従来の仕様ベースのプロンプトの方が精度が高い。
たとえば「決済画面。カード番号フィールドは○○のフォーマットで、CVCは右横に、有効期限は△△のレイアウトで」というような正確な仕様が必要な場面では、Vibe Design の感覚的な記述では意図が正確に伝わりにくい。
Vibe Design と仕様ベースのプロンプトを「フェーズで使い分ける」——方向性を探るときはVibe、構造を固めるときは仕様ベース——という使い方が最も効率的だ。
FAQ
Q1. Vibe Design は Google Stitch のどこから使えますか？
2026年3月の Stitch アップデートで追加された機能です。stitch.withgoogle.com にアクセスして新しいプロジェクトを開始すると、プロンプト入力エリアで Vibe Design モードを選択できます。通常のテキストプロンプトと同じ入力欄から使えるため、特別な切り替えは不要です。
Q2. Vibe Design で日本語のプロンプトは使えますか？
はい、日本語でのバイブ記述も機能します。「ユーザーに安心感と信頼感を与えるUIで、清潔感がある中に少し温かみもあるトーン」のような日本語の感覚表現も、Stitch は解釈して生成します。ただし英語での記述の方が精度が安定している場面もあります。日本語と英語を混在させた「ユーザーに感じてほしいのは：清潔感・安心感・Calm and trustworthy」のような書き方も有効です。
Q3. 参照するサービス名を入れるとデザインがコピーになりませんか？
なりません。「Notion のシンプルさ」と書いた場合、Stitch は Notion のトーン・ニュアンスをインスピレーションとして解釈しますが、特定のページデザインをコピーするわけではありません。「○○のような雰囲気で」という表現は参照先サービスのビジュアル言語（余白の使い方・フォントのウェイト・色の選び方など）からインスピレーションを得る指示として機能します。
Q4. Vibe Design で生成したデザインを Figma にエクスポートできますか？
はい。Vibe Design で生成したデザインも、通常のプロンプト生成と同様に Figma へのエクスポートが可能です。Stitch の Figma エクスポート機能を使って、編集可能なレイヤー構造でデザインを取り込めます。ただし Figma 側での整理（コンポーネント化・レイヤー命名）は手作業で行う必要があります。
Q5. Vibe Design は Stitch の無料プランでも使えますか？
はい。2026年4月時点で Google Stitch は完全無料で、Vibe Design 機能も無料で利用できます。毎月 350 回（Gemini 2.5 Flash 使用の Standard モード）の生成が無料で提供されています。Vibe Design の生成も通常プロンプトと同じカウントで消費されます。
Q6. 「インスピレーション画像」を使った Vibe Design はできますか？
はい。Stitch の無限キャンバスは「マルチモーダル入力」に対応しており、テキストだけでなく画像をキャンバスにドラッグ＆ドロップして「この画像のようなトーンで作って」というバイブ入力ができます。参考にしたいWebサイトのスクリーンショット、ムードボードの画像、カラーパレットの写真などをキャンバスに置いて、それをバイブの参照として使うと、テキストだけでは伝えにくい視覚的な方向性を正確に伝えられます。
注意点・失敗しやすいポイント
1. バイブが曖昧すぎると方向性が定まらない
「かっこいい感じで」「おしゃれな雰囲気で」のような抽象的すぎるバイブ記述では、Stitch が解釈に困り、意図と違うデザインが生成されやすい。「誰にとって・どんな場面で・どう感じてほしいか」を具体的に書くことが精度を上げるポイントだ。
2. Vibe Design の結果が「毎回変わる」ことを前提にする
同じバイブを入力しても、生成のたびに若干異なるデザインが出てくる。Stitch の生成には確率的な変動があるため、「完全に再現性のある出力」を前提にしないこと。気に入ったデザインが出たらすぐに保存・エクスポートしておく習慣をつけると良い。
3. Vibe Design だけで細部まで仕上げようとしない
Vibe Design は方向性・トーンの設計に強く、具体的なコンポーネントの正確な配置には弱い面がある。方向性が決まったら、そこから先は仕様ベースのプロンプトで細部を詰める「ハイブリッドアプローチ」が最も完成度が高い。
まとめ
Google Stitch の Vibe Design を使い始めて変わったのは、「デザインを説明する前に、体験を言語化する」という習慣ができたことだ。
「何を作るか」を先に考えていた自分が、「ユーザーにどう感じさせたいか」を先に考えるようになった。これはツールの機能変化ではなく、設計の思考プロセスの変化だ。Vibe Design というアプローチが、そのきっかけになった。
まだ試していない人は、次のプロジェクトで「最初の1プロンプト」を Vibe Design で書いてみてほしい。「感覚を言語化する作業」が、意外と楽しいことに気づくはずだ。
