近年、AIによるUI生成ツールは急速に進化しています。
先日Googleが発表した「Stitch」は、テキストベースの指示からUIを自動生成できるツールです。
私自身、過去にUI生成ツールを試したことがありますが、期待した成果は得られずしばらく距離を置いていました。
しかし今回Stitchをきっかけに、最新ツールを調査しUI生成ツール4種を比較してみようと思います。
検証に使用した生成方法
今回はStitchのガイドラインを参考に、以下のプロセスでプロンプトを構築・使用しています。
▼Stitch プロンプトガイドライン
プロンプト
ガイドラインの内容をGeminiに読み込ませ、次のステップでプロンプトを設計しました。
- Stitchのプロンプトガイドラインを読み込み
- ガイドラインに沿って、UI設計に必要な「質問リスト」を生成
- 質問リストに回答し、それをもとにUI生成用プロンプトを生成
- 生成された日本語プロンプトを英訳して、各ツールに入力
使用した共通プロンプト
今回は、私が日頃関わっているオンライン資格講座スタディングを参考に、以下2つの画面UIを想定しました。
- レッスン動画視聴画面
- 問題回答画面
プロンプト作成のベースとして、ざっくり以下のようなアプリの概要情報を提示しました（実際には10項目以上の質問に回答してGeminiに渡しています）。
- 対象ユーザー・用途： 社会人が高難易度の資格試験に取り組むための学習アプリ
- デザイン方針： シンプルで洗練されたデザイン
- カラー： 落ち着いたブルー系を中心に構成
最終的に生成されたプロンプトを、それぞれ英訳しUI生成ツールに入力します。
ツールによってはプロンプトの文字数制限があるため、その場合はGeminiを用いて簡潔に要約し調整を行いました。
その他の検証
①方向性の違うデザインの生成
より多様なケースでの生成を検証するため、条件を変更して追加のプロンプトも試しました。
意図的に先ほどとは全く異なるデザイン性でプロンプトを調整し生成の質を検証しています。
- 対象ユーザー・用途： 小学生向けの英語学習アプリ
- デザイン方針： 明るく楽しげなデザイン
- カラー： オレンジを基調にカラフルでポップに
②画像添付による生成の変化
画像添付が可能なツールについては、以下のスタディングの「レッスン動画の視聴画面」のスクリーンショットを添付しました。
テキストだけでは伝わりづらい、より複雑な要素や具体的なレイアウトが参照されるのか検証しました。
今回比較するUI生成ツール
今回の検証では、Webサイトのデザインではなく、プロダクトUIを生成できるツールを中心に、以下の4つをピックアップしました。
これらのツールは大きく2つに分類できます。
①UIデザイン・コード生成ツール
- Google Stitch
- v0 by Vercel
この２つはプロンプトをもとにUIデザインとコードを出力するツールです。
それぞれの公式のサイトの説明を見るとStitchは「AIでUIを自動生成しFigmaやコード出力できるツール」、v0は「Web開発を支援する、対話型のAIペアプログラマー」と、StitchはUI設計寄り、v0は開発寄りという印象です。
②UIデザイン作成ツール
- Visily
- Uizard
一方こちらは、FigmaのようなUIデザイン作成ツールです。ツール内にAI生成機能が搭載されており、プロンプトからUIを自動生成してくれます。
そもそものツールとしての違いがありますが、今回は「どんなUIが生成されるか？」という点に注目して比較を行いました。
各ツールを使ってみた
実際に4つのUI自動生成ツールを使ってみた結果を紹介します。改めて、まとめると生成は以下の4パターンでの検証となります。
- 【社会人向け資格講座アプリ】レッスン動画画面
- 【社会人向け資格講座アプリ】問題回答画面
- 【小学生向け英語学習アプリ】レッスン動画画面
- スタディングのレッスン画面のスクショを添付
Stitch
概要
- チャット形式でプロンプトをやり取りしながらUIを生成
- 同時に最大6画面を生成可能
- 出力したUIはFigmaへ直接ペーストできる
- コード生成対応
- 画像添付での参照に対応
- 無料（ベータ版）
生成結果
【社会人向け資格講座アプリ】レッスン動画画面
【社会人向け資格講座アプリ】問題回答画面
【小学生向け英語学習アプリ】レッスン動画画面
スタディングのレッスン動画画面のスクショを添付
まとめ
UI生成
- シンプルなデザインでの生成
- ここからチャットで要素やデザインを詰めていく必要がある
- 以下のように複数画面生成できるので全体像を生成したいときに向いていそう
- プロンプトにある要素は生成に含まれている
Figma連携/コード生成
- 生成された画面からFigmaへのコピーボタンやコードを表示することができる
- Figmaへはオートレイアウトありで貼り付け可能
画像参照
- 参照画像を添付すると指示以外の要素なども拾って生成してくれる
- 画像と同じ要素やテキストで出そうとしてくれている印象
v0 by Vercel
概要
- チャット形式で1画面ずつUIを生成
- コード生成＆動作プレビュー機能あり
- Figmaデータの参照や画像添付も可能
- 月の生成上限あり（無料枠あり）
生成結果
【社会人向け資格講座アプリ】レッスン動画画面
【社会人向け資格講座アプリ】問題回答画面
【小学生向け英語学習アプリ】レッスン動画画面
スタディングのレッスン動画画面のスクショを添付
まとめ
UI生成/コード生成
- Stitchと比べると動きを含めリッチなアウトプット
- 生成されたUIをそのままプレビュー・確認できる
- プロンプトにある要素は生成に含まれ、それ以外の必要そうな情報も入れて作成してくれる
- 見栄えは良いが、プロンプトに書いていない要素も入っている
画像参照
- 参照画像添付をするとレイアウトや要素、配色などを踏襲して生成してくれる
Visily
概要
- UIデザイン作成ツール
- デザインのファイル作成時にプロンプト入力もしくは参照画像、URLを指定し、画面を生成（複数画面も可）
- デザインのファイル内でチャット形式で画面追加生成・修正に対応
- コード出力はCSSのみ
- Figmaへのエクスポートが可能
- 無料でも使えるが、AI機能はクレジット制のためお試し後は課金必須。
生成結果
【社会人向け資格講座アプリ】レッスン動画の視聴画面・問題回答画面
左のフレームが「レッスン動画の視聴画面」、右のフレームが「問題回答画面」
【小学生向け英語学習アプリ】レッスン動画の視聴画面
スタディングのレッスン動画の視聴画面のスクショを添付
まとめ
UI生成
- 生成された画面は構成やレイアウトは安定して良いものが出る印象
- チャット式でAI機能で詰めていくことも可能
- プロンプトにある要素は生成に含まれ、それ以外の必要そうな情報も入れて作成してくれる
- v0ほど多様な要素は生成されないのでちょうど良いバランス
コード生成
- コード生成は選択しているオブジェクトのCSS生成のみ
画像参照
- 参照画像添付をすると画像内のものをそのままに近い形で生成してくれる
Uizard
概要
- UIデザイン作成ツール
- デザインのファイル作成時にプロンプト入力や参照として画像、URLを指定し、複数画面を生成
- デザインのファイル内でチャット形式で画面追加生成・修正に対応
- Figma/Sketch/XDファイルのインポートに対応
- 選択している要素ごとのコードが表示
- 基本は有料。無料お試し版あり。
生成結果
こちらのツールは無料版だと生成の制限があるため、ファイル作成時にプロンプト入力して生成された結果を添付します。
ちなみにチャットでの部分的な生成は以下のような感じです。レッスン動画の視聴画面のプロンプトを入力した後の回答です。
小学生向けアプリのプロンプトで出力した結果はこちら。
まとめ
UI生成
- 一気に10画面弱ほど生成されるがうち半分以上はテンプレートをベースにした画一的な印象があり、必要のない画面も生成される場合あり。
- チャットで特定の意図したレイアウトでの生成は可能
コード生成
- Reactやcssのコード生成対応。
その他
- 生成機能は最近モデルがアップしたようだが無料版では試せず。
- アウトプットは正直微妙そうだったので、新モデルはいい感じなのかも…？
- UI生成とは異なるがAIでのレビュー機能が大変気になる
各ツールまとめ
今回の検証では、正直なところ予想より良い感じに生成できたというのが率直な感想です。AIの進化スピードは確実に実感できる結果でした。
個人的な印象を含みますが、以下全ツールを使ってみての比較まとめです。
比較表
| ツール名 | 主な特徴 | 生成の仕方 | コード出力 | Figma連携 | 画像参照 |
|---|---|---|---|---|---|
| Stitch | UIとコードの自動生成、6画面同時生成可 | チャット | ○ | ◎ オートレイアウト機能ありでFigmaへ貼り付け可能 |
○ |
| v0 by Vercel | UIとコード（プレビューあり）の自動生成、1画面ずつ生成 | チャット | ◎ | ○ Figmaデータを渡して生成が可能 |
○ |
| Visily | UI作成ツール、複数画面生成可能 | GUI+チャット | △ | ○ プラグインにてFigmaデータのエクスポートが可能。 |
○ |
| Uizard | UI作成ツール、複数画面生成可能（テンプレート寄り） | GUI+チャット | ○ | △ プラグインにてFigmaデータのインポートが可能。 |
△ |
-
Stitch
- 複数画面での生成やシンプルな構造でのアウトプットのため全体像の検討向きかも。
- オートレイアウトありでFigmaに貼り付けできるのは便利。
-
v0 by Vercel
- 今回の検証では具体的な画面イメージがあり、動きが作れる点含めてディテールが細かいアウトプットで好印象。1画面を詰めていく感じ。
-
Visily/Uizard
- Figmaの類似ツールであり、AI機能利用の場合どちらも有料のためFigmaを使用している環境では厳しい印象。
最後に
今回の検証を通じて、UI生成ツールの進化を実感しました。特に以下の3点が印象的です。
-
定番レイアウトやシンプルなUIは得意分野
汎用的な構成の生成はかなり精度が高く、特に画像を添付すれば再現性も向上します。一方で、独自性の高いUIや複雑な構造にはまだ課題が残ります。 -
実務導入には工夫が必要
どのツールも「そのまま使える」というよりは、補助ツールとしての活用が現実的です。ツールごとに強みが異なるため、目的やシーンに応じた使い分けが鍵になります。 -
AIの進化スピードがとにかく速い
数ヶ月前に試したツールでも、今や印象が大きく変わっているケースがありました。定期的に情報をキャッチアップし、使いこなすためのトライ＆エラーを続けることが大切だと感じました。
今後はより複雑なプロンプトや実務に近い要件でのテストにも挑戦してみたいです。
他にも気になるUI生成ツールがいくつかあるので、引き続きアップデートを追いつつ、活用の幅を広げていければと思います。
KIYOラーニング株式会社について
当社のビジョンは『世界一「学びやすく、分かりやすく、続けやすい」学習手段を提供する』ことです。革新的な教育サービスを作り成長させていく事で、オンライン教育分野でナンバーワンの存在となり、世界に展開していくことを目指しています。
プロダクト
- スタディング：「学びやすく・わかりやすく・続けやすい」オンライン資格対策講座
- スタディングキャリア：資格取得者の仕事探しやキャリア形成を支援する転職サービス
- AirCourse：受け放題の動画研修がついたeラーニングシステム（LMS）
KIYOラーニング株式会社では一緒に働く仲間を募集しています