ui-design-patterns

# UI Design Patterns

UI コンポーネント設計パターン、レイアウト設計、アクセシビリティガイドライン。

## 前提条件

- React/Vue/Svelte などのコンポーネントベースフレームワーク
- TypeScript 推奨（型安全な Props 定義）

## コンポーネント設計パターン

### Atomic Design 階層

| レベル | 例 | 責務 |
|--------|-----|------|
| Atoms | Button, Input, Label | 単一責任、再利用可能 |
| Molecules | SearchBar, FormField | Atoms の組み合わせ |
| Organisms | Header, ProductCard | ビジネスロジック含む |
| Templates | PageLayout | 構造定義（スロット配置） |
| Pages | HomePage | データ注入・状態管理 |

### フォーム設計パターン

#### 1. Controlled vs Uncontrolled

| パターン | 用途 | 例 |
|---------|------|-----|
| Controlled | リアルタイム検証、動的 UI | `<input value={state} onChange={...} />` |
| Uncontrolled | シンプルなフォーム、パフォーマンス重視 | `<input ref={inputRef} />` |

**推奨**: 大半は Controlled で統一し、パフォーマンスが問題になった場合のみ Uncontrolled を検討。

#### 2. バリデーション戦略

| タイミング | 用途 | UX 特性 |
|-----------|------|--------|
| onChange | リアルタイムフィードバック | 即時性高、CPU負荷あり |
| onBlur | フィールド離脱時検証 | バランス良好 |
| onSubmit | 最終検証 | 遅延フィードバック |

**推奨**: `onBlur` + `onSubmit` の組み合わせ。

#### 3. エラー表示パターン

| パターン | 特徴 | 適用場面 |
|---------|------|---------|
| Inline | フィールド直下にエラー表示 | 個別フィールドエラー |
| Summary | フォーム上部にまとめて表示 | 複数エラーの概要 |
| Toast | 非破壊的通知 | 保存成功/失敗 |

### コンポーネント Props 設計

#### Bad: 曖昧な Props

```tsx
// 何を渡すべきか不明
<Button type="1" size="big" />
```

#### Good: 明確な Union Types

```tsx
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger' | 'ghost';
  size: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
}

<Button variant="primary" size="md" loading />
```

---

## レイアウトパターン

### Grid vs Flexbox 使い分け

| パターン | Grid | Flexbox |
|---------|------|---------|
| 2次元レイアウト（行と列） | ✅ | ❌ |
| 1次元並び（横 or 縦） | △ | ✅ |
| 不均等分割 | ✅ | △ |
| 要素サイズが動的 | △ | ✅ |

**経験則**: 「グリッド状」なら Grid、「並び」なら Flexbox。

### レスポンシブ戦略

#### Mobile-first ブレークポイント

```css
/* Base: mobile */
.container { padding: 1rem; }

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 2rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { padding: 3rem; max-width: 1200px; }
}
`