「AIによく見られる没個性的なデザインパターン」をShow HNへの投稿数が爆増した結果から分析するとこうなる、やはり独創性の欠如が問題

起業家かつソフトウェアエンジニアのエイドリアン・クレブス氏が、エンジニアが集うコミュニティ「Hacker News」の投稿を分析し、AIによるデザインが氾濫しているという結果についてブログにまとめています。

Show HN submissions tripled and now mostly share the same vibe-coded look
https://www.adriankrebs.ch/blog/design-slop/

Hacker Newsでは、「Show HN」として自分が作ったものを披露する文化があります。かつてはDropboxやStripeなどもHacker Newsでお披露目されました。2014年には正式なガイドラインが制定され、「タイトルを『Show HN:』で始めること」などのルールが決まっています。

クレブス氏がShow HNの投稿を閲覧していたところ、多くのプロジェクトにおいてAIが生成したと思われるような、どこか無機質で味気ない印象を感じたとのこと。実際にShow HNの投稿数の推移を見てみると、AIの登場とともに投稿数が増加し、Claude Codeの登場から数カ月で爆発的に増えていることがわかりました。

クレブス氏はShow HNへの投稿数が増加した理由は「Claude Codeで生成されたもの」が大量発生しているためと推測し、Show HNの投稿を分析することでAIに共通の設計パターンを見つけ出し、「何をAIっぽいと感じているのか」という印象を定量化できると考えました。

Show HNの投稿から、クレブス氏と友人のデザイナーたちが「AIっぽい」と印象を受けたページはこんな感じ。「タイトルの上にカプセル型のバッジ」が配置されており、特に注意を引きます。

別の投稿でも、同じような要素が使用されていました。

カードの上に色つきの線を配置するのもAIっぽいとのこと。

カードの横に色つきの線が配置される場合もあります。

クレブス氏はカードの上にアイコンを表示するのもAIっぽい印象を受けると述べています。

グラデーションした背景とガラスっぽいカードもAIのように感じるとのこと。

このような「AIっぽい要素」を15種類挙げ、クレブス氏はShow HNの投稿500件にどの程度を「AIっぽい要素」が存在するのか分析しました。結果は以下の通り。

・グラデーションを多様
28％のサイトで背景やタイトルにグラデーションが使用されていたとのこと。

・shadcn/uiを初期状態から何も変更せず使用
shadcn/uiは著名なUIコンポーネントで、Claude Codeが好んで使用することが知られています。23.5％のサイトが何のカスタムも行っておらず、インストール時の状態のままでした。

・中央配置のタイトル
23.5％のサイトで使用されています。AIは中央が好きな模様。

・常時ダークモードの外観
暗い背景に灰色の本文で、セクションラベルは全て大文字というのがセットとのこと。20.3％のサイトで使用されていました。

・テンプレート化された特徴グリッド
20.1％のサイトでは、タイトルの下にアイコンが上部に付いた同一のカードが3枚か6枚配置されています。

・ガラス形態
背景をぼかし、浮かんだ印象を与えるパネルは17.1％のサイトで使用されていました。

・フォント
AIはSpace Grotesk、Instrument Serif、Geist、Syne、Frauncesといったフォントを多様するそう。15.8％のサイトがこれらのフォントを使用しています。

・カードに色つき線
カードの上部か左端には色つきのアクセントストライプを入れます。13％のサイトで確認できました。

・統計バナー
12.2％のサイトには「ユーザー数1万人以上 · 稼働率99.9% · 評価4.9★」のようなバナーが入っています。

・大事なボタンは紫色
「登録」などの行動喚起(CTA)ボタンはインディゴもしくはバイオレットなど紫系統の色が好まれます。10.7％のサイトではCTAボタンに紫系統の色が使用されていました。

・見出しは全て大文字
10.5％のサイトでセクションラベルやナビゲーションリンクは全て大文字です。

・番号付きの手順シーケンス
9.4％のサイトでは、本来ならユーザーがサービスの利用を決意した後に表示されるべきチュートリアルがランディングページに出現していました。

・タイトルの上にカプセル型のバッジ
4.7％のサイトで出現。

・鮮やかなボックスシャドウ
ボタンやカードに鮮やかなボックスシャドウの光沢が現れます。4.3％のサイトで使用されていたとのこと。

・サイドバーやナビゲーションバーに絵文字を使用
3.8％のサイトで絵文字アイコンがサイドバーやナビゲーションバーに出現しました。

これらのパターンが出現していても、必ずしもAIで生成されたサイトだとは言えません。そこで、クレブス氏はサイトをパターンの使用数ごとに分類しました。結果が下図の通りで、5個以上のパターンが出現したサイトは21％、2個から4個のサイトが46％のサイト、1個以下のサイトが33％でした。

クレブス氏は「AIの時代が来る前は全てのサイトがBootstrapのような見た目だった」点と「ビジネスアイデアの検証にはデザインは関係ない」点を挙げ、「AI生成自体が悪いということではない」と述べています。

しかし、「AIが出力するものをそのまま使用することが問題だ」と述べ、「AI以前の時代にテンプレートを使用していた場合でも同じ」とAIに関係なく独創性が無いことを問題視しています。

クレブス氏は「人々はありふれたデザインの中から際立つために、再び美しいデザインを作り上げることになるだろう」と記事を締めくくりました。