📝 実装注記
1. 画面構成
左サイドバー(220px固定)+メインエリアの2カラムレイアウト、一覧型テンプレートに準拠。F-WEB-001(Web講義トップ)のグループタブからの遷移先。メインエリアはグループヘッダーカード→KPIカード(4枚)→絞り込みパネル(初期非表示)→表示切替タブ(カード/リスト)の順で構成。サイドバーには全グループ一覧を配置し、グループ間のシームレスな切替を実現。事業所アカウント・個人アカウント共通の画面。
2. 権限制御
事業所アカウント・個人アカウント共通で閲覧可能。表示内容に差異なし。受講ステータス(未受講/進行中/完了)は個人アカウントの場合はユーザー単位、事業所アカウントの場合はアカウント単位で管理。KPIカードの数値もログイン中アカウントの実績を表示。お試し会員は有効期限内のみアクセス可能。グループ情報自体は全アカウント同一で、WP管理画面(B-CNT-002)で事務局が管理するカスタムタクソノミー lecture_group から取得。
3. データ表示
グループ情報はカスタムタクソノミー lecture_group のターム詳細から取得。REST API: /wp-json/lms/v1/groups/{slug}。所属講義はタクソノミークエリで web_lecture 投稿タイプをフィルタ。グループ説明・アイコンはタームメタ(group_description, group_icon)で管理。視聴進捗は lms_viewing_logs テーブルとJOINし、アカウント別の視聴率・完了フラグを表示。ダミーデータは「認知症ケア」グループ(15講義)を基準に2026年度のデータ。
4. インタラクション
「絞り込み」ボタン→フィルタパネルの表示/非表示トグル。フィルタ条件変更→「この条件で絞り込み」で結果更新。タブ切替→カード/リストの表示モード切替。講義カード/リスト行クリック→F-WEB-003(Web講義ページ)に遷移。サイドバーのグループ名クリック→当該グループの講義一覧に切替(同一画面のスラッグ変更で実現)。「Web講義トップへ戻る」ボタン→F-WEB-001に遷移。ページネーションはサーバーサイド(9件/ページ、グループ内講義数に応じて調整)。
5. レスポンシブ
PC表示(1200px)を基準設計。タブレット(768px以下)ではサイドバーをハンバーガーメニューに格納し1カラム表示。グループヘッダーカードのアイコンとテキストを縦積みに。講義カードグリッドは3列→2列。フィルタグリッドは4列→2列にブレイク。スマホ(480px以下)ではKPI4枚を2列×2行、講義カードは1列表示。リストテーブルは横スクロール対応。
6. パフォーマンス・セキュリティ
グループ内講義数は最大50件程度を想定。初期表示は9件(カード表示3×3)のページネーションとし、全件取得は避ける。タクソノミークエリは tax_query でインデックスが効くため高速。グループのメタ情報(説明文・アイコン等)はオブジェクトキャッシュ(TTL: 30分)で保持。講義サムネイルは遅延読み込み(loading="lazy")で初期表示速度を最適化。視聴進捗データはF-WEB-001と同様にキャッシュ(TTL: 5分)利用。グループスラッグによるURLルーティングで、存在しないグループへのアクセスは404処理。お試し会員の有効期限チェックはミドルウェアで実施し、期限切れアカウントはログイン画面にリダイレクト。
💡 本ワイヤーフレームはPC表示(1200px幅)を基準としています。タブレット・スマホ表示は別途レスポンシブ設計が必要です。