AIが量産する「スロップUI」の見分け方10選
10 Tells of a Slop UI
大学のアプリが「UIの軽微な改善」と称してAIエージェント製のスロップUIに変わり、著者は辟易。グラデーション、無意味なカラフルさ、脈打つバッジ、指の爪カード、絵文字、ずれた配置、InterやJetBrains Mono、冗長なテキスト、グラスモーフィズム、汎用的なキャッチコピー——これら10の兆候を実例とともに挙げ、バイブコーディング自体を否定するのではなく、努力の欠如を批判する。
「アクティブな学生」バッジがプロフィールにある。誰か「非アクティブな学生」ってどんなのか教えてくれない？？
HNでの議論
223- weakfish
ロボットが「3つのキャンパス、1つのアプリ」のような例を書くとき、何が起きているのかずっと突き止めようとしていたので、著者がチャットコンテキストの漏れだと特定できたのは嬉しい。
もう一つのバージョンは、ロボットがプロンプトの一部に過剰に反応して、あちこちにコメントを残すことだ。例えば、TestContainersを使った統合テストを好むように頼むと、新しいテストごとに「実際のサービス、モックなし」みたいなコメントを追加し始める。
そして、そうしないように*.MDに一行書いてある。
- czhu12
少なくともこれらのいくつかは、単に気にしていないだけだ。最近このランディングページ https://tui2web.com/ をバイブコーディングしたが、数時間のイテレーションの後、LLMが考え出した多くのデフォルトと戦った。遠慮なく叩いてくれ、特に愛着はないが、かなり良い仕事をしたと思った。
- vallerie
実装の詳細が散文に現れる問題に言及したこのブログが大好きだ。おそらくバイブコーディングされたアプリで一番気に障ることだ。
その多くは解決が簡単な問題だ。選んだエージェントに「すべてのユーザーに見えるテキストをi10n用の翻訳ファイルに入れて」とプロンプトを出し、人間がその散文を編集すればいい。
- zinoc
これはBootstrap CSSフレームワークの急速な初期採用に似ている。同じように見え、同じように感じるウェブサイトが急増して多くの人がイライラしたが、これはユーザビリティとアクセシビリティにおける大きな前進であり、最初の型にはまったウェブサイトの波には十分価値があったと思う。
- tptacek
「非アクティブ」な学生とは、在籍しているが現在授業に出席していない学生のことだ。
これは非常に役立つ記事だが、アラインメントのようなものに対するこれらの不満の多くは、フロントエンドではない私がどんなウェブフロントエンドを作るにしても自然な結果でもある。だからあまり気にしないほうがいい。
- jph
私はこれらのルールから始めて、必要に応じて調整する…
強調する：
- *要約。* 最初の段落は新聞のように（誰が、何を、どこで、いつ、どのように、なぜ）。
- *利点。* 読者にとっての利点に焦点を当てる。
- *なぜこれが重要か* 読者に何をもたらすかに焦点を当てる。
禁止：
- *技術スタックなし。* 技術的な実装について言及しない。それは別の場所で扱う。
- *カウントなし。* ページ数、パート数、章数などを言わない。
- *特別なフォーマットなし。* 太字、斜体、箇条書きを使わない。
- *「もし」なし。* 「もしXをしたらY」と言わず、肯定的に表現する。
- *長すぎる文なし。* 節を多くしたり、言葉を多くしすぎたりしない。
- *受動態なし。* 受動態や非主語の文を使わない。
- mjr00
「下手なミュージシャン」から「まあまあのミュージシャン」（少なくともリスナーやファンができる程度）に卒業するときに学んだ最も重要なことは、曲を悪いから良いに変える単一の大きなトリックは存在しないということだった。100の小さなトリックが積み重なって効果を生む。そして、それらが何であるかを知るには経験が必要だ。訓練されたリスナーなら「ミッドレンジが圧縮されすぎている」「高域が多すぎる」「ドラムのトランジェントが抜けてこない」と言えるかもしれないが、普通のカジュアルなリスナーはただ「なんか、しっくりこないんだよな」と言うだけだ。
このUIスロップも同じだ。タイムラインから少しずれたドット、ウェブサイト全体からすると意味が通らない色の選択、LLMらしいテキストの使用。ここにあるものはどれも単独では明らかに大きな問題ではない。しかし、ウェブサイト上でこれらが50個積み重なると、ユーザーは「これはスロップだ」という感覚に襲われる。
細部が重要だ。単独では無関係に見えるが、全体として、AIスロップのゴミ山から実際に良いものへと引き上げるのはこれなのだ。
- docheinestages
Cloudflareのような数十億ドル企業が、どうしてデザイン基準を放棄できるのか理解できない。ランディングページを更新したようだが[0]、それでも非常にずさんだ。