[テンプレ]UI 共通仕様書

関連テンプレ構成
テンプレート
# 画面共通仕様

## 共通レイアウト構成

### 基本構成
全画面で以下の共通レイアウトを採用する：  
**[Figmaリンク]**: [共通レイアウトデザイン](https://www.notion.so/Figma%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AEURL%E3%82%92%E6%8C%BF%E5%85%A5)

### レイアウト詳細
- **ヘッダー**: システムロゴ、ユーザー情報、ログアウトボタン、通知アイコン
- **サイドメニュー**: 主要機能へのナビゲーションメニュー（管理画面等で表示）
- **メインコンテンツエリア**: 各画面固有のコンテンツを表示
- **フッター**: コピーライト、バージョン情報、お問い合わせリンク

---

## 共通UI要素

### ボタン仕様

| ボタン種別 | 用途 | スタイル | 備考 |
|---|---|---|---|
| Primary | 主要アクション（登録、保存等） | 青色背景、白文字 | 1画面に1つまで |
| Secondary | 副次的アクション（キャンセル、戻る等） | グレー背景、黒文字 | - |
| Danger | 削除等の危険な操作 | 赤色背景、白文字 | 確認ダイアログ必須 |
| Link | リンク的な軽いアクション | 下線付きテキスト | - |

### 入力フォーム仕様
- **必須項目**: ラベルに「*」を表示
- **入力形式**: プレースホルダーで入力例を表示
- **バリデーション**: リアルタイムバリデーション実施、エラー時は入力欄下部に赤文字でメッセージ表示
- **最大文字数**: 入力欄の右下に「残り○○文字」を表示（長文入力時）

### メッセージ表示仕様

| メッセージ種別 | 表示位置 | 表示時間 | スタイル |
|---|---|---|---|
| 成功メッセージ | 画面上部 | 3秒（自動消去） | 緑背景 |
| エラーメッセージ | 画面上部 | 手動消去まで | 赤背景 |
| 警告メッセージ | 画面上部 | 5秒（自動消去） | 黄背景 |
| 情報メッセージ | 画面上部 | 3秒（自動消去） | 青背景 |

---

## 画面遷移の基本ルール

### 遷移パターン
```mermaid
graph LR
    A["一覧画面"] -->|新規作成| B["登録画面"]
    A["一覧画面"] -->|編集| C["編集画面"]
    A["一覧画面"] -->|詳細表示| D["詳細画面"]

    B["登録画面"] -->|登録完了| A["一覧画面"]

    C["編集画面"] -->|更新完了| A["一覧画面"]
    C["編集画面"] -->|更新完了| D["詳細画面"]

    D["詳細画面"] -->|編集| C["編集画面"]
    D["詳細画面"] -->|削除| A["一覧画面"]

```

### 遷移時の挙動
- **データ未保存時の離脱**: 確認ダイアログを表示（「変更内容が保存されていません。破棄しますか？」）
- **処理中の表示**: ローディングスピナーを表示し、二重送信を防止
- **戻るボタン**: ブラウザの戻るボタンは無効化し、画面内の「戻る」ボタンを使用

---

## レスポンシブ対応

### 対応デバイス

| デバイス | 画面幅 | 対応方針 |
|---|---|---|
| PC | 1024px以上 | フル機能提供 |
| タブレット | 768px〜1023px | 一部レイアウト調整 |
| スマートフォン | 〜767px | 簡易表示（管理機能は非対応） |

### レスポンシブ対応ルール
- タブレット以下ではサイドメニューをハンバーガーメニュー化
- テーブルはスマートフォンではカード形式で表示
- 入力フォームは縦積みレイアウトに変更

---

## アクセシビリティ

### 対応項目
- **キーボード操作**: 全ての操作をキーボードのみで実行可能
- **スクリーンリーダー対応**: aria-label等の適切な属性を設定
- **色覚対応**: 色のみに依存しない情報伝達（アイコンやテキストを併用）
- **コントラスト比**: WCAG 2.1 AA基準を満たすコントラスト比を確保

---

## 多言語対応

### 対応言語
- 日本語（デフォルト）
- 英語
- [その他必要に応じて追加]

### 実装方針
- 画面上の全てのテキストを多言語化
- 言語切り替えはヘッダーのドロップダウンから選択
- ユーザーの言語設定を記憶（Cookie/LocalStorage）

---
プレビュー

画面共通仕様

共通レイアウト構成

基本構成

全画面で以下の共通レイアウトを採用する：

[Figmaリンク]: 共通レイアウトデザイン

レイアウト詳細
  • ヘッダー: システムロゴ、ユーザー情報、ログアウトボタン、通知アイコン
  • サイドメニュー: 主要機能へのナビゲーションメニュー（管理画面等で表示）
  • メインコンテンツエリア: 各画面固有のコンテンツを表示
  • フッター: コピーライト、バージョン情報、お問い合わせリンク

共通UI要素

ボタン仕様
ボタン種別 用途 スタイル 備考
Primary 主要アクション（登録、保存等） 青色背景、白文字 1画面に1つまで
Secondary 副次的アクション（キャンセル、戻る等） グレー背景、黒文字 -
Danger 削除等の危険な操作 赤色背景、白文字 確認ダイアログ必須
Link リンク的な軽いアクション 下線付きテキスト -
入力フォーム仕様
  • 必須項目: ラベルに「*」を表示
  • 入力形式: プレースホルダーで入力例を表示
  • バリデーション: リアルタイムバリデーション実施、エラー時は入力欄下部に赤文字でメッセージ表示
  • 最大文字数: 入力欄の右下に「残り○○文字」を表示（長文入力時）
メッセージ表示仕様
メッセージ種別 表示位置 表示時間 スタイル
成功メッセージ 画面上部 3秒（自動消去） 緑背景
エラーメッセージ 画面上部 手動消去まで 赤背景
警告メッセージ 画面上部 5秒（自動消去） 黄背景
情報メッセージ 画面上部 3秒（自動消去） 青背景

画面遷移の基本ルール

遷移パターン
graph LR
    A["一覧画面"] -->|新規作成| B["登録画面"]
    A -->|編集| C["編集画面"]
    A -->|詳細表示| D["詳細画面"]
    B -->|登録完了| A
    C -->|更新完了| A
    C -->|更新完了| D
    D -->|編集| C
    D -->|削除| A
遷移時の挙動
  • データ未保存時の離脱: 確認ダイアログを表示（「変更内容が保存されていません。破棄しますか？」）
  • 処理中の表示: ローディングスピナーを表示し、二重送信を防止
  • 戻るボタン: ブラウザの戻るボタンは無効化し、画面内の「戻る」ボタンを使用

レスポンシブ対応

対応デバイス
デバイス 画面幅 対応方針
PC 1024px以上 フル機能提供
タブレット 768px〜1023px 一部レイアウト調整
スマートフォン 〜767px 簡易表示（管理機能は非対応）
レスポンシブ対応ルール
  • タブレット以下ではサイドメニューをハンバーガーメニュー化
  • テーブルはスマートフォンではカード形式で表示
  • 入力フォームは縦積みレイアウトに変更

アクセシビリティ

対応項目
  • キーボード操作: 全ての操作をキーボードのみで実行可能
  • スクリーンリーダー対応: aria-label等の適切な属性を設定
  • 色覚対応: 色のみに依存しない情報伝達（アイコンやテキストを併用）
  • コントラスト比: WCAG 2.1 AA基準を満たすコントラスト比を確保

多言語対応

対応言語
  • 日本語（デフォルト）
  • 英語
  • [その他必要に応じて追加]
実装方針
  • 画面上の全てのテキストを多言語化
  • 言語切り替えはヘッダーのドロップダウンから選択
  • ユーザーの言語設定を記憶（Cookie/LocalStorage）

画面一覧

画面ID 画面名 画面種別 主要機能 アクセス権限
SCR-001 ログイン画面 認証 ログイン処理 全ユーザー
SCR-002 ダッシュボード 一覧 統計情報表示 認証済ユーザー
SCR-003 ユーザー一覧 一覧 ユーザー検索・表示 管理者
SCR-004 ユーザー登録 登録 新規ユーザー登録 管理者
SCR-005 ユーザー編集 編集 ユーザー情報更新 管理者
SCR-006 ユーザー詳細 詳細 ユーザー情報表示 管理者
SCR-007 商品一覧 一覧 商品検索・表示 一般ユーザー
SCR-008 商品詳細 詳細 商品詳細情報表示 一般ユーザー

[Figmaリンク]: 画面遷移図