7つのAIデザインツールを一斉比較！UIデザイン・プロトタイピングの実力を徹底検証
はじめに：AIツールが多すぎて困ってませんか？
動画は「Guys, we have a problem. There are too many AI tools out there and it is overwhelming.」という印象的な一言から始まります。
「AIツールが多すぎて、正直もう追いきれない！」 という悩みを率直に語り、「僕はもう新しいツールに飛びつくのをやめて、本当に良いものだけを見極めて使うことにした」と続けます。
この動画では、7つのAIデザインツールを同じプロンプトでテストし、UIデザインとプロトタイピングの観点から比較・評価します。
「By the end of this video, you will have a good idea of what the quality of the output for each tool looks like and that should help you make a decision on which ones to stick to so you don't get overwhelmed like me.」
「この動画を見終わる頃には、どのツールがどんな品質なのか分かるはず。僕みたいに圧倒されないための参考にしてね！」
出演者紹介と動画の目的
自己紹介として、「My name is Sam Fabio. I've been a product designer for 9 years...」と語り、ナイジェリアやイギリスのスタートアップでの経験をアピール。
「9年間プロダクトデザイナーとしてやってきて、DeliverooやMonto Bankでも働いたよ」
一部スポンサー（Mobin）の紹介も挟みつつ、今回の検証対象ツールを発表します。
今回テストするAIデザインツール
- Replit
- Lovable
- Magic Patterns
- Bold New
- Polyt
- Firebase Studio
- V0
テスト内容と評価基準
お題：「ジムオーナー向けのバックオフィスツール」
「The goal is to design a simple back office tool for gym owners.」
ジムオーナーが会員管理・クラス作成・予約管理ができるダッシュボードを作る、という設定です。
評価基準（各5点満点、合計15点）
- インタラクティビティ
- どれだけ1つのプロンプトでフォームやアクションなどのインタラクティブ要素を自動生成できるか
- コントロール性
- ユーザーがどれだけ簡単にデザインを編集・調整できるか
- ビジュアルデザイン
- 生成されたデザインのクリーンさ・モダンさ
「Each criteria will be five points. So each tool, we have a total attainable score of 15 points.」
テスト方法
- 全ツールに同じプロンプトを入力
- プロンプトの編集や追加は一切なし
- 出力結果のみで評価
プロンプト作成とデザインインスピレーション
デザインインスピレーション
「mobin.com, the largest library of iOS and web design inspiration in the world.」
Mobinというデザインパターン集サイトから、ダッシュボードのUIを参考にします。
「Mobin told me to tell you that if you use my promo code... you'd get 20% off on their paid plan.」
（プロモコードの宣伝もあり）
プロンプト作成法：メタプロンプティング
「Meta prompting is when you describe a goal you want to achieve to a foundational AI model like ChatGPT...」
メタプロンプティングとは、まずChatGPTなどに「やりたいこと」を説明し、他のAIツール用のプロンプトを生成してもらう方法。
「Please, please, please and please don't just copy and paste the prompt generated by ChatGPT into another tool. Read the prompt and refine it.」
「ChatGPTが作ったプロンプトをそのままコピペしないで！ちゃんと読んで、自分で調整してね」
今回はMobinのUIインスピレーションも加えて、全ツールに同じプロンプトを投入します。
いよいよ検証！各ツールの出力と評価
評価ランク
- Sランク：12点以上
- Aランク：10点以上
- Bランク：7.5点以上
- Cランク：7.5点未満
1. Replit
- 出力内容
ダッシュボード、会員、クラス、スケジュール、請求、レポート、設定ページを生成。 - 良い点
- 「I can add a member. So, that's interactive. That's really good.」
- 設定ページで情報編集・保存ができ、フィードバックもある。
- 悪い点
- ナビゲーションバーがページ上に重なり、全体が見えない。
- 「the entire page is stuck behind the navigation page here.」
- カード間のスペースが不自然。
- グラフは非インタラクティブ。
- スコア
- インタラクティビティ：2.5
- コントロール：2.5
- ビジュアルデザイン：2
- 合計：7/15（Cランク）
2. V0
- 出力内容
Replit同様、全ページを生成。 - 良い点
- 「Vzero actually built out all the page. That's really good.」
- 会員追加やクラス追加のフォームがある（ただしフィードバックなし）。
- スケジュールでリスト・カレンダー切替可。
- 悪い点
- グラフは非インタラクティブ。
- 会員リストにアバターやイニシャルがない。
- 編集には再度プロンプト入力が必要。
- スコア
- インタラクティビティ：3.5
- コントロール：2.5
- ビジュアルデザイン：3.5
- 合計：10/15（Aランク）
3. Lovable
- 出力内容
V0に似た構成。 - 良い点
- 「I like what it has in the calendar view. Feels much more like a calendar view than the other ones.」
- サイドドロワーやカレンダー表示が分かりやすい。
- 「edit with Lovable」機能で直感的に編集可能。
- 「I can change the margin, change the padding, background...」
- 悪い点
- 会員追加やクラス追加はインタラクティブだが、実際にはリストに反映されない。
- スコア
- インタラクティビティ：3.5
- コントロール：4
- ビジュアルデザイン：3.5
- 合計：11/15（Aランク）
4. Polyt
- 出力内容
フォーカス状態とキャンバス状態の2つのビューを持つ。 - 良い点
- 「the canvas state breaks down all the page into like different components which is introducing some control.」
- グラフがインタラクティブで、値も分かる。
- 会員リストにアバターやイニシャルを自動で割り当て。
- クラスに画像を追加し、ビジュアルがリッチ。
- 「It rendered the classes, added some pictures to make them look nice.」
- キャンバス単位で細かく編集可能。
- 悪い点
- 請求・レポート・設定ページは未生成（ただし他の部分が優秀なので加点）。
- スコア
- インタラクティビティ：3.5
- コントロール：4.5
- ビジュアルデザイン：4
- 合計：12/15（Sランク）
5. Magic Patterns
- 出力内容
LovableやV0に似ているが、グラフがない。 - 良い点
- アイコンに色がついている。
- 会員リストにアバターあり。
- 悪い点
- 会員追加やクラス追加は「coming soon」で非インタラクティブ。
- 編集はプロンプト入力のみ。
- スケジュールの月表示など拡張性に疑問。
- スコア
- インタラクティビティ：2.5
- コントロール：2
- ビジュアルデザイン：2.5
- 合計：7/15（Cランク）
6. Bold New
- 出力内容
LovableやV0に似ているが、やや粗い。 - 良い点
- 会員追加やアバター表示あり。
- スケジュールでリスト・カレンダー切替可。
- 請求・レポート・設定ページも生成。
- 悪い点
- グラフの配置やデザインが不自然。
- 編集はプロンプト入力のみ。
- ビジュアルが全体的にチープ。
- スコア
- インタラクティビティ：3
- コントロール：2
- ビジュアルデザイン：2.5
- 合計：7.5/15（Bランク）
7. Firebase Studio（by Google）
- 出力内容
全ページ生成だが、デザインや操作性に難あり。 - 良い点
- グラフに多少のインタラクションあり。
- 会員追加は可能。
- 悪い点
- ナビゲーションやカードのスペースが不自然。
- スケジュールページは「an accessibility mess」＝アクセシビリティ最悪。
- 生成に時間がかかり、エラーも多発。
- ビジュアルが全体的に古臭い。
- スコア
- インタラクティビティ：2.5
- コントロール：2
- ビジュアルデザイン：1.5
- 合計：6/15（Cランク）
総合ランキングとまとめ
「Based on this point, we have Firebase by Google, Magic Pattern, and Replet in the C tier...」
-
Sランク（12点以上）
- Polyt（12点）
→ 「Polyt, which I literally just knew about at the time of making this video, takes the crown for the only Sier UI and code generation AI tool.」 → 「Polytは本当に驚き。もっと多くのデザイナーに試してほしい！」
- Polyt（12点）
-
Aランク（10点以上）
- Lovable（11点）
- V0（10点）
-
Bランク（7.5点以上）
- Bold New（7.5点）
-
Cランク（7.5点未満）
- Replit（7点）
- Magic Patterns（7点）
- Firebase Studio（6点）
補足・考察
-
「Something I've noticed with these tools we've explored are that they're not really great with iOS or Android app designs. They are really good at prototyping and they're better suited to web apps.」
- 「今回のツールはiOSやAndroidアプリのデザインにはあまり向いていない。Webアプリのプロトタイピングには強い！」
-
「You can also be the judge. You saw the output from each tool. So, let me know in the comment section if you have a different opinion about the ranking. Let's discuss.」
- 「みんなはどう思う？コメント欄で意見を聞かせて！」
まとめ・今後の動画案内
- 近日公開予定の「AIでiOSアプリをノーコードで作る」動画の予告。
- 「But what that video is cooking, you can learn how I use AI to generate images here. and I'll see you in that」
重要キーワードまとめ
- AIデザインツール
- UIデザイン
- プロトタイピング
- インタラクティビティ
- コントロール性
- ビジュアルデザイン
- メタプロンプティング
- Mobin（デザインインスピレーション）
- Polyt（最優秀ツール）
印象的なセリフまとめ
- 「AIツールが多すぎて、正直もう追いきれない！」
- 「ChatGPTが作ったプロンプトをそのままコピペしないで！ちゃんと読んで、自分で調整してね」
- 「Polytは本当に驚き。もっと多くのデザイナーに試してほしい！」
- 「今回のツールはiOSやAndroidアプリのデザインにはあまり向いていない。Webアプリのプロトタイピングには強い！」
- 「みんなはどう思う？コメント欄で意見を聞かせて！」
おまけ：チャンネル登録のお願い
「82% of the people that watch this channel regularly haven't subscribed. That's a poor stat. So, if you're one of those 82%, what are you waiting for? Hit that subscribe button and my promise to you is to make sure you never stop learning on this channel. Do we have a deal?」
「このチャンネルをよく見てる人の82%がまだ登録してないんだって！ぜひ登録して、ずっと学び続けよう！」 🚀
以上が動画の詳細な時系列要約・解説です！
どのツールが自分に合うか、ぜひ参考にしてみてください😊