GPT-5.6 Sol がウェブデザインランキングで首位に:デザインの審美眼を身につけ、AI の典型パターンを回避することを学習
- Design Arena のウェブデザイン(非エージェント)ランキングで、OpenAI の GPT-5.6 Sol が首位に。前世代の GPT-5.5 から 18 位も順位を上げ、OpenAI のモデルとして初のトップとなりました。
- 評価側は、このモデルが生成した 1000 件のウェブページを画像ベクトルに変換してクラスタリングしました。その「デザインマップ」に明確な空洞があり、それは紫グラデーション、ベントーボックスレイアウト、特大タイトルといった AI ウェブページの典型パターンに一致することがわかったのです。
- 同じように典型パターンを回避していても、GLM-5.2 はそもそもこれらのパターンを学習していません。GPT-5.6 Sol は学習済みでありながら、あえて描かないことを選択しています。
- 信頼できるテンプレートを起点にしつつ、各要件に合わせて大幅にカスタマイズ。画一的になることと、完全に自由すぎることの間に位置します。
- すべての欠点を回避できたわけではありません。26.5% の作品に紙吹雪(コンフェッティ)が使われ、データ可視化の能力もやや弱いとされています。
ひと目でわかる「AI 製ウェブページ」を、あえて作らないことを学習
AI が作ったウェブページは、ひと目で見分けがつくことが多いですよね。紫から青へのグラデーション背景、画面いっぱいに敷き詰めたベントーボックス型のカード、ファーストビューを占める巨大なタイトル。こうした「どう見ても AI 製」とわかる安っぽさは、もはや AI ウェブページのトレードマークと言えるでしょう。
Design Arena の方法は、各モデルに同じウェブページ生成タスクを実行させ、その成果物を人に見せてブラインドで選んでもらうというもの。選ばれた数が多いほど順位が上がります。GPT-5.6 Sol が首位を獲得したのは「ウェブデザイン(非エージェント)」部門。つまり、複数回の自動修正を伴わない、一発生成のタスクです。
ひと目で「AI 製」とわかる典型パターン
前述の紫グラデーションやベントーボックスは、こうした典型パターンのごく一部です。業界ではこれらを総称してアンチパターン、あるいはデザインスメル(デザインの悪い癖)と呼びます。つまり、見た瞬間にバレてしまう安っぽい手法のことです。今回の発見を理解するには、まずこの「悪い癖」の全体像を把握する必要があります。
3 か月前、Design Arena は GPT-5.5 を分析した際、この種の悪い癖のリストをまとめています。主なものは以下の通りです。
| 悪い癖 | どのような見た目か |
|---|---|
| 紫・青グラデーション | 背景を一律に紫から青へのグラデーションにする。AI 生成画像の代表的な配色 |
| ベントーボックスレイアウト | ページを大小さまざまな四角いカードに分割し、お弁当箱のように画面いっぱいに並べる |
| 特大タイトル | メイン画像を使わず、巨大な 1 行のタイトルでファーストビューを埋める |
| オフセット(ずらし)レイアウト | 要素をわざと左右にずらして「デザイン性が高い」ように見せるが、実は決まりきった手法 |
| グリッド背景 | ページ全体にうっすらと方眼紙のような線を敷く |
これらは、単体で見れば必ずしも間違いではありません。問題は、AI が使いすぎて、読者がひと目で見抜けてしまうことです。Design Arena の評価では、これらの悪い癖がある作品は、往々にして選ばれない側に回っています。
1000 のウェブページを 1 枚の地図に。そこには欠けた領域があった
良い癖も悪い癖も、主観的な話です。評価側は目に見える証拠を求めて、次のような分析を行いました。GPT-5.6 Sol が生成した 1000 件のウェブページを、すべて 1 枚の地図上の点に変換したのです。
この作業は 2 段階です。まず、各ウェブページのスクリーンショットを CLIP と呼ばれるモデルに入力し、各画像に長い数列を出力させます。この数列は、画像の「遺伝子コード」のようなもの。スタイルが似た画像は、このコードも近くなります。次に、UMAP と呼ばれる手法を使って、この長いコードを 2 次元平面上の 1 点に圧縮します。このとき、元の距離関係をできるだけ保つようにするため、スタイルが近い点は地図上でも近くに配置されます。
CLIP は各ウェブ作品に「スタイル ID カード」を発行するようなもの。それが長いコードです。UMAP は、立体的な星雲全体を 1 枚の平面の星図に投影するようなもの。星の密度の濃淡、集まり方、そして中央の空洞も、投影後もほぼそのまま残ります。
1000 個の点が広がると、それがこのモデルの「デザイン空間」、つまり、このモデルが好んで生成するスタイルの領域全体になります。広げてみると、評価側は想定外のものを発見しました。地図上にいくつか明確な空洞があり、点の集まりの中で不自然に欠けた領域があったのです。
以下が評価側が公開した実際の投影図です。1 枚目は GPT-5.6 Sol のもので、密集した点の中にいくつかの空洞が見て取れます。2 枚目は GPT-5.5 のもので、点群は隙間なく埋まっており、このような欠損は見られません。
UMAP のような投影では、理論上、元の空間にある空洞もそのまま保持されます。つまり、あるモデルのマップに穴があり、別のモデルにはないということは、GPT-5.6 Sol はその領域を描く能力はあり、他の場所では描けているのに、あえてそこには何も配置しない、ということを示しています。
穴の中に何があるのかを確認するため、評価側は GPT-5.6 Sol と GPT-5.5 の作品を同じ図に重ね合わせました。GPT-5.6 Sol の点はオレンジ色で、GPT-5.5 の点の上に重ねられています。オレンジの点がある場所は、GPT-5.6 Sol が生成する領域。オレンジの点がなく、下の色だけが残っている場所は、GPT-5.6 Sol が避け、前世代が生成していた領域です。
2 つのモデルはほとんどの領域で重なりますが、紫グラデーションのクラスタにはオレンジの点が 1 つもありません。ベントーボックス、特大タイトル、オフセットレイアウトといった他の悪い癖にも同じことが当てはまり、穴の中にはまさに、あの AI の典型パターンが収まっていたのです。
同じ悪い癖を避けても、2 つのモデルは別の道を歩む
AI の典型パターンを避けるモデルは、GPT-5.6 Sol だけではありません。しかし、その避け方は他とは異なります。これが、今回の分析で最も直感に反する点です。
比較対象として、上位にランクインしている GLM-5.2 を見てみましょう。GLM-5.2 も特大タイトルなどの悪い癖をほとんど生成しません。その方法は、これらのパターンを含まない高評価のテンプレートを学習しているからです。つまり、GLM-5.2 のデザイン空間には、そもそも「紫グラデーション」という領域が存在しません。ですから、描くことができないのは当然で、マップ上に穴はできません。そこは最初から空っぽだからです。
GPT-5.6 Sol は別です。マップ上に穴が残っているということは、これらのパターンを学習し、描く能力があることを示しています。ただ、生成のたびに回避しているのです。紫グラデーションがどのようなものか、どこに配置すべきかを知った上で、あえて配置しない選択をしているのです。
デザイン空間にはこれらの悪い癖の位置が含まれているが、あえてそこに生成しないため、マップ上に穴ができる。「知っているが、やらない」。
悪い癖を含まないテンプレート群を使って描くため、そのスタイルは元々の能力範囲外。マップ上に対応する領域自体が存在しない。「そもそも選択肢がない」。
この 2 つの道は、最終的な成果物としては、どちらも悪い癖を避けられているかもしれません。違いは能力の形状にあります。一方はその領域を「行かない」とマークして囲っているのに対し、もう一方はその領域自体を地図に描いていません。評価側は、GPT-5.6 Sol は学習後に自ら抑制している、という、モデルとしては珍しい行動を取っていると指摘しています。
信頼できるテンプレートから出発し、各要件に合わせて大幅に変更
これは評価側が挙げた 2 つ目の発見で、「パーソナライズ」に関するものです。ウェブページを生成するモデルには、大きく分けて 2 つの傾向があります。1 つはテンプレートに強く依存するタイプで、安定はしますが、毎回よく似た見た目になります。もう 1 つはテンプレートをほとんど使わず、各要件に応じてゼロから生成するタイプで、バリエーションは豊かですが、必ずしも安定しません。GPT-5.6 Sol は、その中間に位置します。
GPT-5.6 Sol は、検証済みの優れたデザイン構造のセットから出発し、各具体的な要件に合わせて大幅に調整します。同じテンプレートの下でも、互いに関連しながらも異なる、多数のバリエーションを生成できます。評価側はこれを、細菌が近縁の菌株へと進化するようなものだと例えています。共通の基盤を共有しつつ、それぞれが独自に発展していくイメージです。
両極の対照として:GLM-5.2 も今回のランキングで上位に入っていますが、高評価のテンプレートを学習することで成り立っています。利点は安定性、欠点はバリエーションが基本的に要件自体からしか生まれず、同じテンプレートが繰り返し現れることです。一方、Claude Fable 5 にはテンプレートの痕跡がほとんどなく、デザイン空間はより散らばっており、各作品は要件に応じて高度にカスタマイズされています。
GPT-5.6 Sol はこの両極の間に位置します。テンプレートで最低限の品質を確保しつつ、カスタマイズで差別化を図っています。評価側は、これにより各ユーザーが自分の要件に合い、かつプロの手によるもののように見えるページを入手でき、ランキング上位の大きな要因になったと見ています。1 つ気づく点として、異なるページに画像を設定する際、同じ画像を複数の異なる場面で使うことがよくあります。
紙吹雪は盛大に、チャートはまだ不得意
典型パターンの自発的抑制についても、GPT-5.6 Sol はすべてを達成できたわけではありません。評価では、2 つの明確な弱点が指摘されています。
1 つ目は紙吹雪(コンフェッティ)です。 GPT-5.6 Sol は、ページ上にコンフェッティ(お祝い用の色とりどりの紙吹雪アニメーション)をまき散らすのが大好きで、作品の 26.5% 以上に登場します。その徹底ぶりは、既成のコンフェッティライブラリがなくても、自分でゼロから書いて使うほどです。これ自体も AI の典型パターンの 1 つですが、これは回避できていません。
2 つ目はデータチャートです。チャートやデータ可視化のパフォーマンスが弱く、一般的なウェブチャートライブラリである chart.js を使っても、まともな実データのチャートを描けません。
紫グラデーション、ベントーボックス、特大タイトル、オフセットレイアウト、グリッド背景。マップ上に穴ができています。
紙吹雪は作品の 26.5% に登場し、自前のライブラリを書くことも。データチャートは満足に描けません。
従来の 1 位より 2 倍以上速く、価格も半分
順位と美的感覚に加え、GPT-5.6 Sol は速度と価格の面でも差をつけています。評価側は、このモデルが同時に 2 つの新しいパレート最適フロンティアを打ち立てたと述べています。1 つは「見た目の良さ vs 速度」、もう 1 つは「見た目の良さ vs 価格」です。
引かれた境界線を想像してください。その線上に立つということは、ページをもっと良くしたいなら、より多くの時間か費用がかかる、つまり、ただで改善することはできない、という状態です。GPT-5.6 Sol はこの境界線を前方に押し広げました。同じ見た目の良さを、より速く、より安く実現できるということです。
より厳選し、より柔軟に
評価側は、今回の観察を 2 つのポイントにまとめています。
1 つ目は、より厳選しているということです。どのビジュアルパターンがウェブページを「AI 製とすぐわかる」ように見せるかを学習し、それらを自ら抑制しつつ、信頼できる一連のデザイン構造はいつでも使えるよう保持しているように見えます。2 つ目は、より柔軟であるということです。テンプレートとカスタマイズを組み合わせ、テンプレートで最低限を確保しつつ、各要件に大幅に調整を加えることで、誰もが自分の要件に合い、プロの手によるもののように見えるページを入手できます。
この 2 点が重なり、Design Arena が GPT-5.6 Sol の一発生成ランキング首位の主な説明としています。回避できなかった紙吹雪や、満足に描けないチャートについても、評価内で同様に提示されており、併せて見ることで全体像が浮かび上がります。
GLM-5.2 は、これらのデザインの悪い癖をそもそも学習していないため、生成することはない。GPT-5.6 Sol は、学習し、その存在を知りながら、あえて描くことを拒否しているように見える。 Design Arena、GPT-5.6 Sol の評価分析より
OpenAI の GPT-5.6 Sol がウェブデザインランキング首位に:AI の「一発でわかる」典型を学びながら、あえて描かない
第三者評価プラットフォーム Design Arena が、その 1000 件のウェブページを 1 枚の地図に。欠けている部分は、まさに紫グラデーションといった AI の典型が存在するはずの領域でした。図解でわかりやすく解説します。
↓ 一枚で読了・動く図あり
Design Arena は、第三者による AI デザイン評価プラットフォームです。方法はシンプルで、各モデルに同じウェブページ生成タスクを実行させ、その成果物を人に見せてブラインドで選んでもらいます。選ばれた数が多いほど順位が上がります。
AI が作ったウェブページは、ひと目で見分けがつくことが多いですよね。紫から青へのグラデーション背景、四角いカードを敷き詰めたレイアウト、ファーストビューを占める特大タイトル。この「一目で AI」な安っぽさは、もはや AI ウェブページのトレードマークです。ところが、OpenAI の新モデル GPT-5.6 Sol が、このランキングで首位を獲得しました。前世代より 18 位も上げ、OpenAI のモデルとして初のトップです。評価側は、その勝因を探るべく、GPT-5.6 Sol が生成した 1000 件の作品を分析しました。
分析の結果、最大の特徴が明らかになりました。それは、これらの「一目で AI」な典型パターンを学習しつつも、あえてページに配置しない、という点です。
紫グラデーションやベントーボックスなどの典型を学習し、生成時にそのまま盛り込むため、結果は「一目で AI」
同じ典型を学習しながらも、生成のたびに回避して描かないため、結果は「AI 製に見えない」
ただ、「典型を避けた」という主張は主観的です。良い悪いは人それぞれ。評価側は、目に見える証拠を提示しようとしました。
証拠はこうやって見つけられました。GPT-5.6 Sol が生成した 1000 件のウェブページを、すべて 1 枚の地図上の点に変換したのです。
2 段階のプロセスです。まず、CLIP と呼ばれるモデルを使って、各ウェブページのスクリーンショットにコードを割り当てます(内容やスタイルが似ている画像ほど、コードも近くなります)。次に、UMAP と呼ばれる手法で、この長いコードを平面上の 1 点に圧縮します。スタイルが近い点は、地図上でも近くに配置されます。1000 個の点が広がった「スタイルの地図」を見ると、中央が不自然に欠けていることに気づきます。
評価側が 2 つのモデルの作品を重ね合わせて確認したところ、紫グラデーションのクラスタには GPT-5.6 Sol の点が 1 つもありませんでした。ベントーボックスや特大タイトルも同様で、穴の中には、まさにあの AI の典型パターンが収まっていたのです。同じ典型を避けるにしても、GLM-5.2 は別の道を歩んでいます。GLM-5.2 はこれらの典型をそもそも学習しておらず、地図上のその領域は最初から空っぽ。GPT-5.6 Sol は学習済みで、描く能力はあるのに、毎回回避しています。1 つは「できない」、もう 1 つは「できるが、やらない」です。
同じ地図から、もう 1 つの発見もありました。GPT-5.6 Sol の点は、単に固まっているわけではありません。実績のあるテンプレートのセットから出発しつつ、各要件に合わせて大幅に調整するため、「画一的」と「完全に自由」の間に位置します。
美的感覚に加え、GPT-5.6 Sol は速度と価格の面でも差をつけています。
また、GPT-5.6 Sol もすべてを回避できたわけではありません。紙吹雪は作品の 4 分の 1 以上に登場し、既成のライブラリがなくても、自分でゼロから書いて使うほど。データチャートも苦手で、一般的なチャートライブラリである chart.js を使っても、まともな実データのチャートを描くことができません。これらの点も、評価では併せて提示されています。
だらけだろ。..
- × 紫グラデーション背景
- × ベントーボックスカード
- × 特大タイトル
- × グリッド背景
AI 製だって!
「デザインスメル」
1 枚の地図に?
中央が欠けている
最初からない
紙吹雪は防げず。