Googleの新UI生成AI「Stitch」を触ってみた――Figma要らずの時代到来？
2025 年 5 月の Google I/O で発表された「Stitch」は、テキストでの指示や手描きスケッチを読み取り、わずか数十秒で高品質な UI モックアップと対応コードを生成してくれる新しい生成 AI ツールです。Figma やフロントエンド開発の経験がなくても、アイデアをその場でアプリ画面に落とし込める点が大きな注目を集めています。
Stitchとは？ 3行でわかる概要
- テキスト1行からUI生成…“レシピ共有アプリのトップ画面をミニマルデザインで”と打つだけで複数案を提示。
- Geminiエンジン搭載…Google最新のマルチモーダルAI「Gemini 2.5 Flash/Pro」が要件を解釈し、レイアウトとコードを書く。
- Figma & コード同時出力…ワンクリックでFigmaに貼り付け、HTML/Tailwind CSSコードも取得可能。
テキスト→モックアップ デモ
公式デモでは「ショッピングカート画面を白黒ミニマルで」と入力後、20 秒足らずで 3 つのデザイン案が生成されました。各案はボタン配置やフォントが微妙に異なり、好みの物をクリックすると詳細表示とコードタブが開きます。コードをコピーしローカルで開くと、即座に動く UI が確認できました。
生成後はチャット形式で「商品カードに “Add to Cart” ボタンを追加」「価格を赤字で強調」のように指示すると、数十秒で修正版が再生成されます。この反復プロセスにより、デザイン経験ゼロでもブラッシュアップが可能です。
Gemini連携ワークフロー
- モード選択…高速な「Flash」か精度重視の「Pro」を選ぶ。
- プロンプト入力 / 画像アップロード…要件を英語で入力、もしくは紙スケッチをアップロード。
- UI & コード生成…Gemini がレイアウト決定→HTML/Tailwind CSS を出力。
- Figma連携…「Paste to Figma」ボタンでレイヤー構造つきで貼り付け。
- 実装へ橋渡し…エンジニアは生成コードをリポジトリにプッシュし、機能実装を開始。
Gemini は UI パターンやユーザビリティのベストプラクティスを学習済みで、プロンプトの文脈に合わせてコンポーネントを自動配置します。たとえば “ダッシュボード” と書けばカード＋グラフ＋サイドバーを、 “チャットアプリ” と書けばメッセージバブル＋入力欄を配置するなど、場面に応じた定石レイアウトを即座に提案してくれます。
利用条件・料金・制限
| 項目 | 内容 |
|---|---|
| 提供形態 | Google Labs の無料ベータ版（ブラウザ利用） |
| 対応言語 | プロンプトは英語推奨（日本語も可だが意図が伝わりにくい場合あり） |
| 地域制限 | Google アカウントが使える国なら原則利用可 |
| 生成制限 | 一度に生成できるのは 1 画面。複数画面の一括生成はロードマップ段階 |
| API | 現時点で非公開。将来の Gemini API 経由提供が示唆 |
商用利用ライセンスについては正式リリース時に改めて告知予定とのこと。現時点では 社内プロトタイプ用途 に留めるのが無難です。
チーム開発で光る4つのメリット
1. 共通認識の高速形成
言葉で議論するよりモックを共有しながら会話できるため、要件ブレが減少。2. デザイン⇔実装の壁を低減
コード同時出力で「コーダー待ち」が発生しにくい。Tailwind ベースなので既存スタイルにも馴染みやすい。3. Figma 連携によるレビュー効率化
生成物は即座に Figma へ。コメント、バージョン管理、コンポーネント再利用がスムーズ。4. コスト削減
初期デザイン工数（平均 2〜3 日）→数時間に短縮。多画面アプリほど効果大。
使いこなしのコツ
- プロンプトは 英語 + 箇条書き で具体的に。「ターゲットユーザー／使用シーン／必須機能」を明示すると精度が上がる。
- テーマ編集でブランドカラーを先に設定すると、その後の生成で配色が統一されやすい。
- 生成コードはそのまま本番投入せず、アクセシビリティチェックやレスポンシブ確認を必ず実施。
まとめ
Stitch は UI デザインの「最初の 80%」を驚くほど短時間で自動化し、デザイナーと開発者の橋渡しを劇的に効率化します。まだベータ版ゆえに粗さもありますが、「まず形にして早く議論する」というモダンな開発スタイルと相性抜群。今後 API 提供や多言語対応が進めば、Figma に代わる次世代 UI ワークフローの中心ツールになり得る存在です。
