AIデザインパターン向けShow HN投稿の採点

Hacker NewsにおけるAI生成デザインの台頭を分析

Show HNの投稿数は最近3倍に増加し、多くのサイトがAI生成を示唆する画一的で無機質な外観を呈しています。この主観的な観察を定量化するため、開発者は500のShow HNランディングページを15のAIデザインパターンに対してスコアリングするシステムを作成しました。

特定されたAIデザインパターン

デザイナーからのフィードバックに基づく分析によると、パターンは4つの主要カテゴリーに分類されます：

フォント

• すべてにInterを使用、特に中央揃えのヒーロー見出し
• Space Grotesk、Instrument SerifなどのLLMフォントコンビネーション
• Inter主体のヒーローセクションで1単語だけGeist Serifイタリックを使用

カラー

• 「VibeCode Purple」
• 常時ダークモードで、中間グレーの本文と大文字セクションラベル
• ダークテーマでかろうじて合格する本文テキストのコントラスト
• すべてにグラデーション
• 大きなカラーグローとカラーボックスシャドウ

レイアウトの特徴

• 一般的なサンセリフで中央揃えされたヒーローセクション
• ヒーローH1の直上にバッジ
• カードの上部または左端にカラーボーダー
• 上部にアイコンを持つ同一の機能カード
• 番号付き「1、2、3」ステップシーケンス
• 統計バナーの行
• 絵文字アイコン付きのサイドバーまたはナビゲーション
• 大文字の見出しとセクションラベル

CSSパターン

• shadcn/ui
• グラスモーフィズム

スコアリング手法

スコアリングシステムは主観的なAI判断ではなく、決定論的チェックを使用します：

• ヘッドレスブラウザ（Playwright）が各サイトを読み込む
• ページ内の小さなスクリプトがDOMを分析し、計算済みスタイルを読み取る
• 各パターンは決定論的なCSSまたはDOMチェック
• 手動QAでは5〜10%の誤検出率を示した

500のShow HN投稿からの結果

サイトは、15のパターンのうち何個に該当するかに基づいて3つの階層にグループ化されました：

• Heavy slop（5つ以上のパターン）： 105サイト（21%）
• Mild（2〜4パターン）： 230サイト（46%）
• Clean（0〜1パターン）： 165サイト（33%）

Show HN投稿数の増加はClaude Codeのリリースと相関しており、これによりHNモデレーターは2026年3月に/showlimで新規アカウントの投稿を制限しました。

必ずしも悪いわけではありませんが、これらのパターンの普及は、多くのプロジェクトが手作りのデザインではなく、AI生成のデフォルトを使用していることを示唆しています。著者は、これはAI以前の時代にすべてがBootstrapのように見えた状況と類似しており、目立つために人々がより特徴的なデザインに戻る可能性を示唆しています。