複数の音楽グループ対応 画面設計書

最終更新: 2026-11-09 関連 Issue: morning-status-blume#246（設計書の作成）/ MorningStatusApp#1817（期バッジ・ユニット一覧のグリッドの実装）

1. 概要

複数の音楽グループを扱うための画面設計。モーニング娘。の画面から、他の音楽グループのメンバー・楽曲・ユニットへリンクで辿れるようにする。データの前提は 複数の音楽グループ対応 データ設計書 に従う。

• 最低線: モーニング娘。の画面に、他の音楽グループの情報へのリンクを置き、リンク先の画面を用意する
• 最終形: 全音楽グループを切り替えて参照できる（切り替えの置き場所は §9 の方針のみ）

前提

• 他の音楽グループのメンバーは、generation・profile.joinDate・profile.gradDate が登録されている（シードは別途用意する）
• 音楽グループはメンバーの本拠地で、ユニットは音楽グループの内または音楽グループをまたいで結成される集団である。リリース・収録曲に紐づくのは広義のユニット（ユニットまたは音楽グループ）である

2. 画面一覧

3. URL階層

実体（メンバー・リリース）は ID で引ける平らな URL とし、音楽グループ単位の画面だけを /groups/{groupId} の配下に置く。

• モーニング娘。の既存の画面（TOP の /・メンバー一覧の /members 等）は、ルート直下のままにする。音楽グループの画面（/groups/{groupId}）は、モーニング娘。にも用意する
• /units/morning-musume は、/groups/morning-musume へ遷移させる
• groups/ を先頭に付けるのは、既存のトップレベルのルートと、音楽グループの ID（動的セグメント）が衝突しないようにするためである。app/ 直下には groups のルートがなく、衝突はない

4. 共通の表示

音楽グループ名付きの期バッジ

複数の音楽グループのメンバーが混ざる画面では、メンバーの期バッジを「音楽グループ名＋N期」の1つのバッジにする。

• 対象は、ユニット詳細の所属メンバー、共演メンバー（§6-1）、プレイリスト詳細のメンバーである
• モーニング娘。のメンバーだけの画面（/members・TOP 等）は、N期 とする
• 色は、メンバーカラー、なければ期の色（世代共通カラー）、それもなければ #94a3b8 の順で決める。メンバー名ピル（タイムラインのイベントカード）と同じ規則である。音楽グループが違っても、同じ N期は同じ期の色になり、音楽グループはバッジの文字で区別する
• バッジは共通部品にし、音楽グループ名を渡さない場合は N期 を表示する。他の画面（§6-1・§6-3・§6-4）が同じ部品を使う

5. ユニット一覧（/units）

ユニット一覧を、広義のユニット（音楽グループとユニット）の一覧にする。

• カードの並び: 音楽グループ（groups.json の並び順）、続いてユニット（現在の並び）
• カードには、種別バッジ（音楽グループ・ユニット）を付ける
• 音楽グループとユニットのカードは、1つのグリッドに並べる。音楽グループの件数が奇数でも、行に空きができず、続くユニットのカードが詰めて並ぶ。グリッドはモバイルファーストとし、モバイル幅は1列、768px 以上で複数列にする
• クリックしたときの遷移先:

• 画面は、データの件数に関係なく描画する。音楽グループのカードは、groups.json にモーニング娘。だけが載る状態でも表示する
• 他の音楽グループへ遷移する入口は、このカードのほか、楽曲のアーティストのリンク（§6-2）と、共演メンバーのバッジ（§6-1）である

6. 4パターンの見せ方

6-1. 共演メンバー

ラジオ放送回・公演・イベントの出演メンバーに、他の音楽グループのメンバーを含める。

• 表示: メンバー名と、音楽グループ名付きの期バッジ（§4）のチップ。/members/{id} へリンクする
• 並び順: 音楽グループの並び順（groups.json）で並べ、各音楽グループの中は世代昇順・加入日昇順とする

6-2. 楽曲のアーティスト

ラジオのオンエア曲・プレイリストの曲・曲詳細のアーティストは、Track.unitId が指す広義のユニットでリンク先を決める。

6-3. プレイリスト

メンバー名の右に併記する所属ユニットは、ユニットとする。メンバーの音楽グループは、音楽グループ名付きの期バッジ（§4）で示す。

6-4. 音楽グループをまたぐユニット

• ユニット詳細の所属メンバーに、他の音楽グループのメンバーを含める。メンバーは、名前と音楽グループ名付きの期バッジ（§4）で表示する
• メンバー詳細の「所属ユニット」は、他の音楽グループのメンバーでも同じ形で表示する

7. 音楽グループのトップ（/groups/{groupId}）

音楽グループのトップ画面（モーニング娘。を含む）。最低線では、次のセクションを上から順に置く。

• 戻るリンクは /units へ遷移し、文言は「ユニット一覧に戻る」とする
• 各セクションは、データが0件でも見出しを描画し、中身に「ありません」のプレースホルダーを置く
• メンバー一覧を別の画面（/groups/{groupId}/members）に分けるのは、最終形の段階とする

8. リリース詳細（/releases/{id}）

「開いた相手」に、音楽グループ（kind: group）を加える。

• parentId が音楽グループを指すユニット（モーニング娘。の西暦年を含む名称のユニット等）の戻り先は、parentId が音楽グループなら /groups/{parentId}、ユニットなら /units/{parentId} とする

9. 音楽グループの切り替えの置き場所（方針）

切り替えの実装は対象外とし、置き場所の方針だけを定める。

• 画面共通のナビゲーションに、音楽グループへの入口を置く
• 入口の遷移先は、ユニット一覧（§5）と同じ遷移先の規則に従う。どの音楽グループも /groups/{groupId} である
• TOP（/）は、モーニング娘。の画面とする

10. 対象外

11. 関連設計書

改訂履歴