---
title: "曲対比機能 画面設計書"
---

最終更新: 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](/design/common/screen-design) の「Topページ（`/`）」セクションを参照。

| 項目 | 内容 |
| --- | --- |
| アンカー文字列 | `対比`（実装時に `対比一覧` から短縮） |
| リンク先 | `/comparisons` |
| スタイル | 他のナビゲーションリンクと同等 |

---

## 6. 曲詳細画面（`/songs/[id]`）変更

### 変更箇所

「収録リリース一覧」セクションの下・「関連メンバー」セクションの上に「対比候補」セクションを追加する。

### 表示条件

`track-comparison-map.json` にこの曲の `trackId` が存在する場合のみ表示する。

### 表示コンテンツ

| 項目 | 内容 |
| --- | --- |
| セクション見出し | `対比候補`（既存セクション見出しと同スタイル） |
| リンク | `"{baseTitle} 対比"`（`/comparisons/[pairId]` へ） |

### データ取得

`track-comparison-map.json`（`TRACK_COMPARISON_MAP_BLOB_URL`）を `getTrackComparisonMapFromBlob()` で取得する。
環境変数未設定・取得失敗時はセクション非表示（フェイルセーフ）。