📝 実装注記
1. 画面構成
左サイドバー(220px固定)+メインエリアの2カラムレイアウト、一覧・検索型テンプレートに準拠。メインエリアは KPIカード(4枚)→検索バー→詳細フィルタパネル→表示切替タブ(グループ/カード/リスト)の順で構成。デフォルトは「グループ」タブ表示。グループタブはF-WEB-002(Web講義グループ)への導線として機能し、カード/リストタブでは全講義を一覧表示。事業所アカウント・個人アカウント共通の画面。
2. 権限制御
事業所アカウント・個人アカウント共通で閲覧可能。表示内容に差異なし。受講ステータス(未受講/進行中/完了)は個人アカウントの場合はユーザー単位、事業所アカウントの場合はアカウント単位で管理。KPIカードの「受講済み」「進行中」はログイン中アカウントの実績を表示。お試し会員は有効期限内のみアクセス可能。未ログインでアクセスした場合はF-AUTH-001(ログイン画面)へリダイレクト(本画面はログイン必須)。
3. データ表示
講義データはカスタム投稿タイプ web_lecture から取得(REST API: /wp-json/lms/v1/lectures)。グループはカスタムタクソノミー lecture_group で管理。フィルタ条件はカスタムフィールド(target_level, target_service, duration)で絞り込み。視聴進捗は lms_viewing_logs テーブルとJOINし、アカウント別の視聴率・完了フラグを表示。視聴回数はVimeoのanalytics APIまたは独自カウンタから取得。ダミーデータは2026年度(4月〜10月)を基準。
4. インタラクション
検索バーのキーワード入力→「検索」ボタンクリックで全文検索実行(Phase1は基本キーワードマッチ・絞り込み)。「詳細絞り込み」ボタン→フィルタパネルの表示/非表示トグル。フィルタ条件変更→「この条件で検索」で結果更新。タブ切替→グループ/カード/リストの表示モード切替。グループカードクリック→F-WEB-002(グループ詳細)に遷移。講義カード/リスト行クリック→F-WEB-003(Web講義ページ)に遷移。ページネーションはサーバーサイド(24件/ページ)。
5. レスポンシブ
PC表示(1200px)を基準設計。タブレット(768px以下)ではサイドバーをハンバーガーメニューに格納し1カラム表示。フィルタグリッドは4列→2列にブレイク。講義カードグリッドは3列→2列。グループカードグリッドは2列→1列。スマホ(480px以下)ではKPI4枚を2列×2行、講義カードは1列表示。リストテーブルは横スクロール対応。検索バーは全幅表示に。
6. パフォーマンス・セキュリティ
講義一覧は最大数百件規模(初期142件→将来500件以上を想定)のため、サーバーサイドページネーション必須(24件/ページ)。検索・フィルタはWP_Queryの meta_query と tax_query を組み合わせ。講義数が大幅増加した場合は全文検索エンジン導入を将来的に検討。講義サムネイルは遅延読み込み(loading="lazy")で初期表示速度を最適化。視聴進捗データはキャッシュ(TTL: 5分)利用で毎回のDB JOINを回避。カスタムフィールドのインデックス設定(target_level, target_service)でフィルタ検索を高速化。お試し会員の有効期限チェックはミドルウェアで実施し、期限切れアカウントはログイン画面にリダイレクト。
💡 本ワイヤーフレームはPC表示(1200px幅)を基準としています。タブレット・スマホ表示は別途レスポンシブ設計が必要です。