mashharuki Intentional Design Guard
なぜAI生成UIは似るのか
LLMはトレーニングデータの統計的中央値に収束する（分布収束 / Distributional Convergence）。指示が曖昧なほど、Inter + 紫グラデーション + 白背景 + 3列カードという「安全な平均」に落ち着く。このスキルは分布の端に意図的に向かうことで、プロジェクト固有のデザインを実現するガードレールである。
Blacklist: AI スロップ美学
以下は「AIが作った」と即座に見抜かれるシグナル。代替なしに使用禁止。
フォント
- Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Source Sans Pro
- system-ui / -apple-system / Arial / Helvetica のみのフォントスタック
- 世代間で収束しやすいフォント（Space Grotesk 等）の安易な選択
カラー
- 白背景 + 薄い紫/青グラデーション（
#7C3AED→#3B82F6系） - 黒背景 + ネオンパープル/シアン
- Tailwind デフォルトパレットの無加工使用（
blue-500,purple-600等そのまま） - 紫をAI機能インジケータとして使うこと（✨ + 紫 = AI の慣用表現）
レイアウト
- 3カラム均等カードグリッドの反復
- Hero → Features(3列) → Testimonials → CTA の定型LP構成
- 意図なく
rounded-2xl shadow-lgを全カードに適用 - 全セクション同一の
px-4 py-8パディング
コンポーネント
- アイコン + タイトル + テキストだけの Feature カード量産
- グラデーション背景の大型 CTA ボタン
- 装飾目的のみの半透明カード・ぼかし背景
- ダークモードをデフォルトにする（指定がない限り）
モーション
- 全要素がスクロールでふわっと出現するフェードイン
animate-pulse,animate-bounceの多用- 意味なく
transition-all duration-300を全要素に適用
必須プロセス: コードを書く前に
Step 1: 文脈の3問（コード内コメントに残す）
- 誰が、何のために使う画面か？ → ユーザー像と目的を1行で
- この画面のムード/トーンは？ → 例: 信頼感、軽快さ、専門性、温かみ、緊張感、権威、前衛、遊び心
- 類似しない参照点は？ → 同ジャンル外から1つインスピレーション源を選ぶ（例: 金融アプリ → 建築雑誌、教育ツール → レコードジャケット、SaaSダッシュボード → 新聞の紙面レイアウト）
Step 2: デザイントークン先行定義
コンポーネントを書く前に、CSS Custom Properties でデザイントークンを定義する。
:root {
/* Step 2a: 主色をコンセプトから1色決定 */
--color-primary: ;
/* Step 2b: 主色の色相を混ぜたニュートラル群（純グレー禁止） */
--color-surface: ;
--color-surface-alt: ;
--color-text: ;
--color-text-muted: ;
/* Step 2c: 補色/分割補色でアクセント */
--color-accent: ;
/* Step 2d: タイポグラフィ */
--font-heading: ;
--font-body: ;
/* Step 2e: 余白リズム */
--space-unit: ;
}
Tailwind 使用時は extend で必ず登録する。ユーティリティ直接のハードコード色禁止。
Step 3: 構造設計（セクション単位で反復）
全体を一度に生成せず、セクション単位で生成→レビュー→次セクションの反復で精度を上げる。
- ページ構造（セクション一覧）を先に決定
- 各セクションを個別に実装
- セクション間の余白リズムと視覚的つながりを最後に調整
タイポグラフィ
フォント選択は 文脈 → ムード → 書体 の順で決定する。
ルール
- 画面のトーンからムードキーワードを2つ選ぶ
references/typography-alternatives.mdからムードに合うペアリングを選択- 見出しと本文で十分なコントラストを確保する
コントラスト要件
- ウェイト差 300以上（例: 見出し 800 / 本文 400）
- または セリフ × サンセリフの混合
- サイズ比は 1.5倍ではなく 2〜3倍 のジャンプを推奨
- 1ページにフォントファミリーは最大3つ
禁止
- 見出し・本文が同一ファミリー・同一ウェイト
- ウェイト差 200 以下（例: 400 vs 500）
- Blacklist フォントの使用
→ 詳細なペアリング集: references/typography-alternatives.md
カラー
パレットは コンセプト → 主色 → ニュートラル → アクセント の順で構築する。
ルール
- コンセプトから主色を1色決定（ブランドカラーがあればそれ）
- 主色の色相を混ぜたニュートラル群を導出（純粋なグレー
#808080系は使わない） - 補色関係または分割補色でアクセント色を1〜2色追加
- CSS Custom Properties で定義 → Tailwind
extendで登録
禁止
#FFFFFF純白 + 彩度バラバラのカラフルカード群- 意味のないグラデーション装飾
- パレット未定義のまま Tailwind ユーティリティで直接色ハードコード
- 紫系をメインカラーに採用（AI っぽさの最大シグナル）
背景表現の代替テクニック（グラデーション以外）
- 微細 SVG ノイズテクスチャ
backdrop-filter: blur()+ 半透明背景- 幾何学 SVG パターン（ドット、ライン、クロスハッチ）
box-shadow多層レイヤーによる奥行き表現- グレインオーバーレイ（
background-image+mix-blend-mode）
→ 詳細: references/color-system-guide.md
レイアウト
「意味のある不均一」 を目指す。均等割りは思考停止のサイン。
ルール
- グリッドに非対称を混ぜる（2:1, 3:2 比率、
col-span変更） - 余白を情報として扱う（広い余白 = 重要度が高い、またはブレス）
- セクション境界は 余白のリズム変化 で表現する（罫線やカード枠ではなく）
- 視線の流れに沿った配置（Z型、F型、または意図的な破壊）
- 異なるセクションで異なるグリッド構造を使う
禁止
grid-cols-3均等3列を2セクション以上で反復- 全カード同サイズ・同構造
- 全セクション同一パディングの機械的統一
→ 詳細な代替パターン集: references/layout-and-components.md
モーション
アニメーションは 「なぜ動くのか」を1行で説明できるもの のみ許可する。
許可
- ユーザー操作フィードバック（ホバー、クリック、フォーカス）→ 理由: 操作確認
- ステガーアニメーション（コンテンツ出現順を伝える）→ 理由: 情報階層の可視化
- 状態遷移トランジション（開閉、ページ遷移）→ 理由: 空間的連続性
禁止
- 全要素スクロールフェードイン（理由なきお化粧）
animate-pulse/animate-bounceの多用transition-all duration-300の全要素適用
実装指針
- HTML/CSS のみ: CSS アニメーション・トランジション優先
- React: Framer Motion（Motion ライブラリ）推奨
- 高インパクトな1箇所の演出 > 散在するマイクロインタラクション
テンプレート戦略（オプション）
ゼロから生成するとAIスロップに陥りやすい。以下の戦略を検討:
- 既存テンプレートベース: Figma Community / HTML テンプレートから出発し、カスタマイズする
- デザインシステム準拠: Material Design / Radix / shadcn/ui 等を土台に、トークンだけ差し替える
- Figma MCP 連携: Figma でデザインし、MCP 経由でコードに忠実変換する
いずれも「AIの自由生成域を狭める」ことで品質を担保する手法。
セルフレビューチェックリスト
UI実装後、以下を すべて 確認する。1つでも該当すれば修正:
基本チェック
- Blacklist のフォントを使っていない
- 紫グラデーション / ネオンパープル / AI インジケータ色を使っていない
- 3問（誰が、ムード、異分野参照）にコメントで答えている
- デザイントークンが CSS Custom Properties で先行定義されている
タイポグラフィ
- 見出しと本文でフォントまたはウェイトに十分な差がある（300+ or セリフ/サンセリフ混合）
- フォントファミリーは3つ以下
カラー
- カラーパレットが CSS 変数で定義されている
- 純粋なグレー（
#XXXで R=G=B）をニュートラルに使っていない - Tailwind デフォルト色をそのまま使っていない
レイアウト
- 均等3列カードを2箇所以上で繰り返していない
- 異なるセクションで異なるグリッド/レイアウト構造を使っている
- Hero → Features → Testimonials → CTA の定型構成になっていない
モーション
- すべてのアニメーションに「なぜ動くのか」の理由がある
- スクロールフェードインを全要素に適用していない
最終主観チェック
- 画面全体を見て 「AIが作った」と感じない
- 「このデザインは何のプロジェクトか」が色とレイアウトから伝わる
- 同じプロンプトで別のAIに生成させたら、異なる結果になると思える
References
| ファイル | 内容 | いつ読むか |
|---|---|---|
references/typography-alternatives.md |
ムード別フォントペアリング集（欧文・和文） | フォント選択時 |
references/color-system-guide.md |
カラーパレット構築手順と CSS テンプレート | 配色設計時 |
references/layout-and-components.md |
レイアウト・コンポーネントの代替パターン集 | 構造設計時 |