GoogleのUI生成AIツール「Stitch」を試してみた
こんにちは！運用イノベーション部の大野です。
最近ひょんなことから知り合ったカナダ在住エンジニアの方に、「UI作成ならStitchが便利」というお話を伺いました。
...が恥ずかしながら「Stitch」について全くの無知だったため、軽くですが実際に触って確かめてきました。
今回はその感想を共有させていただきます。
Stitchってなんだ？
Stitchとは、Google Labs提供のUIデザイン生成支援用AIツールです。
2025年5月に行われた「Google I/O 2025」にて発表されました。
自然言語や画像を入力として与えることで、AIによってWebやモバイル画面のUIを生成してくれる機能を持っています。
また、生成したUIをHTMLコードとして表示することや、Figmaに直接エクスポートすることが可能です。
UI生成可能なAIツールは他にも多数存在しますが、以下の点においてStitchに優位性がありそうです。
- 完全無料：現時点（2025/10/16）においては利用料金が一切発生しません。（月当たりの入力プロンプト数制限はあり）
- 搭載モデルが優秀：AIモデルとして、Googleのビッグデータで学習されたマルチモーダルLLMの「Gemini 2.5 Pro」もしくは軽量版の「Gemini 2.5 Flash」を選択することができます。
月当たりのプロンプト数制限についても「Flash：350回」、「Pro：200回」のため、個人開発などライトに使用する分においては比較的余裕のある値となっているのではないでしょうか。
また制限値はリリース初期から段階的に引き上げられているようですので、今後も更に増加される可能性ありです。
事前準備
使用前に事前準備を済ませておきましょう。
まずは以下ページにアクセスします。（※事前にGoogleアカウントの作成が必要です）
Stitchのトップ画面が表示されます。
日本語対応なのが嬉しいですね。
早速UI生成！...と行きたいところですが、まずはオプトアウトの可否を設定しましょう。（重要）
トップ画面右上のプロフィールアイコン > Stitchの設定 > 設定画面 から「AIモデルのトレーニングを許可する」のチェックを外すことで、入出力データが学習に使用されなくなります。
デフォルトで許可状態となっているため、学習されたくない情報を使用する可能性がある場合は必ずチェックを外しましょう。
ついでですが、使用量もこの画面で確認可能です。
次に、使用するモード（モデル）を選択します。
入力プロンプトに画像を使用したい場合は「Experimental Mode（試験運用モード）」を選択する必要があります。
また、生成されたUIをFigmaにエクスポートしたい場合は「標準モード」を使用する必要がありますのでご注意ください。
今回はExperimental Modeを使用します。
更に今回は検証のために、極シンプルな2画面のみの物体検出Webアプリを用意しました。
●画像アップロード画面
●結果表示画面
素のHTMLの状態から、Stitchを利用することでどんなUIが実装できるのかを確認します。
以上で事前準備は完了です。
使ってみた
では実際に使ってみましょう！
まずは以下プロンプトを実行してみました。
ブラウザにアップロードした画像に対してバックグラウンドで物体検出処理を行い、バウンディングボックスを付与した画像を画面上に返却するアプリを作りました。
画像アップロード画面と結果表示画面のUIを生成してください。
以下が実行結果です。
●画像アップロード画面
●結果表示画面
色使いや雰囲気については全く指示していませんが、ダークテーマのスタイリッシュなUIが生成されました！
デザインとしてはカッコ良くて気に入りましたが、今回のアプリには各画面右上のボタン2つが不要です。
また、結果表示画面に「アップロード画面に戻るためのボタン」を付けて欲しいので、追加でプロンプトを入力します。
結果表示画面の左下に、アップロード画面に戻るためのボタンを配置してください。
それと同時に、各画面右上の2種類のボタンは不要のため削除してください。
実行結果です。
元のレイアウトを崩すことなく、不要ボタンの削除と「Back to Upload」ボタンの設置が実行されました！
これでUIのイメージ作成は完了したので、アプリ側に実装してみようと思います。
生成されたUIのコード（HTML）を取得します。
イメージのツールバーから「View Code」を選択
UIのHTMLが表示されます。
この画面からコードのコピーが可能で、標準モードであればFigmaへのエクスポートも行えます。
また、前画面で「Download」を選択することでローカルへのダウンロードも可能ですので、お好きな方をご選択ください。
取得したHTMLと既存のHTMLを統合します。
バックエンドの処理はClaudeCode（Sonnet4.5）さんにお任せしてサクッと調整してもらいました。
（本筋ではないので割愛します）
その結果...質素だった画面が見違えるように洗練されました・・・！
まとめ
モック制作には非常に有用なツールだと感じました！
また個人的に、今までUI生成ツールをほとんど使用したことがなかったため、AIの有用性を再認識できる良い機会にもなりました。
今回のように、「とりあえずアプリは作ったけどUI実装が面倒だな・・・」という場面は多々あるかと思いますが、そんな時に画面毎の機能を自然言語で入力するだけでイイ感じのUIを一から作成してくれるのは便利ですね。
その反面、独自性が求められるプロダクトや、ピクセル単位まで仕上がりを見られるようなコーポレートサイトなどには不向きかと思います。
また10画面以上あるような規模になるとStitchだけでは管理が難しくなりますので、あくまでプロトタイプ作成用と割り切った使い方が良さそうです。
まだBeta版であり、今後も機能拡充が期待されるサービスですので、更新あればまた共有させていただきます！
以上、大野でした！
