ユニット機能画面設計書

最終更新: 2026-07-18 関連 Issue: #533（初版作成）/ #539（選曲メンバー→ユニットリンク仕様）/ #554（曲詳細アーティストセクション仕様）/ #555（上位ユニット対応追加）/ #558（所属メンバー数のユニーク化修正）/ #561（§5.4.1詳細仕様追加）/ #567 / #568（§5.2配置修正）/ #569（§5.3アーティスト配置変更）/ #585（trackId直引きへの変更）/ #1366（実装との乖離是正）

1. 概要

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

データ設計については unit-data-design.md を参照。

2. 画面一覧（ユニット関連）

画面名	URL パターン	レンダリング方式	対応 Issue
ユニット一覧	`/units`	SSR（動的）	#535
ユニット詳細	`/units/[id]`	SSR（動的）	#536

既存画面への追加セクションは §5 を参照。 parentId を持つ各期ユニットは URL を持たない（詳細ページなし）。

3. ユニット一覧画面（`/units`）

概要

全ユニットをカード形式で一覧表示する画面。 units.json のデータを Vercel Blob から取得して表示する。

表示コンテンツ

要素	内容
ナビゲーション	「ホームに戻る」リンク（`/` へ）
ページタイトル	「ユニット」
ユニット数	一覧表示ユニット件数（例: `15件`）。各期ユニット（`parentId` あり）は件数に含めない
ユニットカード一覧	後述のルールに従って表示

表示対象と並び順

parentId を持つ各期ユニットは一覧に表示しない。表示対象は以下の2種のみ:

種別	条件	並び順
上位ユニット	`parentId` なし・かつ子ユニット（`parentId` が自身の `id` を指すエントリ）が存在する	`activeFrom` 降順（新しい順）
単独ユニット	`parentId` なし・かつ子ユニットが存在しない	`activeFrom` 降順（新しい順）

ユニットカードの表示項目

項目	内容
ユニット名	`Unit.name`（ユニット詳細画面へのリンク）
活動期間	`activeFrom` ～ `activeTo`。`activeTo` 未設定の場合は「現在」と表示
所属メンバー数	上位ユニットの場合は全期の `memberIds` を合算してユニーク化した件数。単独ユニットは `memberIds.length` 件

データなし表示

units が空配列の場合は「ユニットデータがまだありません」などのメッセージを表示する。

ヘッダーナビゲーション

トップ画面（/）のヘッダーには「ユニット」へのナビリンクを追加する（#535 で実装）。

4. ユニット詳細画面（`/units/[id]`）

概要

特定ユニットの詳細情報・所属メンバー一覧・関連リリース一覧を表示する画面。 [id] は Unit.id（kebab-case の識別子）。parentId を持つ各期ユニットは詳細ページを持たない。

アクセス制御

条件	挙動
`[id]` に一致するユニットが存在しない	`notFound()` を返す
一致したユニットが `parentId` を持つ（各期ユニット）	`notFound()` を返す

表示コンテンツ

要素	内容
ナビゲーション	「ユニット一覧に戻る」リンク（`/units` へ）
ユニット名	`Unit.name`
活動期間	`activeFrom` ～ `activeTo`。`activeTo` 未設定の場合は「現在」と表示（`activeFrom` は必須項目のため常に表示される）
各期セクション	上位ユニット（子を持つ）のみ表示。後述
所属メンバーセクション	単独ユニットのみ表示。後述
関連リリースセクション	`releaseIds` から引いたリリース一覧（後述）

各期セクション（上位ユニットのみ）

上位ユニット（parentId なし・かつ子ユニットが存在する）の場合に表示する。

データソース: units.json から parentId が当該ユニットの id と一致するエントリを全件取得する。

表示形式: 各期ユニットを activeFrom 昇順（古い順）でセクション分けして表示する。

各期セクションの内容:

要素	内容
セクション見出し	`Unit.name`（各期ユニット名。例: 「タンポポ（第1期）」）
活動期間	`activeFrom` ～ `activeTo`。`activeTo` 未設定の場合は「現在」と表示
メンバー一覧	原則 `memberIds` から引いたメンバーバッジ（後述の所属メンバーセクションと同形式）。ただし対象ユニットが `morning-musume`（モーニング娘。本体）かつ当該期の `memberIds` が空の場合のみ、`activeFrom`〜`activeTo`（未設定時は当年12/31）の期間に在籍していたメンバーを `getMembersActiveBetween` で動的に算出して表示する

所属メンバーセクション

表示対象: 単独ユニット（parentId なし・かつ子ユニットが存在しない）のみ。上位ユニットは各期セクション内で期ごとに表示するため、このセクションは表示しない。

データソース: members.json（Vercel Blob）から memberIds に一致するメンバーを取得する。

表示項目（バッジ形式）:

項目	内容	リンク先
メンバー名	`Member.name`（漢字氏名）	`/members/{id}`
世代バッジ	`{generation}期`	—

読み（ルビ）・ステータスバッジ（現役/OG）はこのバッジには表示しない。

ソート順: 実装なし（members.json の登録順のまま表示される）。

ゼロ件時: memberIds が空の場合はセクション自体を表示しない（上位ユニットの各期セクションでは、morning-musume 以外かつ memberIds が空の場合に「所属メンバーデータがありません」を表示）。

項目	内容	リンク先
フォーマットバッジ	`FORMAT_LABEL[format]` のラベル	—
リリースタイトル	`Release.title`	`/releases/{id}`
リリース日	`Release.releaseDate`（YYYY-MM-DD 形式。不明の場合は「発売日不明」）	—

5. 既存ページへの追加

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

追加セクション名: 「所属ユニット」

配置場所: 「選曲した楽曲」セクションの後・「ご当地ライブ」セクションの前に配置する。

データソース: units.json（Vercel Blob）から memberIds に当該メンバーの ID を含むユニットを抽出する。parentId を持つ各期ユニットが該当する場合、上位ユニット（parentId の指す先）へのリンクを表示する。

表示項目:

項目	内容	リンク先
ユニット名	上位ユニットが存在する場合は `上位ユニット名（各期ユニット名）`の形式で表示。単独ユニットは `Unit.name` のみ	`/units/{上位ユニット or 単独ユニットの id}`
活動期間	各期ユニットの `activeFrom` ～ `activeTo`。`activeTo` 未設定の場合は「現在」と表示	—

ゼロ件時: 所属ユニットが存在しない場合はセクション自体を非表示にする。

5.2 リリース詳細画面（`/releases/[id]`）への追加

追加セクション名: 「収録ユニット」

配置場所: 「収録曲一覧」セクションの後・「メンバー」セクションの前に配置する。

データソース: units.json（Vercel Blob）から releaseIds に当該リリースの ID を含むユニットを抽出する。

表示項目:

項目	内容	リンク先
ユニット名	`Unit.name`	`/units/{id}`（`parentId` を持つ場合は上位ユニットへのリンク）
活動期間	`activeFrom` ～ `activeTo`。`activeTo` 未設定の場合は「現在」と表示	—

ゼロ件時: 該当ユニットが存在しない場合はセクション自体を非表示にする。

5.3 曲詳細画面（`/songs/[id]`）への追加

追加セクション名: 「アーティスト」

配置場所: 再生時間の右に並べて表示する（YouTube MV インライン表示の上）。

データソース: Track.unitId（releases.json 内でトラックに直接紐づくユニットID）から units.json のユニットを取得する（releaseIds を逆引きする方式ではない）。

一致したユニットが各期ユニット（parentId あり）の場合、ユニット名はそのまま使い、上位ユニットへのリンクを表示する
一致したユニットが上位ユニット（子ユニットを持つ）かつ2014年以前の morning-musume 以外の場合、リリース年と各期ユニットの活動期間を照合し（shouldResolveSubUnitByPeriod・findActiveSubUnit）、該当する期のサブユニット名に解決して表示する
- 候補となる子ユニットが releaseIds を持つ場合（特定楽曲のみに紐づく企画ユニット。例: バカ殿様とミニモニ姫。）は、対象リリースがその releaseIds に含まれる場合のみ候補にする。releaseIds を持たない子ユニット（活動期間で親を隙間なく分割する各期ユニット。例: ミニモニ。（第1期））は従来通り期間のみで判定する（#1426）

表示項目:

項目	内容	リンク先
アーティスト名	解決後のユニット名（サブユニット名 or 上位ユニット名 or 単独ユニット名）	`/units/{上位ユニット or 単独ユニットの id}`

ゼロ件時: 一致するユニットが存在しない場合はセクション自体を非表示にする（アーティストなし曲やモーニング娘。本体リリースはユニット紐づけなしで問題ない）。

実装 Issue: #538

5.4 プレイリスト詳細画面（`/playlists/[id]`）への追加

プレイリスト詳細には以下の2種のユニット関連リンクを追加する。

5.4.1 楽曲アーティスト → ユニット詳細リンク（#561・#539 で実装）

追加対象: 楽曲エントリの各行

データソース: PlaylistEntry.trackId をキーに releases.json のトラックを直引きし、Track.unitId から units.json のユニットを取得する。コンピレーションアルバム等でトラック単位のユニット判定が必要なため、releaseId による逆引きではなく trackId → Track.unitId の直引きを採用する（#585 で変更）。

表示項目:

項目	内容	リンク先
アーティスト名	`Unit.name`（各期ユニットの場合は上位ユニット名）	`/units/{上位ユニット or 単独ユニットの id}`

ゼロ件時: 一致するユニットが存在しない場合はアーティスト名自体を非表示にする。

詳細: playlist-screen-design.mdx §4 を参照。

5.4.2 選曲メンバー → 所属ユニットリンク（#539 で設計・実装）

追加方針: 楽曲エントリのメンバー名の直後に、選曲メンバーが所属するユニットへの遷移リンクを追加する。

データソース: units.json（Vercel Blob）から memberIds に当該メンバーの ID を含むユニットを抽出する。parentId を持つ各期ユニットが該当する場合は上位ユニットへのリンクを表示する。同一上位ユニットは重複して表示しない。

表示項目:

項目	内容	リンク先
ユニット名	`Unit.name`（各期ユニットの場合は上位ユニット名）	`/units/{上位ユニット or 単独ユニットの id}`

配置場所: メンバー名リンクの直後、同一行内。1件目は （ユニット名 形式、複数件は ・ユニット名 で連結し末尾に ） を付与する。

ゼロ件時: 所属ユニットが存在しない場合はリンクを表示しない（メンバー名のみ表示）。

6. クロスリンク設計図

7. 後続 Issue との関係

Issue	本設計書への依存内容
#534 ユニット機能の Figma 詳細設計	本設計書の §3・§4・§5 を Figma でビジュアル化
#535 ユニット一覧ページ実装	§3 の設計に基づいて実装
#536 ユニット詳細ページ実装	§4 の設計に基づいて実装
#537 メンバー詳細への所属ユニットセクション追加	§5.1 の設計に基づいて実装
#538 リリース詳細・曲詳細にユニット情報追加	§5.2・§5.3 の設計に基づいて実装
#539 プレイリストとユニット詳細の画面遷移追加	§5.4.1・§5.4.2 の設計に基づいて実装
#555 上位ユニットを追加する	§3・§4 の上位ユニット対応設計に基づいて実装

改訂履歴

版	更新日	変更内容
1.7	2026-07-18	実装との乖離是正: ナビゲーション文言、モーニング娘。本体の各期メンバー動的算出ロジック（`getMembersActiveBetween`）、所属メンバーソート未実装の明記、親ユニット関連リリースへの子ユニット集約、メンバー詳細内セクション順序、§5.3曲詳細のユニット紐付けロジック（`Track.unitId`直引き）を実装に合わせて修正（#1366）
1.6	2026-04-06	§5.4.1 データソースを releaseId 逆引きから trackId → Track.unitId 直引きに変更（#585）
1.5	2026-04-05	§5.4.2 選曲メンバー→所属ユニットリンクの詳細仕様を記述（#539）
1.4	2026-04-04	§5.2 配置場所の説明を「収録曲一覧と関連メンバーの間」に修正（プレイリスト掲載情報削除反映）（#568）。§5.3 アーティストの配置を「再生時間の右に並べて表示」に変更（#569）
1.3	2026-04-04	§5.3 曲詳細アーティストセクションの詳細仕様を記述（#554）。§5.4 を §5.4.1（楽曲アーティスト→ユニット）・§5.4.2（選曲メンバー→ユニット）に分割し §5.4.1 の詳細仕様を追加（#561）
1.2	2026-04-03	§3 所属メンバー数をユニーク化件数に修正（#558）
1.1	2026-04-03	§3・§4 に上位ユニット対応を追加、§5.3 曲詳細追加、§5.3 プレイリストを §5.4 に繰り下げ（#555・#554）
1.0	2026-03-30	初版作成（#533）

ユニット機能 画面設計書

ユニット機能画面設計書