---
title: "プレイリスト機能 画面設計書"
---

最終更新: 2026-03-21

## 1. 概要

プレイリスト機能（#336）で追加・変更される画面の設計。
新規2画面（プレイリスト一覧・詳細）と、既存2画面（メンバー詳細・リリース詳細）へのセクション追加を定義する。

---

## 2. 画面一覧（プレイリスト関連）

| 画面名 | URL パターン | レンダリング方式 | 対応 Issue |
| --- | --- | --- | --- |
| プレイリスト一覧 | `/playlists` | SSR（動的） | #332 |
| プレイリスト詳細 | `/playlists/[id]` | SSR（動的） | #332 |

> 既存画面への追加セクションは §5 を参照。

---

## 3. プレイリスト一覧画面（`/playlists`）

### 概要

全プレイリストをカード形式で一覧表示する画面。
`playlists.json` のデータを Vercel Blob から取得して表示する。

### 表示コンテンツ

| 要素 | 内容 |
| --- | --- |
| ナビゲーション | 「ホームに戻る」リンク（`/` へ） |
| ページタイトル | 「プレイリスト」 |
| プレイリスト数 | 登録プレイリスト件数（例: `3件`） |
| プレイリストカード一覧 | 公開日降順のカードグリッド |

### プレイリストカードの表示項目

| 項目 | 内容 |
| --- | --- |
| プレイリスト名 | `Playlist.name`（プレイリスト詳細画面へのリンク） |
| 公開日 | `Playlist.publishedAt`（YYYY-MM-DD 形式） |
| 収録曲数 | `entries.length` 件 |
| 説明文 | `Playlist.description`（設定されている場合のみ表示） |

### データなし表示

`playlists` が空配列の場合は「プレイリストデータがまだありません」などのメッセージを表示する。

### ヘッダーナビゲーション

トップ画面（`/`）のヘッダーには「プレイリスト」へのナビリンクを追加済み（#332 で実装）。

---

## 4. プレイリスト詳細画面（`/playlists/[id]`）

### 概要

特定プレイリストの詳細情報と収録楽曲リストを表示する画面。
`[id]` は `Playlist.id`（kebab-case の識別子）。

### 表示コンテンツ

| 要素 | 内容 |
| --- | --- |
| ナビゲーション | 「プレイリスト一覧に戻る」リンク（`/playlists` へ） |
| プレイリスト切り替え | 「← 前のプレイリスト / 次のプレイリスト →」のリンク（`sortPlaylists` の並び順基準） |
| プレイリスト名 | `Playlist.name` |
| 公開日 | `Playlist.publishedAt` |
| 説明文 | `Playlist.description`（設定されている場合のみ表示） |
| 収録楽曲リスト | `entries` の各エントリを順番に表示 |

### 楽曲エントリの表示項目

| 項目 | 内容 | リンク先 |
| --- | --- | --- |
| メンバー名 | `PlaylistEntry.memberId` から引いたメンバー名 | `/members/{memberId}` |
| メンバーの所属ユニット | メンバー名の右に、所属する全ユニット（上位 or 単独、重複排除）を `（ユニットA・ユニットB）` 形式で併記 | `/units/{id}` |
| 楽曲タイトル | `trackId` あり → `Track.title`、なし → `songTitle`。`releaseId` が設定されている場合のみリンクになる（リリースリンクは楽曲タイトル自体に統合されており、別要素はない） | `releaseId` あり → `/releases/{releaseId}`（`trackId` もある場合は `#track-{trackId}` アンカー付き） |
| アーティスト名 | `trackId` をキーに、そのトラックの `Track.unitId` から対応するユニットを解決して表示（`units.json` を `releaseIds` で逆引きするのではない）。一致しない場合は非表示 | `/units/{id}`（各期ユニットの場合は上位ユニットへのリンク） |
| サブスクリンクバッジ | `trackId` が設定されている楽曲の `Track.links[]` の各プラットフォームへのリンクボタン | 各サービスの URL（新しいタブで開く） |
| YouTube Music プレイヤー埋め込み | `Track.links[]` に `youtube-music` タイプのリンクがあり、URLから動画IDを抽出できた場合のみ、サブスクリンクバッジの下に `YouTubePlayer` を埋め込み表示 | — |

### サブスクリンクバッジのデザイン

| プラットフォーム | 表示ラベル |
| --- | --- |
| `youtube` | YouTube |
| `youtube-music` | YouTube Music |
| `tiktok` | TikTok |
| `spotify` | Spotify |
| `apple-music` | Apple Music |
| `line-music` | LINE MUSIC |
| `recochoku` | レコチョク |
| `mora` | mora |
| `genius` | Genius |
| `other` | 外部リンク |

- バッジは各プラットフォーム固有の背景色で表示する（`ExternalLinkBadge`／`LINK_COLOR`）
- リンクは `target="_blank" rel="noopener noreferrer"` で新しいタブで開く
- `trackId` 未設定または `Track.links[]` が空の場合はバッジを表示しない

### リリース詳細へのリンクとアンカー仕様

- `releaseId` が設定されている楽曲タイトルをクリックすると `/releases/{releaseId}` に遷移する
- `trackId` も設定されている場合は `/releases/{releaseId}#track-{trackId}` のアンカーリンクで収録曲一覧の該当行に直接ジャンプする

### `id` が存在しない場合

`Playlist.id` に一致するプレイリストが見つからない場合は `notFound()` を返す。

---

## 5. 既存ページへの追加

### 5.1 メンバー詳細画面（`/members/[id]`）への追加

**追加セクション名**: 「選曲した楽曲」

**配置場所**: 「関連リリース」セクションの後に配置する。

**データソース**: `member-playlist-index.json`（Vercel Blob）をメンバー詳細ページのデータ取得時に並行フェッチする。

**見出し行**: 「選曲した楽曲」見出しの下に「プレイリスト一覧 →」リンク（`/playlists` へ）を配置する。

**並び順トグル**: 「プレイリスト順」「楽曲順」（`songTitle` の五十音順）を切り替えるボタン群。デフォルトは「プレイリスト順」。

**表示項目**:

| 項目 | 内容 | リンク先 |
| --- | --- | --- |
| 楽曲タイトル | `trackId` あり → `Track.title`、なし → `songTitle` | `releaseId` あり → `/releases/{releaseId}`（`trackId` もある場合は `#track-{trackId}` アンカー付き） |
| プレイリスト名 | `Playlist.name` | `/playlists/{playlistId}` |
| サブスクリンクバッジ | `trackId` が設定されている楽曲の `Track.links[]` の各プラットフォームへのリンクボタン | 各サービスの URL（新しいタブで開く） |

**ゼロ件時**: 選曲した楽曲が存在しない場合はセクション自体を非表示にする。

---

### 5.2 曲詳細画面（`/songs/[id]`）へのプレイリスト掲載情報セクション

**データソース**: `track-playlist-index.json`（Vercel Blob）を曲詳細ページのデータ取得時に並行フェッチし、`trackId`（= `Track.id`）をキーにルックアップする。

**配置場所**: 収録リリース一覧の下。

**表示項目**:

| 項目 | 内容 | リンク先 |
| --- | --- | --- |
| プレイリスト名 | `Playlist.name` | `/playlists/{playlistId}` |
| 選曲メンバー | メンバー名（`memberId`・`memberName` の両方がある場合のみ表示） | `/members/{memberId}` |

**ゼロ件時**: 掲載プレイリストが存在しない場合はセクション自体を非表示にする。

> **変更履歴（#400・#402）**: 旧 §5.2「リリース詳細画面へのプレイリスト掲載情報追加」は削除された。`release-playlist-index.json`（`releaseId` キー）も廃止し、`track-playlist-index.json`（`trackId` キー）に統合。

---

## 6. クロスリンク設計図

```mermaid
flowchart LR
  PLAYLISTS["プレイリスト一覧\n/playlists"]
  PLAYLIST["プレイリスト詳細\n/playlists/:id"]
  MEMBER["メンバー詳細\n/members/:id"]
  RELEASE["リリース詳細\n/releases/:id"]
  SONG["曲詳細\n/songs/:id"]
  UNIT["ユニット詳細\n/units/:id"]

  PLAYLISTS -- カードクリック --> PLAYLIST
  PLAYLIST -- 一覧に戻る --> PLAYLISTS
  PLAYLIST -- メンバー名クリック --> MEMBER
  PLAYLIST -- メンバーの所属ユニットクリック --> UNIT
  PLAYLIST -- 楽曲タイトルクリック --> RELEASE
  PLAYLIST -- アーティスト名クリック --> UNIT
  MEMBER -- 選曲した楽曲 > プレイリスト名 --> PLAYLIST
  MEMBER -- 選曲した楽曲 > 楽曲タイトル --> RELEASE
  RELEASE -- 収録曲名クリック --> SONG
  SONG -- プレイリスト掲載情報 > プレイリスト名 --> PLAYLIST
  SONG -- プレイリスト掲載情報 > 選曲メンバー --> MEMBER
```

---

## 7. 後続 Issue との関係

| Issue | 本設計書への依存内容 |
| --- | --- |
| #332 プレイリスト一覧・詳細ページ実装 | §3・§4 の設計に基づいて実装 |
| #333 メンバー詳細画面への選曲楽曲一覧セクション追加 | §5.1 の設計に基づいて実装 |
| #401 曲詳細画面へのプレイリスト掲載情報セクション追加 | §5.2 の設計に基づいて実装 |
| #349 プレイリスト詳細画面への YouTube Music 再生機能追加 | §4 のサブスクリンクバッジ設計を拡張して実装 |

---

## 改訂履歴

| 版 | 更新日 | 変更内容 |
| --- | --- | --- |
| 1.2 | 2026-07-18 | 実装との乖離是正: ナビゲーション文言、アーティスト名解決ロジック（`trackId`起点。`releaseId`逆引きではない）、存在しない「リリースリンク」要素の削除、プレイリスト切り替えナビ・メンバー所属ユニットリンク・YouTube Musicプレイヤー埋め込み・並び順トグルの追記、サブスクバッジに`tiktok`・`genius`を追加（#1366） |
| 1.1 | 2026-04-04 | §4 楽曲エントリにアーティスト名（ユニット詳細リンク）を追加、クロスリンク設計図に PLAYLIST → UNIT 遷移を追加（#561） |
| 1.0 | 2026-03-21 | 初版作成（#329） |