ハクソク

世界を動かす技術を、日本語で。

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

6時間前原文(www.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（この投稿が言ってる「アイコン付きフィーチャーカードグリッド」かも…これが公式のデザインパターンの用語かもね）
└
カードデザインはしばらく流行ってるけど、デザインシステムで超硬い角を見たのはいつだったか思い出せない。少なくともAppleが丸角の特許を出願して以来、ずっとそういう流れだよね。
Show HNの投稿を見て、最初は感心したけど、実際には動いてないコードだったり、誰かが自分で書いたことにしようとしてる明らかにAIのコードだったりすることが多い。GitHubが今や履歴書作りに使われてるけど、AIが全部の作業をやってくれるなら、その信号はほとんど消えちゃうよね。
> 一方で、AIエージェントがウェブの主要なユーザーになったとき、デザインがどれだけ重要になるのかは分からない。表面の住人たちが病気や戦争で狂ってしまい、彼らの土地が革新の破れた約束や重金属の残骸で汚染されてしまったとき、私たちは新しいエデンを築かなければならない。ジェミニのコンセプトは大好きだけど、視覚的な表現をしたいという気持ちがある。Dilloは、その制約の中で美しいものを作るには十分かもしれない。ワイヤーガードメッシュを輸送手段にして、個人の信頼によって招待が出たり引っ込められたりする場所があれば、私たちのアイデアが再び繁栄できる場所ができるかもしれない。大きなモニュメントが雷のように迫っている中で、アイデアが平凡さに引きずり込まれることなく。
デザインについて言えば、「ソロファウンダーのSAAS」から「YCから20億調達した」まで、ほとんどのテックプロジェクトサイトは何年も同じに見えてる。たまにはLLMがちょっと違うCSSを幻覚することを期待したいね…
└
うん、いろんなフェーズがあったよね。ブートストラップ、Web 2.0、Tailwind、「マテリアル」UIとか、RailsからNextJSまでいろんなフレームワークがあったし。常にトレンドがあって、みんなそれに従ってる。今はAIの時代だね…業界で手を抜くことが新しいわけじゃないのに、そんなふうに見せかけるのはやめようよ。自分の職人コードを自慢するのはいいけど、ビジネスでソフトウェアを使う人は最初からそんなこと気にしてなかったし。そもそもCSの哲学って「誰でもコーディングできる」ってことじゃなかったっけ？ライセンス要件に反対することとか。まあ、今やコードは商品みたいなもので、参入障壁はほとんどないよね。
問題は、人々が2026年のツールを使ってコードを書きたいと思っているのに、2016年の基準で評価されたいと思っていることだ。2016年には、1万行のコードを見たら、それには一定の労力の証明があった。彼らはその時点までにコードをテストせざるを得なかったはずだ。そこには一定の思考があったことは確かだ。数ヶ月間それと共に過ごしているのは間違いない。2026年には、1万行のコードはトークンに最低限のお金を使ったことを意味する。1万行は「この大きなOpenAPI仕様を私の言語でAPIに変換する」みたいなタスクであれば、かなり早く生成できる。プロジェクトの90%以上が実際にはテストされていない可能性が高い。AIが自分で書いたユニットテスト以外では、実際のシナリオで一度も動かされたことがないコードに対しては、スタートとしては良いけど、それ以上のものではない。これらのことに本質的に間違ったところはない。でも、基準は変わるべきだ。「Show HN」のハードルは高くなくてもいいけど、「テキストボックスにいくつかのことを入力しただけ」よりは高いべきだ。それは必ずしも「悪い」からではなく、貴重な人間の注意とそれに引き寄せられる安さとのミスマッチから来ている。ちょっと残念な気もするけど…でも、正直なところ、アイデアとAIへのいくつかのプロンプトで作れるもののスペースは、AIコーディングツールが登場する前からかなりカバーされていた。すでに、どの言語コミュニティでも「もうたくさん見たから、コミュニティがあなたを称賛することは期待しないで」というプロジェクトのリストがあった。AIは「もう見すぎたプロジェクト」のリストを少し増やしたけど、実際には以前からあったプロジェクトの同じものがさらに大量に流れてきている。
└
> 2026年のツールを使ってコードを書くのに、2016年の基準で評価されたいってことだよね。これが今のAIの状況だと思う。週末に製品を作って、数年前の価格を理由に高額で売る人をよく見るけど、彼らはその価格がその時点までの努力の反映だったってことに気づいてないみたい。
└
すごく的を射たコメントだね。これはコーディングだけじゃなくて、もっと広い範囲に当てはまると思う。人は、自分の豪華なスライドデッキや新しいブランディングを2016年の基準で評価してほしいと思ってる。要するに、自分を良く見せようとしてるんだよね。
そう、また「終わらない9月」がやってきた。昔を懐かしむのは楽しいけど、現実を直視してその中に喜びを見つけたいな。http://www.catb.org/jargon/html/S/September-that-never-ended... https://en.wikipedia.org/wiki/Eternal_September たくさんのアイデアが試されて発表されるのは、可能性のスペースをより早く探求しているという利点がある。その分、学べることも増えるけど、信号対雑音の比率はかなり下がってしまう。また、システムが自己反射的で動的なので、共通のスペースが過密になって信号を調整できなくなることで、自然な悪循環が生じる。「コモンズの悲劇」だね。20代の頃、MeatballWikiの時代にこれについて10年間心配していたけど、今は中年の危機の時期で、持っている世界で楽しむ方が好きだな。
└
この楽観主義、好きだな。 （まだ怖いことはたくさんあるけど、少なくとも時々はあなたのように感じるべきだし、健康的なバランスが大事だね。）
└
もっと多くのアイデアが探求されているようには感じない。古いもののバリエーションが増えているだけのように思える。アイデアは常に難しいもので、AIはそれを助けてくれない。
└
> 昔の良き時代について文句を言うのは楽しいけど、私は今の世界を受け入れて、その中で喜びを見つけたいな。これは見下し、ガスライティング、感情操作の manipulative な組み合わせだよ。「文句を言うのは楽しい」ってのは、提出される内容についての有効な観察を軽視して、自分勝手な愚痴にしてしまう。「今の世界を受け入れたい」ってのは、慎重に作られたプロジェクトや人間が書いた記事を見たい人が現実を直視していない、つまり妄想的だと暗に示してる。「喜びを見つける」ってのは、全体の議論を自己課したマインドセットの問題に還元して、今起こっていることに不満を持つ合理的な理由はないかのように扱ってる。
関連: https://news.ycombinator.com/showlim (Ask HN: 新しいアカウントの投稿を制限してください - https://news.ycombinator.com/item?id=47300329 - 2026年3月 (515コメント) Show HNは死んでる？いいえ、溺れてます - https://news.ycombinator.com/item?id=47045804 - 2026年2月 (425コメント)
まあ、私はすぐにパープに行って、私のCCセッションがああいうウェブサイトを作らないようにするにはどうすればいいか聞いてきたよ。笑。でも良いことに、今はアクセシビリティ関連の項目も含まれるようになるみたい。実は私、ミソキネジアと偏頭痛があるから、その気持ちわかるよ。もし興味があれば、これが見つけたものだよ： https://www.perplexity.ai/search/given-these-how-can-we-crea...
私もこんなのを作りたいなって考えてたんだけど、正直言うと、そこにある半分のものはもう古くなってるよ。モデルにはそれぞれのアーキタイプがあるし。今年の初めから、ほとんどのバイブコーディングされたウェブサイトはオーパスで、独自のスタイルがあるんだ。GPTのウェブサイトとは違う特徴があって、さらにジェミニのものとも違う。それぞれに特有の特性があるよ。オーパス4.5/4.6の特性は、以前のバージョンとはかなり違うし、全部を一つに混ぜて「AIがコーディングしたウェブサイトを特定する」ってのはうまくいかないよ。