スロップUIの兆候

グラデーション。どこもかしこもグラデーション。虹色の嘔吐物。脈打つバッジ。指先サイズのカード。絵文字のスロップ。不整合な要素。チャットコンテキストによる冗長なテキスト。ガラスモルフィズム。ありきたりなタグラインと不必要な誇大広告。 最近、私の大学のアプリが「マイナーなUI改善」でアップデートされましたが、それは私が今まで見た中で最もスロップコーディングされたユーザーインターフェースでした。古いUIはぎこちなかったですが、AIエージェントが生み出したスロップ砲よりはましでした。 スロップとは何か？ スロップUIとは、AIが作り出す、どこかおかしく、意図しない場所にあったり、目的を果たさなかったり、あるいはUIがあまりにもジェネリックすぎたりするUIのことです。これは、ビジョンを持たないバイブコーディングされたUIに見られます。バイブコーディングされたUIは、正しく行われれば素晴らしく見えますが、ほとんどの場合そうではありません。そして、アプリを安っぽく、使うのが不快なものにしてしまいます。 スロップコーディングされたウェブサイトの例: Cloudflareは最近ウェブサイトをスロップコーディングしました。そして、このウェブサイトのようなものも、見ただけでわかります。最近のAI動画のようなものです、とにかく。 以下は、スロップを構成する要素です。 グラデーション。 どこもかしこもグラデーション。 最も大きく、最も目立つ兆候はグラデーションです。どこにでもグラデーション、いつでもグラデーション、あらゆるものにグラデーション。ボタンの上、背景、基本的に詰め込める場所ならどこにでも見られます。スロップ砲は、なぜか紫を愛します。 虹色の嘔吐物。 AIは、意味もなくただ違う色を使いたがります。色の組み合わせが良くない画面全体になります。UIを作る際のフィールドに何らかの区別があるから、あるいは何であれ。70-30-10のルールに従っていません。ただ、あちこちに色を追加しているだけです。 脈打つバッジ。 なぜこれらを追加するのか全くわかりませんが、とにかく追加します。トレーニングデータにあるのでしょう、たぶん。しかし、あらゆるものに脈打つバッジを追加します。 私の大学アプリの「アップグレード」では、デジタルIDと呼ばれるものがあります。これはQRコードと顔を表示するだけです。「アクティブ」と表示された脈打つバッジが付いています。問題は、それが決して非アクティブにならないことです。もし非アクティブなら、アプリはログアウトします。それはただの冗長な情報です。 そして、私のプロフィールには「アクティブな学生」バッジがあります。非アクティブな学生がどのように見えるか誰か教えてくれませんか？？ 同じデジタルIDインターフェースでも、大学のロゴの隣に小さな「確認済み」バッジが追加されました。なぜ？それはAPIコールをして、「ああ、この人は確認済みだ」と確認しているわけではないからです。そして、たとえそうであっても、それは何も意味しません。もし私がデジタルIDを偽造するとしたら、わざわざ「未確認」と追加しますか？？ 指先サイズのカード。 私は文字通り、あらゆるバイブコーディングされたUIでこれらのものを見て、毎回イライラします。どこにでもありますよ、本当に。悪いというわけではありません。ただ、あらゆるLLMがあらゆる場所で使いすぎて、今では悪く見えます。 問題は、誰も意識的に座って、「これを改善するには何が良いだろう？爪の先ほどのカードだ」と考えたことはないと思います。 絵文字のスロップ。 AIは、なぜか絵文字を愛します。サム・アルトマンがフロンティアをリードしていると偽るよりも、彼らは絵文字を愛しています。 不整合な要素。 SVGやASCIIアート、あるいは箱に入っていない何らかの要素がある場合、ほとんどの場合、その配置はズレています。私の大学アプリのタイムテーブルにあるこのリストのように。 フォント選択。 これらのウェブサイトは、通常、より面白いフォント選択を選びません。たいていはInterです。もしあなたがプログラミング関連のウェブサイトを持っているなら、JetBrains Monoを手に入れるでしょう。 そしてこのもの: 技術的なことに近いことが言及されると、常にこれらの//を追加します。 チャットコンテキストによる冗長なテキスト。 チャットコンテキストのために、ただたくさんの冗長なテキストを追加します。 例えば、私の以前のブログサイトを作っていたとき、「OK、HTMLを書きたいわけじゃない。快適なNeovimで書くし、ウェブ関連のことはしたくない」と言いました。すると、「Hugoで構築。Neovimから記述」というテキストが追加されました。いいえ、誰も私がどこから書いたかなど気にしません。 AIはREADMEでも同じことをします。「モダンC++ 20の機能で構築」と書きます。誰が気にするんだ。 私の大学アプリでは、起動画面にこれがあります。 このことの面白い点は、この一つのことから、それをトリガーしたプロンプトの匂いをほぼ嗅ぎ取れることです。例えば、「一つのキャンパス、一つのアプリ。」はい、間違いなく、ある管理者が「3つのアプリを統合しよう。3つの支店のために3つのアプリがあるんだ」と言ったのでしょう。 ガラスモルフィズム。 ただガラスモルフィズムを愛しています。他のデザイン言語には行きません（ブルータリズム以外は、そしてブルータリズムはすべて全く同じように見えます）。 そしてこれが「ブルータリストな美学」です: まあ、ブルータリズムは許せます。クールに見えますが、使いすぎると嫌いになります。 ありきたりなタグラインと不必要な誇大広告。 「Elevate」「Seamless」「Next-Generation」「Supercharge」「Unleash」「Empower」といった言葉に執着しています。 すべてのH1の後には、灰色のサブタイトルが続き、「最先端の直感的なインターフェースでタスク管理の力を体験してください」のようなことが書かれています。 「あなたのダッシュボードへようこそ、[名前] ✨」や「ワークフローに革命を起こしましょう」といった言葉をよく使います。 機能的なツールというより、すべての画面をランディングページとして扱います。 結論。 正直、これは私がスロップを見たときにイライラするだけの要素でした。そして、バイブコーディングに反対しているわけではありません。このウェブサイトはバイブコーディングされていますが、可愛いです。 ただ、これらの人々は、少しでも良く見せるための努力を全くしていないだけです。 この投稿を楽しめましたか？RSSで購読する フォローする: GitHub • LinkedIn • Twitter • Email