AIデザインパターンに関するShow HN投稿の採点
(adriankrebs.ch)- 最近のShow HN投稿増加に伴い、似た印象のランディングページが繰り返し現れるようになったため、最新のShow HN 500ページを基準に共通パターンを採点した
- 採点基準はフォント、色、レイアウト、CSSパターンにまたがる15項目で、中央揃えのhero、VibeCode Purple、左側のカラーボーダー、shadcn/ui、Glassmorphismのような要素が含まれる
- 検出はPlaywrightベースのheadless browserでページを読み込んだ後、DOMと計算済みスタイルを読む方式で行い、スクリーンショットをLLMが判定する方式は使っていない
- 結果はHeavy slop 21%、Mild 46%、Clean 33%に分かれ、単一パターンだけでAI生成サイトと断定せず、満たしたパターン数で区分した
- こうした傾向は深刻な問題というよりインスピレーション不足に近く、今後は似た出力物の中で目立つために、より手をかけたデザインが必要になるかもしれない
Show HN増加とデザインパターンの採点
- Show HN投稿数は大きく増えており、新規アカウントについてはHacker News運営がShow HN投稿を制限するほど強化されている
- 最近のShow HNプロジェクトでは画一的で無菌質な印象が繰り返し見られ、これを主観的な感覚だけにとどめず、500ページを基準に採点した
- 採点対象は最新のShow HNランディングページ500件で、共通するAIデザインパターンを基準に分類した
AIデザインパターンの基準
- 共通パターンは概ねフォント、色、レイアウト上の特徴、CSSパターンに分類される
- 左側のカラーボーダーはAI生成デザインを示す強いシグナルとして機能し、実際に複数のページで繰り返し現れた
-
フォント
- Interが全体的に使われているが、特に中央揃えのhero見出しで目立つ
- LLMはSpace Grotesk、Instrument Serif、Geistのような組み合わせもよく使う
- Inter中心のheroで、1語だけをserif italicで強調する構成も含まれる
-
色
- いわゆるVibeCode Purpleが繰り返し現れる
- 常時ダークモードと中間グレーの本文テキスト、大文字のセクションラベルの組み合わせがよく見られる
- ダークテーマでは本文テキストのコントラストが、かろうじて基準を上回る程度のものも含まれる
- 全体的なグラデーションの多用、大きなカラーグロー、色付きのボックスシャドウもパターンに含まれる
-
レイアウト上の特徴
- 一般的なsans系書体ベースの中央揃えheroが繰り返される
- heroのH1のすぐ上にbadgeが置かれる構成がよく現れる
- カードの上端または左端にカラーボーダーが付くパターンも含まれる
- 上部にアイコンが付いた同一のfeatureカードが繰り返し配置される
- 数字の1、2、3ステップのシーケンス、統計バナーの行、絵文字アイコン付きのサイドバーやナビゲーション、大文字タイトルとセクションラベルも基準に含まれる
-
CSSパターン
-
shadcn/ui
- Glassmorphism
-
検出方法と結果
- 各サイトはPlaywrightベースのheadless browserで読み込み、ページ内部の小さなスクリプトが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の中で目立つために、再びより手をかけたデザインが必要になるかもしれない
- 同時に、Webの主要な利用者がAI agentになった場合、デザインの重要性がどれだけ残るかは依然として不透明である
1件のコメント
Hacker Newsのコメント
今では サイドプロジェクト の大半が AIの助け を借りて作られていると思う
たいてい時間の制約があるので、AIが時間を節約してくれるなら使わない理由はあまりない
しかも会社の仕事では試しにくい新しいAIツールを試す場としてもちょうどいい
この記事のタイトルは最初、要点をうまく捉えられておらず、vibe coded という表現も誤用していて、実際にはもっと面白いテーマであるAI生成フロントエンドの視覚的な共通性を十分に伝えられていなかった
今のタイトルのほうが良くなっていて、"Show HN submissions tripled and now mostly have the same vibe-coded look" のほうがずっと正確に見える
ダークモードのサイトなのに本文や補助テキストが暗い茶色やベージュ系で、可読性がひどいケースをあまりにもよく見る
安全側に倒すなら、テキストと背景のコントラスト比は最低でも 4:1 くらい必要だ
これは直すのも難しくなく、Web Content Accessibility Guidelinesをskillに入れるだけでいい
https://webaim.org/resources/contrastchecker
問題を考え、解き、手で実装し、新しいことを学び、ひょっとしたら人気が出て役に立つかもしれないと想像する、その過程自体が楽しいのに、AIで指を鳴らして結果だけ作ってしまうとその楽しさが消える
日常業務なら退屈な作業を減らすためにAIを使えばいいが、サイドプロジェクトまでそうしたいとは思わない
しかも毎月 200ドル 払って個人プロジェクトにAIを使う特権を買うのも、自分にはあまりに馬鹿らしく感じる
自分の サイドプロジェクト は全部、何かを学ぶために始めたものなので、AIで 最後へスキップするボタン を押すのはまったく合わない
でも「自分のサイドプロジェクトを見せる」という文脈で人が知りたいのは、まさにその思考過程だ
たいてい本当に急ぐのは商用プロジェクトのほうだ
デザインパターンの一覧は悪くないが、大きな抜けとして rounded rect grid があると思う
https://correctarity.com/roundedrects
たぶん記事で言う "Icon-topped feature card grid" がその正式名称にいちばん近いのかもしれない
少なくともAppleが rounded corners特許 を出していた頃から続いている流れだ
これも合わせて見るべきだ
https://news.ycombinator.com/showlim
HNでの履歴があまりないアカウントは今この画面を見ることが多く、OPのグラフ右側の下降傾向にもこれが影響している
Ask HN: Please restrict new accounts from posting - https://news.ycombinator.com/item?id=47300329 - March 2026 (515 comments)
Is Show HN dead? No, but it's drowning - https://news.ycombinator.com/item?id=47045804 - Feb 2026 (425 comments)
人々は 2026年のツール でコードを書きながら、2016年の基準 で評価されたいと思っている
2016年に 1万行のコード を見れば、それ自体に一定のproof-of-workがあり、それに応じたテストや思考、何か月も格闘しながら磨いた時間が自然と伴っていた
だが2026年の1万行コードは、単にトークンに少し金を使ったという意味でしかない場合もあり、大きなOpenAPI仕様を特定言語のAPIに変換するようなものなら一気にかなり速く生成できてしまう
プロジェクトの90%以上が実際のシナリオで一度も動いたことがなく、AIが自分で書いた単体テストだけを通している可能性も十分ある
それ自体が本質的に間違っているわけではないが、評価基準 は変わるべきだ
Show HNの敷居が極端に高い必要はないとしても、「テキストボックスに数行打ち込んだ」よりは少し高くあるべきだ
それが悪いからではなく、貴重な 人間の注意 を引くコストが安くなりすぎたからだ
少しほろ苦い話ではあるが、実際にはアイデアといくつかのプロンプトだけで作れるタイプのプロジェクトは、AI以前からすでにかなり多かった
AIコーディングツールは「見飽きたプロジェクト」の一覧を少し増やしただけで、実際には昔からあふれていた同種のプロジェクトが、もっと激しく押し寄せてきている感じだ
週末のあいだに製品を1つ作っておいて、その製品カテゴリが数年前に受けていた価格を根拠に 法外な値付け をするのをよく見る
その価格が本来、そこに到達するまでに必要だった労力を反映していたことを、あまり受け入れられていないように見える
もう状況は変わった
やたらと派手な スライドデッキ や新しい ブランディング を作っておきながら、以前の基準での達成のように評価されたいと思っているが、結局は自分で業績を作り出しているにすぎない
AIエージェントがWebの主な利用者になったらデザインがどれだけ重要なのか分からない、という話にはあまり惹かれない
病気と戦争で地上世界が壊れ、イノベーションの空手形と重金属の残骸で汚染されてしまったなら、新しい Eden を築かなければならない
Geminiという概念は好きだが、それでもなお視覚メディアとして表現したい
Dillo ほどの制約の中でも美しいものは作れるはずだし、Wireguard mesh を輸送層として使い、招待を個人的な信頼にもとづいて与えたり取り消したりする形なら
巨大プラットフォームがすべてを増幅して平均化してしまわない場所で、再びアイデアが生き返るかもしれないと思う
デザインの話をするなら、solo founder SaaS から YCで20億ドルを調達した会社 まで、技術系プロジェクトのサイトは何年も似たような見た目をしてきた
今ではLLMがたまにでも少し違うCSSを幻覚してくれることを願うばかりだ
Bootstrap、Web 2.0、Tailwind、Material UI、Rails、NextJSのような流れがずっと巡っていて、今はそれがAIなだけだ
業界が昔は近道を使わなかったかのように振る舞う必要はない
職人芸のコードを誇ることはできるが、ビジネス用途でソフトウェアを使う側は、もともとそういうものに大して関心がなかった
しかもコンピュータサイエンスの哲学そのものが、結局は 誰でもコーディングできるべきだ という方向だったのではないかと思う
ライセンス障壁にも反対してきたし、だから今コードがcommodity化し参入障壁がほぼ消えたのも、その延長線上に見える
ある Show HN 投稿は最初は印象的だったのに、よく見るとまったく動かなかったり、誰かが自分で書いたふりをしている AIコード なのがあまりにも露骨だったりする
以前はGitHubが履歴書上のシグナルとしてある程度機能していたが、今やAIが大半をやってしまうなら、その シグナル価値 は事実上消えてしまう
要約だけでなく 詳細な結果 も一緒に見せてほしい
たとえば点数の高い投稿と低い投稿の一覧を並べて、方法論が妥当かどうか自分でvibe checkできるようにすべきだ
それに、ある時点の恣意的なカテゴリ円グラフより、時間に沿った トレンド変化 を見せるほうがよい
MVP や探索段階なら、LLMが作ったUIでも十分受け入れられる
ただし、おもちゃが製品になり始めたら、本気で進める時点で UIを作り直すべき だ
人のためのインターフェースには、結局 人の手の味 に価値がある
AIがHNをボットであふれさせる問題は関係はあるが、性質の少し違う別問題だ
問題の核心が AI生成そのもの だとは思わない
だが雑に作られた AI生成UI/UX は本当に問題だ
vibe-codedな美学はしばしば「これが実際にどう動くのかを深く考えていない」というシグナルに見え、基盤技術が堅牢でも、それだけで十分に 赤信号 になる