AI Slop : AIが作ったっぽく見える現象
AIにUIを任せていると、見た目がだんだん「AIっぽく」なってくる。紫がかったグラデーション、カードの左端に引かれた色帯、微妙にバラバラな角丸。AIに画面を作らせたことがある人は、なんとなく想像できると思う
この「AIっぽさ」には AI Slop という名前がついている。slop はもともと「残飯」くらいの意味の英語で、AIが大量生産する成果物を指す言葉として定着してきている。
この記事を書いているエディタも、UIはほぼClaudeに任せて作ってきたので、例外ではなかった。いまはこれを DESIGN.md と Linter で削っている。今回はその仕組みと、その入り口にあった「名前を知っている」ことの話を書いてみようと思う。
AI Slop のカタログを作る人も出てきている
UIの AI Slop については、impeccable.style/slop というすごいサイトがある（Paul Bakaus 氏が Apache 2.0 のオープンソースとして公開している）。AIの作るUIに共通する失敗パターンを64個集めて、1つ1つに名前をつけたカタログで、それぞれに「どう見えるか・なぜ台無しか・どう直すか」まで書いてある。
たとえば紫〜青のグラデは ai-purple-palette。カードの片側だけに色のボーダーを引くやつは side-tab-accent-border という名前で、「AI生成UIの最もわかりやすい特徴」とまで書かれている。心当たりのある人は、一度眺めてみると面白いと思う。
ただこのカタログは、AIのセンスをけなすためのものではないと思っている。AIは、頼み方が曖昧なほどWebの平均に寄っていく。「モダンにして」「いい感じにして」は、実質「平均的にして」と頼んでいるのに近い。紫のグラデはその平均の顔で、AIが下手というより、こちらが何も指定していないとも取れる。
「検索する言葉」を知っていることが、道具になる
このカタログは、「AI slop」という言葉で探さないと辿り着くのが難しいのではないかと思う。。「AIが作った画面がなんか安っぽい」では検索できないし、AIに聞くときも同じで、曖昧な感想からは曖昧な答えしか返ってこない。
AIを使うようになってから、この「検索するための言葉を知っていること」の価値が上がっているのを実感している。手を動かす部分はかなり任せられるようになった分、何を頼むかを言葉にする部分がこちらの仕事として残る。そのとき、定着した名前を知っているかどうかで頼み方の精度がかなり変わってくる。「もっと落ち着いた見た目に」と言うより、「ai-purple-palette をやめて」と言う方がずっと通じる。定着した名前は、モデルの学習データの中でも同じ概念とちゃんと結びついているはずで、通じ方が違う。
ちょっと想像してほしいのだが、「ドロップダウン」っていう言葉をしなかったとして、どうやってそれを AI に伝える？。
1. 使える語彙を先に絞る（デザイントークン）
会社で作っているデザインシステムから、デザイントークン（CSS変数を定義した1枚のCSS）とドキュメント2枚を、このアプリに持ち込んだ。色・フォントのサイズ・角丸・余白は、トークンで宣言されたスケールから選ぶ。値のハードコードは禁止してる。
AIへの効き方は単純で、「使える色はこれだけ」という状態を作ってから任せる。作らせるたびに好みを言葉で伝えるのではなく、選択肢の側を先に狭めておく。
ちなみに持ち込み方は、ファイルをコピーしてくるだけにした。AIが修正したくなることもあるだろうし、依存を作るというよりは、雛形を渡して後は好きにして、っていうイメージ。
2. やってはいけない見え方を文書で渡す
AI には2種類のドキュメントを渡した。。1枚は「やって欲しいこと」、もう1枚は「やってはいけないこと」。後者が上のカタログを下敷きにした社内版で、失敗パターンごとに「どう見えるか・なぜ台無しか・代わりにどうするか」が名前つきで並んでいる。
ClaudeにはCSSを書く前にこの2枚を読ませる。「センスよく」は伝わらないが、「この名前のついた見え方になったら失敗」は伝わる。ここでも効いているのは名前で、失敗に名前がついていると、人とAIが結果に対する共通認識を持ちやすくなる。
3. 逸脱を機械で数える（lint）
トークンと文書だけだと、守れているかの判定が目視になる。なので Linter で、機械的にダメなことを弾くようにする。。
このアプリに初めてかけたときの結果は98件だった。内訳は、スケール外の角丸が45、スケール外の字サイズが34、パレット外の色が17、AIパープルが2。しかもこのCSSは、冒頭のコメントで「デザインシステム準拠」と謳っていた。準拠しているつもりで、測ったら98件ずれていた。最近はハルシネーションって言葉が一般化してあんまり騒がれなくなったけど、やっぱり大切な概念だよなと改めて感じる。
98件は全部潰して、いまは「0件で通る」が基準になっている。新しいずれは1件目から Linter が失敗として教えてくれる。
プロダクトのアイデンティティ
それでも最後に残るものもある。ただそれらについては無条件で捨てるというよりは、「そのプロダクトのアイデンティティである」ということもある。
なので、時には人が判断を行い、 Linter から除外するとか、そのプロダクト固有のルールとして昇華させるとか、そういう人が判断する価値っていうのを残すようにもしている。
こういうのが、実は本当の楽しさだったりする。
まとめ
「AIっぽさ」の正体は平均への回帰で、削るには「自分たちの基準（house design とか house style って最近は言ってる）」を宣言して、ずれを測れるようにするしかなさそう、というのがいまの結論になる。使える語彙を絞る、失敗に名前をつけて渡す、逸脱を機械で数える。AI Slop っていう名前を知っているみたいなこともすごく重要だし、日々いろんなことに名前がついていくので、情報は追い続ける方がいい。
よくいうんだけど、本当に深淵まで理解していなくても、頭の中に "索引" みたいなのがあるのはすごく役に立つ（ググることが主流だった時代からそう思っている）。
