WORKS 04 / COMPARATIVE EXPERIMENT
AI Web Studio / Web / Experiment
AI Web Design Comparison
同じ系統の要件と同じ3点の画像を渡しても、AIが違えば、何を先に見せるか、どこまで情報を埋めるか、どんな空気を作るかは変わる。その差を制作結果のまま比較した。
厳密な初稿同士のベンチマークではない。ChatGPT版は人間レビューとpolishを経た完成版、Claude版は完成済みサイトや他branchを参照させず、隔離条件から制作したRaw初稿。
01
Two outputs
同じ材料から生まれた、重心の違う2つのサイト。
Human-reviewed complete
ChatGPT version
Review score129.5 / 150
余白、非対称な写真構成、手書き要素を含むブランド表現を重視。実地図と外部地図リンク、モーダルや別ページ化まで含めて、店舗サイトとしての仕上げを進めた。
Strengths
- ブランド表現と独自性
- 実用的な来店導線
- 情報量に応じたページ分割と仕上げ
Trade-offs
- 価格や所在地の即時把握はClaude版より弱め
- Human review後の完成版なので、初稿生成力そのものとは切り分けて見る必要がある
Isolated raw first draft
Claude version
Review score123.5 / 150
ファーストビューからメニューとアクセスへの行動を明示し、価格、席数、営業時間、駅からの所要時間などを初稿で高密度に配置。店舗情報を漏れなく組み立てる方向に強く出た。
Strengths
- 初稿からの情報設計と網羅性
- 次の操作が分かりやすい導線
- 短時間で店舗運用情報まで具体化
Trade-offs
- 装飾的な概略地図で、実際の来店導線としては弱い
- SNS仮リンクなど未完成点をRaw初稿の観測データとして残している
02
Independent review
別環境のChatGPT Workで公開画面と実装を比較。15項目の合計はChatGPT版129.5 / 150、Claude版123.5 / 150。点差そのものより、どの工程で差が出たかを観測材料として扱った。
情報設計
ChatGPT8.5
Claude9.0
Claude版は価格・席数・駅からの時間まで初稿で高密度に配置。
デザイン一貫性
ChatGPT9.0
Claude8.5
ChatGPT版は形状、書体、余白までブランド表現を統一。
来店導線
ChatGPT8.5
Claude7.0
ChatGPT版は実地図と外部地図リンクまで接続。
初稿としての完成度
ChatGPT9.0
Claude9.0
評価上は同点。ただしChatGPT版は完成版なので、条件差を併記して扱う。
独自性
ChatGPT9.0
Claude7.5
ChatGPT版は非対称写真枠や手書き要素が固有の印象につながった。
評価時に実ブラウザで確認できた表示領域は1363×936。390×844 / 1920×1080は実装上のブレークポイントと再配置から評価しており、指定2サイズの実機画像同士を採点したものではない。
03
What changed by AI?
点数より、制作のどこで差が出たかを見る。
同じ材料でも、設計の重心が変わる
ChatGPT版はブランド体験と滞在感へ、Claude版は情報取得と店舗要件の網羅へ寄った。同じ要件を渡すだけでは、同じ答えにはならない。
未完成点も比較データになる
Claude版の概略地図や仮リンクは掲載前に直さず、そのまま残した。仕上げで弱点を消すより、隔離条件から一発で何を作ったかを保存する方が、この比較では意味がある。
勝敗より、工程分担を見る
比較結果から、情報の洗い出しと初期構成、ブランド表現、実用導線、最終品質では得意な動きが異なることが見えた。AIを一人の万能担当として見るより、工程ごとに役割を分ける方が使いやすい。
04
Role split
Claudeに「漏れなく店を作らせ」、ChatGPTに「その店らしく仕上げさせる」。
今回の比較で残ったのは、AIを一律に順位づける答えではなく、どの工程を誰に任せるかという制作上の選択肢だった。
Back to Works