1. はじめに
皆さんは生成AIを日々、積極的に活用しておりますでしょうか。
近年、人工知能（AI）技術の急速な発展により、さまざまな分野でAIの活用が進んでいます。その中でも特に注目を集めているのが、自然言語処理と画像生成を組み合わせた生成AI技術です。
生成AI技術の進歩は凄まじい速度で進んでいます。OpenAI社が今年5月に生成AI「GPT」の新たなモデル「GPT-4o」を発表したのも束の間、同月にはGoogle社も「Gemini 1.5 Pro」という生成AI「Gemini」の最新モデルを発表。またその翌月にはAnthropic社が最新モデル「Claude3.5 Sonnet」を発表するなど、生成AI技術のトレンドは目まぐるしい速度で変化しているのです。
そんな目覚ましい発展を続ける生成AIですが、今回は「UI作成5本勝負」を通じて、AIのUIデザイン能力を検証していこうと思います。
代表的な生成AI3種の中でどれが一番センスのある、ユーザーライクなUIを作ることができるのか。
プロンプトエンジニアリングによるWeb開発を考えている方はぜひご覧いただけますと幸いです🙇♂️
2. 対決方法
それぞれのAIに、各テーマに沿ったUIを作成してもらい、作成されたUIのクオリティに応じて順位付けしていきます。
使用するAI
本対決では、大手企業が開発した生成AI 3つの最新モデルを使用します：
- GPT-4o（OpenAI社開発）
- Gemini 1.5 Pro（Google社開発）
- Claude 3.5 Sonnet（Anthropic社開発）
これらのAIに同一のプロンプトを渡し、UIデザインを生成してもらいます。
評価基準
順位付けは私の独断と偏見で決定します！
...が、評価基準として以下のようなポイントに注目します：
- デザイン性：視覚的な魅力とユーザビリティ
- 機能性：必要な機能の実装度と動作の適切さ
- コードの品質：HTMLとCSSの構造、効率性、可読性
- 創造性：独創的なアイデアや意外性のある要素
- 要件適合性：提示された課題との整合性
3. 1本目：ECサイトのホームページ
1試合目は、ECサイトのホームページ設計です。
各AIに同じプロンプトを渡し、UIを作成してもらいました。
# ECサイトのホームページデザイン要件
あなたは優秀なUIデザイナー兼フロントエンドエンジニアです。最新のトレンドを押さえつつ、ユーザビリティを重視したECサイトのホームページをデザインしてください。
## 全体の要件
- モダンでクリーンなデザイン
- レスポンシブデザイン（デスクトップとモバイル両対応）
- アクセシビリティに配慮したデザイン
- パフォーマンスを考慮した軽量なコード
## 必須機能と要素
1. ヘッダー
- ロゴ
- ナビゲーションメニュー（カテゴリへのリンク）
- 検索バー
- カートアイコン（商品数表示付き）
- ログイン/会員登録リンク
2. メインコンテンツ
- 注目商品のカルーセル（スライダー）
- 人気カテゴリへのクイックアクセス
- 商品一覧（グリッドレイアウト）
- 各商品に画像、商品名、価格、簡単な説明を表示
- 「カートに追加」ボタン
3. サイドバー
- カテゴリナビゲーション（折りたたみ可能）
- 価格帯でのフィルタリングオプション
4. フッター
- 会社情報、カスタマーサポート、配送・返品ポリシーへのリンク
- ソーシャルメディアアイコン
- ニュースレター登録フォーム
## 技術的要件
- HTML5とCSS3を使用（JavaScriptは最小限に）
- CSS Flexboxまたは Grid を使用したレイアウト
- カスタムCSSのベストプラクティスを遵守（命名規則、再利用可能性）
- フォントやアイコンは外部リソースを使用せず、システムフォントとUnicode文字を活用
## デザインのポイント
- ブランドカラーは青（#1a73e8）を基調とし、アクセントカラーはオレンジ（#ff7043）を使用
- 商品画像は商品のイメージを説明する文字や簡単な図で代用
- ビジュアル階層を意識し、ユーザーの目線の流れを考慮したレイアウト
- ホバーエフェクトなど、インタラクティブな要素を適度に取り入れる
## 出力フォーマット
1. 完全なHTMLコード（インラインCSSは避け、外部CSSファイルを使用）
2. 別ファイルのCSSコード
3. デザインの特徴や選択した理由、工夫した点などの簡単な説明
クリエイティブで魅力的、かつ使いやすいECサイトのホームページをデザインしてください。ユーザーがスムーズに商品を見つけ、購入したくなるようなデザインを心がけてください。
GPT4o
デザインは物寂しいですが、ECサイトとしての骨組みはしっかりできていると思います。
最低限の項目は用意されているので、編集すればECのデザインとして使えるようになりそうです
Gemini1.5 Pro
GPT4oよりもユーザーライクな分かりやすいデザインになっている気がします。
ただ、ヘッダーやフッターのCSSが若干ずれているのがマイナスポイントかも
Claude3.5 Sonnet
完成度が高い！
デザインやコンポーネント配置の完成度もさることながら、カテゴリ分けの親切さや期間限定のバナー広告が用意されているのもよきですね
結果
順位はこのようにつけようと思います！
１位...Claude3.5Sonnet
２位...GPT4o
３位...Gemini1.5Pro
この勝負ではClaudeが頭一つ抜けた印象ですね。
デザインやコンポーネント配置の完成度が高く、カテゴリ分けの親切さや期間限定のバナー広告など、ユーザー体験を考慮した細かい工夫が感じられます。
GPTとGeminiのランク付けは迷いましたが、Geminiのスタイル崩れが気になりましたので、今回はGPT4oを２位とさせていただきました。
4. 2本目：ポートフォリオサイト
次は、ポートフォリオサイトのUIを作成してもらいました。今回はTailwindCSSとそのプラグイン、daisyUIを用いて、より凝ったデザインを目指しました。
# ポートフォリオサイトのデザイン要件
あなたは創造的なUIデザイナー兼フロントエンドエンジニアです。個性的で印象的なポートフォリオサイトをデザインしてください。TailwindCSSとdaisyUIを活用し、モダンで洗練されたデザインを目指してください。
## 全体の要件
- シングルページデザイン（スクロールでセクション間を移動）
- レスポンシブデザイン（デスクトップ、タブレット、モバイル対応）
- アクセシビリティに配慮したデザイン
- パフォーマンスを考慮した軽量なコード構造
## 必須セクションと要素
1. ヘッダー/ナビゲーション
- ロゴまたは名前
- スムーズスクロールのナビゲーションリンク（各セクションへ）
- コンタクトボタン
2. ヒーローセクション
- キャッチーな自己紹介文
- プロフェッショナルな雰囲気の自画像（画像の代わりに文字や図形で表現）
- CTAボタン（例：「作品を見る」「履歴書をダウンロード」）
3. スキルセットセクション
- 主要スキルのビジュアル表現（アイコンや進捗バーなど）
- 簡潔なスキル説明
4. 作品ギャラリー
- グリッドレイアウトで作品を表示
- 各作品に画像（文字や図形で代用）、タイトル、簡単な説明
- ホバーエフェクトで詳細表示
- フィルタリング機能（カテゴリー別に作品を絞り込み）
5. 経歴/経験セクション
- タイムライン形式で主要な経歴を表示
6. お問い合わせフォーム
- 名前、メール、メッセージ欄を含むシンプルなフォーム
- 送信ボタン
7. フッター
- ソーシャルメディアリンク
- コピーライト情報
## 技術的要件
- HTML5とTailwindCSS、daisyUIを使用
- JavaScriptは最小限に留め、主にインタラクティブ要素に使用
- TailwindCSSのユーティリティクラスを効果的に活用
- daisyUIのコンポーネントを適切に選択・カスタマイズ
## デザインのポイント
- 個性を表現するユニークな配色（メインカラーとアクセントカラーを設定）
- タイポグラフィを効果的に活用し、視覚的な階層を作る
- アニメーションやトランジションを控えめに使用し、洗練された印象を与える
- ダークモード対応（ユーザーの設定に応じて切り替え可能）
## 出力フォーマット
1. 完全なHTMLコード（TailwindCSSとdaisyUIのCDNリンクを含む）
2. カスタムCSSコード（TailwindCSSのextendセクションを使用）
3. 必要最小限のJavaScriptコード
4. デザインコンセプト、選択したカラーパレット、使用したdaisyUIコンポーネントとその理由の簡単な説明
ユニークで印象的、かつプロフェッショナルな雰囲気のポートフォリオサイトをデザインしてください。閲覧者の興味を引き、スキルと作品を効果的にアピールできるデザインを心がけてください。
GPT4o
Gemini1.5 Pro
Claude3.5 Sonnet
はい、どれもすぐ使えるような完成度の高いものができましたね！
tailwindとdaisyUIを入れたことで1本目よりも質の高いものが出来上がった気します！
結果
甲乙つけ難いですが、この順位にしようと思います！
１位...Claude3.5Sonnet
２位...Gemini1.5Pro
３位...GPT4o
どれも実用的でクオリティの高いデザインでしたが、Claude 3.5 Sonnetは「モダンで洗練されたデザイン」というプロンプトの要求を最もよく満たしていたので、1位とさせていただきました！
GeminiとGPTは迷いましたが、個人的に好きなデザインはGeminiの方だったので2位に。
GPTのUIは良くも悪くも一般的なテンプレートに近いデザインで、独創性にやや欠ける印象だったため3位としました。
5. 3本目：GitHubのWebサイトの模倣
最後の勝負では、GitHubのWebサイトを模倣してもらいました。今回は質ではなく、どれが一番上手く模倣できているかを競いました。
また、今回のプロンプトではあえて細かい指示は出さず、簡素なものを使用します。
こちらのwebサイトを模倣してください。
## 技術的要件
- HTML5とTailwindCSSのクラスを使用
- daisyUIのコンポーネントを適切に活用（ボタン、ドロップダウンなど）
- CDN経由でTailwindCSSとdaisyUIを読み込む
- カスタムCSSは最小限に抑え、TailwindクラスとdaisyUIで可能な限り再現する
GPT4o
Gemini1.5 Pro
Claude3.5 Sonnet
どれも完全に模倣できているとは言えませんが、色合いやコンポーネント配置はかなり準拠できているのではないでしょうか。
写真一枚からの画像処理でここまでのHTMLを作れるのはやはりすごいですね🤔
結果
１位...Claude3.5Sonnet
２位...GPT4o
３位...Gemini1.5Pro
GPT4oとClaude3.5は僅差でとても迷いましたが、GitHubのロゴを取り込み、「Building THE FUTURE」のグラデーションカラーにも準拠するなど、細部まで注意を払った模倣を行ったClaude3.5 Sonnetを１位とさせていただきました。
ただ、GPT4oも高いクオリティの模倣ができていると思います。
Gemini1.5 Proは、全体的な構造は再現できていましたが、スタイリングの面で他の2つに及ばなかった印象です。
やはり現状の技術ですと、写真からの完全な模倣は難しいみたいですね。
あるいはもっと細かくプロンプトで注文すれば、より現物に近づけることができるかもしれません。
8. 総合結果と考察
ということで、結果はこのようになりました。
| \ | GPT4o | Gemini1.5Pro | Claude3.5 Sonnet |
|---|---|---|---|
| 1本目 | 2位 | 3位 | 1位 |
| 2本目 | 3位 | 2位 | 1位 |
| 3本目 | 2位 | 3位 | 1位 |
Claude 3.5 Sonnetが3冠を達成し、総合優勝となりました。全体を通して、Claude 3.5 Sonnetは一歩先を行くUIデザイン能力を示したように感じます。GPT-4oは特に模倣タスクで強さを見せ、Gemini 1.5 Proも独自の魅力を持つデザインを提案するなど、それぞれに特徴が見られて面白かったです。
10. まとめ
今回は、どのLLMがWebサイトのUI作成に最も優れているか比較検証してみました。業務や個人のアプリ開発で生成AIの活用を検討している方の参考に少しでもなれば幸いです。
現時点ではClaude 3.5 Sonnetが一歩リードしているように見えますが、冒頭でも触れたように、LLMの進化は目覚ましいものがあります。そのため、数ヶ月後には状況が大きく変わっている可能性も十分にあります。
引き続き生成AIのトレンドを追いかけながら、また新たな比較検証記事を書いてみたいと思います。
最後までご覧いただきありがとうございました！