【コピペOK】個人開発でApple風デザインルールを作ったら統一感のあるカッコいいUIにできた話

# Learning Next デザインルール

## 前提・基本方針

### 技術前提

- CSS フレームワーク: Tailwind CSS（デフォルトクラスのみ使用）
- カスタマイズ: 独自 CSS 定義なし、Tailwind 標準クラスで完結
- ダークモード: 対応不要

### デザイン基本方針

- 目的志向: 学習効率とユーザビリティを最優先
- 統一性: Tailwind の制約内で一貫したデザインシステム
- アクセシビリティ: 色のみに依存しない情報伝達
- レスポンシブ: モバイルファーストの縦並びレイアウト

## 配色システム

### ブランドカラー（ロゴベース）

- メインブランド: `blue-600`
- サブブランド: `sky-300`
- テキスト: `slate-700`

### 基本配色構成（3 色ルール準拠）

- ベース色（70%）: `white`、`slate-50`、`slate-100`
- メイン色（25%）: `blue-600`、`blue-700`
- アクセント色（5%）: `sky-300`、セマンティックカラー

### セマンティックカラー

- 成功: `green-500`、`green-50`、`green-700`
- 警告: `amber-500`、`amber-50`、`amber-700`
- エラー: `red-500`、`red-50`、`red-700`
- 情報: `blue-500`、`blue-50`、`blue-700`

### テキスト階層（真っ黒回避）

- 見出し: `slate-900`（#000 回避）
- 本文: `slate-700`
- 補足: `slate-500`
- 無効: `slate-400`

## インタラクション原則

### クリッカブル要素の必須条件

1. カーソル変更: `cursor-pointer` 必須
2. ホバー反応: 必ず視覚的フィードバック提供
3. 状態変化: 色・透明度・その他の明確な変化

### ホバー効果パターン

- 色変化: `blue-600` → `blue-700`
- 透明度: `hover:opacity-80`
- 背景追加: `hover:bg-slate-50`
- アンダーライン: `hover:underline`

## UI 要素別ルール

### ボタン設計

- プライマリ: `blue-600` + `hover:blue-700` + `cursor-pointer`
- セカンダリ: `white` + `blue-600` ボーダー + ホバー反応
- テキストボタン: `blue-600` テキスト + `hover:underline`

### リンク設計

- 通常: `blue-600` + `hover:blue-800` + `underline`
- ナビゲーション: `slate-600` + `hover:blue-600`
- 現在ページ: `blue-600` + `font-semibold`

### ステータス表示（色+形状での判別）

- 成功: `green-50` 背景 + アイコン + `green-700` テキスト
- エラー: `red-50` 背景 + アイコン + `red-700` テキスト
- 警告: `amber-50` 背景 + アイコン + `amber-700` テキスト
- 情報: `blue-50` 背景 + アイコン + `blue-700` テキスト

## コンテンツ別配色

### コース識別（色+アイコン併用）

- Ruby: `red` ファミリー + Ruby アイコン
- Rails: `blue` ファミリー + Rails アイコン
- RSpec: `green` ファミリー + テストアイコン

### 練習問題・インタラクティブ要素

- 未選択: `white` + `slate-200` ボーダー + `hover:bg-slate-50`
- 選択済み: `blue-50` + `blue-300` ボーダー
- 正解: `green-50` + チェックアイコン + `green-700`
- 不正解: `red-50` + バツアイコン + `red-700`

### ランキング表示

- 1 位: `yellow-50` + 🥇 + `yellow-700`
- 2 位: `slate-50` + 🥈 + `slate-700`
- 3 位: `orange-50` + 🥉 + `orange-700`

## レイアウト原則

### 4 原則適用

- 近接: 関連情報のグループ化（`space-y-4`など）
- 整列: グリッドシステム活用
- 反復: 同機能要素の統一デザイン
- 対比: 重要度による視覚的差別化

### 余白設定

- セクション間: `py-8`、`py-12`
- 要素間: `space-y-4`、`gap-4`
- 内部余白: `p-4`、`px-6 py-4`
- 画面端: `px-4`（圧迫感回避）

### レスポンシブ考慮

- 基本: モバイル縦並びレイアウト
- 横幅: `max-w-4xl mx-auto`で中央寄せ
- 余白: 4 の倍数単位（`p-4`、`m-8`など）

## アクセシビリティ

### 色覚配慮

- 色のみ禁止: 必ずアイコン・テキスト・形状で補完
- コントラスト: 白背景に`slate-600`以上使用
- リンク: `underline`で視覚的区別

### ユーザビリティ

- フォーカス: `focus:ring-2 focus:ring-blue-500`
- タッチターゲット: 最小`h-12`（48px）確保
- 読みやすさ: `text-base`以上、`leading-relaxed`

## 統一性確保ルール

### 優先順位

1. ブランドカラー: 最重要アクション
2. セマンティック: 状態・フィードバック
3. ニュートラル: ベース・テキスト・構造

### 一貫性チェックポイント

- 同機能: 同じホバー効果適用
- カーソル: クリッカブルに`cursor-pointer`必須
- 状態表示: 色+アイコンのセット使用
- テキスト階層: `slate`ファミリーで統一

### 禁止事項

- 原色使用: `red-500`の代わりに`red-600`等
- 真っ黒白: `#000`/`#fff`の代わりに`slate-900`/`slate-50`
- 色のみ判別: 必ずアイコン・形状で補完
- 4 色以上: 基本 3 色+セマンティックカラーまで

このガイドラインにより、Tailwind CSS の制約内で統一感があり、アクセシブルで直感的な Learning Next プラットフォームを実現します。

# Apple 風デザイン完全実装ガイド

Apple の Human Interface Guidelines と Apple 公式サイトの実装値を徹底分析し、完全に再現可能なレベルでのデザインルールを構築しました。以下のルールに従うことで、**確実に Apple 風の Web サイトデザインを実現**できます。

## 1. 配色システム（カラーパレット・使用場面・HEX コード）

### メインカラーパレット

**プライマリカラー**

- **ブラック**: `#000000` - メインテキスト、ナビゲーション、アイコン
- **ホワイト**: `#FFFFFF` - 背景、カード背景、逆転テキスト
- **グレー**: `#A3AAAE` - セカンダリテキスト、境界線

**システムカラー（iOS 準拠）**

- **システムブルー**: `#007AFF` - リンク、主要アクション、選択状態
- **システムレッド**: `#FF3B30` - エラー、削除、警告アクション
- **システムグリーン**: `#4CD964` - 成功、確認、正常状態
- **システムオレンジ**: `#FF9500` - 警告、注意喚起
- **システムパープル**: `#5856D6` - 創造性、プレミアム機能

**グレースケール（24 段階システム）**

- **テキスト用**: `#1D1D1F` (メイン), `#666666` (セカンダリ), `#979797` (キャプション)
- **背景用**: `#F5F5F7` (ライトグレー背景), `#EEEEEE` (分割線)
- **インタラクティブ**: `#0088CC` (ホバー用ブルー)

### カラー使用ルール

**テキストカラー適用**

```css
/* メインテキスト */
color: #000000; /* 主要コンテンツ */
color: #1d1d1f; /* 本文テキスト */
color: #666666; /* セカンダリ情報 */
color: #979797; /* キャプション・注釈 */
```

**アクションカラー適用**

```css
/* プライマリアクション */
background-color: #007aff;
color: #ffffff;

/* セカンダリアクション */
background-color: transparent;
color: #007aff;
border: 1px solid #007aff;
```

## 2. 角丸（border-radius）設定

### コンポーネント別角丸値

**ボタン系**

- **小さなボタン**: `border-radius: 8px` (高さ 32px 以下)
- **標準ボタン**: `border-radius: 12px` (高さ 44px)
- **大きなボタン**: `border-radius: 16px` (高さ 56px 以上)

**カード・コンテナ系**

- **小さなカード**: `border-radius: 12px` (幅 200px 以下)
- **標準カード**: `border-radius: 16px` (幅 200-400px)
- **大きなカード**: `border-radius: 20px` (幅 400px 以上)

**フォーム要素**

- **入力フィールド**: `border-radius: 8px`
- **テキストエリア**: `border-radius: 12px`
- **セレクトボックス**: `border-radius: 8px`

**モーダル・オーバーレイ**

- **モーダル**: `border-radius: 20px` (iOS 風)
- **ポップオーバー**: `border-radius: 16px`
- **ツールチップ**: `border-radius: 8px`

### 角丸実装の注意点

**連続的な角丸（Continuous Corners）**

```css
/* iOS風の滑らかな角丸を再現 */
border-radius: 16px;
/* フィグマの場合: Corner Smoothing 60-61% を適用 */
```

## 3. 余白システム（margin・padding）

### 基本スペーシングユニット

**8px ベースシステム**

- **極小**: `4px` - アイコンと文字の間隔
- **小**: `8px` - 関連要素間の最小間隔
- **標準**: `16px` - 一般的な要素間隔、カード内 padding
- **中**: `24px` - セクション間の区切り
- **大**: `32px` - メジャーセクション間
- **特大**: `48px` - ページ最上部・最下部の余白

### コンポーネント別余白設定

**ボタン**

```css
/* 標準ボタン */
padding: 12px 24px; /* 上下12px, 左右24px */
min-height: 44px; /* タッチターゲット最小サイズ */

/* 小さなボタン */
padding: 8px 16px;
min-height: 32px;

/* 大きなボタン */
padding: 16px 32px;
min-height: 56px;
```

**カード内部**

```css
/* カード内padding */
padding: 20px; /* 標準カード */
padding: 16px; /* 小さなカード */
padding: 24px; /* 大きなカード */
```

**レイアウト余白**

```css
/* ページレベル */
margin: 0 16px; /* モバイル水平マージン */
margin: 0 24px; /* タブレット水平マージン */
margin: 0 auto;
max-width: 1200px; /* デスクトップ中央寄せ */

/* セクション間 */
margin-bottom: 32px; /* セクション区切り */
margin-bottom: 48px; /* メジャーセクション区切り */
```

## 4. コントラストの考え方

### テキストコントラスト規則

**WCAG 2.1 準拠コントラスト比**

- **通常テキスト**: 4.5:1 以上
- **大きなテキスト**: 3:1 以上
- **UI コンポーネント**: 3:1 以上

**推奨テキスト組み合わせ**

```css
/* 高コントラスト（メインテキスト） */
background: #ffffff;
color: #000000; /* 21:1 ratio */
background: #f5f5f7;
color: #1d1d1f; /* 16.8:1 ratio */

/* 中コントラスト（セカンダリテキスト） */
background: #ffffff;
color: #666666; /* 5.74:1 ratio */
background: #f5f5f7;
color: #979797; /* 4.54:1 ratio */

/* アクションカラー */
background: #007aff;
color: #ffffff; /* 4.5:1 ratio */
```

### UI 要素のコントラスト

**インタラクティブ要素**

- **ボタン**: 背景色とテキストで 4.5:1 以上
- **リンク**: 周囲のテキストと 3:1 以上の差
- **フォーム**: 境界線と背景で 3:1 以上

**状態による色の変化**

```css
/* 通常状態 */
background-color: #007aff;

/* ホバー状態 */
background-color: #0056cc; /* 20%暗く */

/* 無効状態 */
background-color: #007aff;
opacity: 0.3; /* 30%透明度 */
```

## 5. カードデザインの使い方

### カードの基本スペック

**標準カード**

```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: none; /* 影でのみ区別 */
}
```

**影（Shadow）の設定**

```css
/* 軽い影（標準） */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

/* 中程度の影（ホバー時） */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* 強い影（モーダル・重要要素） */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
```

### カードサイズバリエーション

**小カード（モバイル）**

```css
.card-small {
  min-width: 280px;
  max-width: 320px;
  padding: 16px;
  border-radius: 12px;
}
```

**標準カード**

```css
.card-standard {
  min-width: 320px;
  max-width: 400px;
  padding: 20px;
  border-radius: 16px;
}
```

**大カード（デスクトップ）**

```css
.card-large {
  min-width: 400px;
  max-width: 600px;
  padding: 24px;
  border-radius: 20px;
}
```

### カード内レイアウト

**コンテンツ構造**

```css
.card-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eeeeee;
}

.card-body {
  margin-bottom: 20px;
  line-height: 1.5;
}

.card-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eeeeee;
}
```

## 6. スペースの使い方（要素間距離・グリッドシステム）

### 要素間距離の体系

**関連度による間隔**

- **密接関連**: `4px` - ラベルと値、アイコンとテキスト
- **関連**: `8px` - 同じグループ内の要素
- **やや関連**: `16px` - 異なるグループの要素
- **独立**: `24px` - セクション内の区切り
- **完全分離**: `32px` - セクション間の区切り

### グリッドシステム

**12 カラムフレキシブルグリッド**

```css
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px; /* モバイル */
  padding: 0 24px; /* タブレット */
  padding: 0 32px; /* デスクトップ */
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px; /* モバイル */
  gap: 20px; /* タブレット */
  gap: 24px; /* デスクトップ */
}
```

**レスポンシブブレークポイント**

```css
/* モバイル */
@media (max-width: 767px) {
  .container {
    padding: 0 16px;
  }
  .grid {
    gap: 16px;
  }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding: 0 24px;
  }
  .grid {
    gap: 20px;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .container {
    padding: 0 32px;
  }
  .grid {
    gap: 24px;
  }
}
```

### タイポグラフィスペーシング

**SF Pro フォントシステム**

```css
/* システムフォント指定 */
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;

/* サイズ階層 */
.text-large-title {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 24px;
}
.text-title-1 {
  font-size: 28px;
  line-height: 1.25;
  margin-bottom: 20px;
}
.text-title-2 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 16px;
}
.text-headline {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 12px;
}
.text-body {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.text-caption {
  font-size: 12px;
  color: #666666;
  margin-bottom: 8px;
}
```

## 実装チェックリスト

### 必須要件

- [ ] 最小タッチターゲット 44px×44px 確保
- [ ] コントラスト比 4.5:1 以上維持
- [ ] システムフォント（SF Pro）使用
- [ ] 8px ベースのスペーシング遵守
- [ ] 角丸値の統一（8px、12px、16px、20px）
- [ ] 影の一貫性確保

### 推奨事項

- [ ] ダークモード対応の色設計
- [ ] アクセシビリティ対応
- [ ] レスポンシブデザイン実装
- [ ] 滑らかなアニメーション追加
- [ ] セマンティックカラー使用

このガイドラインに従うことで、**Apple 公式サイトと同等の品質とデザイン一貫性**を持つ Web サイトを構築できます。各数値は実際の Apple の実装値に基づいており、そのまま適用することで確実に Apple 風のデザインを実現できます。

# Learning Next Apple 風デザインルール

## 1. 基本理念

Learning Next は、Apple Human Interface Guidelines の洗練されたデザイン哲学を基盤としつつ、教育プラットフォームとしての独自性を表現します。ブランドカラーの青を軸に、清潔感・明瞭性・直感性を追求し、アクセシビリティを最優先に考慮したユーザー体験を提供します。

## 2. 配色システム

### プライマリカラー（WCAG 適合）
```

- メインブルー: blue-500 (#3B82F6) - 主要アクション、選択状態
- ダークブルー: blue-600 (#2563EB) - ホバー状態、強調
- 強調ブルー: blue-700 (#1D4ED8) - テキスト用、高コントラスト
- 超強調ブルー: blue-800 (#1E40AF) - 白背景でのテキスト、AAA 対応
- ライトブルー: blue-50 (#EFF6FF) - 背景、選択エリア（使用は最小限に）
- ミドルブルー: blue-100 (#DBEAFE) - アイコン背景（使用は最小限に）

```

### グレースケール（アクセシビリティ最適化）

```

- テキストメイン: gray-900 (#111827) - 主要テキスト（コントラスト比 21:1）
- テキストサブ: gray-700 (#374151) - 補助テキスト（コントラスト比 12.6:1）
- テキストキャプション: gray-600 (#4B5563) - 注釈、説明文（コントラスト比 7:1）
- 薄めテキスト: gray-500 (#6B7280) - 非重要テキスト（コントラスト比 4.5:1）
- 境界線: gray-300 (#D1D5DB) - 区切り線、カード境界
- 薄境界線: gray-200 (#E5E7EB) - 軽い区切り線
- 背景: white (#FFFFFF) - 基本背景（薄色背景は極力避ける）
- セクション背景: gray-50 (#F9FAFB) - 必要な場合のみ使用

```

### システムカラー（コントラスト配慮）

```

- 成功: green-600 (#059669) - コントラスト比 7:1 確保
- 警告: amber-600 (#D97706) - コントラスト比 7:1 確保
- エラー: red-600 (#DC2626) - コントラスト比 7:1 確保
- 情報: blue-700 (#1D4ED8) - コントラスト比 7:1 確保

```

### カラー使用ルール

```

- 白背景でのテキスト色は gray-700 以上を使用
- 青背景でのテキスト色は常に白色（#FFFFFF）
- 同色系の組み合わせは避ける（青背景に青ボタンなど）
- 薄色背景（-50, -100 系）は極力使用しない
- UI コンポーネントの境界は 3:1 以上のコントラスト確保

```

## 3. 角丸システム

### コンポーネント別設定

```

- 小ボタン: rounded-lg (8px 相当)
- 標準ボタン: rounded-xl (12px 相当)
- 大ボタン: rounded-2xl (16px 相当)
- カード: rounded-2xl (16px 相当)
- モーダル: rounded-3xl (24px 相当)
- 入力フィールド: rounded-lg (8px 相当)
- アイコンボタン: rounded-full（円形）

```

### 角丸使用原則

```

- 同一コンポーネント内では統一の角丸値を使用
- 親子関係にあるコンポーネントは角丸値を階層化
- 過度に大きな角丸値は避ける

```

## 4. 余白体系

### 基本単位（8px ベース）

```

- 極小: 2px (0.5rem)
- 最小: 4px (1rem)
- 小: 8px (2rem)
- 標準: 16px (4rem)
- 中: 24px (6rem)
- 大: 32px (8rem)
- 特大: 48px (12rem)
- 最大: 64px (16rem)

```

### ボタン内余白（タッチターゲット 44px 確保）

```

- 小ボタン: px-3 py-2.5 (12px 10px) - 最小 44px 高さ
- 標準ボタン: px-6 py-3 (24px 12px) - 48px 高さ
- 大ボタン: px-8 py-4 (32px 16px) - 56px 高さ
- アイコンボタン: p-3 (12px) - 48px x 48px

```

### カード内余白

```

- 小カード: p-4 (16px)
- 標準カード: p-5 (20px)
- 大カード: p-6 (24px)
- 特大カード: p-8 (32px)

```

### セクション間隔

```

- 要素間: space-y-2 (8px)
- コンポーネント間: space-y-4 (16px)
- セクション内: space-y-6 (24px)
- セクション間: space-y-8 (32px)
- ページセクション間: space-y-12 (48px)

```

## 5. 影の適用

### 標準影設定

```

- ボタン標準影: shadow-sm (0 1px 2px rgba(0, 0, 0, 0.05))
- ボタンホバー影: shadow-md (0 4px 6px rgba(0, 0, 0, 0.07))
- プライマリボタン影: shadow-md (常時適用)
- カード標準影: shadow-sm
- カードホバー影: shadow-md
- モーダル影: shadow-xl (0 20px 25px rgba(0, 0, 0, 0.1))
- ドロップダウン影: shadow-lg (0 10px 15px rgba(0, 0, 0, 0.1))

```

### 影の使用原則

```

- 全てのインタラクティブ要素（ボタン、リンク）には必ず影を付与
- ホバー時は影を一段階強化してフィードバックを提供
- 非インタラクティブ要素の影は控えめに（shadow-sm 程度）
- 重要度の高い要素ほど強い影を使用
- 同一画面内で影の強度は最大 3 段階まで

```

## 6. タイポグラフィ

### フォントウェイト

```

- 大見出し: font-bold (700)
- 見出し: font-semibold (600)
- 強調テキスト: font-semibold (600)
- ボタンテキスト: font-semibold (600) - 視認性重視
- 本文: font-normal (400)
- キャプション: font-normal (400)
- 軽いテキスト: font-light (300) - 使用は最小限

```

### フォントサイズ階層

```

- 大見出し: text-4xl (36px) + font-bold + leading-tight
- 見出し 1: text-3xl (30px) + font-semibold + leading-tight
- 見出し 2: text-2xl (24px) + font-semibold + leading-snug
- 見出し 3: text-xl (20px) + font-semibold + leading-snug
- 見出し 4: text-lg (18px) + font-semibold + leading-normal
- 本文: text-base (16px) + font-normal + leading-relaxed
- 小さい本文: text-sm (14px) + font-normal + leading-relaxed
- キャプション: text-xs (12px) + font-normal + leading-normal

```

### コントラスト要件（WCAG 2.1 準拠）

```

- 通常テキスト: 4.5:1 以上（gray-600 以上推奨）
- 大きなテキスト（18px 以上または太字 14px 以上）: 3:1 以上
- 白背景の青テキスト: blue-700 以上を使用（7:1 以上）
- 青背景の白テキスト: 常に白色（#FFFFFF）
- 重要な情報: 7:1 以上（AAA 対応）

```

### 行間・文字間隔

```

- 見出し: leading-tight (1.25)
- 本文: leading-relaxed (1.625)
- 長文: leading-loose (2)
- 文字間隔: tracking-normal（特別な場合のみ調整）

```

## 7. コンポーネント設計

### ボタン設計原則

```

- 全てのボタンに影を付与（押せることを明示）
- 最小タッチターゲットサイズ 44px x 44px を確保
- フォントウェイトは semibold 以上で視認性向上
- 同一画面内での色の重複を避ける
- disabled 状態は明確に区別（透明度 0.5 など）

```

### プライマリボタン

```

- 背景色: bg-blue-500
- テキスト色: text-white
- フォント: font-semibold
- 影: shadow-md
- ホバー: bg-blue-600 + shadow-lg
- フォーカス: ring-2 ring-blue-500 ring-offset-2
- 無効化: opacity-50 + cursor-not-allowed

```

### セカンダリボタン

```

- 背景色: bg-white
- テキスト色: text-blue-700
- ボーダー: border-2 border-blue-700
- フォント: font-semibold
- 影: shadow-sm
- ホバー: bg-blue-50 + shadow-md
- フォーカス: ring-2 ring-blue-500 ring-offset-2

```

### 危険ボタン

```

- 背景色: bg-red-600
- テキスト色: text-white
- フォント: font-semibold
- 影: shadow-md
- ホバー: bg-red-700 + shadow-lg

```

### カード設計

```

- 背景: bg-white
- 境界線: border border-gray-300（視認性確保）
- 影: shadow-sm
- ホバー: shadow-md + border-gray-400
- 角丸: rounded-2xl
- 内余白: p-5 または p-6

```

### 入力フィールド

```

- 背景: bg-white
- 境界線: border border-gray-300
- フォーカス: border-blue-500 + ring-2 ring-blue-500 ring-opacity-20
- エラー: border-red-500 + ring-2 ring-red-500 ring-opacity-20
- プレースホルダー: placeholder-gray-500
- 最小高さ: h-12（48px）

```

### ナビゲーション

```

- アクティブ状態: bg-blue-700 + text-white
- ホバー状態: bg-blue-50 + text-blue-700
- 非アクティブ: text-gray-700
- フォーカス: ring-2 ring-blue-500 ring-inset

```

## 8. レイアウトシステム

### コンテナ

```

- 最大幅: max-w-4xl (常に w-full と併用し、固定の横幅として使用)
- 中央寄せ: mx-auto
- 水平余白: px-4 sm:px-6 lg:px-8
- 垂直余白: py-8 sm:py-12 lg:py-16

```

### グリッドシステム

```

- 1 カラム: grid-cols-1
- 2 カラム: grid-cols-1 md:grid-cols-2
- 3 カラム: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
- 4 カラム: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
- 間隔: gap-4 sm:gap-6 lg:gap-8

```

### フレックスレイアウト

```

- 水平配置: flex items-center justify-between
- 垂直配置: flex flex-col items-center
- 中央寄せ: flex items-center justify-center
- 間隔: space-x-4 / space-y-4

```

## 9. インタラクション

### ホバー効果

```

- ボタン: 色の深化 + 影の強化 + scale-105（わずかな拡大）
- カード: 影の強化 + 境界線の濃化
- リンク: 色の変化 + underline
- アイコン: 色の変化 + rotate-12（わずかな回転）

```

### フォーカス状態（アクセシビリティ重要）

```

- 入力要素: ring-2 ring-blue-500 ring-opacity-50
- ボタン: ring-2 ring-blue-500 ring-offset-2
- リンク: ring-2 ring-blue-500 ring-offset-1
- コントラスト比: 3:1 以上確保

```

### アクティブ状態

```

- ボタン: scale-95（わずかな縮小）
- リンク: 色の更なる深化
- 入力要素: ring-2 ring-blue-600

```

### トランジション

```

- 標準: transition-all duration-200 ease-in-out
- 色のみ: transition-colors duration-150 ease-in-out
- 影のみ: transition-shadow duration-200 ease-in-out
- 変形: transition-transform duration-150 ease-in-out

```

### ローディング状態

```

- スピナー: animate-spin
- パルス: animate-pulse
- 背景: bg-gray-100（コンテンツ部分）
- 透明度: opacity-50

```

## 10. アクセシビリティ

### キーボード操作

```

- Tab 順序の論理的な設定
- Enter/Space キーでのボタン操作
- Escape キーでのモーダル終了
- 矢印キーでのナビゲーション

```

### スクリーンリーダー対応

```

- 適切な aria-label 設定
- heading 階層の正しい使用
- フォーム要素の label 関連付け
- 状態変化の音声通知（aria-live）

```

### 視覚的配慮

```

- 色のみに依存しない情報提示
- 十分なコントラスト比の確保
- 文字サイズの可変性
- 動画・アニメーションの制御オプション

```

### モーション配慮

```

- prefers-reduced-motion メディアクエリ対応
- 必要最小限のアニメーション
- 自動再生の回避
- 点滅・フラッシュの制限

```

## 11. レスポンシブデザイン

### ブレークポイント

```

- sm: 640px 以上
- md: 768px 以上
- lg: 1024px 以上
- xl: 1280px 以上
- 2xl: 1536px 以上

```

### レスポンシブ調整

```

- フォントサイズ: text-sm md:text-base lg:text-lg
- 余白: p-4 md:p-6 lg:p-8
- グリッド: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
- 表示・非表示: hidden md:block / block md:hidden

```

## 12. 実装チェックリスト

### 必須項目（アクセシビリティ）

- [ ] WCAG コントラスト要件の遵守（4.5:1 以上）
- [ ] キーボードナビゲーション対応
- [ ] 適切な aria 属性設定
- [ ] フォーカスインジケーターの視認性（3:1 以上）
- [ ] 最小タッチターゲット 44px 確保
- [ ] スクリーンリーダー対応のテキスト

### 必須項目（デザイン）

- [ ] グレースケールの使用（真っ黒・真っ白の適切な使用）
- [ ] 8px ベースの余白システム
- [ ] 角丸の一貫性（lg, xl, 2xl, 3xl）
- [ ] 全インタラクティブ要素への影付与
- [ ] スムーズなトランジション（200ms 以下）
- [ ] ボタンテキストは font-semibold 以上
- [ ] 白背景の青テキストは blue-700 以上
- [ ] カードには明確な境界線（border-gray-300）

### 推奨項目（UX 向上）

- [ ] ホバー効果の統一（影の強化）
- [ ] フォーカス状態の明確化
- [ ] ローディング状態の実装
- [ ] エラーメッセージの親切な表示
- [ ] 成功フィードバックの実装
- [ ] プログレッシブエンハンスメント
- [ ] パフォーマンス最適化

### 色使いの注意点

- [ ] 同色系の組み合わせ回避
- [ ] 薄色背景の使用制限
- [ ] システムカラーの適切な使用
- [ ] 無効状態の明確な表示
- [ ] 色盲への配慮（形・テキストでの補完）

### 品質保証

- [ ] 複数ブラウザでの動作確認
- [ ] 複数デバイスでの表示確認
- [ ] アクセシビリティツールでの検証
- [ ] パフォーマンス測定
- [ ] ユーザビリティテスト実施

## 13. 禁止事項

### 絶対に避けるべき要素

- [ ] 薄すぎる色の使用（コントラスト不足）
- [ ] 同色系の重複（青背景に青ボタンなど）
- [ ] 不要な薄色背景の多用
- [ ] 影のないインタラクティブ要素
- [ ] 44px 未満のタッチターゲット
- [ ] キーボード操作不可能な要素
- [ ] 色のみに依存した情報提示
- [ ] 自動再生される音声・動画
- [ ] 点滅・フラッシュ効果の使用

### 制限的使用項目

- [ ] 薄色背景（-50, -100 系）は目的が明確な場合のみ
- [ ] アニメーション効果は控えめに
- [ ] 装飾的要素は最小限に
- [ ] カスタムフォントは読みやすさ重視
- [ ] 影の多用は避ける（最大 3 段階）