なぜAI生成UIは全部青いのか ― AIスロップから脱出する技術（入門）

AI SLOP — 同質化からの脱出 なぜAI生成UIは 全部青いのか 同質化から脱出する技術 ken imoto エンジニア / Propel-lab AIスロップ脱出ガイド AIスロップから 抜け出す設計 AI生成を"それっぽさ"で 終わらせない実践ガイド 実務者向けガイド AI Slop → UI/UX → Claude Code → CSS ▶ 17章の実践で"本物のUI"に変える ken imoto kenimoto.dev

なぜ、どれも同じ顔なのか 紫のグラデーション、Interフォント、角丸カード ―― 見覚えがありませんか。 AIに「モダンなUIを」と頼むと、 誰がやっても同じものが出てくる。 問題は、見る側もそれに気づいていること。「これ、AIで作ったな」が一目でバレる時代になった。 AIスロップ脱出ガイド 02 kenimoto.dev

辞書が認めた、2025年の言葉 "slop" は、もう個人の感想ではない。社会が共有する現象になった。 slop Word of the Year 2025 努力・品質・深い意味を欠いた、AIで大量生産されたコンテンツを指す蔑称。 Merriam-Webster と American Dialect Society が同年の言葉に選出。The New Yorker も「The Year in Slop」を特集した。 AIスロップ脱出ガイド 03 kenimoto.dev

Slopの正体は、3つの特性 「下手」なのではない。それっぽいのに、中身が伴わない。 表面的な能力 一見それなりに見えるが、深く見ると浅い。文法は正しいが文脈が薄い。 非対称な努力 30秒でロゴ100個。投入工数と成果物の質が釣り合わない。 大量生産可能 同じプロンプトで無限に量産。固有の文脈を反映しない汎用出力。 AIスロップ脱出ガイド 04 kenimoto.dev

なぜ全部同じになるのか distributional convergence ―― AIは訓練データの最頻パターンに引っ張られる。 Bootstrap Material Design フラットUI Tailwind Dribbble人気 Inter SaaS LP Ant Design → 最頻パターンに収束 「モダンなLP」を頼むと、生成結果は実質2パターンに収れんする。 AIスロップ脱出ガイド 05 kenimoto.dev

AI生成UIの95.4%が、青紫 気のせいではなく、ピクセル単位で測ると本当に偏っていた。 AI生成UIの色相分布(240°付近) 95.4% 残り4.6%がその他の色 自分で測った数字です。4モデル × 40色 × 480観測の色認識実験から。 AI Blue: Vision-Language Modelの色認識バイアス研究(Zenodo論文 + GitHub公開)。なぜ青に寄るのか、その原因は次のページ。 AIスロップ脱出ガイド 06 kenimoto.dev

AIは、色を正確に見ていない 「青が好き」のではない。あいまいな色を、見たことのある色名に丸めてしまう。 純色はOK 赤・青・緑は正確。"red" "blue" はWebに大量に出てくるから。 中間色で崩れる ティール・モーブなど、名前があいまいな色は精度が数倍落ちる。 パステルが苦手 彩度が下がるほど誤差が拡大。プロが使いたい色域こそ最も苦手。 だから出力は、無難な青紫に吸い寄せられる。 AIスロップ脱出ガイド 07 kenimoto.dev

UIの、3大スロップパターン 「モダンなUIを」と頼むと、ほぼこの3つのどれかが出てくる。 症候群 1 紫グラデーション 紫〜青の斜めグラデ背景、左テキスト+右図形、浮遊する幾何学装飾。 症候群 2 Interフォント依存 フォントはほぼ確実にInter。中央寄せ・白背景+単色アクセントで没個性。 症候群 3 均等角丸カード 3〜4列の同サイズカード、border-radius 8px、アイコン+見出し+説明の3段。 AIスロップ脱出ガイド 08 kenimoto.dev

スライドも、ツールまで当てられる 問題はデザインの優劣ではない。準備の姿勢を疑われること。 「スライド、Geminiで作りました？」 各ツールには文体的指紋がある。Geminiの整然さ、Claudeの長文トーン ―― 見る人が見れば一目。AI生成だと見抜かれた瞬間、「楽をする会社」という印象が残る。これは技術ではなく、信頼の問題。 AIスロップ脱出ガイド 09 kenimoto.dev

脱出は、制約から始まる 同質化は「丸投げ」の症状。設計を手元に取り戻せば抜けられる。 1 色を数値で指定する ―― AIの「無難な青紫」任せにしない 2 デフォルトを外す ―― Inter・8px角丸・紫グラデを意図して避ける 3 固有の文脈を入れる ―― 主張・余白・ブランドで「あなた」を出す AIスロップ脱出ガイド 10 kenimoto.dev

脱出の手順は、この本に。 Zenn Book zenn.dev/kenimo49/books/ai-slop-escape-guide 全8章・¥500。AI Slopの正体、distributional convergence、AI Blueの検証データ、UI3大パターン、営業スライドのslop、そして脱出の実装まで。 このスライドも、navy-monoで「青紫」を避けて設計しています。 ken imoto — kenimoto.dev AIスロップから 抜け出す設計 AI生成を"それっぽさ"で 終わらせない実践ガイド 実務者向けガイド AI Slop → UI/UX → Claude Code → CSS ▶ 17章の実践で"本物のUI"に変える ken imoto AIスロップ脱出ガイド 11 kenimoto.dev