AIデザインパターンのための「Show HN」投稿の評価

2026年4月22日原文(adriankrebs.ch)

概要

Show HN投稿 の多くがAI生成デザインの特徴を持つ現状
AIデザインパターン の定量的検出とスコアリング手法の紹介
フォント・色・レイアウト・CSS に見られる典型的AIパターンの整理
500件のShow HNページを対象にした 実測結果と考察
デザインの「凡庸化」と今後の Webデザインの行方 への問題提起

Show HN投稿におけるAIデザインパターンの検出試行

Hacker News のShow HNページでAI生成特有の「無機質」なデザインが増加傾向
Claude Code などのAIツール普及でShow HNプロジェクト数が急増
新規アカウントのShow HN投稿制限導入という運営側の対応
2026年3月の投稿数減少は /showlim （新規ユーザーへの制限画面）導入と連動

AIデザインパターンの具体例

デザイナー間で 「左側のカラーボーダー」 はAI生成デザインの象徴として認識
以下の4カテゴリでAIデザインパターンを整理
- フォント
  - Interの多用、中央配置のヒーローヘッドライン
  - Space Grotesk, Instrument Serif, Geist Serif italicなどの組み合わせ
- 色
  - 「VibeCode Purple」などの独特な配色
  - ダークモード前提、中間グレーの本文、全大文字のセクションラベル
  - グラデーションやカラーボックスシャドウの多用
- レイアウトの癖
  - 中央配置ヒーロー、ヒーロー直上のバッジ
  - カードのカラーボーダー（上部または左端）
  - アイコン付きの同一レイアウト特徴カード、1-2-3の手順表示
  - 統計バナーや絵文字アイコン付きサイドバー
  - 全大文字見出し
- CSSパターン
  - shadcn/uiやGlassmorphismの利用

Show HN投稿のAIパターン検出方法

500件のShow HNページを対象に 自動スコアリング
- Playwright によるヘッドレスブラウザでサイトをロード
- DOMとCSSスタイルをスクリプトで解析
- 各パターンはCSS/DOMの決定論的チェックで判定
スクリーンショットやLLMによる主観的評価は排除
手動QAで 誤判定率は5〜10% と確認
コードのオープンソース化要望も受付中

検出結果と考察

15パターン中、該当数で3段階に分類
- Heavy slop（5つ以上該当） ：105サイト（21%）
- Mild（2〜4つ該当） ：230サイト（46%）
- Clean（0〜1つ該当） ：165サイト（33%）
AI生成パターンが多い＝悪い、とは言い切れず「凡庸だが実害は少ない」と評価
ビジネス検証にデザインの独自性は必須ではなく、 AI以前もBootstrap一色 だった歴史
LLMのデフォルト出力をそのまま使うか、オリジナルデザインを追求するかの違いのみ
今後は AIエージェントがWebの主な利用者 になる可能性もあり、デザインの重要性自体が変化する可能性

今後のWebデザインの展望

AI生成デザイン の「没個性化」からの脱却と独自性回帰への期待
AI支援と人間のクリエイティビティ の役割分担再考
投稿者・開発者への デザイン意識向上の呼びかけ

この投稿は 人間が執筆 し、 AIがスコアリングと分析を支援

Hackerたちの意見

今はほとんどのサイドプロジェクトがAIの助けを借りて作られてると思う。サイドプロジェクトは時間が限られてるから、AIが時間を節約してくれるなら使わない理由がないよね。それに、プロの仕事では試せない新しいAIツールを試すのに最適な場所でもあるし。この記事の見出しはあんまり良くないな。「vibe coded」を誤用してるし、投稿の内容がAI生成のフロントエンドに共通するビジュアルデザインの特徴についてだってことが伝わってない。そっちの方がずっと面白い話題なのに。アップデート：見出しが変わって、今はかなり良くなったよ。「Show HNの投稿が3倍になって、今はほとんど同じvibe-codedな見た目になった」って。前は「Show HNの投稿が3倍になって、今はほとんどvibe-codedだった」だったけど。

└

AIが時間を節約してくれるなら、なんで使わないの？ AIは（使わないこともあるけど、よくあることだけど！）オリジナルの考えをする必要を省いてくれるかもしれない。サイドプロジェクトに関しては、みんなが興味を持ってるのはそこなんだよね。

└

ビジュアルデザインの特徴について…私は主にバックエンドの開発者なんだ。大半の仕事はJSONを提供したり、時々XMLを扱ったりしてる。JavaのSpring Shellの方がGUIよりも近い仕事だし。ウェブの仕事をしたとき、私のデザインについて言われた最も褒められたことは「スパルタン」だった。だから、もしウェブ向けの個人プロジェクトを持つとしたら…白背景に黒文字、デフォルトフォントとごちゃごちゃした要素で大丈夫かな？HNの設定ページではそれがOKだって分かってるけど、機能はするけど、今のウェブ向けインターフェースの最低基準には満たないと思うんだ。だから、他の人に見せたいウェブ向けプロジェクトがあったら、AIツールを使ってGUIを作ると思うし、他のAI生成のフロントエンドに見られるビジュアルデザインの特徴が出る可能性が高い。

└

私にとってAIを使う意味はないかな。個人プロジェクトは楽しいからやってるんだ。問題を考えて、解決して、実装して、新しいことを学ぶのが楽しいし、人気が出て役に立つかもって想像するのも楽しい。もしAIを使って指をひねるだけで実現できるなら、楽しさがどこにあるの？日常の仕事でAIを使って退屈なことをやるからさ。それに、サイドプロジェクトでAIを使うために月200ドル払うなんて…私にはただのバカげた話だよ。

└

LLM支援のウェブページで一番の問題は（Claude Codeは特にひどい）、基本的なウェブコンテンツのアクセシビリティガイドラインを無視していることだね。暗い色のサイトで、テキスト（とサブテキスト）がいろんな暗い茶色やベージュの色合いになってるのを見たことがあるけど、本当にひどいよ。参考までに、テキストと背景のコントラスト比は少なくとも~4:1が安全だよ。これを直すのはそんなに難しくないんだから、ウェブコンテンツアクセシビリティガイドラインをスキルに追加することもできるよ。https://webaim.org/resources/contrastchecker

└

サイドプロジェクトは通常、時間に制約がある。サイドプロジェクトを完成させるのにどんな緊急性があるの？

└

AIで作られたほとんどのサイドプロジェクトは、3ヶ月以内に放置されてしまい、ユーザーの個人的な成長にはほとんど寄与しないと思ってる。AIの使用が、持続的なスキルの成長につながるような意図的な練習を妨げてしまうんじゃないかな。それが最終的にはより良い仕事（サイドプロジェクトでもメインプロジェクトでも）につながるのに。

└

AIが時間を節約してくれるなら、メインのプロジェクトでも使ったらどう？他の条件が同じなら、ユーザーはAIが使われたかどうか気にするべき？

└

サイドプロジェクトは通常時間が限られてるから、AIが時間を節約してくれるなら、使わない理由はないよね？目標によるけど、私のサイドプロジェクトは何かを学びたくて始めたものだから、「最後に飛ばす」ボタンを使うのはあまり意味がないかな。

└

AIが時間を節約してくれるなら、使わない理由はないよね？私は使わないかな。サイドプロジェクトをやる理由の一つは、自分を楽しませたり新しいことを学んだりするためだから、これらのツールは私が楽しんだり学んだりすることの多くをやってしまうから。

└

今のところ、ほとんどのサイドプロジェクトがLLMで作られるとは思ってないよ。職場ではLLMの導入が進むと思うけど（義務化されてたり、「目的が手段を正当化する」って考え方があるからね）、それ以外の場面では、プログラミングや問題解決を楽しんでやってる人が多いと思う。自分が好きなことを、企業の利益のために、平均的なボランティアの貢献を吐き出すブラックボックスに外注する理由がないじゃん？

デザインパターンのリストはいいけど、個人的には言及されてない大きなものがあると思う。それは丸角のグリッドだね。https://correctarity.com/roundedrects（この投稿が言ってる「アイコン付きフィーチャーカードグリッド」かも…これが公式のデザインパターンの用語かもね）

Hacker Newsで議論の続きを見る

ハクソク