AI 設計パターンの「Show HN」投稿への採点を行ってまいります。

Japanese Translation:

最近の人間の書による分析では、500 件の Hacker News「Show HN」投稿が検証されました。この分析は、Claude Code などのツールやプラットフォームの変化（新規アカウント制限や /showlim の導入など）に関連する汎用的で「不自然な」デザインを検証しています。レスポンシブブラウザを使用してスクリーンショットではなく DOM ルールを解析した結果、研究者らは AI デザインのマーカとなる 4 つのカテゴリを特定しました：フォント（Inter、Space Grotesk）、色（「VibeCode Purple」、グラデーション）、レイアウト上の特徴（中央揃えヒーロー、彩色された枠）、そして CSS パターン（shadcn/ui、glassmorphism）。手動による検証では、誤検出率は 5〜10% であることが示されました。結果はサイトを 3 つの層に分類し、「Heavy slop」（5 以上のパターン）が投稿の 21% に見られ、「Mild」（2〜4 パターン）が 46%、「Clean」（0〜1 パターン）が 33% を占めました。本研究は、単一の要素が AI 生成を証明するものではない一方で、これらの grouped traits の頻出を示すことは、大量生産された AI エステティクスが独自な創造性から区別しにくくなる傾向が高まっていることを示唆しています。

Show HN の投稿における AI 由来のデザインパターンを検出する試み

Hacker News（以下、HN）を閲覧している際、多くの「Show HN」プロジェクトに冷たい・無機質な印象があり、それが純粋に AI が生成したものであると直感的に気づくようになりました。当初はその具体的何が違うのか特定できず、「この主観的な感覚を自動的に数値化できるだろうか」と考え、500 件の Show HN ページを対象に、AI 由来のデザインパターンを用いたスコアリングを試みました。

Claude Code の登場以降、Show HN に投稿されるプロジェクトの数は急激に増加しました。その勢いは настолько 強か、HN のモデレーターが新規アカウントからの Show HN 投稿を制限せざるを得ないほどです。過去数年間にわたる Show HN 投稿数の推移は以下の通りです：

更新：dang より、2026 年 3 月の減少傾向は、より新しいアカウントが表示する
/showlim
のロールアウトと相関しており、そこから AI デザインパターンに基づいたスコアリングに十分な数のページが得られる見込みです。

AI 由来のデザインパターン

最近、あるデザイナーの方から「色付きの左側ボーダーは、文中のコロンマーク同様、AI 生成デザインの極めて信頼性の高いサインである」と伺い、以後多くのページでこれらを目にするようになりました。そこでさらにデザイナー的朋友に、「どのような点が一般的に AI パターンとして見られるか」を尋ねました。得られた回答を大まかにまとめると、フォント、色使い、レイアウトの癖、そして CSS パターンという 4 つのカテゴリに分けられます。

フォント

特に中央揃えのヒーローヘッドラインにおいて、何事にも「Inter」を使用する傾向
LLM（大規模言語モデル）は特定のフォント組みを多用しがち：Space Grotesk、Instrument Serif、Geist など
原則として Inter を使用したヒーローセクションにおいて、アクセント文字に限り斜体セリフ体を用いる

カラー使い

「VibeCode Purple」の採用
永続的なダークモードかつ、中程度のグレーで本文を、全て大文字のセクションラベルを設定
ダークテーマにおいて、正文とのコントラストが僅かに過ぎないケース
グレイドン化（グラデーション）を過剰に適用する傾向
大型の彩色発光効果やカラーボックスシャドウの使用

レイアウトの癖

ジェネリックなサンセリフ体で中央揃えされたヒーローエリア
ヒーロー H1 の直上にバッジ（ラベル）を配置
カードの上部または左縁に彩色ボーダーを付与
アイコンを上部に配した同一デザインの特徴カードを並べる
「1, 2, 3」のような番号付きステップシーケンスを表示
スタットバナー行の多用
シドバーまたはナビゲーションに絵文字アイコンを採用
ヘッディングやセクションラベルを全て大文字で記述

CSS パターン

shadcn/ui の適用
ガラスモーフィズムの採用

Show HN 投稿から採り寄せた具体例：

Inter フォントを採用したヒーローエリアの上にバッジを配置。
同じパターンだが、異なるページ。
カード上部に彩色ボーダー。
「デッド・インターネット」か？：私のブログに関する AI 生成のアプローチ文の中に、AI デザインパターンの完璧な例（左縁彩色）が含まれているケース。
アイコンを配置した特徴カード。
グレイドン背景＋ガラスモーフィズムカードの使用。

Show HN 投稿における AI デザインを検出する手法

さて、上記のパターンリストに基づき、直近の Show HN 投稿 500 件のランディングページを系統的にレビューしスコアリングを行う試みが可能になりました。以下がスコアリング方法です：

ヘッドレスブラウザ（Playwright）を用いて各サイトをロード
ページ内の小型スクリプトで DOM と計算済みスタイルを読み取る
パターンの判定は、全て決定論的な CSS または DOM チェックに依存し、スクリーンショットの取得や LLM の主観的判断には頼りません。

この手法は偽陽性を不可避免地生じさせる可能性がありますが、手動による QA チェックではその割合はおそらく 5〜10% 程度に留まることが確認できました。もしスコアリングコードをオープンソース化して再現性を持たせたり、改善を試みたり、あるいは自サイトのスコアリングを検討したりするご関心があれば、ご連絡ください。

結果

単一のパターンの存在だけでは、そのサイトを AI 生成と断定することはできません。そこで、全 15 パターンの中でどれだけをトリガーしているかに基づき、3 つのティアに分類しました：

Heavy slop（重度）：5 パターン以上 → 105 サイト（21%）
Mild（軽度）：2〜4 パターン → 230 サイト（46%）
Clean（清潔・無パターン）：0〜1 パターン → 165 サイト（33%）

これは悪いことでしょうか？正直に言えば、それほど悪くはなく、ただ「着想不足」の域です。結局のところ、ビジネスアイデアの有効性を検証するためには高度なデザインは必須ではなく、AI 時代以前であれば全てが Bootstrap 風に見えました。「自ら意図的にデザインを磨き上げること」と、「LLM が出力するデフォルトを受け入れるだけで公開すること」には明確な差異があります。同様の状況は、LLM の登場以前にも、CSS/HTML テンプレートを利用した際に存在しました。

いずれにせよ、人々は「slop（粗悪物）」から際立って見られるために、再び美しいデザインを心を込めて作り直すようになるでしょう。一方のことながら、AI エージェントがウェブの主要な利用者となるようになったとき、いかにデザイン自体が重要なのかについては、私も確信を持てません。

※この投稿自体は人間によって記述されたものであり、スコアリングおよび解析部分は AI の支援を受けたものです。