📝 実装注記
1. 画面構成
左サイドバー(220px固定)+メインエリアの2カラムレイアウト、一覧・検索型テンプレートに準拠。メインエリアは KPIカード(4枚)→検索バー(フリーワード検索+詳細絞り込みボタン)→詳細絞り込みパネル(デフォルト表示、トグル開閉)→表示切替タブ(カレンダー/カード/リスト)の順で構成。デフォルトは「カレンダー」タブ表示。LIVEゼミはスケジュール型のため月間カレンダービューを主表示とし、カード表示で詳細情報、リスト表示で一覧性を提供。事業所アカウント・個人アカウント共通の画面。検索バーの構成はF-WEB-001(Web講義トップ)と統一し、フリーワード検索+詳細絞り込みトグルの共通UIパターンを採用。
2. 権限制御
事業所アカウント・個人アカウント共通で閲覧可能。表示内容に差異なし。受講実績(受講済みゼミ数)は個人アカウントの場合ユーザー単位、事業所アカウントの場合はアカウント単位で集計。お試し会員は有効期限内のみアクセス可能。Zoom URLは F-LIVE-002(LIVEゼミページ)遷移後に表示し、本一覧画面では非表示とする。研修計画に紐づくLIVEゼミには計画名ラベルを表示(将来対応可)。
3. データ表示
LIVEゼミデータは lms_contents(content_type='live')から取得(REST API: /wp-json/lms/v1/contents?type=live)。開催日時は live_start_at/live_end_at、所要時間は duration_seconds。Zoom参加情報は一覧では扱わない(詳細ページ F-LIVE-002 のみ・別テーブル lms_content_zoom_secrets に分離保存)。自分の申込状態(申込済み/未申込)は申込テーブル lms_seminar_registrations の有無で判定する(定員・残席の概念は持たない)。テーマはタクソノミーで管理。ダミーデータは2026年度下半期(10月〜3月)を基準。年間36回(月3回平均)を想定したデータ規模。
4. インタラクション
検索バー: フリーワード入力+「検索」ボタンでゼミ名・講師名・キーワードによる全文検索を実行。「詳細絞り込み」ボタンで詳細フィルタパネルをトグル表示/非表示。詳細フィルタパネル内の「閉じる」ボタンでもパネルを非表示にでき、検索バーの「詳細絞り込み」ボタンで再度表示可能。カレンダータブ: 前月/翌月ボタン→表示月を切替。カレンダー上のイベントクリック→F-LIVE-002(LIVEゼミページ)に遷移。カードタブ: カード全体クリック→F-LIVE-002に遷移。ステータスバッジ(受付中/開催済み)は開催日時・申込締切から自動判定。自分の申込状態バッジ(申込済み/未申込)は申込テーブルの有無から判定。リストタブ: ゼミ名クリック→F-LIVE-002に遷移。フィルタ条件変更→「この条件で検索」で結果更新。タブ切替→カレンダー/カード/リストの表示モード切替。ページネーションはサーバーサイド(カード6件/ページ、リスト10件/ページ)。
5. レスポンシブ
PC表示(1200px)を基準設計。タブレット(768px以下)ではサイドバーをハンバーガーメニューに格納し1カラム表示。カレンダーグリッドは7列を維持しつつセル高さを縮小。カードビューは全幅1列表示。フィルタグリッドは4列→2列にブレイク。スマホ(480px以下)ではKPI4枚を2列×2行、カレンダーは週表示(横スクロール)への切替を検討。リストテーブルは横スクロール対応。
6. パフォーマンス・セキュリティ
LIVEゼミは年間36〜48回程度の開催規模のため、データ量はWeb講義と比較して小規模。自分の申込状態の判定は申込テーブル(lms_seminar_registrations)の該当有無を確認するのみで、COUNT集計は発生しない。カレンダー表示は月単位でデータ取得し、live_start_at を範囲指定で絞り込む。Zoom URLはF-LIVE-002(詳細ページ)のみで表示し、一覧APIレスポンスには含めない(URLの不要な露出を防止)。お試し会員の有効期限チェックはミドルウェアで実施し、期限切れアカウントはログイン画面にリダイレクト。申込は送信時点で即確定するため、定員超過を防ぐための排他制御は行わない(`UNIQUE` 制約で重複申込のみ防止)。
💡 本ワイヤーフレームはPC表示(1200px幅)を基準としています。タブレット・スマホ表示は別途レスポンシブ設計が必要です。