---
title: "タイムライン画面設計書"
---

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

---

## 1. 画面概要

| 項目 | 内容 |
|---|---|
| URL | `/timeline` |
| レンダリング方式 | SSR（動的） |
| 追加バージョン | v5.0.0（V1）/ v7.0.0（V2拡張予定） |

---

## 2. V1 現状（実装済み）

### 2-1. 表示内容

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

### 2-2. URL 設計

| パラメータ | 説明 |
|---|---|
| `year` | 表示年（例: `/timeline?year=2024`）。未指定時は最新年 |

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

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

---

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

### 3-1. ビュー切り替え

| ビュー | URL パラメータ | 説明 |
|---|---|---|
| 年ビュー（デフォルト） | `view=year`（省略可） | 年間イベントを時系列で一覧表示（V1 相当） |
| 週ビュー | `view=week&year=2024&week=32` | 指定週のイベントを表示 |
| 日ビュー | `view=day&date=2024-08-10` | 指定日のイベントを表示 |
| 活動期間ビュー | `view=activity` | 歴代メンバーの在籍期間・リーダー在任期間を横棒チャートで一覧表示（3-6 参照） |
| 年表ビュー | `view=chronicle&members=oda-sakura` | 選択したメンバー（加入期指定含む）の在籍期間中の全イベントを年ごとに一覧表示（3-7 参照） |

- ビュー切り替えは 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`）

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

| 判定 | フィールド | 値 |
|---|---|---|
| 現役（Active） | `member.status` | `"Active"` |
| OG | `member.status` | `"OG"` |

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

#### URL パラメータ

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

### 3-3. 種別フィルタ

| フィルタ軸 | パラメータ例 | 対応フィールド |
|---|---|---|
| イベント種別 | `types=release,live,festival` | `events.type` |
| タグ | `tags=Birthday,Solo` | `events.tags` |

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

| 値 | 表示ラベル |
|---|---|
| `release` | リリース |
| `live` | ライブ |
| `festival` | フェス |
| `media` | メディア出演 |
| `join` | 加入 |
| `graduate` | 卒業 |
| `topic` | トピック |
| `leader` | リーダー交代 |

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

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

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

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

| type | カラーコード |
|---|---|
| `live` | `#a78bfa`（パープル系） |
| `festival` | `#fb923c`（オレンジ系） |
| `topic` | `#94a3b8`（グレー系） |
| `join` | `#4ade80`（グリーン系。メンバーカラー未設定時のフォールバック） |
| `graduate` | `#f87171`（レッド系。メンバーカラー未設定時のフォールバック） |
| `leader` | `#ffd700`（ゴールド系） |

`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` — 全画面一覧

---

## 改訂履歴

| 版 | 更新日 | 変更内容 |
| --- | --- | --- |
| 1.7 | 2026-07-27 | 年表ビューの重複イベント集約仕様（同日・同タイトルのツアー公演/イベントを1件に集約）を追加（#1393） |
| 1.6 | 2026-07-18 | §3-4のアクセントカラーの説明に、メンバーカラーの定義元（メンバーカラーバッジ設計書）・番組別の色定義元（ラジオオンエア収集 設計書）へのリンクを追加（PR #1371レビュー指摘） |
| 1.5 | 2026-07-18 | 実装との乖離是正: `leader`イベント種別の記載漏れを解消、アクセントカラーロジックをメンバーカラー/リリースフォーマット別の実装に合わせて修正、コンポーネント構成図に`TimelineActivityChart`等の未反映コンポーネントを追加（#1366） |
| 1.4 | 2026-07-17 | 活動期間ビュー（#1152・#1158）・年表ビュー（#1151・#1324）の記載漏れを解消し、ビュー一覧表・仕様セクション（3-6・3-7）を追加（#1345） |
| 1.3 | 2026-07-14 | 年ビューの初期表示（パラメータ無指定時に今日の日付へ自動スクロール）仕様を追加（#1323） |
| 1.2 | 2026-07-12 | `events.members` 未登録時のメンバー動的導出仕様を追加し、`festival` 除外の記述を削除（#1326） |
| 1.1 | 2026-06-14 | V2 実装完了：ビュー切り替え・メンバーフィルタ・種別フィルタ・EventCard タグチップ・型別色分け（#1111） |
| 1.0 | 2026-06-13 | 初版作成（V1 現状整理 + V2 拡張設計）（#1108） |