design-review

# デザインレビュースキル

## 目的

UIデザインの品質を評価し、アクセシビリティ、レスポンシブデザイン、UXパターン、パフォーマンスの観点から改善提案を行う。

## レビューの4つの観点

### 1. アクセシビリティ（A11y）
### 2. レスポンシブデザイン
### 3. UXパターン
### 4. パフォーマンス

---

## レビュー実行方法

### 効率的なレビュー（推奨）

**4つの観点を並列でレビュー**することで、コンテキストを節約しながら網羅的にチェックできます。

**並列レビューの実施方法:**

Taskツールで複数のサブエージェントを並列起動し、各観点を同時にレビュー：

1. **アクセシビリティ観点** - コントラスト、キーボード操作、ARIA、セマンティックHTML
2. **レスポンシブデザイン観点** - ブレークポイント、タッチターゲット、フルードグリッド
3. **UXパターン観点** - フォーム、フィードバック、ナビゲーション、モーダル
4. **パフォーマンス観点** - Core Web Vitals（LCP, FID, CLS）

各観点のレビュー結果を統合し、最終レポートを作成します。

**メリット:**
- コンテキスト使用量を削減
- 各観点を独立して評価
- 並列実行による時間短縮
- 漏れのない網羅的チェック

---

## 1. アクセシビリティ（WCAG 2.1 AA準拠）

### 重要な原則

#### POUR原則

| 原則 | 説明 |
|------|------|
| **P**erceivable（知覚可能） | すべてのユーザーが情報を知覚できる |
| **O**perable（操作可能） | すべてのユーザーがUIを操作できる |
| **U**nderstandable（理解可能） | 情報とUIが理解可能 |
| **R**obust（堅牢） | 多様な技術で解釈可能 |

### チェックリスト

#### 1.1 テキストの代替

```html
<!-- ❌ 悪い例 -->
<img src="logo.png">
<button><i class="icon-save"></i></button>

<!-- ✅ 良い例 -->
<img src="logo.png" alt="Company Logo">
<button aria-label="保存"><i class="icon-save" aria-hidden="true"></i></button>
```

#### 1.2 コントラスト比

**WCAG 2.1 AA基準:**
- 通常テキスト: 4.5:1 以上
- 大きなテキスト（18pt以上 or 14pt太字以上）: 3:1 以上

**確認ツール:**
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
- Chrome DevTools: Lighthouse

```css
/* ❌ 悪い例: コントラスト比 2.5:1 */
.text {
  color: #999;
  background: #fff;
}

/* ✅ 良い例: コントラスト比 7:1 */
.text {
  color: #555;
  background: #fff;
}
```

#### 1.3 キーボード操作

```html
<!-- ❌ 悪い例: キーボード操作不可 -->
<div onclick="submit()">送信</div>

<!-- ✅ 良い例 -->
<button type="submit">送信</button>

<!-- ✅ カスタム要素の場合 -->
<div role="button" tabindex="0" onclick="submit()" onkeydown="handleKey(event)">
  送信
</div>
```

**チェック項目:**
- [ ] すべての操作がキーボードで可能か
- [ ] Tab順序が論理的か
- [ ] フォーカスインジケーターが視認可能か
- [ ] Escキーでモーダルが閉じるか

#### 1.4 フォーカスの可視化

```css
/* ❌ 悪い例: フォーカスを消す */
button:focus {
  outline: none;
}

/* ✅ 良い例 */
button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2