docs/ui-specs/
├── overview.md           # 画面一覧・全体構成
├── screen-flow.md        # 画面遷移図
├── common/
│   ├── layout.md         # 共通レイアウト
│   ├── components.md     # 共通コンポーネント
│   └── styles.md         # デザインシステム
└── screens/
    ├── login.md          # 各画面仕様
    ├── dashboard.md
    └── ...

# 画面名: [画面名]

## 基本情報
| 項目 | 内容 |
|------|------|
| 画面ID | SCR-001 |
| 画面名 | ログイン画面 |
| URL | /login |
| 認証 | 不要 |
| 権限 | 全員 |
| 更新日 | YYYY-MM-DD |

## 概要
[画面の目的と主要機能の説明]

## レイアウト

### ワイヤーフレーム（ASCII）
┌─────────────────────────────────────┐
│ ヘッダー                             │
├─────────────────────────────────────┤
│                                     │
│   ┌─────────────────────────┐       │
│   │      ロゴ               │       │
│   └─────────────────────────┘       │
│                                     │
│   ┌─────────────────────────┐       │
│   │ メールアドレス          │       │
│   └─────────────────────────┘       │
│                                     │
│   ┌─────────────────────────┐       │
│   │ パスワード              │       │
│   └─────────────────────────┘       │
│                                     │
│   [ログインボタン]                  │
│                                     │
│   パスワードを忘れた方              │
│                                     │
├─────────────────────────────────────┤
│ フッター                             │
└─────────────────────────────────────┘

### レスポンシブ対応
| ブレークポイント | 対応 |
|-----------------|------|
| Desktop (≥1024px) | 2カラム |
| Tablet (768-1023px) | 1カラム（余白大） |
| Mobile (<768px) | 1カラム（フル幅） |

## コンポーネント

### 入力フィールド

| ID | 名称 | 種類 | 必須 | バリデーション |
|----|------|------|------|----------------|
| email | メールアドレス | text | ○ | メール形式 |
| password | パスワード | password | ○ | 8文字以上 |

### ボタン

| ID | 名称 | 種類 | アクション |
|----|------|------|-----------|
| btn-login | ログイン | primary | ログイン処理 |
| btn-forgot | パスワードを忘れた方 | link | パスワードリセット画面へ |

## インタラクション

### ログインボタン押下時
1. バリデーションを実行
2. エラーがあれば該当フィールドにエラー表示
3. 成功時: POST /api/auth/login を呼び出し
4. 認証成功: ダッシュボード（/dashboard）へ遷移
5. 認証失敗: エラーメッセージを表示

### エラー表示
| コード | メッセージ | 表示位置 |
|--------|-----------|---------|
| 401 | メールアドレスまたはパスワードが正しくありません | フォーム上部 |
| 429 | ログイン試行回数を超えました | フォーム上部 |

## 状態遷移

### 画面状態
| 状態 | 説明 | トリガー |
|------|------|---------|
| 初期 | フォーム入力待ち | 画面表示時 |
| 入力中 | バリデーション実行中 | 入力時 |
| 送信中 | API呼び出し中（ボタン無効） | ボタン押下 |
| エラー | エラー表示 | API失敗 |
| 成功 | 遷移中 | API成功 |

## 画面遷移図

[ログイン] ──成功──→ [ダッシュボード]
    │
    ├──パスワード忘れ──→ [パスワードリセット]
    │
    └──新規登録──→ [ユーザー登録]

## アクセシビリティ (WCAG 2.1 AA)

### 必須対応
- [ ] キーボード操作: Tab順序が論理的
- [ ] フォーカス表示: 視認可能なフォーカスインジケータ
- [ ] ラベル: 全入力フィールドにラベル付与
- [ ] エラー: エラーメッセージは明確で具体的
- [ ] コントラスト: 4.5:1以上（通常テキスト）
- [ ] スクリーンリーダー: aria-label/aria-describedby設定

### フォーム
- 必須フィールドは `aria-required="true"`
- エラー時は `aria-invalid="true"` と `aria-describedby`

## API連携

### 使用API
| メソッド | エンドポイント | 説明 |
|---------|---------------|------|
| POST | /api/auth/login | ログイン認証 |

### リクエスト
```json
{
  "email": "user@example.com",
  "password": "********"
}

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "id": "123",
    "name": "山田太郎",
    "email": "user@example.com"
  }
}

## 出力形式

画面仕様書作成時の成果物：

1. **画面仕様書ファイル**: `docs/ui-specs/screens/{screen-name}.md`
2. **更新した画面一覧**: `docs/ui-specs/overview.md` への追記
3. **画面遷移図更新**: 必要に応じて `docs/ui-specs/screen-flow.md` を更新
4. **共通コンポーネント**: 新規コンポーネントがあれば `docs/ui-specs/common/components.md` に追加

## コマンド

```bash
# 仕様書ディレクトリ作成
mkdir -p docs/ui-specs/screens docs/ui-specs/common

# Mermaid図のプレビュー（VS Code拡張）
# 「Markdown Preview Mermaid Support」を使用