メンバー関係性マップ 画面設計書

最終更新: 2026-07-06 関連 Issue:

• #1197（メンバ関係性マップ）/ #1209（相関図UI）/ #1210（レイアウト操作・永続化）/ #1211（フィルタリング・グルーピング）/ #1212（タイムライン連携）/ #1237（OGメンバー表示拡大）/ #1236（共演エッジのラベル表示）/ #1244（グルーピング中のノード配置変更対応）/ #1254（強調表示ノードのみ操作可能に）/ #1255（フィルタ・イベント選択時のみエッジラベル表示）/ #1264（グルーピング中のエッジ非表示）/ #1265（フィルタ時の共通関係抑制）/ #1263（集計とラベルの関連付け見直し）/ #1266（加入時リーダーによるチルドレン分類）
• #1198（関係性スコアリングマップ）/ #1268（関係性スコアリング設計書作成）/ #1270（既存マップへのスコア反映）/ #1271（レーダーチャート画面の新設）

1. 画面概要

2. 画面構成・レイアウト

┌──────────────────────────────────────────────────────────────────┐
│ ヘッダー（タイトル + ↗レーダーチャートで見る + 配置を保存ボタン）    │
├─────────────────────┬────────────────────────────────────────────┤
│  (通常は非表示。      │ コントロールパネル（MapControlPanel）        │
│  ?event=クエリ時のみ │  [OGを含む] [スコアリングモード]              │
│  表示)               │  [フィルタ] [グルーピング]                   │
│  タイムライン        │  [期][出身地][関係種別][リーダー][加入ルート]│
│  パネル             │   ← モード有効時                             │
│  （MapTimeline      │  [値セレクタ（ドロップダウン）]               │
│   Panel）           │  [クリア]                                   │
│                     ├────────────────────────────────────────────┤
│  ↗ タイムラインで見る│                                            │
│  ─────────────────  │  フローキャンバス（ReactFlow）               │
│  2025-01-01         │  ┌────┐      ┌────┐                        │
│  ライブ ○○公演      │  │カード│──── │カード│                        │
│  ─────────────────  │  └────┘      └────┘                        │
│  2025-03-15 ←選択   │                                            │
│  春ライブ [3人]      │  [Controls]  [MiniMap]  [Background: Dots] │
│  ─────────────────  │                                            │
│  2025-05-10         │                                            │
│  リリース ○○        │                                            │
└─────────────────────┴────────────────────────────────────────────┘

2-1. ヘッダー

• h1「メンバー関係性マップ」
• 「↗ レーダーチャートで見る」リンク（タイトル右隣）: /member-map/radar へ遷移する（詳細は member-map-radar-chart-design.md 参照）
• 「配置を保存」ボタン
  • 無効条件: movedNodeIds.size === 0 または保存中（isSaving）
  • 保存中は「保存中…」に変化
  • 保存エラー時はエラーメッセージをボタン左に表示

2-2. コントロールパネル（MapControlPanel）

components/MapControlPanel.tsx（memo でラップ済み）

軸の種類:

2-3. フローキャンバス

• ライブラリ: @xyflow/react
• ページコンポーネント全体が 'use client'（SSR 非対応、dynamic + ssr: false は不要）
• カスタムノード: memberCard（MemberCardNode）・mapGroup（MapGroupNode）
• カスタムエッジ: gradient（GradientEdge）
• 標準コントロール: <Controls>・<MiniMap>・<Background variant=Dots gap=16 size=1>
• ズーム範囲: minZoom=0.1・maxZoom=2
• 初期フィット: fitView + fitViewOptions={{ padding: 0.2 }}

注意: nodeTypes / edgeTypes はコンポーネント外（モジュールレベル）で定義する。 コンポーネント関数内で定義すると毎レンダーに新しいオブジェクトが生成され、全ノード/エッジが再マウントされてパフォーマンスが劣化する（開発ノート UI/UX #31）。

3. データ初期ロード

ページを開くと、全メンバー・全関係性・保存済みノード座標・全イベントが読み込まれ、マップが表示される。

読み込み後の表示ルール:

1. 「OGを含む」OFF 時は現役メンバーのみ、ON 時は現役＋OG メンバーをノードとして表示する
2. 表示対象メンバー間の関係性をエッジとして表示する。「OGを含む」OFF 時は同期・同郷・師弟・リーダー継承の4種別のみ、ON 時は全種別
3. ノードの表示位置は保存済み座標を優先する。未保存のメンバーは円形に仮配置する（詳細はデータ設計書 §6）
4. 同一メンバーペア間に複数の関係がある場合、エッジが重ならないようにオフセットして表示する

4. 操作モード

4-1. 通常モード（mode = null）

• 全表示対象メンバー（「OGを含む」OFF 時は現役のみ、ON 時は現役＋OG）をノードとして表示
• 関係性をエッジとして表示。「OGを含む」OFF 時は同期・同郷・師弟・リーダー継承の4種別のみ、ON 時は全種別
• ノードのドラッグ移動が可能

4-2. フィルタモード（mode = ‘filter’）

目的: 特定属性に合致するメンバー・エッジを強調表示する。

操作フロー:

1. 「フィルタ」ボタンを押す → 軸ボタン群が表示される
2. 軸を選択 → 値セレクタが表示される
3. 値を選択 → 強調/半透明化が適用される
4. 「クリア」ボタン または 同ボタンを再押下でリセット

表示仕様（値選択後）:

強調表示ノードのみ操作可能（#1254）: フィルタ値選択時は、強調表示されていない（opacity: 0.12 の）ノードのドラッグ・選択を無効化する。抽出対象外のノードを誤って動かしたり選択したりできないようにするため。

軸別フィルタ対象:

値未選択時は全ノード・全エッジを通常表示する。

リーダー軸（leader）の分類ロジック（#1266）: lib/leader-utils.ts の deriveLeaderPeriods が算出するリーダー在任期間（就任日〜卒業日、現職は卒業日なし）と、各メンバーの加入日（profile.joinDate）を突き合わせ、「加入時のリーダー」をそのメンバーの分類先とする（getMemberLeaderId）。新規データ収集は不要で、既存の leaderGenerationNumber・joinDate のみから導出する。

値セレクタの選択肢はリーダー個人を選ぶ場面のため、氏名をそのまま表示する（例:「中澤裕子」）。選択後にグルーピングした際のグループ見出しは「（愛称|氏名）チルドレン」形式（getLeaderChildrenLabel）。愛称は Member の nickname フィールド（Blob の members.json、文字列配列）で管理し、登録があれば配列の先頭（1件目）を、未登録なら氏名を使う（例: 登録あり「ゆうちゃんチルドレン」、未登録「〇〇チルドレン」）。nickname は scripts/patch/patch-member-nicknames.ts（入力: data/inputs/member-nicknames.json）でBlobに反映するため、愛称の追加・変更はデプロイ不要（#1286 でリーダー限定の leaderNickname から汎用化）。

H 全体に共通する関係の抑制（#1265）: 強調表示対象ノード集合 H に対し、関係種別ごとに「H 内の全ペアにその種別のエッジが存在するか（完全グラフか）」を判定する（getCommonRelationshipTypes）。完全グラフとなる種別は H 全体にとって自明・冗長な関係とみなし、強調対象から除外して「非該当」と同じ扱い（opacity: 0.05・ラベル非表示）にする。

• 属性系（same-gen・same-hometown・same-unit）・ペア系（mentor-student 等）を区別せず、完全グラフ判定のみで一律に適用する（軸ごとの特別扱いはしない）
• 例: 期（generation）でフィルタした場合、対象者全員が同期のため same-gen エッジは常に抑制される。関係種別（relationship）軸で「同ユニット」を選択し対象者全員が実際に同ユニットの場合も自動的に抑制される。一方、「師弟関係」を選択して師弟でない組み合わせが混在する場合は完全グラフにならないため表示維持される
• H が2人だけの場合の注意: ペアが1組しかないため、その1組に何らかの関係が存在すれば種別を問わず常に完全グラフと判定され抑制される（開発ノート 実装 #68）

4-3. グルーピングモード（mode = ‘group’）

目的: 属性でメンバーをグループノードで視覚的に包囲表示する。

操作フロー:

1. 「グルーピング」ボタンを押す → 軸ボタン群が表示される
2. 軸を選択:
   • 期 / 出身地 / リーダー → 即座にグルーピング適用
   • 関係種別 → 値セレクタで具体的な種別を選択後に適用
3. 「クリア」または同ボタン再押下でリセット

グループノード（MapGroupNode）仕様:

• type: 'mapGroup'、選択不可（selectable: false）、ドラッグ不可（draggable: false）
• style に width・height・backgroundColor・border・borderRadius: 12 を直接付与
• pointerEvents: 'none'（操作を受け付けない）

ノード配列の順序: グループノードを子ノードより前に配置してから setNodes に渡す（後に配置すると React Flow が警告を出す）。

setNodes([...groupNodes, ...groupedNodes, ...ungroupedNodes])

（開発ノート UI/UX #64）

グルーピングでの配色:

グルーピングモード中のノードドラッグ（#1244）

グループに属する子ノード（parentId 付き）はドラッグ可能（draggable: true）。ドラッグ終了時（onNodeDragStop）に、子ノードの相対座標を絶対座標に変換してから永続化用の状態（baseFlowNodes・baseLayoutMap）を更新する。

absPosition = 親グループノードの絶対座標（position） + 子ノードの相対座標（position）

変換後は通常モードと同じ「配置を保存」フローに合流する。座標更新後はグループの包含矩形（buildGroupedLayout）が自動再計算されるため、グループ枠のリサイズ・再配置に追加実装は不要（開発ノート UI/UX #64）。

いずれのグループにも属さない（ungroupedIds に含まれる）ノードは、グルーピングモード中は引き続き draggable: false・selectable: false（#1254）。抽出対象外のノードを誤って操作できないようにするため。

グルーピングモード中のエッジ非表示（#1264）

グルーピングモード中は、種別を問わず全エッジの opacity を 0 に設定し完全非表示にする。グループ箱による視覚的な整理と線が重複し冗長になるため。ラベルはもともと labelOpacity のデフォルト値 0 により非表示（#1255）だが、エッジ自体（線）はこれとは独立した表示要素であり、グルーピング分岐で明示的に非表示にする必要がある。

5. ノード表示仕様（MemberCardNode）

components/MemberCardNode.tsx

ハンドル方向の選択ロジック（getHandleIds）:

dx = targetX - sourceX
dy = targetY - sourceY

|dx| >= |dy| の場合 → 水平方向
  dx >= 0: source = 'right'、target = 'left'
  dx < 0:  source = 'left'、target = 'right'

|dx| < |dy| の場合 → 垂直方向
  dy >= 0: source = 'bottom'、target = 'top'
  dy < 0:  source = 'top'、target = 'bottom'

6. エッジ表示仕様（GradientEdge）

components/GradientEdge.tsx

共演エッジのラベル内容（#1236・#1263）: live-coappearance（ライブ共演）・radio-coappearance（ラジオ共演）・event-coappearance（イベント共演）は、member_relationships.label に格納された最多共演ライブ名・最多共演番組名・最多共演イベント名をそのまま表示する（scripts/workflow/sync-relationships.ts が同期時に算出）。label が未設定（同期前の旧データ等）の場合は従来通り汎用ラベル（「ライブ共演」「ラジオ共演」「イベント共演」）にフォールバックする。ライブ共演のラベルは Tour.title →（null時）Live.title →（両方 null 時）固定文言「ライブ共演」の順でフォールバックする。イベント共演は type='live'（ライブ種別イベント）を集計対象から除外し、ライブ共演と重複しないようにする。

並列エッジのオフセット（#1272 で修正）:

同一ノードペアに複数エッジが存在する場合、垂直方向に 18px ずつずらして重なりを防ぐ。始点・終点は常に実際のノードのハンドル位置に固定し、曲線の中間の制御点だけをオフセットする（getParallelEdgeControlPoint）。始点・終点自体を平行移動すると、線全体がハンドル位置から外れて「ノードに繋がっていない・宙に浮いた」ように見える不具合になるため、必ず中間点のみをずらすこと。

offset = (parallelIndex - (parallelTotal - 1) / 2) × EDGE_SEPARATION  // EDGE_SEPARATION = 18
control.x = (sourceX + targetX) / 2 + perpX
control.y = (sourceY + targetY) / 2 + perpY
edgePath = `M sourceX,sourceY Q control.x,control.y targetX,targetY`  // offset !== 0 のときのみ

offset === 0（並列エッジがない、またはインデックスが中央）の場合は通常通り getBezierPath を使用する。

7. ドラッグ操作・配置保存フロー

onNodeDragStop の型は (event: MouseEvent | TouchEvent, node: Node) => void（ネイティブ DOM イベント）。 React.MouseEvent を型注釈すると tsc でエラーになるため注意（開発ノート UI/UX #65）。

ドラッグ終了（onNodeDragStop）
  │
  ├─ mode === 'group' → early return（グルーピング中はドラッグ無効）
  │
  ├─ movedNodeIds に node.id を追加（Set）
  ├─ baseFlowNodes の該当ノードの position を更新
  └─ baseLayoutMap の該当 memberId の座標を更新

「配置を保存」ボタンを押下
  │  （有効条件: movedNodeIds.size > 0 かつ isSaving = false）
  │
  ├─ PUT /api/member-map-layout にリクエスト送信
  │   body: { layouts: [{ memberId, x, y }, ...] }
  │
  ├─ 成功 → movedNodeIds をクリア（ボタンが disabled に戻る）
  └─ 失敗 → saveError に「配置の保存に失敗しました。」を表示

8. ローディング・エラー状態

9. タイムラインパネル（MapTimelinePanel）

components/MapTimelinePanel.tsx（'use client'）

9-1. 表示条件・表示仕様

表示条件: 通常アクセス時（?event= クエリなし）はパネル自体（折りたたみタブ含む）が一切レンダリングされない。/member-map?event={eventId} でアクセスした場合のみ isPanelVisible/isPanelOpen が true になり表示される（§9-5参照）。他に手動でパネルを開く導線はない。

• 画面左端に固定幅 260px のパネルとして配置（flexShrink: 0）
• パネル上部に「↗ タイムラインで見る」リンク（/timeline へ遷移）
• イベントリストはスクロール可能

9-2. イベント表示ロジック

• 選択イベントは scrollIntoView で自動スクロール（useEffect + useRef）
• 選択イベントは背景色を強調（.selected）

9-3. イベントアイテム表示内容

各イベントは <button> で表示し、クリックで選択状態を切り替える（同一イベント再クリックで解除）。

9-4. タイムラインハイライト連携

イベントを選択すると、マップ上のノード・エッジをハイライトする。

適用条件: mode === null（フィルタ/グルーピング非アクティブ時のみ）

パネル内のイベントをクリックするとフィルタ/グルーピングモードが解除され（mode → null）、タイムラインハイライトに切り替わる。

表示対象メンバーが1人も含まれない場合はハイライト不適用（全ノード通常表示）。

強調表示ノードのみ操作可能（#1254）: フィルタモードと同様、ハイライト対象外のノードはドラッグ・選択を無効化する。

9-5. URL パラメータ連携

/member-map?event={eventId} でアクセスした際、マウント時に window.location.search を読み取り selectedEventId に初期設定する（useSearchParams は Suspense 境界が必要なため window.location.search で代替）。

タイムライン画面の各イベントカードに「↗ マップ」リンクを追加（EventCard の showMapLink プロップ）。メンバーが1人以上いるイベントのみ表示。

10. スコアリング反映（実装: #1270）

概要

関係性スコアリング（計算式はデータ設計書 §8 参照、lib/member-map-utils.ts の getRelationshipScore）で算出したペアごとの総合スコア（0〜100pt）を、既存の相関図（フローキャンバス）に反映する。 スコアは事前計算してDBに保存せず、画面表示時にその場で計算する（在籍重なりスコアが now に依存し日々変わるため、事前計算だと陳腐化する）。 出身地距離の算出に必要な都道府県コードは API ルート /api/prefecture-codes（prisma.prefectureCode.findMany()）経由で取得する。

エッジ太さ

既存の getEdgeStrokeWidth(weight)（weight を 1〜5px に変換）と同じ変換式を、スコアリングモード時は weight の代わりに総合スコア（totalScore、0〜100pt）に適用する。

strokeWidth = max(1, min(1 + totalScore / 20, 5))

エッジ色

スコアの高低を表現する単色系グラデーション（getScoreColor、lib/member-map-utils.ts）を追加する（既存の source → target メンバーカラーグラデーションとは別軸の表現）。 低スコア=グレー（#4b5563）→高スコア=琥珀（#f97316）の2色をRGB線形補間する。 GradientEdge の sourceColor/targetColor に同じ値（スコア色）を渡すことで、既存の linearGradient 構造を変えずに単色表示に切り替えている。 有向エッジ（mentor-student/leader-succession）の矢印（markerEnd.color）も同じスコア色に揃え、線と矢印で色が食い違わないようにする。

ノード配置

既存の円形仮配置（データ設計書 §6）・保存済み座標を優先するルールを変更しない。スコアの高いペアを自動的に近づけるレイアウトアルゴリズムは導入しない（スコープ外）。

表示切り替え

コントロールパネル（MapControlPanel）に「スコアリングモード」トグルボタンを追加した。 既存の「OGを含む」ボタンと同じ並びの独立トグルで、フィルタ・グルーピングモードとは独立に併用できる。 ON時は現在描画中のエッジに対して太さ・色だけを上書きする（member-map/page.tsx の displayEdges）ため、既存の filter/group モード分岐には手を入れていない。

スコープ外（検討課題）

エッジラベルへのスコア数値（0〜100pt）の併記は行わない。現状は太さ・色のみでスコアの高低を表現する。 数値を併記するかどうかは、視認性（既存のラベル表示条件・フィルタ時のみ表示等）とのバランスを踏まえて別Issueで検討する。

11. フェーズ2以降の拡張予定

• 加入ルート軸（#1267 で設計、#1284 で実装済み）を除き、現時点で確定した拡張予定なし

改訂履歴（バージョン降順に記載）