プレイリスト機能 画面設計書

最終更新: 2026-03-21

1. 概要

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

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

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

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

概要

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

表示コンテンツ

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

データなし表示

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

ヘッダーナビゲーション

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

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

概要

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

表示コンテンツ

楽曲エントリの表示項目

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

• バッジは各プラットフォーム固有の背景色で表示する（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 の五十音順）を切り替えるボタン群。デフォルトは「プレイリスト順」。

表示項目:

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

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

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

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

表示項目:

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

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

6. クロスリンク設計図

7. 後続 Issue との関係

改訂履歴