生成AI対決：Claude vs Gemini vs ChatGPT UI作成3本勝負

## 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のデザインとして使えるようになりそうです
![SCR-20240724-cctx.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493892/14e2484a-3a3e-ef77-b754-2215319ba983.png)

### Gemini1.5 Pro
GPT4oよりもユーザーライクな分かりやすいデザインになっている気がします。
ただ、ヘッダーやフッターのCSSが若干ずれているのがマイナスポイントかも
![SCR-20240724-ckhv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493892/da9c3e0b-396c-2f95-2419-02f4ad6d61df.png)

### Claude3.5 Sonnet
完成度が高い！
デザインやコンポーネント配置の完成度もさることながら、カテゴリ分けの親切さや期間限定のバナー広告が用意されているのもよきですね
![SCR-20240724-cklo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493892/4349a558-910d-12b4-a0c6-acdc50f9f85e.png)

### 結果
順位はこのようにつけようと思います！
１位...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
![画面収録 2024-07-26 1.01.36.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493892/45a92459-edbe-194b-f771-3db790db485d.gif)

### Gemini1.5 Pro
![画面収録 2024-07-30 1.26.15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493892/c0af0931-890f-f0dc-ee7b-838d2574adcb.gif)

### Claude3.5 Sonnet
![画面収録 2024-07-30 1.31.59.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493892/88a8ee58-c167-70d6-74cd-fd28f7f126ac.gif)

はい、どれもすぐ使えるような完成度の高いものができましたね！
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](https://github.co.jp/)のWebサイトを模倣してもらいました。今回は質ではなく、どれが一番上手く模倣できているかを競いました。
![github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493892/5024ce94-83f6-0e73-9cb0-4616fe9dd2fa.png)

また、今回のプロンプトではあえて細かい指示は出さず、簡素なものを使用します。
```
こちらのwebサイトを模倣してください。
## 技術的要件
- HTML5とTailwindCSSのクラスを使用
- daisyUIのコンポーネントを適切に活用（ボタン、ドロップダウンなど）
- CDN経由でTailwindCSSとdaisyUIを読み込む
- カスタムCSSは最小限に抑え、TailwindクラスとdaisyUIで可能な限り再現する
```

### GPT4o
![gpt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493892/19d56823-419a-10d3-0d4e-531ef982b627.png)

### Gemini1.5 Pro
![画面収録 2024-07-31 20.25.34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493892/ea91ac34-bbf5-4c67-b1dd-4954d0c117d5.gif)

### Claude3.5 Sonnet
![claude.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493892/b9e83f36-a0e5-2349-e0e6-cc5e75fa704d.png)

どれも完全に模倣できているとは言えませんが、色合いやコンポーネント配置はかなり準拠できているのではないでしょうか。
写真一枚からの画像処理でここまでの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のトレンドを追いかけながら、また新たな比較検証記事を書いてみたいと思います。
最後までご覧いただきありがとうございました！