DX開発事業部の濱野です！

最近、「生成AIでUIを作れるツール」が一気に増えてきて、どれを使えばいいのか迷っていませんか？
今回は、そんなツールたちを比較してみたので、選ぶときの参考になればと思いシェアします！

解決できるお悩み

  • とりあえずラフ構成を考えたいけど…時間がない
    →テキストで仕様を入力するだけで、 UIのラフ構成が即生成
  • デザイナーからデザインが来るまで手が止まる
    →PM・エンジニア自らワイヤーフレーム等、前段階を作れる
  • 仕様とUIがうまくつながらない
    →構造・文言を含むたたき台ができ、要件すり合わせもスムーズに
  • UI文言、毎回考えるの大変…
    →AIが壁打ちをしてくれるので、豊富なアイデアから選択できる

生成AI×UIデザインツールを使用することで、デザイナーの方だけでなく、エンジニア・PMの方も業務効率化の手助けをしてくれます！

ツール比較

ではさっそく、比較をしていきたいと思います！

今回は比較しやすいように、同じプロンプトを使用しました。

ホテル予約サービスのトップページを作成してください。
以下の要素を含めてください
・上部にロゴ、ナビゲーション（宿泊、レストラン、アクセス、お問い合わせ）
・メインビジュアルに宿泊地の検索フォーム（場所・日付・人数）
・特集バナー（例：夏のおすすめプラン）
・人気のホテルをカード形式で一覧表示（写真・ホテル名・価格・レビュー）
・地図で探すボタン

・フッターに会社情報・利用規約・SNSリンク

（一部ツールは英語のみだったため、翻訳して入力しました）

 

Bolt.new


Good👍
・バックエンドやデータベースの統合も可能なフルスタック
・多様なフレームワークに対応
・使いやすいUIを生成してくれる印象。画像も生成
うーん🤔
・コードエラーが出ることもある
・バックエンドも生成するため、生成に少し時間がかかる

v0


Good👍
・フロントエンド特化で迅速なUI生成
・Next.js、Shadcn UI、Tailwind CSSとシームレスに連携
・自動修正機能
・日本語対応あり
うーん🤔
・バックエンドの構築は手動で行う必要がある
・画像生成は有料版のみ
・自動修正機能はあるが、一発でエラー解消されないこともある

Stitch


Good👍
・Figmaへの連携が、まさかのコピペでOK
・トンマナ・ダークモード等も選択肢から選べる
・画像も生成
うーん🤔
・プロンプトに対して質問が返されるのが少し手間
・コード生成はHTMLのみ

uizard



Good👍
・一気に８ページも生成される
・画面遷移インタラクションも設計されている
・Figmaのようにアプリ内で細かいデザインも修正できる
うーん🤔
・日本語に対応しておらず、プロンプトも英語入力でしなければならない（2025年5月時点）
・プロンプトの字数制限も厳しい（300字）
・デザインは使いにくい印象

Relume

Good👍
・情報設計（サイトマップ）からページの中身まで一貫して生成できる。
・階層構造を前提にした出力
・コンポーネント単位で編集・保存できる
うーん🤔
・デザインのカスタマイズ自由度は低め、質もいまいち
・複雑にはまだ対応できない印象
・日本語対応なし（日本語で生成はしてくれる）

Visily


Good👍
・コンポーネント単位でFigmaのようにデザイン修正をアプリ内でできる
・画像も生成される
うーん🤔
・日本語に対応しておらず、英語での生成のみ（2025年5月時点）
・UIの装飾やデザインカスタマイズ性は制限されている
・ReactやHTMLコードの自動エクスポート機能なし

Figma AI　（First Draft）


Good👍
・デザインFIXを最終的にFigmaで行うことを考えると、最初からFigma Designファイル内で生成できると効率UP！
・画像も生成してくれる
うーん🤔
・現在はFigmaの有料アカウントを持っていないと使用できない
・海外っぽいUIで使いにくさがある

Figma Make


Good👍
・既にFigmaで作ったデザインを使用できる
・divごとで指定して修正が可能
・コード生成（Typescript）
・claude 3.7 sonnet（今後モデルを選択できるようになる？）
・既存のFIgmaにあるザインをFlameごとで参照可能なため、トンマナの指定などが非常にラクチン
うーん🤔
・生成は少し時間がかかる
・現在は有料プランでのみ使用可能
・Figma Makeで生成されたデザインを、Figma Designに移行させることが現時点では不可能（できるようになれば、非常に便利）

ユースケース別の使い分け

個人的ランキング

  1. Bolt.new
    生成されるUIが使いやすい印象
  2. v0
    同じく生成されるUIが使いやすい印象。画像生成が有料のみな点が残念。
  3. Stitch（元Galileo AI）
    デザインが少し海外っぽいが、今後のアップデートに期待！

補足

今回の比較には入れられなかったのですが、他にも似たようなツールがまだあります！

気になる方は是非触ってみてください。

まとめ

もちろん、最終的なクオリティやユーザー体験の細部は、やはり人の手で調整する必要があります。しかし、各ツールの特性を理解し、目的に応じて使い分けることで、日々の業務でもかなり有効に活用できると感じました。

デザイナーはもちろん、PMやエンジニアの方がデザインやラフ案を作る場面でも、これらのツールを積極的に取り入れることで、よりスムーズなコミュニケーションと効率的なプロジェクト進行が期待できます。AIツールは、アイデア出しの加速、プロトタイピングの迅速化、そしてデザインプロセスの初期段階における試行錯誤のコスト削減に大きく貢献してくれるのではないかと思います。
是非、試してみてください！