「AIスロップUI」を見分ける10のサイン、海外で話題に
姉妹サイトの新着
他サイトの新着
- 5chまとめMAP【悲報】夏アニメ、結局なろう系が人気上位独占したまま終わってしまう
- ニュース速報まとめMAP【アジア大会】栗原悠輝に報奨金なしｗｗｗ日本ｅスポーツ協会どないなっとんねんｗ
- なんJ傑作まとめアンテナMAPしぐれういの騒動で叩いてる側が悪いと判明したわけだが
- アニメ声優まとめアンテナMAPおまえらって孤独に強いよな、なんかコツあるのか？ふつうは壊れるだろ
- VTuberまとめアンテナMAP【にじさんじ】マーゴの声を繰り返して噛み締める未来人草
- だめぽアンテナ【悲報】トランプ大統領「国名は言いたくないが日本は同盟国という名目で我々から搾取してきた」→
- ヌルポあんてなヒカル、箕輪厚介とタッグ結成「光文社を集団訴訟します」→被害者を大量募集へ
- 2chまとめアプリ+ニートだけど仕事してない時の焦りやばいな
- News人【首脳会談】トランプ氏、習近平氏を公文書館に案内→清朝との「不平等条約」や「サンフランシスコ講和条約」を事前撤去していた他
- ブルーアンテナ中原未來 でっかいおっぱいがたまらん！Gカップ新人グラドルさんのファーストイメージ 前半
- ウマーあんてな安価で漫画描いてバズらせるww
- まとめクローラなんて恐ろしい契約を…「残クレ」で念願のアルファードを手に入れた年収600万円・45歳サラリーマンの末路 [9/27]
- 2ちゃんねるアンテナ【画像】令和のラウンドガールさん、美人で美脚でいったい何頭身あるんだよ
- ワロタあんてな最近の小中高生、発達障害や不登校、精神病だらけになってるらしい・・・
- ２ちゃんねるまとめるまとめ阪神佐藤輝明(27)打率.315 161安打 37本塁打 100打点 出塁率.392 OPS1.012(松中以来の五冠王)←これ
- 勝つるあんてな！【画像】スレンダーまんさん、水着姿を披露するも無加工の現実が露わになるwww
- ぷぅアンテナ【悲報】ネタに必死なスレ主、オープンワールドゲームランキングを自作バレるｗｗｗｗｗ 他
- にゅーもふ着衣姿なのに乳首が透けまくってる、ノーブラの美女や芸能人
- 5chnavi【画像】日本で出世したフィリピン人「今度は私たちが日本人に命令する番だ！」
- 海外の反応アンテナ.com海外「みんなの国はムスリム移民を歓迎しているのかい？投票結果がこちら」
海外の技術ブログ「hereticpleb」が投稿した『10 Tells of a Slop UI(スロップUIの10のサイン)』が、Hacker Newsで大きな反応を呼んだ。全角英大文字の乱用や等幅フォント、絵文字の多用、大げさで似通った説明文など、AIが雑に生成したとおぼしきUIに共通する特徴を列挙した内容で、実際にCloudflareの新ランディングページや個人のポートフォリオサイトを名指しする書き込みも相次いだ。一方で「こうした崩れたデザインはAI以前から存在した」「人間のデザイナーも同じ手法を使う」という反論も出て、原因がAIの限界なのか作り手の手抜きなのかで意見が割れた。
スロップUIの10のサイン
出典: hereticpleb.vercel.app / 元記事はこちら
Cloudflareのような資源豊富な大企業が、自社のデザイン基準を放棄できるなんて理解に苦しむ。ランディングページは更新されたようだが[0]、それでもかなり雑だ。[0] https://try.cloudflare.com
そのワードマークを見ると、フィッシングサイトかと思ってしまう。
今のCloudflareならそれでも許されるだろう。すでに名前と評判があるから、雑なランディングページでビジネスがそう減るとは思えない。
このブログが『実装の詳細を文章に出してしまう問題』に触れているのが良い。バイブコーディングされたアプリで一番気になるところだ。実は解決は簡単で、AIエージェントに『ユーザーに見えるテキストは全部翻訳ファイルに入れて』と指示してから、人間がその文章を手直しすればいい。
LLMに正しいUIを生成させるための効率的なプロンプトの仕方について、もっとガイドが必要だ。UI要素の見た目・配置・振る舞いを説明するのはかなり時間がかかる。サーバーサイドのコード生成とは対照的だ。
リストに『全角英大文字の多用』が抜けている。UIがバイブコーディングされた最大のサインの一つだと思う。みんな自分の全角大文字使いを妙に擁護したがるし。
同意、自分の経験とも一致する。等幅の小型英大文字を使いすぎているとボーナスポイント。見出し・『アイキャッチ』・h1・説明文・フッターが全部同じことを言っているのも関連している(全部が大文字である必要はないけど)。
『在籍していない学生って何のこと?』というのは、正式には授業を履修していないが在籍記録は残っている学生のこと。非公式に言えば、卒業した学生ほぼ全員がそれに当てはまる。あと『このサイトはバイブコーディングされてるけど可愛い』とあるけど、見出しにフラクトゥール風フォントを使って『可愛い』は無理があると思う。
小型英大文字の見出しや、あちこちに脈絡なく付くタグを挙げ忘れてる。
どれも的確でひどいものばかりだけど、この問題のどれくらいが今の『AIは手が描けない』的な限界であって、いずれ解決されるのか気になる。
モデル提供元自身がランダム性を加えない限り、LLMは特定のスタイルに偏り続ける。そして人間の好みの性質上、そのスタイルはすぐに『手抜き仕事の証』として飽きられるようになる。
整列の問題は、LLMが本当に画像を理解できるようになれば大体解決されると思う。
手抜きとデザインスキルの欠如が原因だと思う。全部直せる問題ではあるけど、AIは相手の心を読めない。AIの使われ方は、その人が何を大事にしているかを映し出す。大事なことなら丁寧に作り込むし、そうでなければChatGPTに丸投げする。
文章がとにかく辛い。ひどくて、いつも同じような大げさな文ばかり。
皮肉なことに、あなたのポートフォリオサイトも『スロップっぽさ』を感じた。AIで作られたとは言わないけど、必要のない場面で等幅フォントを見ると今は反応してしまう。https://pranavdesai.vercel.app/
うわ、それはかなりひどい。リポジトリを見ただけでLLM製READMEの匂いがする。
等幅フォントはもう自分の中で終わった。この流れが続くなら、来年の今頃には自分もTimes New Romanでコードを書いてる可能性が五分五分だ。
人のことを言えた義理か。
上向き矢印のアイコンが中央に揃ってない。フォントも読みにくくて、お気に入りは『unap-pealing』。テーマ切り替えボタンが上部にしかない。画像の不透明度が0.85に設定されてる?
AIがきれいで分かりやすいUIを作る時代に入りつつあるので、人間は差別化しようとして『個性的』(=読みにくい)なものを作るようになってきている。今回の例で言えば『Mhat Js Glop』みたいなやつ。
この手の雑さはAI以前からずっとある。学習データセットがこの手のゴミで溢れているんだと思う。カルーセルやスクロールジャックも忘れずに。
誰かがAIスロップの何が雑なのかを正確に言語化するたびに、フロンティア企業にとってより明確なRL(強化学習)のターゲットを与えているように感じる。だからといってこの手の投稿をすべきでないとは思わないし、自分はむしろ読むのが好きで、これからも書かれ続けてほしい。
ここで挙げられているパターンの多くは、(絵文字の乱用を除けば)人間のデザイナーも前から普通に使ってきたものだ。ダッシュ記号が入っているだけでAI生成文だと決めつける人たちがいるのと似ている。
『その通りです!これはスロップじゃなくて、実践されているテクノロジーです』
公平に言うと、AI以前から『雑に書かれたReactスロップ』的なUIの雑さはずっとあった。
『絵文字スロップ』だけじゃなくて、アイコン全般がそう。サイト生成でも画像生成でも同じことが起きている。
モデルによってはアイコンを使わなすぎると感じることもある。すでに広く認知されたアイコンがあるのに、リンクやボタンをテキストラベルだけにしてしまう。たとえば『Files』みたいな、アイコンとツールチップで十分伝わるようなものでも。
他サイトの新着
じゃあ良いUIの例を見せてもらえないだろうか。UIデザインの専門家が、こういう雑なデザインのいくつかを取り上げて、自分ならどう作るかを見せてくれるのを見てみたい。
半分冗談の答えとしては『このUIみたいにはしない』こと。すでにエージェントをデザインに使っているなら、これは意外と簡単にプロンプトできる。
『Refactoring UI』を読むといい。元はTailwindの開発者が書いたものだ。以前は良い記事が載っているブログもやっていた。
もっと良いのは、UIの専門家によくある10種類のアプリ画面を作ってもらい、それをデザイナーのグループに『これはAI生成です』と伝えて渡し、AIらしい特徴を指摘させることだと思う。
スロップUIって言葉でクリックしたら、読めないフォントのサイトに飛ばされた。ふーん。
うわ、これはひどい。特にファーストビューでこのフォントを使いすぎている。
この筆者は隠さずAIを使っている。ただ、みんなにありきたりなプロンプトの一発出力を投稿するだけじゃなくて、そこにもう少し労力をかけてほしいと言っているだけだ。実際、投稿の最後にも『このサイトはバイブコーディングされてるけど可愛い。ただ、こういう人たちはそれをちょっとでもマシに見せる努力を全くしていない』と書いてある。
『AIスロップ』の一般的な理解は、まさにあなたの言っていることと一致しているのでは? つまりAIスロップとは、雑で不注意なプロンプトの結果だということ。
『一般の人の大半はそれがAIスロップかどうか気にしていない』とあるけど、お金を持っている層はAI画像に関してはもう気づき始めていると思う。Webデザインについても同じことが起き始めるはずだ。安っぽさ、つまり無頓着さ=スロップの匂いがする。
最近この手の『スロップデザイン』批判をいくつも見かけるけど、デザインスキルが高い人たちから出てきているようには見えない。(たぶん腕のあるデザイナーは、AIのデザインを批評するよりやることがあるだろうし、AIから欲しいものを引き出す方法も分かっているはずだ。)
この人のブログ: https://sha256.net/
元記事、ちゃんと読んだ? 『スロップUIとは、AIが作り出した、変な位置にあったり、目的を果たしていなかったり、あまりに没個性だったりするUIのことだ』『これはビジョンのないバイブコーディングされたUIによく見られる。バイブコーディングされたUIも、うまくやればすばらしいものになるが、大半はそうならない。そのせいでアプリが安っぽく、使いたくないものに見えてしまう』という部分が、3段落目と4段落目に書いてある。
この話題の背景と論点
「vibe coding」と呼ばれる、AIに大まかな指示を出すだけでアプリやサイトを作る手法が広がる中で、似通った雑なUIが量産される現象への注目が背景にある。全角英大文字や等幅フォントの多用は人間のデザイナーも使ってきた手法であり、AI特有とは言い切れない点はスレ内でも指摘されている。また、こうした「見分け方」を公開すること自体が、AI開発企業にとって修正すべき欠点のリストになり、結果としてスロップがより見抜きにくくなるという皮肉な懸念も出ていた。どこまでがAIモデルの限界で、どこからが作り手の手抜きかという線引きは、このスレの中でも定まっていない。
※本記事は5ch(Hacker News)スレッド「10 Tells of a Slop UI」より抜粋・要約して構成しています。
この記事のリアクション
まだコメントはありません。