--- title: なぜAI生成UIは全部青いのか ― AIスロップから脱出する技術（入門） tags: #aislop #デザイン #ui #フロントエンド #llm author: [井本 賢](https://www.docswell.com/user/kenimo49) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/L73WZVP175.jpg?width=480 description: AIに「モダンなUIを」と頼むと、なぜか誰がやっても同じものが出てきます。紫のグラデーション、Interフォント、角丸カード。しかも今は、見る側もそれに気づく時代です。 本スライドは『なぜAI生成UIは全部青いのか ― 同質化から脱出する技術』の入門編です。AI Slopが2025年の辞書Word of the Yearになった背景、distributional convergenceの仕組み、自分で測った「AI生成UIの95.4%が青紫」という色認識バイアスの検証、UIの3大スロップパターン、そして脱出の考え方までを11枚で俯瞰します。 ▼Zenn Bookで全文（¥500） https://zenn.dev/kenimo49/books/ai-slop-escape-guide 著者: ken imoto / kenimoto.dev published: June 12, 26 canonical: https://www.docswell.com/s/kenimo49/ZGN2N9-ai-slop-escape-guide --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/L73WZVP175.jpg) AI SLOP — 同質化からの脱出 なぜAI生成UIは 全部青いのか 同質化から脱出する技術 ken imoto エンジニア / Propel-lab AIスロップ脱出ガイド AIスロップから 抜け出す設計 AI生成を"それっぽさ"で 終わらせない実践ガイド 実務者向けガイド AI Slop → UI/UX → Claude Code → CSS ▶ 17章の実践で"本物のUI"に変える ken imoto kenimoto.dev # Page. 2 ![Page Image](https://bcdn.docswell.com/page/87DKR8LKJG.jpg) なぜ、どれも同じ顔なのか 紫のグラデーション、Interフォント、角丸カード ―― 見覚えがありませんか。 AIに「モダンなUIを」と頼むと、 誰がやっても同じものが出てくる。 問題は、見る側もそれに気づいていること。「これ、AIで作ったな」が一目でバレる時代になった。 AIスロップ脱出ガイド 02 kenimoto.dev # Page. 3 ![Page Image](https://bcdn.docswell.com/page/VJPKW823E8.jpg) 辞書が認めた、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 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/2EVV8NDNEQ.jpg) Slopの正体は、3つの特性 「下手」なのではない。それっぽいのに、中身が伴わない。 表面的な能力 一見それなりに見えるが、深く見ると浅い。文法は正しいが文脈が薄い。 非対称な努力 30秒でロゴ100個。投入工数と成果物の質が釣り合わない。 大量生産可能 同じプロンプトで無限に量産。固有の文脈を反映しない汎用出力。 AIスロップ脱出ガイド 04 kenimoto.dev # Page. 5 ![Page Image](https://bcdn.docswell.com/page/57GL5KY5EL.jpg) なぜ全部同じになるのか distributional convergence ―― AIは訓練データの最頻パターンに引っ張られる。 Bootstrap Material Design フラットUI Tailwind Dribbble人気 Inter SaaS LP Ant Design → 最頻パターンに収束 「モダンなLP」を頼むと、生成結果は実質2パターンに収れんする。 AIスロップ脱出ガイド 05 kenimoto.dev # Page. 6 ![Page Image](https://bcdn.docswell.com/page/4EQYZNMLJP.jpg) 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 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/KJ4W3GV571.jpg) AIは、色を正確に見ていない 「青が好き」のではない。あいまいな色を、見たことのある色名に丸めてしまう。 純色はOK 赤・青・緑は正確。"red" "blue" はWebに大量に出てくるから。 中間色で崩れる ティール・モーブなど、名前があいまいな色は精度が数倍落ちる。 パステルが苦手 彩度が下がるほど誤差が拡大。プロが使いたい色域こそ最も苦手。 だから出力は、無難な青紫に吸い寄せられる。 AIスロップ脱出ガイド 07 kenimoto.dev # Page. 8 ![Page Image](https://bcdn.docswell.com/page/LE1Y1D327G.jpg) UIの、3大スロップパターン 「モダンなUIを」と頼むと、ほぼこの3つのどれかが出てくる。 症候群 1 紫グラデーション 紫〜青の斜めグラデ背景、左テキスト+右図形、浮遊する幾何学装飾。 症候群 2 Interフォント依存 フォントはほぼ確実にInter。中央寄せ・白背景+単色アクセントで没個性。 症候群 3 均等角丸カード 3〜4列の同サイズカード、border-radius 8px、アイコン+見出し+説明の3段。 AIスロップ脱出ガイド 08 kenimoto.dev # Page. 9 ![Page Image](https://bcdn.docswell.com/page/GEWG8YP2J2.jpg) スライドも、ツールまで当てられる 問題はデザインの優劣ではない。準備の姿勢を疑われること。 「スライド、Geminiで作りました？」 各ツールには文体的指紋がある。Geminiの整然さ、Claudeの長文トーン ―― 見る人が見れば一目。AI生成だと見抜かれた瞬間、「楽をする会社」という印象が残る。これは技術ではなく、信頼の問題。 AIスロップ脱出ガイド 09 kenimoto.dev # Page. 10 ![Page Image](https://bcdn.docswell.com/page/47ZL8XK4J3.jpg) 脱出は、制約から始まる 同質化は「丸投げ」の症状。設計を手元に取り戻せば抜けられる。 1 色を数値で指定する ―― AIの「無難な青紫」任せにしない 2 デフォルトを外す ―― Inter・8px角丸・紫グラデを意図して避ける 3 固有の文脈を入れる ―― 主張・余白・ブランドで「あなた」を出す AIスロップ脱出ガイド 10 kenimoto.dev # Page. 11 ![Page Image](https://bcdn.docswell.com/page/YJ6WP4QGJV.jpg) 脱出の手順は、この本に。 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