Google Stitch — 「デザインツール作っちゃいました」が想像以上にちゃんとしていた

GoogleがUIデザインツールを出した、と聞いたとき、正直なところ「またLabsの実験でしょ」と思った。Google Labsから出てくるプロダクトは面白いけれど、そのまま消えていくことも少なくない。NotebookLMのように化けるものもあれば、静かにクローズされるものもある。

ところがStitchは、触ってみると「あ、これはちゃんと作ってるな」という手触りがあった。

Stitchとは何か

Stitchは、Google Labsが開発したAIネイティブのUIデザインツールだ。テキストプロンプトを入力すると、モバイルアプリやWebアプリのUIを数秒で生成してくれる。手描きのスケッチやスクリーンショットをアップロードして、それをデジタルUIに変換することもできる。

裏側ではGemini 2.5 Proのマルチモーダル機能が動いている。2025年5月のGoogle I/Oで初めて発表され、同年12月にGemini 3との統合でプロトタイピング機能が追加された。そして2026年3月のアップデートで、AIネイティブキャンバス、Voice Canvas、マルチスクリーン生成と、一気に機能が拡充された。

無料で使える。Google Labsの実験プロジェクトという位置づけだが、Standardモードで月350回、Experimentalモードで月50回の生成が可能だ。

「Vibe Design」という新しいアプローチ

Stitchが提唱しているのが「Vibe Design（バイブデザイン）」というコンセプトだ。従来のワイヤーフレーム設計とは違い、「こういう雰囲気のデザインにしたい」という感覚的な指示でUIを生成する。

たとえば「Stripeのようなプレミアムでミニマルな感じ」とか「Duolingoみたいにポップでカラフル、Z世代向け」といったプロンプトを投げると、そのバイブに沿った複数のデザイン方向性を提示してくれる。デザインの言語化が苦手な人にとって、これはかなり助かる機能だと思う。

ただし「バイブ」で伝わるのは雰囲気であって、情報設計やユーザーフローの緻密さではない。ここは後述する弱点にもつながる。

触ってみて感じた強み

まず生成速度が速い。プロンプトを入れてから数秒でハイファイデリティのUIが出てくる体験は、初めて触ったとき素直に驚いた。v0やLovableも速いが、Stitchのデザイン品質は一段上だと感じる場面が多い。色の使い方、余白のバランス、コンポーネントの配置が「それっぽい」のではなく「ちゃんとしている」。

無限キャンバスのUI設計も好印象だ。2026年3月のアップデートで導入されたAIネイティブキャンバスは、初期のアイデアスケッチからワーキングプロトタイプまで、ツールを切り替えずに一つの画面で作業を進められる。FigmaのFigJamとデザインファイルを行き来するあの煩わしさがない。

マルチスクリーン生成も実用的だ。「フードデリバリーアプリのログイン→ホーム→店舗一覧→カート→決済画面」のように、アプリ全体のフローを一度に記述すると、最大5画面を一括生成して自動的につないでくれる。テキストプロンプトからクリック可能なプロトタイプが数分で出来上がる。この速さはプロトタイピングの文脈では圧倒的だ。

Voice Canvasも新しい試みだ。キャンバスに向かって音声で指示を出すと、AIエージェントが質問を返しながら、リアルタイムでデザインを更新していく。「ヘッダーの色をもう少し落ち着いた感じに」「このカードのレイアウトを2カラムに変えて」といった指示が声でできる。キーボードとマウスから手を離して、デザインと対話する感覚は新鮮だった。

コード出力とエコシステム連携

デザインツールとしてだけでなく、コード生成ツールとしての側面も見逃せない。StitchはHTML/CSSのクリーンなコードを生成するほか、Tailwind CSS、Vue.js、Angular、Flutter、SwiftUIなど主要なフロントエンドフレームワーク向けのコード出力に対応している。

Figmaとの連携は「Copy to Figma」ボタン一つでレイヤー構造を保持したまま貼り付けられる。Figmaで細部を詰めるワークフローが想定されているわけだ。

開発者向けにはMCPサーバーも提供されており、Gemini CLI、Claude Code、Cursorといったコーディングエージェントと接続できる。さらにStitch SDKがGitHubで公開されていて、プログラマティックにUIを生成してHTMLやスクリーンショットを取得するといった使い方も可能だ。

DESIGN.mdというエージェントフレンドリーなMarkdownファイルでデザインシステムをエクスポート/インポートできる機能も追加された。デザインルールを他のツールとやりとりする仕組みとして、地味だが実用的なアプローチだと思う。

v0、Lovableとどう棲み分けるか

ここが一番気になるポイントだろう。結論から言うと、Stitchは「デザイン品質」に特化している。

v0はVercelが作っているだけあって、生成されるReact/Next.jsコンポーネントのコード品質がずば抜けている。プロダクションにそのまま持っていけるレベルのコードが出てくる。ただしデザインのバリエーション探索やビジュアルの洗練という点では、Stitchに軍配が上がる。

Lovableは「コードを書かずにアプリを完成させる」というゴールに最適化されている。バックエンドの配線まで含めて、アイデアからデプロイ可能なプロダクトまで最短距離で到達できる。ノンエンジニアやインディー開発者にとっての選択肢だ。

Stitchはその中間ではなく、入り口を担当している。「まずデザインの方向性を固める」フェーズで最も威力を発揮する。StitchでデザインをFigmaに出力し、v0でコンポーネントコードに変換し、Lovableで動くプロダクトにする——というワークフローを組む人も出てきている。

無料で使えるという点も大きい。v0もLovableも本格的に使おうとするとサブスクリプションが必要になるが、Stitchは月350回の生成制限内であれば完全に無料だ。デザイン探索のコストがゼロになるインパクトは小さくない。

微妙なところ、正直に

デザイン品質は高いが、出力のバリエーションがプロンプトの書き方に強く依存する。曖昧な指示だと汎用的でどこかで見たことのあるUIが出がちだ。「映画チケット予約アプリ」とだけ入力すると、きれいだけど個性のないデザインになる。具体的な形容詞、参考にしたいブランドの名前、ターゲットユーザーの属性まで言語化しないと、Stitchのポテンシャルを引き出せない。

アニメーションやインタラクションの表現は弱い。ホバーエフェクト、トランジション、マイクロインタラクションといった「動き」のある要素は生成されない。静的なUIデザインの域を出ないので、インタラクションデザインまで含めたプロトタイプを作りたいなら、結局FigmaやFramerに持っていく必要がある。

リアルタイムコラボレーションも現時点では非対応だ。チームで同時にキャンバスを編集することはできない。Google Docsのような同時編集体験をGoogleなら作れるはずで、ここは今後のアップデートに期待したい。

もう一つ気になるのは、Google Labsという位置づけだ。Labsプロジェクトはいつ終了するかわからない。Stitchにデザインシステムやフローをためこんでいたのにサービスが終了しました、となるリスクはゼロではない。重要なアセットはFigmaへのエクスポートを忘れないほうがいい。

どんな人に向いているか

Stitchが刺さるのは、「コードは書けるけどデザインが苦手」というエンジニアだ。プロンプトでデザインの方向性を伝えるだけで、プロフェッショナルなUIが手に入る。Figmaの操作を覚える時間をスキップできる。

スタートアップの初期段階で、デザイナーを雇う前にプロトタイプを量産したい場面にもフィットする。投資家向けのデモ、ユーザーインタビュー用のモックアップ、社内での方向性確認——こうした「本番じゃないけど、それっぽく見せたい」需要にはぴったりだ。

逆に、プロのUIデザイナーがメインツールとして使うには早い。ピクセル単位の調整、デザイントークンの厳密な管理、複雑なコンポーネントのバリアント設計——こうした作業はまだFigmaの独壇場だ。

Googleの本気度

Stitchの進化速度を見ていると、Googleはこのプロダクトにかなりリソースを割いているように見える。2025年5月の発表から1年足らずで、AIキャンバス、Voice Canvas、マルチスクリーン生成、MCP対応、SDKの公開と、機能追加のペースが速い。

FigmaがAI Design Development MCPで開発者との橋渡しに踏み出した矢先に、Googleがデザインの入り口をAIで塗り替えにきている構図は面白い。デザインツールの勢力図が変わるかどうかはまだわからないが、少なくとも「UIデザインの最初の一歩」に関しては、Stitchが現時点で最も手軽で、最も出力品質の高い選択肢の一つだと思う。

気になった人はstitch.withgoogle.comで試してみてほしい。Googleアカウントがあればすぐに使える。無料だし、失うものは何もない。