はじめに
私はエンジニア2年目の新卒社員です。
最近、「サイトのモックアップを作成してほしい」という依頼をいただいたため、AIを使用して簡単にモックアップを作成する方法を模索していました。
ただ、これまで私はフロントエンドの開発経験は少なく、業務でHTMLやCSSを書く機会もほとんど無かったため、
・どのAIがフロントエンド生成に向いているのか
・AIごとにどのくらい差があるのか
が分かりませんでした。
そこで今回は、よく使われている3つのAIに同じプロンプトを渡し、どのAIがフロントエンドのデザイン作成に向いているのかを比較してみることにしました。
比較方法
今回は、以下の3段階で比較を行いました。
1. 初期比較
まずは、10個のカード要素を表示するだけのシンプルな画面を生成してもらい、各AIの特徴をざっくり確認します。
2. 本比較
次に、実際のECサイトに近い、少し複雑な商品詳細画面を生成してもらいます。
3. 本比較_おまけ
最後に、デザイン要件をあえて細かく指定せず、各AIのセンスに任せて画面を作ってもらい、どのようなデザイン傾向になるのかを調査します。
条件
今回の比較条件は以下のように設定しました。
・3つのAIには同じプロンプトを送る
・生成されたコードはVSCodeに保存して実行する
なお、本記事では以下の観点で比較しています。
・視認性→ 情報の見やすさ、余白、色使いなど
・機能性→ ボタン配置や購入導線など、使いやすさ
・デザイン性→ フォント、配色、全体の雰囲気など
初期比較
まずは初期比較として、シンプルな画面を作成してもらいました。
今回使用したAIは以下の3つです。
・ChatGPT
・Gemini
・Claude
いずれも、記事執筆時点（2026年5月20日）のバージョンを使用しています。
今回作成してもらうのは、「カードを10個並べた簡易サイト」です。
送信するプロンプトについては、ChatGPTに添削してもらい、以下の内容に決定しました。
【プロンプト本文】
HTMLとCSSのみを使用した簡易サイトを作成してください。
【要件】
- HTML1ファイル、CSS1ファイルで構成すること
- JavaScriptは使用しないこと
- 要素を10件表示すること
- 各要素には以下を含めること
- 画像エリア（実画像は使用せず、色付きブロックで代用）
- タイトル
- 説明文
- ボタン
- ボタンはデザインのみ実装し、クリックイベントや遷移先は不要
- タイトル・説明文はダミーテキストでよい
- シンプルで見やすいカード型デザインにすること
- HTML/CSSコードは省略せず全文提示することChatGPT
ChatGPTが生成した画面はこちらです。
指定した要件をしっかり満たした、かなりシンプルな構成になっていました。
最低限必要な要素をきちんと作る、という印象でした。
Gemini
Geminiが生成した画面はこちらです。
ChatGPTと比べると、少しデザイン性が上がっています。
カードごとに色を変えたり、フッターを追加したりと、「サイトとしての見栄え」を意識している感じがありました。
また、
・ボタン色
・ヘッダー
・フッター
などの配色にも統一感があり、全体的に見やすい画面になっています。
Claude
Claudeが生成した画面はこちらです。
かなりおしゃれなデザインになりました。
特に印象的だったのがカード画像部分です。 カード画像についても単色ではなく、うっすらとグラデーションを入れつつ、左下に円形オブジェクトを配置することで奥行きを感じさせるデザインになっています。
また、
・フォント変更
・小見出し追加
・カテゴリ表示
・補足テキスト
なども追加されており、全体的に完成度の高い画面になっていました。
初期比較結果
かなりシンプルな課題でしたが、この時点でもAIごとの差がかなり見えてきました。
ただし、どこを重視するかによって評価は変わりそうです。
要件通りに安定して生成する、という観点では、
ChatGPT > Gemini > Claude
という印象でした。
一方で、デザイン性だけで見ると、
Claude > Gemini > ChatGPT
という印象です。
この時点で、ざっくり以下のような特徴が見えてきました。
・ChatGPT→ 要件に忠実
・Gemini→ バランス型
・Claude→ デザイン重視
各AIの特徴を掴めたところで、本比較に移りたいと思います。
本比較
初期比較はかなりシンプルな課題だったため、次はもう少し複雑な画面で比較してみます。
以下の画像は、私が某ECサイトを参考に作成した商品詳細画面です。
今回は、この画面を各AIに再現してもらいます。
フロントエンド開発では、画面内の要素が増えるほど配置調整が難しくなります。
例えば、
・ボタン位置がズレる
・横並びが崩れる
・要素同士が重なる
といった問題が発生しやすくなります。
このような複雑な画面をAIがどこまで正確に再現できるのか、実際に見ていきます。
今回はClaudeを使用して、上記画面をできるだけ正確に再現するためのプロンプトを作成してもらいました。 また、サイト内のベッド画像についてはGeminiを使用して生成しました。
【プロンプト本文】
以下の仕様に従い、家具ECサイトの商品詳細ページをHTML/CSSの2ファイル構成で作成してください。
---
## ファイル構成
- index.html
- style.css
- index.htmlの<head>内で style.css を読み込む
---
## 全体仕様
- フォント：sans-serif系
- メインカラー：オレンジレッド（#E8472A）
- 背景色：白（#FFFFFF）
- 全体の最大幅：1100px、中央寄せ
- レスポンシブ対応は不要
---
## 1. ヘッダー
横一列のナビゲーションバーとして構成する。
背景色は白（#FFF0EB）を使用する。
**左側：**
- サイトロゴ「EC-Site」をテキストで表示（太字・大きめ）
**中央：**
- テキスト入力フィールド＋虫眼鏡アイコン（🔍）のセットを横並びで配置
- 入力フィールドは横長・角丸なし
- 虫眼鏡アイコンは入力フィールドの右端に隣接して配置
**右側：**
以下のアイコン＋テキストのセットを横並びに4つ配置する。
それぞれアイコンを上、テキストを下に縦並びにする。
| アイコン | テキスト |
|--------|--------|
| 🛒 | カート |
| ↩️ | 履歴 |
| ★ | お気に入り |
| 📋 | 購入履歴 |
その右端に「➡ ログイン」ボタンを配置する。
ボタンはオレンジレッド（#E8472A）の角丸ボタン、テキストは白。
---
## 2. サブナビゲーション（ヘッダー直下）
中央に「EC－家具ショップ」とテキストで大きく表示する。
その下にテキストリンクを横並びに4つ配置する。
- トップページ（下線あり・オレンジレッド色）
- お支払い・送料
- お問い合わせ
- 会社概要
---
## 3. カテゴリセクション
「ショップカテゴリ」とラベルを左寄せで表示する。
その下に薄いグレー背景の横長エリアを設け、以下のカテゴリを均等横並びに6つ配置する。
それぞれアイコンを上、テキストを下に縦並びにする。
| アイコン | テキスト |
|--------|--------|
| 🪑 | 学習机・子供用品 |
| 🖥️ | PCデスク |
| 🛋️ | ソファ |
| 🛏️ | ベッド |
| 🍽️ | テーブル・チェア |
| 🛁 | バス用品 |
---
## 4. 商品エリア（2カラムレイアウト）
商品画像エリアと購入決定エリアを左右2列に分割する。
### 左カラム（約40%幅）
以下の3枚の画像を縦に並べて表示する。
- ベッド1（画像ファイル名：bed1.jpg）
- ベッド2（画像ファイル名：bed2.jpg）
- ベッド3（画像ファイル名：bed3.jpg）
各画像は幅100%・角丸なし・均等な上下間隔で配置する。
### 右カラム（約55%幅）
上から順に以下を配置する。
**商品名（大きめテキスト・太字）：**
ベッド ベッドフレーム マットレスセット マットレス付き シングル
**価格：**
「18800円」をオレンジレッド・大きめフォントで表示。
その右横に「送料無料」を小さいテキストで表示。
その下に「獲得予定ポイント 320ポイント」をオレンジレッドの小さいテキストで表示。
**区切り線（全幅）を1本引く。**
**「商品詳細」のラベルを表示する。**
**サイズ選択：**
「サイズ：」ラベルの下に「シングル」と書かれたボタンを配置する。
ボタンは枠線あり・背景白・角丸。
**カラー選択：**
「カラー：」ラベルの下に以下3つのボタンを横並びで配置する。
ボタンはすべて枠線あり・背景白・角丸。
- ホワイト/グレー
- アイボリー/カーキ
- グレー/ブラック
**数量選択：**
「数量：」ラベルの下に以下を横並びで配置する。
- 「－」ボタン（枠線あり・背景白・角丸）
- 数量テキスト「1」
- 「＋」ボタン（枠線あり・背景白・角丸）
**購入ボタン（2つ横並び）：**
- 「かごに追加」ボタン：オレンジレッド背景・白テキスト・角丸・幅は左右均等
- 「購入手続き」ボタン：オレンジレッド背景・白テキスト・角丸・幅は左右均等
**区切り線（全幅）を1本引く。**
**「商品説明」という見出しをテキストで表示する。**
その下に以下の文章をそのまま固定テキストとして記述する（改行・記号含む）：
穏やかな朝を迎える、自然体でミニマルな寝室へ。
ぬくもりを感じる天然木のフレームに、優しくお部屋に馴染むファブリックを合わせました。アクセントとして足元に添えたベッドスローが、シンプルさの中に洗練されたナチュラルな印象をプラスします。
寝室に必要なアイテムがすべて揃う便利な5点セットなので、届いたその日から統一感のある上質な空間をお楽しみいただけます。
■ 各アイテムのこだわり・素材
ベッドフレーム：天然木（オーク無垢材 / ウレタン塗装仕上げ）
高密度マットレスコイル：ポリエステル / ウレタンフォーム
側地：綿・ポリエステル混紡
枕＆掛け布団カバー：オーガニックコットン100%
中綿：ポリエステル（抗菌防臭加工）
ベッドスロー（上の布）：アクリル60% / ウール40%
■ 商品仕様
・サイズ：シングル（約 幅98cm × 長さ200cm × ヘッドボード高さ75cm）
・カラー：ホワイト/グレー・アイボリー/カーキ・グレー/ブラックの3色からお選びいただけます。
・生産国：日本（フレーム・マットレス） / 中国（ファブリック類）
---
## 注意事項
- 画像ファイル（bed1.jpg / bed2.jpg / bed3.jpg）はindex.htmlと同じディレクトリに配置されている前提で、そのまま<img>タグで参照すること
- プレースホルダーや代替表示は使用しない
- JavaScriptによるボタンの動的処理は不要
- スタイルはすべてstyle.cssに記述し、index.html内にインラインスタイルは書かないことChatGPT
ChatGPTが生成した画面はこちらです。
かなり高い再現度でした。
細かく見ると、
- ヘッダー右側アイコンの幅が揃っていない
- カラー選択ボタンの横幅が文字の長さに依存しており統一されていない
といった部分はありました。
ただ、全体としてはかなり元画面に近く、「要件通りに組み立てる力」はかなり高いと感じました。 また、右側の商品説明エリアの縦幅も自然に揃っており、レイアウトの安定感もありました。
Gemini
Geminiが生成した画面はこちらです。
こちらもかなり元画面に近い構成になっていました。
ただし、大きな違いとして、
・「かごに追加」
・「購入手続き」
ボタンが横並びではなく、縦並びになっていました。
開発者ツールで確認したところ、ボタン横幅を広く取りすぎたことで、横並び表示できる幅を超えてしまったことが原因でした。
その他については、
・カラー選択ボタンの横幅が文字の長さに依存しており統一されていない
という部分はあったものの、
・ヘッダーアイコン幅は均等に配置できている
など、ChatGPTとは違う特徴も見られました。
Claude
Claudeが生成した画面はこちらです。
こちらも、かなり元画面に近い構成になっていました。
ChatGPTと同じように、
・ヘッダーアイコン幅が不揃い
・カラー選択ボタン幅が不揃い
となりました。
また、プロンプトでは指定していなかったにも関わらず、サブナビゲーション下部に区切り線が追加されていました。
全体的に見ると、Claudeは「画面を余白なく埋める」ようなデザイン傾向が強い印象でした。
本比較まとめ
かなり細かく要件を指定したため、3つのAIとも非常に近い画面を生成しました。
この結果から、
プロンプトを細かく設計すれば、どのAIでもかなり近い結果を出力できる
ということが分かりました。
ただ、実際の開発では、 「必要な項目は決まっているけど、デザインはまだ決まっていない」 というケースも多いと思います。
そこで次は、デザイン要件をあえて曖昧にした状態で比較してみます。
本比較_おまけ
こちらもClaudeを使用して、要件だけを記載した簡易プロンプトを作成しました。
今回は、商品エリアのレイアウトについても指定せず、各AIに自由に設計してもらいます。
【プロンプト本文】
以下の仕様に従い、家具ECサイトの商品詳細ページをHTML/CSSの2ファイル構成で作成してください。
---
## ファイル構成
- index.html
- style.css
- index.htmlの<head>内で style.css を読み込む
---
## デザイン方針
- 視認性・操作性を最優先に、デザインは自由に行うこと
- フォント・色・余白・アイコン・ボタンスタイルなどは、家具ECサイトとして自然に見えるよう自由に選定してよい
- レスポンシブ対応は不要
---
## 1. ヘッダー
以下の要素を含む横一列のナビゲーションバーを作成する。
- サイトロゴ「EC-Site」
- キーワード検索フィールド（検索実行ボタン付き）
- カート・履歴・お気に入り・購入履歴 への導線（アイコン＋テキストラベル）
- ログインボタン
---
## 2. サブナビゲーション（ヘッダー直下）
- サイト名「EC－家具ショップ」の表示
- 以下4つのページリンク
- トップページ
- お支払い・送料
- お問い合わせ
- 会社概要
---
## 3. カテゴリセクション
「ショップカテゴリ」のラベルと、以下6カテゴリをアイコン＋テキストで一覧表示する。
- 学習机・子供用品
- PCデスク
- ソファ
- ベッド
- テーブル・チェア
- バス用品
---
## 4. 商品エリア
以下の要素を含む商品エリアを作成する。レイアウトは自由に設計してよい。
- 商品画像（bed1.jpg / bed2.jpg / bed3.jpg）
※画像ファイルはindex.htmlと同じディレクトリに配置されている前提で、
プレースホルダーや代替表示は使用せず、そのまま<img>タグで参照すること
- 商品名：「ベッド ベッドフレーム マットレスセット マットレス付き シングル」
- 価格：「18800円」／「送料無料」／「獲得予定ポイント 320ポイント」
- サイズ選択UI（選択肢：シングル）
- カラー選択UI（選択肢：ホワイト/グレー・アイボリー/カーキ・グレー/ブラック）
- 数量選択UI
- 「かごに追加」ボタン
- 「購入手続き」ボタン
- 商品説明テキスト（下記の固定文をそのまま使用）
---
## 5. 商品説明テキスト（固定）
購入ボタンの下に、以下をそのまま記述すること。
穏やかな朝を迎える、自然体でミニマルな寝室へ。
ぬくもりを感じる天然木のフレームに、優しくお部屋に馴染むファブリックを合わせました。アクセントとして足元に添えたベッドスローが、シンプルさの中に洗練されたナチュラルな印象をプラスします。
寝室に必要なアイテムがすべて揃う便利な5点セットなので、届いたその日から統一感のある上質な空間をお楽しみいただけます。
■ 各アイテムのこだわり・素材
ベッドフレーム：天然木（オーク無垢材 / ウレタン塗装仕上げ）
高密度マットレスコイル：ポリエステル / ウレタンフォーム
側地：綿・ポリエステル混紡
枕＆掛け布団カバー：オーガニックコットン100%
中綿：ポリエステル（抗菌防臭加工）
ベッドスロー（上の布）：アクリル60% / ウール40%
■ 商品仕様
・サイズ：シングル（約 幅98cm × 長さ200cm × ヘッドボード高さ75cm）
・カラー：ホワイト/グレー・アイボリー/カーキ・グレー/ブラックの3色からお選びいただけます。
・生産国：日本（フレーム・マットレス） / 中国（ファブリック類）
---
## 注意事項
- JavaScriptによるボタンの動的処理は不要
- スタイルはすべてstyle.cssに記述し、index.html内にインラインスタイルは書かないことChatGPT
ChatGPTが生成した画面はこちらです。
本比較時よりも、さらに見やすい画面になっていました。
特に、
・アイコンが均等配置されている
・商品画像をメイン・サブに分けている
・購入ボタンが強調されている
など、ECサイトとしての「使いやすさ」をかなり意識した、機能性の高いサイトになっている印象です。
また、サイズ選択やカラー選択もプルダウン形式になっており、操作面も改善されていました。
Gemini
Geminiが生成した画面はこちらです。
こちらもかなり見やすい画面になっていました。
特に、
・カテゴリを左サイドバー化
・商品画像をメイン・サブ表示化
している点が特徴的です。
一方で、
・ヘッダーアイコン幅が文字数依存で統一されていない
という部分があり、
・強調色をほとんど使わない
など、かなり落ち着いたデザインになっていました。
購入ボタンも全体の色味に合う配色にしているなど、全体的に統一感重視という印象です。
Claude
Claudeが生成した画面はこちらです。
こちらも全体としてかなりおしゃれな画面になっていました。
ただし、
・ヘッダー要素が左寄り
・装飾フォントで価格が見づらい
・強調色が少ない
など、「サイトとしての見栄え」を重視し、機能性よりもデザイン性を優先している印象があります。
本比較_まとめ結果
サイト内に、
・「自然体」
・「天然木」
といったワードが含まれていたためか、各AIとも落ち着いたブラウン系デザインを出力していました。
全体的な視認性については、どのAIもかなり高水準だったと思いますが、機能性まで含めて見ると、少し差がありました。
特にClaudeは、デザイン性にかなり寄っている印象があり、ECサイトとしての使いやすさではやや弱く感じる場面もありました。
まとめ
今回の比較を通して、特に感じたのは 「プロンプト設計の重要さ」 です。
デザイン要件が明確に決まっている場合は、かなり細かく指示を書くことで、どのAIでも近い結果を出せることが分かりました。
一方で、デザインが未確定な場合は、AIごとの得意な方向性を活かして使い分けるのが良さそうです。
今回の比較結果をまとめると、個人的には以下のような印象でした。
・ChatGPT→ 要件忠実・機能性重視
・Gemini→ 視認性と機能性のバランス型
・Claude→ デザイン性重視
また、今回Claudeをフリープランで使用していたところ、途中で使用上限に到達してしまいました。
そのため、実際の業務利用では、
・デザイン性重視＋有料環境を用意できる場合→ Claude
・無料で気軽に使いたい場合→ Gemini
・要件通りに安定して生成したい場合→ ChatGPT
という使い分けが良さそうだと感じました。
AIは今後も継続的に進化していきます。
そのため、サイト画面の作成に限らず、各AIの特徴を継続的に把握しながら、目的に応じて使い分けていくことが重要だと感じました。
