最近、うちの大学のアプリが「小幅な UI 改善」でアップデートされた。出来上がったのは、私が今まで見た中で最も slop なユーザーインターフェースだった。 旧 UI は確かに野暮ったかった。だが、あの AI agent が吐き出した塊よりは、旧 UI を使う方を選ぶ。

Slop とは何か？

Slop UI とは AI が作ったインターフェースのことだ。どこかおかしい、あるべきでない場所にある、実用的な目的がない、あるいは UI 全体に個性がなさすぎる。

この問題は、思想のない vibe-coded UI によく見られる。vibe coding も上手くやれば良いインターフェースになる。だが大半は上手くやれない。結果、アプリは安っぽく見え、使っていても盛り上がらない。

Slop サイトの例：

Cloudflare は最近、サイトを slop した。

こういうサイトもある。一目見れば分かる。今の AI 動画と同じだ：

とにかく。以下が slop を構成する要素だ。

グラデーションだらけ

最大かつ最も明白な兆候がグラデーション。どこもかしこもグラデーション、いつでもグラデーション、あらゆるものにグラデーション。ボタンにも、背景にも、詰め込める場所にはほぼ必ずある。

Slop 大砲はなぜか紫が大好き

虹の嘔吐物

AI は意味のない色を使うのが好きだ。純粋に、ただのバラバラな色の寄せ集め。

出来上がるのはこれ：画面いっぱいの色。互いに全く合っていないのに、とにかくそう塗られている。UI を作る時は、フィールド間に何かしら区別が必要とか、そういう理由で。

70-30-10 の法則なんて守らない。ただそこら中に色を足す。

パルスバッジ

なぜこれを追加するのか全く分からないが、とにかく追加する。訓練データに入っていたんだろう。とにかくあらゆるものにこの脈動するバッジを付ける。

うちの大学のアプリの「」「アップグレード版」「」には、デジタル ID というものがあって、QR コードと自分の顔が表示される。そこにパルスバッジがあって、「active」と書いてある。

問題は、これが inactive になったことが一度もないことだ。もし inactive なら、アプリは問答無用でログアウトさせる。この情報は完全に余計だ。

しかもプロフィールには「active student」バッジまである。

誰か教えてくれ、inactive student ってどんな見た目なんだ？？

同じデジタル ID 画面で、大学のロゴの横に小さな「verified」バッジまで付けている。

なぜだ。

別に何かの api を叩いて「ああ、この人は verified です」と言っているわけでもない。

仮にそうだとしても、大した意味はない。例えば、私がデジタル ID を偽造しているなら、わざわざ「unverified」なんて付け加えるだろうか？？？？

爪カード

これはほぼ全ての vibecoded な ui で見かける。見るたびに腹が立つ。

これがどこにでもあるんだよ、まったく。

それ自体がひどいわけじゃない。ただ、全ての LLM が至る所で使い倒したせいで、今では見た目がただ醜い。

問題は、誰かが意識的に座って「そうだ、爪を付ければこれがもっと良く見えるぞ」なんて考えたことがあるとは思えないことだ。

Emoji Slop

AI はなぜか emoji が大好きだ。Sam Altman が最先端を率いているふりをする以上に emoji が好きだ。

揃っていないもの

SVG や ASCII art、あるいはボックスに収まらない要素があると、それはほぼ必ず揃っていない。

フォントの選択

こういうサイトは、フォント選びにほとんど頭を使わない。たいていは Inter。あなたのサイトがプログラミングに少しでも関係していれば、JetBrains Mono が使われる。

あとはこれだ。

技術っぽい話が少しでも出ると、必ずこの // が付いてくる。

チャットの文脈から生まれる余計な文言

チャットの文脈だけで、余計な文言を山ほど足してくる。たとえば以前あのブログサイトを作っていたとき、こう伝えた。「いいか、HTML は一切書きたくない。慣れた Neovim で書きたいし、ウェブ関連のものには触れたくない」。

すると「Built with Hugo. Written from Neovim」と付け加えてきた。

ダメだ。どこで書いたかなんて誰も気にしない。AI は readme でも同じことをする。「Built with Modern CPP 20 features」と書く。おい、誰が気にするんだ。

大学のアプリの起動画面にもこれがあった。

厄介なのは、これを引き出したプロンプトがほぼ嗅ぎ取れてしまうことだ。

たとえば「one campus. one app.」。ああ、きっとどこかの管理職が言ったんだろう。「3 つのアプリを統合しよう。3 つのキャンパスがあって、3 つのアプリがあるんだ」。

グラスモーフィズム

とにかくグラスモーフィズムが好きだ。他のデザイン言語には見向きもしない（ブルータリズムを除いて。しかもブルータリズムはどれも同じ仕上がりになる）。

そしてこれが、いわゆる「ブルータリズム美学」だ。

正直に言うと、ブルータリズムはまだ許せる。使い古される前はかっこよく見えた。そして飽きて嫌いになる。

使い回しのキャッチコピーと無意味な自慢

「Elevate」「Seamless」「Next-Generation」「Supercharge」「Unleash」「Empower」といった単語に目がない。

どの H1 の後ろにも、灰色がかったサブタイトルが続く。こんな具合だ。「Experience the power of task management with our cutting-edge intuitive interface.」

「Welcome to your Dashboard, [Name] ✨」や「Revolutionise your workflow」も大好きだ。あらゆる画面を、まともに使えるツールではなくランディングページとして作る。

おわりに

正直、これはただ俺がゴミみたいな作品を見たときにイラッとするだけの話だ。vibecoding に反対しているわけじゃない。このサイトも vibe code で作ったが、それなりに可愛く見える。問題は、少しでもマシに見せようとする努力を、こいつらが一切しないことだ。