Googleの「Stitch」から読み解く、効率化するAIとデザイナーの価値

Googleの「Stitch」から読み解く、効率化するAIとデザイナーの価値
  • X
  • Facebook
  • note
  • hatena
  • Pocket

 デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックを解説する本連載。今回はGoogleのUIデザインツール「Stitch」についてです。

Stitchが描き出す新しいUIデザインの風景

 こんにちは!Cosmowayが組織するデジタルプロダクション「factory4」のUI/UXデザイナー新谷です。今回はGoogleのAIを活用したデザインサービス「Stitch(8月の時点でBETA版)」にフォーカス。UI/UXデザインの観点から、実践的に読み解いていきたいと思います。

出典:Stitch - Design with AI
出典:Stitch - Design with AI

 デザインの仕事をしていると、時折こう思うことがあります。「このラフスケッチが、そのままコードとして立ち上がってくれればどれほど効率的だろう」と。Google I/O 2025で発表された新ツール「Stitch」は、まさにそんな私たちの願望を形にした存在かもしれません。テキストや画像などのプロンプトを「縫い合わせる」ようにして、UIデザインとフロントエンドコードを一気に自動生成してしまう。名前のとおり、散らかったアイデアをひと針でまとめてくれる、そんな印象を受けました。

「Stitch」の概要と特徴

1. テキストプロンプト生成

「ログイン画面をミニマルに」「ダークテーマで、カード型にして」と打ち込むだけで、それらしく組み立てられたUIが提示されます。さらに細かく指定すれば、まるで「口述デザイン」のように精緻さが増していく。おもしろいのは、曖昧な指示にもある程度応答する部分。人間同士の会話で伝わるニュアンスを、デザインに落とし込む能力はとても興味深いです。

2. 画像入力による変換

手描きのラフやFigmaのスケッチを読み込ませると、自動でレスポンシブなUIに変換してくれます。雑に描いた四角形が、しっかりしたカードUIになって返ってくる瞬間はなかなか感動的です。しかも単なる「清書」ではなく、モバイル/タブレット/PCそれぞれに最適化したレイアウトを提示してくれます。

3. バリエーション提示

「可愛く、ポップなテイスト」と伝えると、配色・レイアウト・タイポグラフィの静的差分を示してくれます。アニメーションなどのインタラクションは付与できませんが、従来なら時間のかかる方向性の分岐を数分かつ横並びで比較できるのは実務的なメリットです。

4. 出力先の柔軟性

生成された「HTML」や「CSS」、Figmaのデータを書き出すことも可能です。既存のワークフローに違和感なく組み込める柔軟さが大きな魅力。静的なデータながらソースをダウンロードし、その場でブラウザから確認できます。

 「デザインから実装までの分断をいかに埋めるか」という課題は業界における長年の悩みですが、Stitchはそれを短縮する「ショートカット」として機能するポテンシャルを持っています。

Stitchの技術的背景とは 既存AIツールとの違いにも注目

 Stitchの裏側では、Google DeepMindの最新マルチモーダルモデルが走っています。テキスト理解と画像認識を掛け合わせ、生成UIをDOM構造やWidgetに落とし込む仕組みです。「プロンプト→レイアウト推論→デザインシステム適用→ コード変換」というパイプラインで、数時間分の作業を数分に圧縮できます。

 ただし生成されたデザインはGoogleの既存コンポーネントやスタイルを参考に、実用水準を意識した設計になっているものの、アクセシビリティやMaterial Designのガイドラインに準拠したつくりにはなっていません。このあたりは課題に感じました。

 また、既存のAIツールとの違いも注目すべき点です。GitHub Copilotが「コードを生成する相棒」であるなら、Stitchは「デザインからコードまでの橋渡し役」。FigmaのAI補助機能が「デザイン作業を支援」するのに対し、Stitchは「実装を意識したデザイン出力」を特徴としています。つまり、デザインと開発をシームレスにつなぐツールという位置付けです。

 また以前の記事で紹介した「v0.app(旧v0.dev)」は、Vercelが開発した「プロンプト→コードでそのまま実装可能なReact UI」を生成するAIツールです。v0独自の「Generative UI」アプローチ(テキスト記述でUIを生成)を採用し、React + Tailwind CSS + shadcn/ui の構成で、GitHubとの連携やワンクリックデプロイも視野に入っています。さらにv0は、「agentic AI」と呼ばれる思考・計画支援まで行う自律的なUI構築支援にまで進化しています。プロンプトを与えれば、UI設計だけでなく、実装・検証・修正・デプロイまでを自動化してくれる点が大きな特徴です。

出典:v0 by Vercel
出典:v0 by Vercel

 どちらも「プロンプトからUI→コードを自動生成するツール」という点で共通しますが、Stitch は「デザイン志向」の初期構成作成が強みであり、v0.appは開発・リリースワークをシームレスにする点で秀でています。今後は、使い分けの眼やツールチェーン設計の判断軸も、デザイン組織に求められることになりそうです。