なぜ AI は同じ紫グラデーションのサイトを作るのか — 分布的収束と Skills による脱却

「AI にランディングページを作らせると、どれも同じに見える」

Inter フォント、白背景に紫グラデーション、角丸カード、3カラムのアイコン付きグリッド — いわゆる AI スロップ（AI slop） と呼ばれるこの現象には、明確な技術的原因があります。

@awakia さんのポストでは、Anthropic が公式ブログで解説した 分布的収束（Distributional Convergence） という概念と、その解決策としての Skills アプローチを紹介しています。差を生むのはモデルの性能ではなく「方向付け」だという指摘は、AI を使ったフロントエンド開発に携わる全ての人にとって重要な示唆です。

分布的収束（Distributional Convergence）とは

LLM はトークンの出現確率に基づいてテキストを生成します。フロントエンドのコード生成においても同じ原理が働きます。

学習データには膨大な数の Web サイトのソースコードが含まれていますが、その中で 最も頻出する「安全な」選択肢 が統計的に支配的です。結果として、指示なしで「ランディングページを作って」と頼むと、学習データの 中央値 に収束した出力が生成されます。

なぜ「紫」なのか

この疑問には具体的な答えがあります。約 5 年前、Tailwind CSS のデフォルトボタンカラーが indigo-500 に設定されました。その後、GitHub 上に大量の Tailwind チュートリアルやサンプルコードが蓄積されました。AI に制約なしで「ランディングページを作って」と指示すると、2019 年から 2024 年にかけてスクレイピングされた Tailwind CSS チュートリアルの中央値を得ることになります。そして、その中央値が紫なのです。

AI スロップの典型パターン

要素	AI スロップの典型
フォント	Inter, Roboto, Arial, system fonts
配色	白背景 + 紫/インディゴグラデーション
レイアウト	3カラムのカード型グリッド
角丸	控えめだが均一な rounded-lg
アニメーション	なし、または最小限
背景	単色（白 or 薄いグレー）

これは「悪い」デザインではなく、統計的に平均的なデザインです。どのプロジェクトにも合いそうで、どのプロジェクトにも合わない — そういう出力になります。

Anthropic の解決策：Skills

Anthropic の Applied AI チームはこの問題に対し、モデルの再学習ではなく、プロンプトレイヤーでの解決を選びました。それが Skills（動的プロンプト）です。

Skills とは

Skills は、Claude が状況に応じてオンデマンドで読み込む専門知識を記述した Markdown ファイルです。フロントエンド開発タスクを検出すると、自動的にデザイン指針が有効化されます。

核心となるプロンプトは約 400 トークンと非常にコンパクトですが、4 つの設計軸に対して具体的な指示を与えます。

4 つの設計軸

1. Typography（タイポグラフィ）

❌ 避ける: Inter, Roboto, Open Sans, Lato, system fonts

✅ 選ぶべきフォント:
  - コード美学: JetBrains Mono, Fira Code, Space Grotesk
  - エディトリアル: Playfair Display, Crimson Pro, Fraunces
  - スタートアップ: Clash Display, Satoshi, Cabinet Grotesk
  - テクニカル: IBM Plex family, Source Sans 3

✅ ペアリング原則:
  - Display + Monospace、Serif + Geometric Sans
  - ウェイトは 100/200 vs 800/900 の極端なコントラスト
  - サイズジャンプは 1.5 倍ではなく 3 倍以上

2. Color & Theme（配色とテーマ）

CSS 変数で一貫性を確保しつつ、支配的な色 + 鋭いアクセントの組み合わせを推奨します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* AI スロップ */
:root { --primary: #6366f1; /* いつものインディゴ */ }

/* 改善後 */
:root {
  --primary: #FF6B35;    /* 鮮やかなオレンジ */
  --secondary: #004E89;  /* 濃いブルー */
  --accent: #FFD23F;     /* イエロー */
  --dark: #1A1A2E;
}

IDE テーマや文化的美学からインスピレーションを得ることが推奨されています。

3. Motion（アニメーション）

散在したマイクロインタラクションよりも、1 つのよく調整されたページロードアニメーションを優先します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

animation-delay による段階的な表示（staggered reveal）が、最も効果的なパターンです。

4. Backgrounds（背景）

単色ではなく、雰囲気と深度を作ります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.hero-bg {
  background: linear-gradient(135deg, #004E89 0%, #1A1A2E 50%, #FF6B35 100%);
}
.hero-bg::before {
  content: '';
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 210, 63, 0.2) 0%, transparent 50%);
  animation: float 20s ease-in-out infinite;
}

CSS グラデーションの層化、幾何学パターン、コンテキストに応じたエフェクトで「空気感」を作ります。

プロンプトの核心部分

Anthropic の Cookbook で公開されている実際のプロンプト（DISTILLED_AESTHETICS_PROMPT）の要点は以下です：

あなたは放っておくと「平均的な」出力に収束する傾向があります。フロントエンドデザインにおいて、これはユーザーが「AI スロップ」と呼ぶ美的品質を生みます。これを避けてください: 創造的で独特な、驚きと喜びを与えるフロントエンドを作りましょう。

ポイントは 3 つです：

自覚させる — 「あなたは平均に収束する傾向がある」と LLM に伝える
具体的に禁止する — Inter フォント、紫グラデーション等を名指しで避けさせる
代替案を提示する — 禁止するだけでなく、具体的な選択肢を示す

効果の検証

Justin Wetch 氏（Anthropic 関連のデザイナー兼プロンプトエンジニア）が 50 のテストプロンプトで評価した結果：

改訂版プロンプトは 75% の勝率を達成（統計的に有意）
小型モデル（Haiku）ほど改善幅が大きい — プロンプトによる「方向付け」の恩恵をより強く受ける
大規模モデルは元から一定のデザイン品質を持つため、相対的な改善幅は限定的

この結果は、@awakia さんの「差を生むのはモデルの性能ではなく方向付け」という主張を裏付けています。

実践への応用

Claude.ai で使う

Claude.ai の Artifacts 機能でフロントエンドを生成する際、プロンプトに以下を追加するだけで効果があります：

一般的な AI 生成デザイン（Inter フォント、紫グラデーション、白背景）は避けてください。
独特で大胆なタイポグラフィ、意図的な配色、アニメーション、深度のある背景を使ってください。

Claude Code で使う

Claude Code では Skills として自動的に読み込まれるため、フロントエンド開発タスクを依頼すれば改善されたデザインが出力されます。さらにカスタマイズしたい場合は、.claude/rules/ にプロジェクト固有のデザインルールを配置できます。

汎用的な教訓

この知見はフロントエンドに限りません。LLM が「平均的な」出力に収束する問題は、あらゆる創造的タスクで発生します。

文章生成 → 「ビジネスメール調」に収束
コード生成 → 最も一般的なパターンに収束
命名規則 → 汎用的で無個性な名前に収束

対策は共通です：収束的なデフォルトを特定し、具体的な代替案を提示し、適切な粒度で構造化する。

まとめ

AI スロップは、LLM の「バグ」ではなく、統計的生成の必然的な結果です。Anthropic はこれをモデルの再学習ではなく、アプリケーション層でのプロンプト設計で解決しました。

分布的収束: LLM は学習データの中央値に収束する
AI スロップ: 紫グラデーション・Inter フォントはその具体的な表れ
Skills: 約 400 トークンの「方向付け」で出力品質を大幅に改善
核心: モデルの性能ではなく、プロンプトによる方向付けが差を生む

AI を使ったフロントエンド開発で「また同じ紫のサイトか…」と感じたら、問題は AI ではなくプロンプトにあるかもしれません。

なぜ AI は同じ紫グラデーションのサイトを作るのか — 分布的収束と Skills による脱却#

分布的収束（Distributional Convergence）とは#

なぜ「紫」なのか#

AI スロップの典型パターン#

Anthropic の解決策：Skills#

Skills とは#

4 つの設計軸#

1. Typography（タイポグラフィ）#

2. Color & Theme（配色とテーマ）#

3. Motion（アニメーション）#

4. Backgrounds（背景）#

プロンプトの核心部分#

効果の検証#

実践への応用#

Claude.ai で使う#

Claude Code で使う#

汎用的な教訓#

まとめ#

参考#