Google I/O 2025発表の「Stitch」を触ってみた
はじめに
先日開催されたGoogle I/O 2025でGoogleが「Stitch」という新しいUI生成ツールを発表しました。
Stitchとは？
一言で言えば、画像やプロンプトをもとに、UIデザインとそのHTML/CSSを自動生成してくれるツールです。
主な特徴はこちらです。
- 言葉や画像からUIを生成: ユーザーが自然言語（テキスト）で「こんな感じのウェブサイトを作りたい」と説明したり、手書きのスケッチやワイヤーフレーム（設計図）の画像をアップロードしたりするだけで、Stitchがそれに基づいたUIデザインを生成する。
- HTMLとCSSの提供: 生成されたUIは、そのままウェブサイトやアプリの実装に利用できるHTMLとCSSのマークアップとして提供される。
- Geminiモデルの活用: Stitchの強力なコード生成およびインターフェースのアイデア出しは、Googleの最新AIモデルである「Gemini 2.5 Pro」と「Gemini 2.5 Flash」を用いられる。
- Firebaseとの連携: Stitchで作成したHTMLファイルをGoogleの「Firebase」サービスでデプロイすることで、作成したホームページやWebアプリを簡単に公開することができます。
実際に触ってみた
今のところまだBETA版のようですが、無料で使えるみたいなので実際に触ってみました。
Mobile用のデザインとWeb用のデザインが選択できたり、Experimental Modeに変えると画像からUI生成することができます。
※ googleアイコンを押下したらStitch Settingsがあります。ここにAIモデルに学習させるかどうかのチェックがあるので学習されたくない場合はチェックを外した方が良さそうです。
モードとしてはStandard ModeとExperimental Modeがあったので両方使ってどういったデザインが作られるのか確認してみました。
Standard ModeとExperimental Modeの特徴
| 特徴 | Standard Mode (標準モード) | Experimental Mode (実験モード) |
|---|---|---|
| 基盤モデル | Gemini 2.5 Flash | Gemini 2.5 Pro |
| 主な機能 | 自然言語（テキスト）からのUI生成 | 画像（スケッチ、ワイヤーフレームなど）からのUI生成 |
| 速度 | より高速 | Standard Modeよりは速度は劣るが、より高度な処理が可能 |
| 複雑性 | 比較的シンプルで素早いデザイン生成 | より複雑な視覚情報を解析し、高度なデザイン生成が可能 |
| 利用上限（無料） | 月間350回 | 月間50回 |
他の違いとして2025/05/24時点でStandard Modeでしかfigmaへのエクスポートができないみたいです。
Standard Modeを触ってみる
現在開発中のブロックチェーンアプリのUIをStitchに作らせてみました。
構成案はざっくりとChatGPTに作ってもらいました。
プロンプト
┌────────────────────────────┐
│ 💡 タイトル（投票DApp） │
├────────────────────────────┤
│ 🦊 ウォレット接続ボタン │
├────────────────────────────┤
│ 🗳 投票ボタン（A / B） │
├────────────────────────────┤
│ 📊 現在の投票数（A: 1, B: 2） │
├────────────────────────────┤
│ ✅ 投票済みの人への案内など │
└────────────────────────────┘
この構成でUIを作成して
結果
Web版
Mobile版
体感1-2分でデザインを作成してくれました。
何も指定しないと英語で作られるので、「日本語にして」とか言うと文言も日本語にしてくれます。
Edit Themeでダークモードかライトモード、デザインの色、ボタンの丸み、フォントの種類を変更できます。
作成されたデザインを押下するとダイアログが出て、Codeボタンを押下するとHTMLとCSS(Tailwind CSS)が表示されます。コードの質も特に問題なかったです。
Figmaボタンを押すとデザインがコピーされ、Figmaにそのまま貼り付けることができます。
※ BETA版だからなのか、ブラウザがChrome以外だとコードの表示やFigmaへのコピーができないのでChromeで使用することを今は推奨します。
単なる画像ではなく、構造もしっかり認識されているのがすごいですね。
Experimental Modeを触ってみる
次にExperimental Modeを触ってみます。とりあえずStandard Modeと同じプロンプトでやってどうなるか検証してみます。
結果
Web版
Mobile版
こちらも1-2分で生成してくれました。モデルが良いからなのか、Standard Modeよりリッチなデザインになっていますね。
Standard Mode同様にHTML,CSSは生成してくれますが、まだFigmaへのコピーができないのだけ残念なので今後に期待です。
最後に画像からデザイン作成も検証してみます。
検証に使うのはこちらのChatGPTのプロンプト入力フォームです。
ChatGPTのプロンプト入力フォーム
結果
若干テキストで入力するより生成が遅い気がしますが、それでもかなり早い速度で生成してくれます。
フォントが違っていたり、プロンプト入力の丸みが違うなど気になるところは多少ありますが、概ね問題なさそうです。
Stitchを使ってみた感想と今後の活用方針
実際に使ってみた感想として、簡単に、そして素早くそれなりのデザインができるのは大変ありがたいです。デザインが苦手なエンジニアにおすすめします。
今は、Standard Mode限定ですがfigmaに連携できたり、かなりの再現度で画像からデザインを生成してくれるのはすごいです。
ぜひ今後の個人開発では積極的にStitchを活用していこうと思います。
ただ、デザインのオリジナリティやブランドの独自性を追求する部分は、Stitchでは作れる部分ではないので、依然としてデザイナーさんの役割は重要だと思います。
将来的には、v0のようにReactやVueといったフレームワークへのコード出力にも対応してくれると、さらに活用の幅が広がりそうで楽しみです。
ここまで読んでいただき、ありがとうございました。
Discussion