今話題のUI(ユーザーインターフェース)生成AI｢Stitch｣を使ってみた｜辛口評価

Stitchとは

Stitch（ステッチ）は、Google Labsが提供するUIデザイン生成支援用AIツールです。

2025年5月の「Google I/O 2025」で発表されました。デザイナーや開発者でなくても、テキストや画像などの入力から、ウェブやモバイルアプリケーションのUI（ユーザーインターフェース）を自動で生成できるのが主な特徴です。

Stitchの主な特徴と機能

自然言語からのUI生成

作りたいアプリケーションの目的、機能、デザインテーマ、レイアウトなどの
詳細を自然言語（英語推奨）で記述するだけで、対応するUIデザインを生成します。

画像やワイヤーフレームからのUI生成

手書きのスケッチ、既存UIのスクリーンショット、ラフなワイヤーフレームなどの
視覚的入力を解析し、デジタルUIに変換できます。

Geminiモデルの活用

GoogleのマルチモーダルLLMである
「Gemini 2.5 Pro」または軽量版の「Gemini 2.5 Flash」を選択して利用できます。

デザイン資産の活用

生成されたUIは、そのままFigmaに貼り付けたり、
HTML/CSSコードとしてエクスポートしたりすることが可能です。
これにより、デザインから開発への移行がスムーズになります。

迅速な反復とデザイン探索

複数のデザインバリエーションを同時に生成したり、
リアルタイムでの調整を行ったりすることで、
デザインの検討プロセスを加速します。

やってみる

Stitchがどんなものなのか試しに、架空の広告代理店の企業ホームページUIを作成してもらいます。

プロンプト

広告代理店の企業ホームページを日本語で作成。
会社名は「Creative Wave（クリエイティブ・ウェーブ）」。
ターゲットはベンチャー企業と大手企業のマーケティング担当者。
デザインテーマは「モダンで洗練された、信頼感のあるデザイン」。
配色：メインカラーはディープブルー（#003366）とアクセントカラーにブライトオレンジ（#FF6600）。
構成：
1. メインビジュアル：都会的な風景の高品質な写真または抽象的な波のアニメーション。
2. サービス紹介セクション：戦略立案、クリエイティブ制作、デジタルマーケティングの3項目をアイコン付きで横並び。
3. 実績紹介セクション：成功事例のカルーセル表示。
4. 会社概要：シンプルに概要と沿革。
5. お問い合わせボタン（目立つように右上とフッターに配置）。
レスポンシブデザインに対応。

言語の指定

ページ構造

レスポンシブ対応

デザイン

サイズ

プロンプト2(指示を追加)

広告代理店の企業ホームページを日本語で作成。
会社名：Creative Wave
ターゲット：大手企業のマーケティング担当者
テーマ：モダンで洗練された、
信頼感のあるデザイン
配色：メインカラーはディープブルー（#003366）とアクセントカラーにブライトオレンジ（#FF6600）。

構成：
1. メインビジュアル：都会的な風景の高品質な写真または抽象的な波のアニメーション。
2. サービス紹介セクション：戦略立案、クリエイティブ制作、デジタルマーケティングの3項目をアイコン付きで横並び。
3. 実績紹介ページ：成功事例のカルーセル表示。
4. 会社概要ページ：シンプルに概要と沿革。
5. お問い合わせページ：目立つように右上とフッターに配置。
6.レスポンシブデザインに対応。
7.ページ構造：マルチカラム
8.1ページにヘッダー･メイン･フッター
9.ヘッダーのデザインを統一。
10.ページサイズ：PC => 1920x900 ,
SF =>  420x900

なんかもう、面倒くさくなってきたので、結論。

結論

2025年10月17日時点では、Figmaでいいかなぁ…
まだ、ベータ版のようなので今後に期待！

でも、ざっくり作りたい時はstitchで作って、Figmaに落とし込めば調整できるからおすすめではある。