UI 共通仕様

目的: システム全体で統一されたUI/UX を提供し、ユーザビリティを向上させ、開発効率を高める。画面間で一貫性のあるデザインと操作性を実現する
スコープ: 全画面で共通的に使用するレイアウト、UIコンポーネント、画面遷移ルール、レスポンシブ対応、アクセシビリティ、多言語対応をカバーする。個別画面固有のUI要素は対象外
推奨する実施タイミング: 基本設計の中盤、画面設計の着手前に実施する
関連するステークホルダー: UIデザイナー、フロントエンドエンジニア、プロジェクトマネージャー、UXデザイナー

📥 重要な前提知識・インプット

前提知識: UIデザイン原則、UX設計の基本、アクセシビリティガイドライン(WCAG)、レスポンシブデザインの基礎、採用するフロントエンドフレームワークの理解
インプット: 画面一覧、画面遷移図、デザインガイドライン(既存の場合)、ブランドガイドライン、非機能要件(対応デバイス・ブラウザ)、多言語対応要件

📄 成果物の定義

ドキュメントテンプレート: 📄[テンプレ]UI 共通仕様書
必須要素: 共通レイアウト構成図、UIコンポーネント仕様書、画面遷移ルール定義、レスポンシブ対応仕様、アクセシビリティ対応方針、多言語対応仕様、画面一覧

✅ 品質基準・レビュー観点

✅ 品質チェックリスト:

チェック項目	チェック内容
一貫性の確保	全画面で共通のUIコンポーネントとデザイン原則が適用されているか
ユーザビリティ	直感的な操作が可能で、学習コストが低い設計になっているか
アクセシビリティ	WCAG 2.1 AA基準を満たしているか
レスポンシブ対応	対象デバイスで適切に表示・操作できるか
多言語対応	言語切り替えが正しく機能し、全テキストが翻訳可能か
保守性	コンポーネントが再利用可能で、修正の影響範囲が限定的か

👁️‍🗨️ レビュー観点:

ユーザー要件との整合性: ターゲットユーザーの操作性・視認性の要求を満たしているか
デザインの一貫性: ブランドガイドラインや既存システムとの整合性があるか
実装可能性: 採用技術で実現可能で、開発工数が妥当な範囲か
保守性: 将来の機能追加や修正が容易な構造になっているか
パフォーマンス: ページ読み込み速度や操作レスポンスが適切か

🧪成果物のサンプル

# 画面共通仕様

## 共通レイアウト構成

### 基本構成
全画面で以下の共通レイアウトを採用する：  
**[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）

---

🔄 設計の進め方・プロセス

🏗️ プロセス1: 共通レイアウト構成の定義

設計対象:

全画面で共通的に使用するレイアウト構造を定義し、ヘッダー・フッター・サイドメニュー・メインコンテンツエリアなどの配置と役割を決定する。

具体例:

ヘッダーに含める要素(ロゴ、ユーザー情報、通知、ログアウトボタンなど)
サイドメニューの表示条件(管理画面のみ、全画面など)とナビゲーション構造
フッターに含める要素(コピーライト、バージョン情報、リンクなど)
メインコンテンツエリアの余白・最大幅・スクロール方式

設計原則:

一貫性の確保: 全画面で統一されたレイアウトを採用し、ユーザーの認知負荷を軽減する
視認性の向上: 重要な情報や操作を適切な位置に配置し、視線の流れを考慮する
レスポンシブ対応: デバイスサイズに応じてレイアウトが適切に変化する構造とする

文書化の推奨表現:

レイアウト構成図の作成: 各エリアの配置と役割を図で表現する(Figma、Mermaidなど)
各エリアの仕様書: ヘッダー・フッター等の詳細仕様を一覧化する
レスポンシブ時の挙動: ブレイクポイントごとのレイアウト変化を記載する

🏗️ プロセス2: 共通UIコンポーネントの定義

設計対象:

ボタン、入力フォーム、メッセージ表示、モーダル、テーブルなど、全画面で共通的に使用するUIコンポーネントの仕様を定義する。

具体例:

ボタンの種類(Primary、Secondary、Danger、Linkなど)とスタイル
入力フォームのバリデーション表示方法、必須項目の表記
成功・エラー・警告メッセージの表示位置・スタイル・表示時間
モーダルダイアログの表示方法と確認ダイアログのパターン
テーブルのソート・ページング・フィルタリングの標準仕様

設計原則:

再利用性の重視: 汎用的なコンポーネントとして設計し、個別画面での実装コストを削減する
操作の一貫性: 同じ種類の操作は常に同じUIコンポーネントで実現する
視覚的なフィードバック: ユーザーの操作に対して適切なフィードバックを提供する

文書化の推奨表現:

コンポーネント仕様書: 各コンポーネントの用途・スタイル・振る舞いを表で整理する
デザインサンプル: Figma等でビジュアルデザインを提供する
実装ガイドライン: フロントエンドの実装方法やクラス名の命名規則を記載する

🏗️ プロセス3: 画面遷移ルールとアクセシビリティ・多言語対応

設計対象:

画面間の遷移パターン、データ未保存時の挙動、レスポンシブ対応、アクセシビリティ対応、多言語対応の方針を決定する。

具体例:

一覧→登録・編集→詳細の標準的な遷移パターン
データ未保存時の確認ダイアログ表示ルール
ローディング表示と二重送信防止の方法
対応デバイス(PC・タブレット・スマートフォン)ごとの表示方針
キーボード操作対応、スクリーンリーダー対応、色覚対応
対応言語と言語切り替えの実装方法

設計原則:

ユーザーの迷いを防ぐ: 画面遷移のルールを統一し、予測可能な動作とする
データ保護: 未保存データの喪失を防ぐ仕組みを導入する
アクセシビリティの確保: WCAG 2.1 AA基準を満たし、多様なユーザーが利用可能にする
グローバル対応: 多言語化を前提とした設計とし、将来の言語追加が容易な構造とする

文書化の推奨表現:

画面遷移図: 主要な画面遷移パターンを図で表現する
レスポンシブ対応表: デバイスごとの対応方針を一覧化する
アクセシビリティ対応項目: 対応する項目と実装方法を明記する
多言語対応仕様: 対応言語と言語切り替えの実装方法を記載する

🚨 よくある失敗と予防策

🚧 実例収集後、追記予定

📚 参考資料・関連リンク

参考文献: 『ノンデザイナーズ・デザインブック』、『誰のためのデザイン?』、『Web制作者のためのCSS設計の教科書』
ガイドライン: WCAG 2.1(Web Content Accessibility Guidelines)、Material Design、Human Interface Guidelines
関連する他のガイド: 画面設計ガイド、アプリケーション共通処理方式、セキュリティ設計ガイド
ツール・テンプレート: Figma、Adobe XD、Storybook、draw.io

テンプレートサイト: 📄テンプレート集