「AIスタートアップのサイトが全部同じに見える問題」をネタにしたReactライブラリ「performative-ui」が登場

AIスタートアップの公式サイトでよく見る演出をReactコンポーネントとしてまとめたライブラリ「performative-ui」が公開されています。光るボタン、グラデーション文字、プロンプト入力欄など、AI関連サービスのランディングページで見覚えのある表現を実装できる部品集です。

performative-ui | AI-native React Components
https://vorpus.github.io/performativeUI/

AIサービスのサイトを開くと「何でも作れます」と言わんばかりの入力欄が画面中央に置かれ、紫や水色のグラデーションが背景でゆっくり動き、提携企業らしきロゴが横に流れ、価格表では真ん中のプランだけがやけに光っているなど、多数の「あるある」パターンが観察できます。

ウェブサービスの見た目は単なる装飾ではなく、訪問者に「新しそう」「技術力がありそう」「資金が集まっていそう」と感じさせる最初の接点になります。特にAI関連サービスでは、実際にモデルを動かす前に「最先端らしさ」を伝える必要があり、入力欄、発光、ロゴ、数字、疑似コード、チャット風UIといった部品が見た目の共通語になっています。一方で共通語が増えすぎると、どのサイトも同じように見えるという問題も生まれます。

「AIによく見られる没個性的なデザインパターン」をShow HNへの投稿数が爆増した結果から分析するとこうなる、やはり独創性の欠如が問題 - GIGAZINE

performative-uiは、こうしたAIスタートアップのランディングページにありがちな演出を茶化すネタライブラリというわけ。ライブラリの説明文では、performative-uiは「資金調達ラウンドがどれだけ申し込み超過だったかを示すAIネイティブReactコンポーネント」と表現されています。

コンポーネントはいかにも普通のUIライブラリっぽく分類されていますが、文章はかなりネタ寄り。たとえば「Sparkle」は単語の横に四つ角の星を付けるためのコンポーネントです。サービス名や機能名の横に小さな星を置くと「AIらしい魔法感」が出るため、AI製品のサイトでは頻繁に見かける表現です。「名詞に✦を追加すると、リリース速度が2倍になります」と書かれていました。

GradientTextは文字に紫や青のグラデーションをかける部品で、普通の強調では足りないときに「10億ドル企業っぽさ」を足すための部品という扱い。

StatusDotはステータス表示用の点です。「たとえそうでない時でも、常に緑色」とのこと。

見た目だけでユーザーのクリックを促したい場面ではButtonが用意されています。Buttonは発光するglow、光が横切るshimmer、輪郭線だけのghost、グラデーション塗りのsolid、下部に虹色の帯が走るwaveといった見た目を切り替え可能。単なる押しボタンではなく「押したくなる雰囲気」を作るためのボタンです。

他にも数字をアニメーション表示するStatCounterや、メールアドレス登録フォームのWaitlistFormなど多数のコンポーネントが用意されていました。

performative-uiはエンジニアが集うニュース共有サイト「Hacker News」にも投稿され、デザインの同質化、第一印象、マーケティング上の効果、AI時代のUI表現についてコメントが集まっています。あるコメントでは、見た目がシンプルすぎるサイトは真剣に受け止められないことがあると指摘されており、別のコメントでは共通のフレームワークを使うことでユーザーが直感的に操作できるという利点が述べられています。

今後もしAIスタートアップのトップページで光るグラデーション文字、流れるロゴ、真ん中だけ輝く料金プランなどを見かけたら、performative-uiのカタログを思い出すことになりそうです。