📝 実装注記
1. 画面構成
左サイドバー(220px固定)+メインエリアの2カラムレイアウト。メインエリアはKPIカード→検索バー→研修計画(タブ切替)→2列グリッド(新着講義+LIVEゼミ)→お知らせの順で構成。サイドバーはスクロール時にsticky固定。クライアント要望書P14/P15のUIイメージを踏襲。
2. 権限制御
本画面は「事業所アカウント」専用。個人アカウントでは「個人トップ」(#2)に遷移。事業所アカウントにはサイドバーに「受講証明書」メニューが表示されない(個人アカウントのみ)。研修計画の進捗は事業所全体での「人数ベース」表示(共有アカウントのため)。
3. データ表示
KPIカードの数値はAPI(`/wp-json/lms/v1/dashboard/summary`)から取得。研修計画テーブルは割り当てられた全計画を表示。講座の受講状況・視聴率はリアルタイムでVimeo APIと連携して更新。ダミーデータは2026年度(2026/04〜2027/03)基準。
4. インタラクション
タブ切替: 研修計画 / フリー受講をタブで切替表示。講座名クリック→Web講義ページ(F-WEB-003)またはLIVEゼミページ(F-LIVE-002)に遷移。検索バーのEnter→Web講義トップ(F-WEB-001)の検索結果表示。各カードのhoverでshadow変化。「一覧を見る→」は各トップページへ遷移。
5. レスポンシブ
PC表示(1200px)を基準設計。タブレット(768px以下)ではサイドバーをハンバーガーメニューに格納し、1カラム表示に切替。2列グリッドも1列に。スマホ(480px以下)では研修計画テーブルを横スクロール対応。KPIカードは2列×2行に変更。
6. パフォーマンス・セキュリティ
研修計画が多い場合(5件以上)はアコーディオン折りたたみを検討。ダッシュボードのKPI集計はキャッシュ(5分間)を利用し、毎アクセスでのDB集計を回避。講座検索はF-TOP-003(基本検索)に準拠し、Phase1ではキーワード+絞り込みのみ。認証済みユーザーのみアクセス可能(未ログインはF-AUTH-001にリダイレクト)。Vimeo APIのトークンはサーバーサイドで管理し、クライアントに露出させない。
💡 本ワイヤーフレームはPC表示(1200px幅)を基準としています。タブレット・スマホ表示は別途レスポンシブ設計が必要です。