--- title: "複数の音楽グループ対応 画面設計書" --- 最終更新: 2026-11-09 関連 Issue: morning-status-blume#246（設計書の作成）/ MorningStatusApp#1817（期バッジ・ユニット一覧のグリッドの実装） ## 1. 概要 複数の音楽グループを扱うための画面設計。モーニング娘。の画面から、他の音楽グループのメンバー・楽曲・ユニットへリンクで辿れるようにする。データの前提は [複数の音楽グループ対応 データ設計書](/design/group/group-data-design) に従う。 - 最低線: モーニング娘。の画面に、他の音楽グループの情報へのリンクを置き、リンク先の画面を用意する - 最終形: 全音楽グループを切り替えて参照できる（切り替えの置き場所は §9 の方針のみ） ### 前提 - 他の音楽グループのメンバーは、`generation`・`profile.joinDate`・`profile.gradDate` が登録されている（シードは別途用意する） - 音楽グループはメンバーの本拠地で、ユニットは音楽グループの内または音楽グループをまたいで結成される集団である。リリース・収録曲に紐づくのは広義のユニット（ユニットまたは音楽グループ）である --- ## 2. 画面一覧 | 画面 | URL | 区分 | | --- | --- | --- | | 音楽グループのトップ | `/groups/{groupId}` | 新規（§7） | | ユニット一覧 | `/units` | 変更（§5）。広義のユニットの一覧にする | | ユニット詳細 | `/units/{id}` | 変更（§6-4）。所属メンバーに他の音楽グループのメンバーを含める | | リリース詳細 | `/releases/{id}` | 変更（§8）。「開いた相手」に音楽グループを加える | | 曲詳細・プレイリスト詳細 | `/songs/{id}`・`/playlists/{id}` | 変更（§6-2）。アーティストのリンク先を広義のユニットで決める | | ラジオ放送回・公演・イベントの詳細 | `/radio/episodes/{id}` 等 | 変更（§6-1）。出演メンバーに他の音楽グループのメンバーを含める | --- ## 3. URL階層 実体（メンバー・リリース）は ID で引ける平らな URL とし、音楽グループ単位の画面だけを `/groups/{groupId}` の配下に置く。 | 対象 | URL | | --- | --- | | メンバー詳細 | `/members/{memberId}` | | リリース・曲の詳細 | `/releases/{id}`・`/songs/{id}` | | ユニット詳細 | `/units/{id}` | | 音楽グループのトップ | `/groups/{groupId}` | | 音楽グループ単位の画面（最終形） | `/groups/{groupId}/...` | - モーニング娘。の既存の画面（TOP の `/`・メンバー一覧の `/members` 等）は、ルート直下のままにする。音楽グループの画面（`/groups/{groupId}`）は、モーニング娘。にも用意する - `/units/morning-musume` は、`/groups/morning-musume` へ遷移させる - `groups/` を先頭に付けるのは、既存のトップレベルのルートと、音楽グループの ID（動的セグメント）が衝突しないようにするためである。`app/` 直下には `groups` のルートがなく、衝突はない --- ## 4. 共通の表示 ### 音楽グループ名付きの期バッジ 複数の音楽グループのメンバーが混ざる画面では、メンバーの期バッジを「音楽グループ名＋N期」の1つのバッジにする。 | 例 | | --- | | `アンジュルム12期`・`つばきファクトリー4期`・`ロージークロニクル1期`・`モーニング娘。18期` | - 対象は、ユニット詳細の所属メンバー、共演メンバー（§6-1）、プレイリスト詳細のメンバーである - モーニング娘。のメンバーだけの画面（`/members`・TOP 等）は、`N期` とする - 色は、メンバーカラー、なければ期の色（世代共通カラー）、それもなければ `#94a3b8` の順で決める。メンバー名ピル（タイムラインのイベントカード）と同じ規則である。音楽グループが違っても、同じ N期は同じ期の色になり、音楽グループはバッジの文字で区別する - バッジは共通部品にし、音楽グループ名を渡さない場合は `N期` を表示する。他の画面（§6-1・§6-3・§6-4）が同じ部品を使う --- ## 5. ユニット一覧（`/units`） ユニット一覧を、広義のユニット（音楽グループとユニット）の一覧にする。 - カードの並び: 音楽グループ（`groups.json` の並び順）、続いてユニット（現在の並び） - カードには、種別バッジ（`音楽グループ`・`ユニット`）を付ける - 音楽グループとユニットのカードは、1つのグリッドに並べる。音楽グループの件数が奇数でも、行に空きができず、続くユニットのカードが詰めて並ぶ。グリッドはモバイルファーストとし、モバイル幅は1列、`768px` 以上で複数列にする - クリックしたときの遷移先: | カード | 遷移先 | | --- | --- | | 音楽グループ（モーニング娘。を含む） | `/groups/{groupId}`（モーニング娘。は `/groups/morning-musume`） | | ユニット | `/units/{id}` | - 画面は、データの件数に関係なく描画する。音楽グループのカードは、`groups.json` にモーニング娘。だけが載る状態でも表示する - 他の音楽グループへ遷移する入口は、このカードのほか、楽曲のアーティストのリンク（§6-2）と、共演メンバーのバッジ（§6-1）である --- ## 6. 4パターンの見せ方 ### 6-1. 共演メンバー ラジオ放送回・公演・イベントの出演メンバーに、他の音楽グループのメンバーを含める。 - 表示: メンバー名と、音楽グループ名付きの期バッジ（§4）のチップ。`/members/{id}` へリンクする - 並び順: 音楽グループの並び順（`groups.json`）で並べ、各音楽グループの中は世代昇順・加入日昇順とする ### 6-2. 楽曲のアーティスト ラジオのオンエア曲・プレイリストの曲・曲詳細のアーティストは、`Track.unitId` が指す広義のユニットでリンク先を決める。 | `Track.unitId` の対応先 | リンク先 | | --- | --- | | 音楽グループ（モーニング娘。を含む） | `/groups/{groupId}`（モーニング娘。は `/groups/morning-musume`） | | ユニット | `/units/{id}`（各期ユニットは上位ユニットの `/units/{parentId}`。`parentId` が音楽グループのユニットは `/groups/{parentId}`） | ### 6-3. プレイリスト メンバー名の右に併記する所属ユニットは、ユニットとする。メンバーの音楽グループは、音楽グループ名付きの期バッジ（§4）で示す。 ### 6-4. 音楽グループをまたぐユニット - ユニット詳細の所属メンバーに、他の音楽グループのメンバーを含める。メンバーは、名前と音楽グループ名付きの期バッジ（§4）で表示する - メンバー詳細の「所属ユニット」は、他の音楽グループのメンバーでも同じ形で表示する --- ## 7. 音楽グループのトップ（`/groups/{groupId}`） 音楽グループのトップ画面（モーニング娘。を含む）。最低線では、次のセクションを上から順に置く。 | セクション | 内容 | | --- | --- | | 概要 | 音楽グループ名・活動期間（`activeFrom`〜`activeTo`） | | メンバー | その音楽グループのメンバー一覧。モーニング娘。のメンバー一覧（`/members`）と同じ見せ方。モーニング娘。の画面には `/members` へのリンクも置く | | ユニット | その音楽グループのメンバーを含むユニット。`/units/{id}` へリンクする | | 関連リリース | モーニング娘。以外は `MusicGroup.releaseIds` のリリース。モーニング娘。は「モーニング娘。のリリース」の判定で決めたリリースで、`/releases` へのリンクも置く。リリース詳細へは、モーニング娘。以外は `?group={groupId}` を付けて遷移する | - 戻るリンクは `/units` へ遷移し、文言は「ユニット一覧に戻る」とする - 各セクションは、データが0件でも見出しを描画し、中身に「ありません」のプレースホルダーを置く - メンバー一覧を別の画面（`/groups/{groupId}/members`）に分けるのは、最終形の段階とする --- ## 8. リリース詳細（`/releases/{id}`） 「開いた相手」に、音楽グループ（`kind: group`）を加える。 | 項目 | 内容 | | --- | --- | | クエリ | `?group={MusicGroup.id}` | | 前後ナビの候補 | `MusicGroup.releaseIds` に含まれるリリースのうち、同じフォーマットのリリース（リリース日降順・同日はタイトル昇順） | | 「前の画面に戻る」のフォールバック | `/groups/{groupId}`。モーニング娘。は `/releases` | - `parentId` が音楽グループを指すユニット（モーニング娘。の西暦年を含む名称のユニット等）の戻り先は、`parentId` が音楽グループなら `/groups/{parentId}`、ユニットなら `/units/{parentId}` とする --- ## 9. 音楽グループの切り替えの置き場所（方針） 切り替えの実装は対象外とし、置き場所の方針だけを定める。 - 画面共通のナビゲーションに、音楽グループへの入口を置く - 入口の遷移先は、ユニット一覧（§5）と同じ遷移先の規則に従う。どの音楽グループも `/groups/{groupId}` である - TOP（`/`）は、モーニング娘。の画面とする --- ## 10. 対象外 | 項目 | 内容 | | --- | --- | | 音楽グループの切り替えの実装 | §9 の方針のみ | | 他の音楽グループの SNS の表示・新着 | SNS 収集を始める段階で検討する | | 音楽グループ単位の画面（最終形） | `/groups/{groupId}/members`・タイムライン等 | | 他の音楽グループのシード | 別途用意する | --- ## 11. 関連設計書 | 設計書 | 本書との関係 | | --- | --- | | [複数の音楽グループ対応 データ設計書](/design/group/group-data-design) | 音楽グループ・メンバーファイル・記録の選び方・広義のユニットの定義 | | [ユニット機能 画面設計書](/design/unit/unit-screen-design) | ユニット一覧・ユニット詳細の既存の設計 | | [画面設計書](/design/common/screen-design) | メンバー詳細・リリース詳細・曲詳細の既存の設計 | | [リリース データ設計書](/design/common/release-data-design) | 「開いた相手」と前後ナビの規則 | --- ## 改訂履歴 | 版 | 更新日 | 変更内容 | | --- | --- | --- | | 1.1 | 2026-11-09 | 【実装時に追記（MorningStatusApp#1817）】音楽グループ名付きの期バッジの色の規則と共通部品を追記（§4）。ユニット一覧のグリッドを1つにまとめる規則を追記（§5） | | 1.0 | 2026-11-07 | 【実装時に追記（MorningStatusApp#1809）】初版作成（MorningStatusApp#1803, morning-status-blume#246） |