曲対比機能 画面設計書
最終更新: 2026-03-29
1. 概要
曲対比機能（#474）で追加・変更される画面の設計。 新規 2 画面（対比一覧・対比詳細）と、既存 2 画面（トップ・曲詳細）へのセクション追加を定義する。
2. 画面一覧
| 画面名 | URL パターン | レンダリング方式 | 対応 Issue |
|---|---|---|---|
| 対比一覧 | /comparisons |
SSR（動的） | #474 |
| 対比詳細 | /comparisons/[id] |
SSR（動的） | #474 |
既存画面への追加は §5・§6 を参照。
3. 対比一覧画面（/comparisons）
概要
全対比ペアをカード形式で一覧表示する画面。
comparison-index.json を Vercel Blob から取得して表示する。
表示コンテンツ
| 要素 | 内容 |
|---|---|
| ナビゲーション | 「メンバー一覧に戻る」リンク（/ へ） |
| ページタイトル | 「対比一覧」 |
| ペア数 | 登録ペア件数（例: 12組） |
| ペアカード一覧 | comparison-index.json に格納された順のカード一覧（明示的なソート処理はなく、生成スクリプト側の並び順に依存） |
リスト表示項目
| 項目 | 内容 |
|---|---|
| ベースタイトル | ComparisonPair.baseTitle（対比詳細画面へのリンク） |
| 曲数 | tracks.length 曲 |
※ v1.3.0 改善（#494）: カード形式からシンプルなリスト形式に変更。収録曲の箇条書きは廃止。
データなし表示
pairs が空配列の場合は「対比データがまだありません。」を表示する。
4. 対比詳細画面（/comparisons/[id]）
概要
1 組の対比ペアに含まれる曲を並べて表示する画面。 ペアの各曲の YouTube 動画を横並びに表示し、オリジナルとリメイクを視覚的に比較できる。
表示コンテンツ
| 要素 | 内容 |
|---|---|
| ナビゲーション | 「前の画面に戻る」リンク（BackLink コンポーネント。フォールバック: /comparisons） |
| ページタイトル | "{baseTitle} 対比" |
| 曲カードグリッド | 各曲を並列表示するグリッド（§4.1 参照） |
4.1 曲カード（1 曲分）
| 項目 | 内容 |
|---|---|
| 曲タイトル | ComparisonTrack.title |
| YouTube 動画 | YouTubePlayer コンポーネント（youtubeVideoId がある場合） |
| 動画なし表示 | youtubeVideoId が null の場合は「動画なし」プレースホルダー |
| 代表リリース | releaseTitle（releaseId リンク付き、/releases/[id] へ） |
| 曲詳細リンク | trackId リンク（/songs/[id] へ） |
4.2 グループ表示（#494 改善）
シングル（releaseFormat === "single"）とその他を区別して表示する。
| 条件 | 表示 |
|---|---|
| シングルとその他が両方存在する | 「シングル」セクションと「その他」セクションに分けて表示 |
| どちらか一方のみ | セクション見出しなしでグリッド表示 |
4.3 グリッドレイアウト
| 状況 | レイアウト |
|---|---|
| デスクトップ（2 曲） | 2 列横並び |
| デスクトップ（3 曲以上） | repeat(auto-fill, minmax(360px, 1fr)) でラップ |
| モバイル | 1 列縦積み |
404 ハンドリング
指定 id に対応するペアが comparison-index.json に存在しない場合は notFound() を呼ぶ。
5. トップページ（/）変更
変更箇所
Topページ（app/page.tsx）のナビゲーションリンク群に「対比」リンクを追加する。
Topページのナビゲーションはその後の機能追加で大幅に増えており（メンバー・ユニット・関係性マップ・リリース・プレイリスト・ライブ・フェス・ラジオ・対比、デスクトップモード時は楽曲リンク修正・同期状況も追加）、詳細は screen-design.mdx の「Topページ（
/）」セクションを参照。
| 項目 | 内容 |
|---|---|
| アンカー文字列 | 対比（実装時に 対比一覧 から短縮） |
| リンク先 | /comparisons |
| スタイル | 他のナビゲーションリンクと同等 |
6. 曲詳細画面（/songs/[id]）変更
変更箇所
「収録リリース一覧」セクションの下・「関連メンバー」セクションの上に「対比候補」セクションを追加する。
表示条件
track-comparison-map.json にこの曲の trackId が存在する場合のみ表示する。
表示コンテンツ
| 項目 | 内容 |
|---|---|
| セクション見出し | 対比候補（既存セクション見出しと同スタイル） |
| リンク | "{baseTitle} 対比"（/comparisons/[pairId] へ） |
データ取得
track-comparison-map.json（TRACK_COMPARISON_MAP_BLOB_URL）を getTrackComparisonMapFromBlob() で取得する。
環境変数未設定・取得失敗時はセクション非表示（フェイルセーフ）。