Ui Ux Pro Max

# UI/UX Pro Max

UI/UXデザインおよび実装の専門スキル。

**核心: 「全部ちゃんとやる」がAI生成感の正体。「何を捨てるか」がデザイン。**

## 対応領域

- ランディングページ設計
- ダッシュボードUI
- SaaSプロダクト
- モバイルアプリ（レスポンシブ）

---

## 行動原則（5つの鉄則）

### 1. 作る前に疑え

- 全要素に「本当に要る？」を問え
- 答えが曖昧なら、まず無しで作れ

### 2. 主役を1つ決めろ

- 各セクションで「一番見せたいもの」を1つだけ決めろ
- **決まるまでコードを書くな**

### 3. 70点を並べるな

- 全要素が同じ存在感 = 失敗
- 1つを120点、残りを60点にしろ

### 4. 「できます」より「やめましょう」

- 追加より削除を提案しろ
- 迷ったら削れ

### 5. 批判してから作れ

- 現状の問題点を3つ以上挙げてから改善案を出せ
- 「いい感じですね」は禁止

---

## AI生成感を避ける

### やってはいけないこと

- **全要素が同じ存在感**（均一な余白、安全な色）
- **決断の不在**（AとBどちらでも、お好みで）
- **過剰な装飾**（意味のないグラデーション、アニメーション）

### 「いい感じですね」禁止

- 完成後も「改善の余地があるとすれば〜」を添えよ
- 決断を求められたら決断せよ（根拠を添えて一つを推奨）

---

## プレミアムデザインの公式

```
Premium = (画像の質 × サイズ) + (余白) - (装飾)
```

**3つの柱:**

1. **大きな画像** - カードの70-85%を画像が占める
2. **大胆な余白** - セクション間112px以上
3. **抑制** - すべての効果に理由が必要

**参照ブランド:** Spitfire Audio, Native Instruments, iZotope

---

## 画像ガイドライン

| コンテキスト | 画像サイズ | アスペクト比 |
|-------------|-----------|-------------|
| 製品カード | カード面積の70-85% | 16:9 or 4:3 |
| ヒーローセクション | フルビューポート幅 | 可変 |
| ギャラリーグリッド | 高さ統一、幅可変 | 混合 |

**画像の扱い:**

- 画像がコンテンツの主役
- テキストは最小限（名前 + 1行説明）
- 画像上に機能リストを重ねない
- 高品質なスクリーンショット/レンダリングを使用

---

## 余白トークン

| トークン | 値 | 用途 |
|---------|-----|------|
| `--space-section` | 112px | セクション間 |
| `--space-group` | 64px | 関連コンテンツ間 |
| `--space-element` | 24px | 要素間 |

**セクションパディング:**

```css
/* プレミアムセクション */
padding-top: 112px;    /* py-28 */
padding-bottom: 112px;

/* コンパクトセクション */
padding-top: 64px;     /* py-16 */
padding-bottom: 64px;
```

**Tailwind対応:**

```tsx
// プレミアムセクション
<section className="py-28">...</section>

// コンパクトセクション
<section className="py-16">...</section>
```

---

## グリッドシステム

| 列数 | 用途 | ギャップ |
|-----|------|---------|
| 4列 | 製品ショーケース | 24px (gap-6) |
| 3列 | 機能カード、価格 | 32px (gap-8) |
| 2列 | ヒーロー、比較 | 48px (gap-12) |

---

## 視覚階層チェックリスト

### 作業開始前

- [ ] 「このセクションの主役は何か」を言語化したか
- [ ] 「削除できる要素はないか」を検討したか
- [ ] 「なぜこの色か」を説明できるか

### 作業中

- [ ] 全要素が同じ存在感になっていないか
- [ ] 視線の流れは意図通りか
- [ ] 背景がコンテンツの邪魔をしていないか

### 作業完了前

- [ ] スマホで見て3秒以内に「何をすればいいか」分かるか
- [ ] 「AI生成感」の原因がないか
- [ ] 「ここは削れたのでは」と思う要素がないか

---

## CRITICAL: アクセシビリティ優先

**このセクションは最優先事項。デザインの美しさよりもアクセシビリティを優先する。**

### WCAG 2.1 コントラスト要件

| テキストサイズ | 最小コントラスト比 |
|---------------|-------------------|
| 通常テキスト (< 18px) | **4.5:1** |
| 大きいテキスト (≥ 18px bold / ≥ 24px) | **3:1** |
| UI コンポーネント・アイコン | **3:1** |

### 必須: プロジェクトの globals.css を使用

**Tailwind のデフォルト色を直接使わない。** プロジェクトの `globals.css` で定義されたトークンを優先する。

```tsx
// NG: Tailwind デフォルトをそのまま使用
<p className="text-slate-400">...</p>
<p className="text-slate-500">...</p>

// OK: プロジェクトトークンを使用
<p className="text-muted">...</p>
<p className="text-subtle">...</p>
```

実装前に必ず `app/globals.css` を確認し、定義済みトークンを把握すること。

### バッジ・タグのコントラスト

**同系色の組み合わせは危険:**

```tsx
// NG: 同系色でコントラスト不足
<span className="bg-indigo-600/20 text-indigo-400">Badge</span>
<span className="bg-amber-500/20 text-amber-400">開発中</span>

// OK: 十分なコントラストを確保
<span className="bg-indigo-600/30 text-indigo-300">Badge</span>
<span className="bg-amber-600/30 text-amber-200">開発中</span>
```

### 無効状態のテキスト

```tsx
// NG: 薄すぎてコントラスト不足
<button className="text-white/50" disabled>...</button>

// OK: 無効でも読める濃さ
<button className="text-white/70" disabled>...</button>
```

---

## 多言語タイポグラフィ

**なぜ必要か:** 日本語は同じフォントサイズでも英語より視覚的に重く見える（画数が多いため）。同じサイズだと日本語が窮屈・重く見えるため、1段階小さくして視覚的バランスを取る。

### タイポグラフィトークン（globals.css で定義済み）

| トークン | 用途 | 英語 (デスクトップ) | 日本語 (デスクトップ) |
|---------|------|-------------------|---------------------|
| `.text-hero` | ランディングページのメインタイトル | 96px | 80px |
| `.text-section` | セクション見出し（h2） | 48px | 40px |
| `.text-headline` | 機能タイトル、製品見出し | 30px | 24px |
| `.text-subhead` | タグライン、リード文 | 24px | 20px |

### 使用方法

```tsx
// NG: Tailwind直接指定（言語による調整なし）
<h1 className="te