タイムライン画面設計書

最終更新: 2026-07-17 関連 Issue: #1107（タイムライン機能拡張）/ #1108（V2設計書整備）/ #1151（年表ビュー初期実装）/ #1152（活動期間チャート）/ #1158（活動期間チャートのリーダー期間表示）/ #1326（メンバー未登録イベントの動的導出）/ #1323（初期表示を今日にする）/ #1324（年表ビューの月区切り・出演者表示改善）

1. 画面概要

2. V1 現状（実装済み）

2-1. 表示内容

• 年単位でイベントを表示（YearSlider による年切り替え）
• フィルタなし（全 type のイベントを一括表示）
• イベントカード（EventCard）とライブグループ（LiveTourGroup）の2種類のコンポーネントで構成

2-2. URL 設計

2-3. ライブイベントのグループ表示

同一ツアー（title が同じ type=live イベント群）は1グループに折りたたみ表示する。詳細は events-table.md セクション 8-2 を参照。

3. V2 拡張設計（v7.0.0 予定）

3-1. ビュー切り替え

• ビュー切り替えは UI 上部のトグルボタンで操作する
• 年ビュー → 週ビューへは年スライダーの週クリックで遷移する設計を検討する

年ビューの初期表示（パラメータ完全無指定時のみ）（#1323）

/timeline にクエリパラメータを一切付けずにアクセスした場合（TOPページのタイムラインリンクからの遷移を含む）、表示年・スクロール位置を以下の優先順で「今日」に合わせる。年・ビュー等いずれかのパラメータが指定されている場合はこの自動調整を行わない。

1. 今日（JST基準）ちょうどのイベントがあれば、そのイベント（ライブでツアー化されている場合はツアーグループ）へスクロール
2. 今日ちょうどのイベントがなくても、今日がいずれかのライブツアー（同一 title の live イベント群）の開催期間（初日〜最終日）中であれば、そのツアーグループへスクロール
3. いずれもなければ、今日以降で最も近い未来のイベントへスクロール（そのイベントの年が表示年になる）
4. 未来のイベントも該当ツアーもなければ、従来通り最新年をそのまま表示する（自動スクロールなし）

判定ロジックは lib/timeline-utils.ts の findTimelineScrollTarget に実装する。

3-2. メンバーフィルタ

• 現役メンバーと OG メンバーをグループに分けて複数選択可能
• 選択したメンバーに関連するイベント（events.members 配列に含まれる）のみ表示する
• 未選択時は全メンバーのイベントを表示する
• events.members が未登録（空配列）の場合、イベント種別に応じて動的にメンバーを導出してから絞り込む（#1326）。個別登録の手間を省くための空配列であり「対象メンバーなし」ではないため、除外せず補完する
  • live・festival: 開催日時点で在籍していたメンバー全員（joinDate〜gradDate）
  • release（モーニング娘。本体）: 既存の在籍期間ベース自動紐づけ（lib/member-release-linker.ts）
  • release（ユニットによるリリース）: そのユニットの固定メンバー（unit.memberIds）

メンバーステータスの判定

補助情報として member.profile.gradDate が null なら現役、文字列が設定されていれば OG と判断できる。

URL パラメータ

• members=oda-sakura,nonaka-miki（カンマ区切りの member.id）

3-3. 種別フィルタ

選択可能なイベント種別（events.type）：

• type と tags は AND 条件で絞り込む（指定なしは全件対象）
• 複数値はカンマ区切り
• leader は app/timeline/page.tsx が「第X代リーダー就任」イベントとして動的に合成する種別で、TypeFilter で選択可能な独立したチップを持つ（components/EventCard.tsx の leaderRetirementGeneration バッジで卒業表示にも対応）

3-4. アクセントカラー

イベントカードのアクセントカラーは type の単純な固定色ではなく、種別ごとに以下の優先順位で決定する（EventCard.tsx の accentColor 算出ロジック）。

1. join/graduate（加入・卒業）: そのメンバー自身のメンバーカラー（getMemberColor）。メンバーカラーの定義はメンバーカラーバッジ設計書を参照
2. release（リリース）: releaseFormat ごとの色（RELEASE_FORMAT_COLORS）— シングル #f472b6・アルバム #60a5fa・EP #a78bfa・ライブ盤 #34d399・サウンドトラック #fbbf24・企画盤 #fb923c・その他 #94a3b8
3. media（メディア出演）: 番組ごとの色（getRadioShowColor）。番組別の色定義はラジオオンエア収集 設計書を参照
4. 上記に該当しない場合のフォールバック（EVENT_TYPE_COLORS）:

release・media は上記フォールバック表に含まれず、常に1〜3の専用ロジックで色が決まる。

3-5. 比較ビュー（メンバー横並び）

複数メンバーを選択した場合、メンバーごとに列を並べて同じ時間軸で比較できる表示モードを検討する。

• 共演イベント（events.members に選択メンバー全員が含まれる）はハイライト表示する
• 実装詳細は V2 実装フェーズで別途設計する

3-6. 活動期間ビュー（実装済み、#1152・#1158）

歴代メンバー全員の在籍期間を横棒チャート（Gantt 形式）で一覧表示する。年ビュー等のイベント一覧とは異なり、メンバー・フィルタ（members）や種別フィルタ（types・tags）は適用されない（常に全メンバーを表示）。

• 表示順: 加入期（generation）昇順 → 期内は加入日昇順
• 各行の棒グラフ: 加入日〜卒業日（現役メンバーは当日まで）を表す。色はメンバーカラー（未設定時は加入期の色 GENERATION_COLORS）
• リーダー在任期間: 該当メンバーの棒グラフ上部にゴールド色（#ffd700）の帯を重ねて表示する（lib/leader-utils.ts の deriveLeaderPeriods で算出）
• 横軸: 5年刻みの年ラベルをスクロール追従（sticky）のヘッダーに表示
• 各行にマウスオーバーすると メンバー名: 加入年 〜 卒業年（現役は現在の年）/ リーダー在任 X.X年 をツールチップ表示する
• 実装コンポーネント: TimelineActivityChart

3-7. 年表ビュー（初期実装 #1151、月区切り・出演者表示改善 #1324、重複イベント集約 #1393）

選択したメンバー（または加入期）の在籍期間中に発生した全イベントを、年ごとの列に分けて時系列表示する。年ビュー等と異なり、メンバーまたは加入期を1件以上選択するまでは何も表示しない（未選択時は「加入期またはメンバーを選択してください。」と案内するのみ）。

• フィルタ: MemberFilter（メンバー個別選択）と GenerationFilter（加入期単位のショートカット選択、内部的には該当メンバー全員の members パラメータに変換される）の2種類を提供する
• 対象イベント: 選択メンバーが在籍していた期間の join・graduate・release・live・festival・media・topic 全種別（events.members が未登録の場合の動的導出は 3-2 と同一ロジックを使用、#1326）
• 年カラム: イベントの発生年ごとに列を分けて左右に並べる（buildYearColumns）
• 月区切り: 各年カラム内はさらに月ごとにグルーピングし、月見出しと交互の背景濃淡を表示する（月の区切りは年ごとにリセットされる、#1324）
• ツアーのグルーピング: 同一タイトルの live イベント群は公演ごとに分解せず1つのツアーグループとして扱い、最初の公演日の月に配置する。グループ内には各公演の日付（月/日）・会場を列挙する
  • 同日・同タイトルの複数公演（マチネ/ソワレ等）は日付単位で1件の日付チップに集約する（代表の会場を採用、#1393）
• live 以外の重複集約: 同日・同タイトルのイベントが複数登録されている場合は1件に統合し、出演メンバーは合成（重複排除）した上で表示する。年表は1年を俯瞰する要約表示であり、時刻等の詳細は通常のタイムライン画面（カード表示）側の役割とする（#1393）
• マイルストーン表示: join・graduate（・将来的な leader）イベントは背景色付き・左ボーダー付きのチップで強調表示する
• 出演者表示: マイルストーン以外のイベント（release・live・festival・media・topic）には、イベントチップに加えて共演メンバー名を付記する
• 日付表示: 発生日（events.date）を持つ各イベントチップ（マイルストーンチップを含む）には発生日（日）を付記する
• 実装コンポーネント: TimelineChronicle（buildYearColumns・buildMonthGroups がロジックの中核）

4. コンポーネント構成（V2 想定）

TimelinePage（Server Component）
├── ViewToggle（年/週/日/活動期間/年表 切り替え）
├── TimelineNavigation（週/日ビューの日付ピッカー・前後移動）
├── MemberFilter（メンバー選択）
├── GenerationFilter（期選択。年表ビュー等で使用）
├── TypeFilter（種別・タグ選択）
├── YearSlider（年ビュー時のみ）
├── ScrollToTopButton / ScrollToTimelineAnchor
├── TimelineActivityChart（活動期間ビュー、#1152・#1158）
├── TimelineChronicle（年表ビュー、#1151・#1324）
└── EventGrid
    ├── EventCard（単体イベント）
    └── LiveTourGroup（ツアーグループ）

5. 関連ドキュメント

• events-table.md — events テーブル定義・V2 拡張フィールド（tags・festival type）・dateEnd 要否の判断
• screen-design.mdx — 全画面一覧

改訂履歴