# SCR-001: ログイン画面

## 概要
システムへのログイン処理を行う画面。メールアドレスとパスワードによる認証を実施する。

## 画面レイアウト
**[Figmaリンク]**: [ログイン画面デザイン](FigmaデザインのURLを挿入)

## 画面項目
| 項目ID | 項目名 | 入力種別 | 必須 | 最大文字数 | バリデーション | 備考 |
|-------|-------|---------|-----|----------|--------------|------|
| F001 | メールアドレス | テキスト入力 | ○ | 255 | メール形式チェック | - |
| F002 | パスワード | パスワード入力 | ○ | 128 | 8文字以上 | マスク表示 |
| F003 | ログインボタン | ボタン | - | - | - | Primary |
| F004 | パスワードを忘れた | リンク | - | - | - | - |

## 処理フロー
```mermaid
sequenceDiagram
    participant U as ユーザー
    participant S as 画面
    participant A as 認証API
    participant D as データベース

    U->>S: メールアドレス・パスワード入力
    U->>S: ログインボタン押下
    S->>S: 入力バリデーション
    alt バリデーションNG
        S->>U: エラーメッセージ表示
    else バリデーションOK
        S->>A: 認証リクエスト
        A->>D: ユーザー情報照会
        D->>A: ユーザー情報返却
        alt 認証失敗
            A->>S: 認証エラー
            S->>U: エラーメッセージ表示
        else 認証成功
            A->>S: トークン発行
            S->>U: ダッシュボードへ遷移
        end
    end
```

## 画面遷移
- **ログイン成功時**: SCR-002（ダッシュボード）へ遷移
- **パスワードを忘れた**: パスワードリセット画面へ遷移

## エラーハンドリング
| エラー種別 | 表示メッセージ | 対処方法 |
|-----------|--------------|---------|
| 入力形式エラー | 「メールアドレスの形式が正しくありません」 | 再入力を促す |
| 認証エラー | 「メールアドレスまたはパスワードが正しくありません」 | 再入力を促す |
| アカウントロック | 「アカウントがロックされています。管理者にお問い合わせください」 | 管理者連絡先を表示 |

---

# SCR-003: ユーザー一覧画面

## 概要
登録されているユーザーの一覧を表示し、検索・絞り込み・編集・削除を行う管理画面。

## 画面レイアウト
**[Figmaリンク]**: [ユーザー一覧画面デザイン](FigmaデザインのURLを挿入)

## 検索条件項目
| 項目ID | 項目名 | 入力種別 | 必須 | 備考 |
|-------|-------|---------|-----|------|
| S001 | ユーザー名 | テキスト入力 | - | 部分一致検索 |
| S002 | メールアドレス | テキスト入力 | - | 部分一致検索 |
| S003 | ステータス | ドロップダウン | - | 全て/有効/無効 |
| S004 | 登録日From | 日付選択 | - | - |
| S005 | 登録日To | 日付選択 | - | - |
| S006 | 検索ボタン | ボタン | - | Primary |
| S007 | クリアボタン | ボタン | - | Secondary |

## 一覧表示項目
| 列ID | 列名 | データ型 | ソート | 備考 |
|-----|------|---------|-------|------|
| C001 | ユーザーID | 文字列 | ○ | リンク（詳細画面へ） |
| C002 | ユーザー名 | 文字列 | ○ | - |
| C003 | メールアドレス | 文字列 | ○ | - |
| C004 | ステータス | 文字列 | ○ | 有効/無効をバッジ表示 |
| C005 | 登録日 | 日時 | ○ | YYYY/MM/DD HH:MM |
| C006 | 操作 | - | - | 編集/削除ボタン |

## 処理フロー（検索）
```mermaid
sequenceDiagram
    participant U as ユーザー
    participant S as 画面
    participant A as API
    participant D as データベース

    U->>S: 検索条件入力
    U->>S: 検索ボタン押下
    S->>A: ユーザー一覧取得API呼び出し
    A->>D: ユーザーデータ検索
    D->>A: 検索結果返却
    A->>S: ユーザー一覧データ返却
    S->>U: 一覧表示
```

## 操作仕様
| 操作 | 動作 |
|-----|------|
| 新規登録ボタン | SCR-004（ユーザー登録画面）へ遷移 |
| ユーザーID列クリック | SCR-006（ユーザー詳細画面）へ遷移 |
| 編集ボタン | SCR-005（ユーザー編集画面）へ遷移 |
| 削除ボタン | 確認ダイアログ表示後、削除処理実行 |
| ソートアイコン | 昇順/降順でソート |

## ページネーション
- 1ページあたりの表示件数: 20件（変更可能：10/20/50/100件）
- 総件数、現在ページ数を表示
- 前へ/次へ/先頭/最後のページへ移動可能

---

# SCR-004: ユーザー登録画面

## 概要
新規ユーザーを登録する画面。必須情報を入力し、システムにユーザーを追加する。

## 画面レイアウト
**[Figmaリンク]**: [ユーザー登録画面デザイン](FigmaデザインのURLを挿入)

## 入力項目
| 項目ID | 項目名 | 入力種別 | 必須 | 最大文字数 | バリデーション | 初期値 |
|-------|-------|---------|-----|----------|--------------|-------|
| F101 | ユーザー名 | テキスト入力 | ○ | 50 | 全角・半角英数字 | - |
| F102 | メールアドレス | テキスト入力 | ○ | 255 | メール形式、重複チェック | - |
| F103 | パスワード | パスワード入力 | ○ | 128 | 8文字以上、英数字記号含む | - |
| F104 | パスワード確認 | パスワード入力 | ○ | 128 | F103と一致 | - |
| F105 | 権限 | ドロップダウン | ○ | - | - | 一般ユーザー |
| F106 | ステータス | ラジオボタン | ○ | - | 有効/無効 | 有効 |
| F107 | 登録ボタン | ボタン | - | - | - | Primary |
| F108 | キャンセルボタン | ボタン | - | - | - | Secondary |

## 処理フロー
```mermaid
sequenceDiagram
    participant U as ユーザー
    participant S as 画面
    participant A as API
    participant D as データベース

    U->>S: ユーザー情報入力
    U->>S: 登録ボタン押下
    S->>S: 入力バリデーション
    alt バリデーションNG
        S->>U: エラーメッセージ表示
    else バリデーションOK
        S->>A: ユーザー登録API呼び出し
        A->>D: ユーザーデータ登録
        alt 登録失敗（重複等）
            D->>A: エラー
            A->>S: エラー情報返却
            S->>U: エラーメッセージ表示
        else 登録成功
            D->>A: 成功
            A->>S: 登録成功
            S->>U: 成功メッセージ表示
            S->>U: SCR-003（一覧画面）へ遷移
        end
    end
```

## バリデーション仕様
| 項目 | バリデーション内容 | エラーメッセージ |
|-----|------------------|----------------|
| ユーザー名 | 必須入力 | 「ユーザー名を入力してください」 |
| メールアドレス | 必須入力、メール形式 | 「正しいメールアドレスを入力してください」 |
| メールアドレス | 重複チェック | 「このメールアドレスは既に登録されています」 |
| パスワード | 8文字以上、英数字記号含む | 「パスワードは8文字以上で、英数字と記号を含めてください」 |
| パスワード確認 | パスワードと一致 | 「パスワードが一致しません」 |

---

# 3.2.4 画面仕様記載のガイドライン

各画面の個別仕様を記載する際は、以下のテンプレートを使用する：

# 画面仕様テンプレート

```markdown
# SCR-XXX: [画面名]

## 概要
[画面の目的と主要機能を簡潔に記述]

## 画面レイアウト
**[Figmaリンク]**: [画面デザイン](FigmaデザインのURLを挿入)

## 画面項目
| 項目ID | 項目名 | 入力種別 | 必須 | 最大文字数 | バリデーション | 備考 |
|-------|-------|---------|-----|----------|--------------|------|
| [記載] | [記載] | [記載] | [記載] | [記載] | [記載] | [記載] |

## 処理フロー
[Mermaidシーケンス図で記載]

## 画面遷移
- **[条件]**: [遷移先画面]へ遷移

## エラーハンドリング
| エラー種別 | 表示メッセージ | 対処方法 |
|-----------|--------------|---------|
| [記載] | [記載] | [記載] |
```

---

## 3.2.5 備考

- 画面デザインの詳細は全てFigmaで管理し、本仕様書にはリンクを記載する
- デザイン変更時はFigmaを更新し、本仕様書のリンク先を最新に保つ
- 画面追加時は画面一覧（3.2.2）にも追記する

---