📝 実装注記
1. 画面構成
メインカラム（約830px）＋ サイドバー（320px固定）の2カラムレイアウト。メインカラムは上から「動画プレーヤー → 視聴進捗バー → アクションバー → 講義情報（タブ切替）」の順。サイドバーは「視聴進捗パネル → 研修計画紐付け → 関連講義」のスタック構成。サイドバーは`position: sticky`でスクロール追従。ページヘッダー右上に「← 講義一覧に戻る」ボタンを配置し、パンくずリストと併せて一覧画面への導線を強化。遷移先はWeb講義グループ一覧（F-WEB-002）またはブラウザバックを考慮し、講座グループのアーカイブURLをhrefに設定。本画面は「コンテンツ詳細型」テンプレートに準拠。
2. 権限制御
ログインユーザー: 動画視聴・受講記録・証明書発行が可能。本ページはログイン必須。未ログインでアクセスした場合はF-AUTH-001（ログイン画面）へリダイレクト。
3. データ表示
視聴進捗パネルのデータは`lms_viewing_logs`テーブルから取得。視聴率・視聴時間はVimeo Player APIのtimeupdate / ended イベントで15秒間隔＋離脱時に記録（F-WEB-004仕様に準拠）。研修計画紐付けは`lms_training_plans`テーブルとの結合で、当該講座を含む計画を全件表示。関連講義は同一講座グループから最大3件を新着順（公開日降順）で取得する想定。人気順・おすすめ順・視聴数順による取得は行わない。
4. インタラクション
動画再生: Vimeo Player APIで制御。「受講しました！」ボタン: ワンクリックでAjax送信 → ボタン状態を「受講済み✅」に変更（再クリックで取消不可）。「受講証明書」ボタン: モーダルダイアログを開き、フォーム入力→送信→PDFダウンロード。タブ切替: 概要・資料をJS切替。
5. レスポンシブ
PC表示（1200px幅）を基準設計。タブレット（768px以下）ではサイドバーをメインカラムの下に配置し1カラムに変更。動画プレーヤーは100%幅でアスペクト比16:9を維持。スマホ（480px以下）ではアクションバーのボタンを縦積みに変更。視聴進捗パネルの4分割グリッドは2列×2行に変更。
6. パフォーマンス・セキュリティ
Vimeo Player APIのアクセストークンはサーバーサイドで管理し、クライアントに露出させない。動画URLはoembed経由で取得（直接Vimeo URLをフロントに記述しない）。視聴ログの書き込みはデバウンス処理（15秒間隔）でDB負荷を軽減。受講証明書のPDF生成はサーバーサイドで実行（mpdf / TCPDF等）。生成済みPDFはサーバーに保存し、再ダウンロード時はキャッシュを返却。証明書フォームにはCSRF保護（wp_nonce）を適用。受講しました！ボタンの連打防止（フロントサイドでdisable＋サーバーサイドで重複チェック）。
💡 本ワイヤーフレームはPC表示（1200px幅）を基準としています。タブレット・スマホ表示は別途レスポンシブ設計が必要です。