🎨 UIデザイン要件定義書｜業務記録・集計システム（MIERU）

📌 目的

医療・薬局等の法人現場で使用する業務記録ツール「MIERU」における、ユーザー用・管理者用の画面UI構成・機能・見た目に関する仕様を定義する。すべての画面で"青・黒・グレー"のみを基調にし、視認性と操作性を重視する。

---

✅ 全体設計：画面区分

| 区分 | 概要 | |------|------| | ユーザー画面 | 医師・看護師・薬剤師などの現場スタッフが業務を記録するためのUI | | 管理者画面 | 法人担当者がアカウント発行・業務設定・稼働集計を行う管理UI |

---

👤 ユーザー画面 要件定義

🎯 基本フロー

ログイン → ユーザー情報確認（法人名・職種・氏名） → 業務選択（中分類→小分類） → 記録開始 → タイマー → STOP → 月次履歴確認

🧩 各画面詳細

① ログイン画面

• 入力項目：ログインID／パスワード（マスク機能あり）
• デザイン：白背景／黒テキスト／青ボタン（#007BFF）
• エラーメッセージ：赤文字 or グレー帯に明示

② ダッシュボード上部（ログイン後）

• 表示項目：法人名／職種／氏名（画面上部または左上）
• 表示形式：小さなカードまたはバー

③ 業務選択画面（中分類 → 小分類の縦表示・ボタン型）

• 中分類：セクション見出し（黒・太字）
• 小分類：ボタン風のラベルUI（角丸、薄グレー背景、hover時薄青、選択時青枠）
• レイアウト：中分類ごとに小分類を複数並列（2列 or 自動折り返し）

④ タイマー画面

• 表示：現在の業務名／タイマー／STOPボタン
• 備考入力：プルダウン＋任意コメント欄
• STOP押下で終了 → 記録保存

⑤ 月別履歴画面

• 表示形式：
  • 見出し：「4月分」など
  • 日付ごとに業務内容を時系列表示（例：09:00-09:30 診察補助）
  • 合計稼働時間：青文字で強調
• スクロール表示／Sticky日付（任意）

---

🛠 管理者画面 要件定義

🎯 基本機能

法人管理／職種別業務マスタ設定／ユーザー登録／アカウント発行／稼働集計（小分類単位）／ログイン情報共有

🧩 各画面詳細

① アカウント一覧（法人管理）

• 表示項目：法人ID／法人名／アカウント数／[編集] [アカウント作成] [ファイル出力] ボタン
• 「新規作成」ボタンで法人追加可
• 一覧は白地テーブル／行の交互グレー（#FAFAFA）

② アカウント作成

• 入力項目：氏名／職種（法人ごとの選択肢）／ID／パスワード
• 出力：ワンクリックでログイン情報をPDF・CSV・コピー形式で共有可

③ 業務マスタ設定

• 中分類と小分類を職種ごとに登録
• UI：フォーム型またはテーブル型＋ドラッグ並び替え（任意）

④ 稼働集計画面（小分類単位）

• フィルター：法人名／対象月／職種
• 表形式：ユーザー × 小分類テーブル（横スクロール）

┌────────┬────────────┬────┐
│ 氏名       │ 初診問診｜身体診察｜…｜合計 │
├────────┼────────────┼────┤
│ ミエル太郎 │ 2h10m｜1h00m｜…｜3h10m │
└────────┴────────────┴────┘

• 合計列は青文字太字（#007BFF）
• 稼働0は「–」表示、灰文字（#999999）
• データ出力：CSVエクスポートボタンあり

---

🎨 カラーパレット指定

| 要素 | 色コード | 用途例 | |------|----------|--------| | 青（Primary） | #007BFF | ボタン／リンク／合計強調文字など | | 黒 | #000000 | 見出し／本文メイン | | グレー（濃） | #666666 | 補足テキスト／セレクタラベル | | グレー（薄） | #E0E0E0 | 枠線／区切り線 | | グレー背景 | #F5F5F5 / #FAFAFA | 表・ボタン背景／行の交互色 |

---

✅ その他補足

• ボタンは全体的に角丸＋影（軽め）をつけ、押しやすさと視認性を両立
• スクロール領域はテーブル横方向に自動対応
• 各小分類ボタンのクリックで即タイマー起動 → 操作数を最小化

---

以上が、これまでのご要望と画面画像を踏まえた、デザイナー向けUI要件定義の統合版です。