📝 実装注記
★ 事業所トップ(#1)との差分
本画面は「個人アカウント」専用のトップ画面。事業所トップ(F-TOP-001 #1)とほぼ同構成だが、以下の差分がある。各差分箇所には個人のみマーカーを付与している。
①サイドバーに「受講証明書」メニュー追加(F-CERT-001〜004への導線)
②KPIカードに「受講証明書 累計発行数」「視聴時間」追加(5枚構成)
③研修計画テーブルに「証明書」列追加(PDF DLリンク)
④自己進捗サマリーカード追加(全体進捗率・完了数・残り数)
⑤3列グリッドに「最近の受講証明書」セクション追加
⑥ページヘッダーが個人名表示(事業所名ではなく)
⑦進捗は「個人ベース」表示(事業所トップは「人数ベース」=共有アカウント)
1. 画面構成
事業所トップと同じ左サイドバー+メインエリアの2カラム。メインは KPI(5枚)→検索→研修計画タブ→3列グリッド(証明書+新着講義+LIVEゼミ)→お知らせの順。事業所トップが2列グリッドに対し、個人トップは証明書セクション追加のため3列。
2. 権限制御
本画面は「個人アカウント」専用。事業所アカウントでログインした場合は事業所トップ(#1)にリダイレクト。F-AUTH-004(アカウント種別判定)でルーティング。個人アカウントのみ受講証明書一覧(F-CERT-001)へのアクセスが可能。修了証発行ボタンは研修計画100%完了時のみ活性化(F-TOP-002はPhase1実装。未完了時はdisabled表示)。
3. データ表示
個人アカウントの進捗は「個人ベース」で表示。事業所アカウントが「人数ベース」(共有のため受講しました!の回数等)であるのに対し、個人は「有無」で表示。KPI「視聴時間」は`lms_viewing_logs`テーブルから集計。
4. インタラクション
事業所トップと同じタブ切替(研修計画/フリー受講)。証明書カードクリック→受講証明書一覧(F-CERT-001)に遷移。証明書DLアイコンクリック→PDF直接ダウンロード(F-CERT-004)。修了証ボタン→PDF生成・DL(F-TOP-002、Phase1実装。研修計画100%完了時のみ活性化、未完了時はdisabled表示)。
5. レスポンシブ
PC(1200px)基準。タブレットではサイドバー格納、3列→2列→1列にブレイク。証明書セクションはスマホでは新着講義・LIVEゼミの下に配置。KPI5枚は768px以下で2列+3列、480px以下で1列に変更。
6. パフォーマンス・セキュリティ
個人アカウントの視聴時間集計は重い処理のため、日次バッチで集計テーブルを更新しキャッシュ利用。リアルタイム性が求められる進捗率のみAPI呼び出し。証明書PDFのDLはサーバーサイドで生成済みファイルを返却(毎回生成しない)。認証+アカウント種別チェック必須。個人の視聴履歴データは他ユーザーから参照不可(行レベルセキュリティ)。
💡 本ワイヤーフレームはPC表示(1200px幅)を基準としています。タブレット・スマホ表示は別途レスポンシブ設計が必要です。