なぜAI生成UIは全部青いのか
同質化から脱出する技術
AI生成UIの同質化を、実験データと5軸の設計で抜け出す
Zenn累計32,000+ views · 4言語で30冊以上出版 · Kindle 6カ国で販売中
本書の概要
AIに作らせたUIが、どれも同じ見た目になる理由を4モデル×40色の実験データで解明。色認識バイアスと分布の収束という原因を示したうえで、Typography・Color・Motion・Spatial Composition・Backgrounds の5軸で抜け出す方法を、全17章とBefore/Afterの実例で扱う。Anthropic公式 frontend-design Skill の中身も分解する。
この本でできるようになること
- AI生成UIが同質化する仕組みを、色認識バイアスと分布の収束から説明できる
- 自分の生成物の「AIっぽさ」を、感覚ではなくパターン名で指摘できる
- Typography / Color / Motion / Spatial Composition / Backgrounds の5軸で修正指示が出せる
- Anthropic公式 frontend-design Skill が何をしているか把握し、自分の設計に組み込める
- Before/After の実例から、どこを触ると印象が変わるかの勘所を持てる
対象読者
- 【個人開発者】AIに作らせたUIが量産品に見えてしまう人
- 【フロントエンド】生成物のどこが悪いか言語化したい人
- 【デザイナー不在チーム】設計の判断軸を持ちたい人
- 【資料作成】スライドまで同じ質感になってきた人
この本で解決できる悩み
- AIに作らせたUIが、どれも同じ見た目になる
- 配色を変えても「AIっぽさ」が抜けない
- 生成物の何が悪いのか説明できず、指示が「もっといい感じに」になってしまう
- Tailwind のデフォルトから抜け出せない
- スライドや資料まで同じ質感になってきた
- frontend-design Skill を入れたが、何が起きているのか分からない
この本の立ち位置
- 原因を実験データで示す (4モデル×40色・480観測)
- 5軸に分けた具体的な脱出手順
- Before/After 24枚で差分を見せる
- Anthropic公式Skillの分解つき
なぜこの本か
- 「AIっぽい」を感覚論で終わらせず、色認識精度の実測から原因を出す
- デザイン論ではなく、生成AIに指示を出す側の実装ガイド
- 公式 frontend-design Skill を読み解き、自分のプロジェクトへ組み込むまで扱う
他のAI本との違い
| 比較対象 | 本書の違い |
|---|---|
| 一般的なUIデザイン入門 | デザイン原則の解説ではなく、生成AIが同質化する原因と、その回避を扱う。 |
| Tailwind / CSS の実装書 | 書き方ではなく「なぜ全部同じになるか」と「どこを変えると抜けるか」に絞る。 |
目次
- 01 はじめに 無料公開
- 02 AIスロップとは何か 無料公開
- 03 なぜ全部同じになるのか — 分布の収束 無料公開
- 04 Slopocalypse — 派生語の爆発
- 05 美的疎外
- 06 AI Blueを検証する 無料公開
- 07 AI Glazingを見抜く
- 08 UIの3大スロップパターン 無料公開
- 09 営業スライドのスロップ
- 10 Typography — フォントで個性を出す
- 11 Color & Theme — 配色で脱出する
- 12 Motion — アニメーションで差をつける
- 13 Spatial Composition — レイアウトで抜ける
- 14 Backgrounds — テクスチャで深度を出す
- 15 Anthropic公式Skill完全解説
- 16 Before/After実験 — 5つのケース
- 17 2026年のデザイントレンド
- 18 自分のプロジェクトにSkillを組み込む
- 19 おわりに
- 20 参考文献 無料公開
- 21 著者紹介 無料公開
- 22 奥付
「AIに作らせたUIが、なんとなく全部同じに見える」。この感覚には理由があります。
4モデル×40色で色認識を測ると、商用モデルは中間色の精度が落ち、生成されるUIは青紫に寄っていきます。原因はあなたの指示ではなく、モデル側の分布にあります。
本書は、その仕組みを実験データで示したうえで、Typography・Color・Motion・Spatial Composition・Backgrounds の5軸に分けて抜け出す手順を扱います。Before/After を並べて、どこを触ると印象が変わるのかを目で確認できる構成にしました。
シリーズ・関連書籍
関連記事で深掘りする
Zennで読む
Zennで全文公開
Zennで読む (¥500) トピック: 生成AIデザインフロントエンドCSSTailwind