Google Stitch で vibe design：見事な点と、あなたを罠にかける点

Google が「vibe design」という言葉を打ち出したとき、それを体現したのは一つのプロダクトだった。プロンプトを UI に変える AI ツール、Stitch である。これは立ち止まって考える価値がある——あなたが検索したその言葉は、その大部分が Google のローンチに端を発しているのだ。だから正直に問うべきは、抽象的な「vibe design とは何か」ではない。「あなたが土台にすべきは Google 版なのか」である。私はあらゆる vibe design ツールに対して回しているのと同じ実際のブリーフで Stitch を試した。その答えは、率直に言ってとても良い、そしてここからが「あなたのもの」でなくなる地点だ、というものだった。

先に正直に言っておく。私たちはこの同じ領域のオープンな側に位置する Open Design を作っている。だからこの比較はその前提で読んでほしい——とはいえ以下の称賛は本物だ。Stitch を悪く言って取り繕えば、それは私の信頼を損なうだけだからだ。

Stitch とは実際のところ何か

Stitch は Google のプロンプト・トゥ・UI ツールだ。画面を言葉で説明する——あるいは Voice Canvas を通じて話しかける——と、自然言語で反復しながら作り込める、クリーンで驚くほど一貫性のあるインターフェースを生成してくれる。Figma 方向にも、フロントエンドのコード方向にもエクスポートでき、本稿執筆時点では Google Labs 内で無料だ。私たちの vibe design tools 総まとめの分類で言えば、「大手プラットフォーム系 AI」の中でも最強の一角である。速く、洗練されていて、Google のモデルが背後に控えている。

Stitch が見事にこなすこと

評価すべき点は評価しよう——Stitch は、vibe design を一度もやったことがない人に渡したいツールだ。

• プロンプト・トゥ・UI の品質。 最初の画面が本当に使える。初期の AI モックアップが寄越してきた lorem-ipsum まみれの代物ではない。Google のモデルの実力が見える。
• 速さと値段。 アイデアから説得力のある画面まで 1 分足らず、しかも無料。方向性を探るうえでは、なかなか敵わない。
• Voice Canvas。 UI を話して生み出すなんてギミックめいて聞こえる——声に出して考えながらレイアウトを手も使わずに作り替えるまでは。ここで一番新しさを感じる部分だ。
• エクスポート経路が存在する。 モックアップで終わりだとは言い張らない。Figma とコードへ引き渡してくれる。これだけでも、絵のところであなたを置き去りにするツールより一歩先を行っている。

今日のあなたの仕事が「この画面の方向性を見せてくれ」なら、Stitch は素晴らしい答えだ。お世辞抜きでそう思う。

どこであなたを罠にかけるか

ここからがローンチデモの飛ばす部分であり、これを土台にするかどうかを決める部分だ。Stitch のどの罠も、結局は同じことの言い換えである——その利便性は、あなたが Google の壁の内側にとどまり続けることを前提にしている。

• 引き渡しはエクスポートであって、パイプラインではない。「Figma/コードへエクスポート」は所有しているように聞こえるが、それは一方通行の吐き出しだ——手に入るのは成果物であって、生きた連携ではない。Stitch で再生成すれば、下流での編集は付いてこない。(そのギャップがなぜ痛手になるのかは vibe design vs vibe coding がまるごと物語っている。)
• 真実の源はあなたのデザインシステムではない——Google のモデルだ。 Stitch は、あなたのトークンやコンポーネントからではなく、それ自身の「良いデザイン」の感覚から生成する。複数の画面にわたると、こうして design drift(デザインのズレ)が忍び込む。出力のひとつひとつはもっともらしいが、どれもあなたのシステムに固定されていない。
• これは Google のサーフェスだ。 ロードマップ、価格、データ、提供可否は Google の裁量だ。「Labs で無料」は素晴らしい一文だが、賞味期限が短い。Labs プロダクトの上にチームのワークフローを築くのは、他人の四半期に賭けるのと同じである。

これで Stitch がダメになるわけではない。Google のものになるだけだ——出力やワークフロー、デザインシステムを自分のものにしたいその瞬間が来るまでは、それで問題ない。

Stitch とオープンな道

では、利便性が勝つのはいつで、所有が勝つのはいつか。私ならこう判断する。

Stitch に手を伸ばすべきは、探索・プロトタイプ・vibe design の学習をしているとき。出力が、維持すべきシステムではなく、反応するための方向性であるとき。「Google の中で無料で速い」がまさに望むトレードオフであるとき。これは見事なスケッチパッドだ。

オープンな道に手を伸ばすべきは、出力が「あなたが所有するプロダクト」にならなければならないとき——あなたのデザインシステムに配線され、diff を取って保持できるファイルとして生き、すでに回しているエージェントとパイプラインで駆動されるプロダクトに。それこそ Open Design が打っている賭けだ。壁に囲まれたツールの外へエクスポートする代わりに、デザインシステムは持ち運び可能な DESIGN.md であり、デザインもコードもそれに従う。だから途中に一方通行の扉を挟むことなく、vibe はプロンプトから出荷まで生き残る。

「Stitch か無か」ではない。多くのチームは Stitch でスケッチし、ビルドは別の場所で所有するだろう——どちらのツールがどちらの半分を担っているかを把握している限り、それは完璧に良いワークフローだ。

Stitch をうまく使う方法

もし手を伸ばすなら、行き詰まらずに最大限活かすには次のとおり。

• システムのためではなく、方向性のために使う。 選択肢を生成し、ひとつ選び、それからエクスポートを最終形として扱うのではなく、本物のデザインシステムに対して作り直す。
• 制約をプロンプトに貼り付ける。 あなたのトークンファイルは読んでくれない。だからパレット・余白・コンポーネントの言語を手作業で食わせて、ズレと戦う。
• エクスポートは出発点として扱う。 Figma/コードの出力は、自分のものにしてリファクタリングするためのドラフトであって、出荷する成果物ではない。

FAQ

Google Stitch は無料ですか？ 本稿執筆時点では Google Labs 内で無料だ。Labs の提供可否と価格は Google が変えられるので、無料であり続けるという前提で長期的なチームのワークフローを築かないこと。

Stitch は Figma にエクスポートできますか？ できる——Stitch は Figma とフロントエンドのコードへエクスポートする。ただし一方通行の引き渡しとして扱うこと。Stitch で再生成しても、下流での編集は戻ってこない。

Stitch は vibe design と同じものですか？ Google は Stitch で「vibe design」を広めたが、その考え方はひとつのツールより大きい——what is vibe design を参照。Stitch は大手プラットフォーム系の(とても良い)実装のひとつだ。

Stitch と Open Design は？ Stitch は Google による、速く・無料・壁に囲まれたスケッチパッド。Open Design は、ループ全体を持ち運び可能なファイルで所有するための、オープンでエージェントネイティブな道だ。賭けが違う——スケッチか、出荷して所有するか、である。

まとめ

Google は Stitch を出荷することで「vibe design」を誰もが知る言葉にした。そして Stitch はその注目に値する——意図でデザインするための、見つかる中で最良の無料の入り口だ。ただし壁ははっきり見ておくこと。エクスポートは一方通行の扉であり、真実の源はあなたのデザインシステムではなく、ロードマップは Google のものだ。探索には、見事に使えばいい。仕事が「あなたが所有して出荷するもの」にならなければならないとき、そこから先を引き継ぐのが Open Design だ——あなたのエージェント、あなたのファイル、他人のプロダクトから出ていく扉はない。