Jリーグ財務ビューアー改善計画

概要

現在のJリーグ財務データビューアーのレイアウトを改善し、より分析的な可視化を追加する。

現在のレイアウト

┌─────────────────┬─────────────────┐
│   貸借対照表     │   損益計算書     │  ← 比例縮尺
│   (BS)          │   (PL)          │
└─────────────────┴─────────────────┘
┌─────────────────────────────────────┐
│         P/L Waterfall              │  ← 収益→費用→利益のフロー
└─────────────────────────────────────┘

改善後のレイアウト（仕様変更）

レイアウトは維持。P/L Waterfallセクションにタブ切り替えを追加。

┌─────────────────┬─────────────────┐
│   貸借対照表     │   損益計算書     │  ← 比例縮尺（変更なし）
│   (BS)          │   (PL)          │
└─────────────────┴─────────────────┘
┌─────────────────────────────────────┐
│ [P/L Waterfall] [営業利益増減]  ← タブ切り替え
├─────────────────────────────────────┤
│                                     │
│  タブ1: P/L Waterfall              │  ← 現在のまま
│    （収益→費用→利益のフロー）        │
│                                     │
│  タブ2: 営業利益増減ウォーターフォール │  ← NEW
│    （前年比ブリッジチャート）          │
│                                     │
└─────────────────────────────────────┘

理由

• 10年分横並びに比例縮尺PLを並べると、初期の年度が潰れて見づらくなる
• タブ切り替えなら、期間変更の矢印で各年度の営業利益増減を順番に確認可能
• 実装もシンプル（既存レイアウトを崩さない）

実装タスク

Task 1: P/L Waterfallセクションにタブ切り替えを追加

ファイル: JLeaguePLWaterfallSection.vue

• タブUIを追加（P/L Waterfall / 営業利益増減）
• タブ状態の管理（ref/reactive）
• タブ切り替え時のアニメーション（任意）

<template>
  <div class="pl-waterfall-section">
    <!-- タブヘッダー -->
    <div class="tabs">
      <button :class="{ active: activeTab === 'pl' }" @click="activeTab = 'pl'">
        P/L Waterfall
      </button>
      <button :class="{ active: activeTab === 'variance' }" @click="activeTab = 'variance'">
        営業利益増減
      </button>
    </div>

    <!-- タブコンテンツ -->
    <div v-if="activeTab === 'pl'">
      <!-- 既存のP/L Waterfall -->
    </div>
    <div v-else>
      <!-- 営業利益増減ウォーターフォール（新規） -->
    </div>
  </div>
</template>

Task 2: 営業利益増減ウォーターフォールチャート（メイン実装）

新コンポーネント: JLeagueVarianceWaterfallChart.vue

チャート構造

前年営業利益 → [収益増減] → [費用増減] → 当期営業利益

┌──────┐                                           ┌──────┐
│ 前年 │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ 当期 │
│営業利益│ │ス │ │入 │ │配 │ │他 │ │人 │ │販 │ │他 │ │営業利益│
│      │ │ポ │ │場 │ │分 │ │収 │ │件 │ │管 │ │営 │ │      │
│ +100 │ │ン │ │料 │ │金 │ │益 │ │費 │ │費 │ │費 │ │ +150 │
│      │ │サ │ │   │ │   │ │   │ │   │ │   │ │   │ │      │
│      │ ││ │+30│ │-10│ │+20│ │-50│ │-20│ │+80│ │      │
└──────┘ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ └──────┘
  START   収益項目（増加=緑/減少=赤）  費用項目（増加=赤/減少=緑）  END

データ構造

interface VarianceWaterfallData {
  // 起点
  previousOperatingIncome: number  // 前年営業利益

  // 収益増減（増加=プラス、減少=マイナス）
  revenueVariances: {
    sponsor: number      // スポンサー収入増減
    ticket: number       // 入場料収入増減
    distribution: number // 配分金増減
    other: number        // その他収入増減
  }

  // 費用増減（増加=マイナス影響、減少=プラス影響）
  expenseVariances: {
    personnel: number    // 人件費増減（個別表示）
    sga: number          // 販管費増減（個別表示）
    otherOps: number     // その他営業費用増減（試合関連+運営費+その他を合算）
  }

  // 終点
  currentOperatingIncome: number   // 当期営業利益
}

色分けルール

計算ロジック

// composable: useJLeagueVarianceData.ts

function calculateVariance(
  currentYear: JLeagueYearDataRaw,
  previousYear: JLeagueYearDataRaw
): VarianceWaterfallData {
  return {
    previousOperatingIncome: previousYear.営業利益,

    revenueVariances: {
      sponsor: currentYear.スポンサー収入 - previousYear.スポンサー収入,
      ticket: currentYear.入場料収入 - previousYear.入場料収入,
      distribution: currentYear.Jリーグ配分金 - previousYear.Jリーグ配分金,
      other: (currentYear.その他収入 ?? 0) - (previousYear.その他収入 ?? 0)
    },

    expenseVariances: {
      personnel: currentYear.チーム人件費 - previousYear.チーム人件費,
      sga: currentYear.販売費および一般管理費 - previousYear.販売費および一般管理費,
      // 試合関連 + 運営費 + その他を合算
      otherOps: (
        (currentYear.試合関連経費 ?? 0) +
        (currentYear.トップチーム運営経費 ?? 0) +
        calculateOtherExpenses(currentYear)
      ) - (
        (previousYear.試合関連経費 ?? 0) +
        (previousYear.トップチーム運営経費 ?? 0) +
        calculateOtherExpenses(previousYear)
      )
    },

    currentOperatingIncome: currentYear.営業利益
  }
}

Task 3: 初年度対応

• 前年データがない場合（2005年など）はウォーターフォールを非表示
• または「前年データなし」のメッセージを表示

Task 4: UI/UX改善

• チャートのホバーで詳細数値をツールチップ表示
• 増減の絶対値と比率の両方を表示
• 年度切り替え時のアニメーション

技術的考慮事項

既存コンポーネントの再利用

• BaseWaterfallChart.vue を拡張 or 新規作成
• 既存の JLeaguePLWaterfallSection.vue の構造を参考に

データフロー

JLeagueFinancialPage
  ├── useJLeagueData (既存)
  ├── useJLeagueMetrics (既存)
  └── useJLeagueVarianceData (新規) ← 前年比計算
        ↓
  JLeagueVarianceWaterfallChart (新規)

実装順序

1. Step 1: useJLeagueVarianceData composable作成（データ計算ロジック）
2. Step 2: JLeagueVarianceWaterfallChart.vue コンポーネント作成
3. Step 3: JLeaguePLWaterfallSection.vue にタブ切り替えを追加
4. Step 4: 新チャートの統合とテスト
5. Step 5: スタイル調整とレスポンシブ対応
6. Step 6: 増減理由コメント機能の実装（Deep Research連携）

Task 5: 増減理由コメント機能（チーム別リサーチ連携）

概要

ChatGPTのDeep Researchで作成した各チームのドキュメント（例: urawa.md）から、 年度ごとの増減理由をブリッジチャートにコメントとして表示する。

データソース

各チームごとにMarkdownドキュメントを作成（Deep Research活用）:

• content/2025-12-25/urawa.md - 浦和レッズ
• content/2025-12-25/kawasaki.md - 川崎フロンターレ（予定）
• content/2025-12-25/yokohama-fm.md - 横浜F・マリノス（予定）
• ... 他チーム

コメントデータ構造

// types/jleague-comments.ts

interface YearComment {
  year: number
  // 主要な増減理由（短文）
  headline: string
  // 各項目への詳細コメント
  details: {
    revenue?: {
      sponsor?: string     // 例: "協賛過去最高（32億2,600）"
      ticket?: string      // 例: "ACL決勝進出で試合数増"
      distribution?: string // 例: "DAZN開始で分配金増"
      other?: string       // 例: "ACL優勝賞金400万ドル"
    }
    expense?: {
      personnel?: string   // 例: "選手補強で人件費増"
      sga?: string         // 例: "物販関連費増"
      otherOps?: string    // 例: "試合数増で運営費増"
    }
  }
  // 特筆事項（BSや財務状態）
  notes?: string[]
  // 出典URL
  sources?: string[]
}

interface ClubComments {
  clubId: string
  clubName: string
  years: YearComment[]
}

UI表示案（レイアウト検討中）

案1: ツールチップ表示

• ブリッジチャートの各バーにホバーで詳細コメント表示
• シンプルだがモバイルで見づらい

案2: チャート下部にコメント欄

┌─────────────────────────────────────────────┐
│     営業利益増減ウォーターフォール            │
│  [前年] → [増減バー] → [当期]               │
├─────────────────────────────────────────────┤
│ 📝 2023年: ACL優勝賞金＋ホーム増で100億超     │
│    • 入場料 +706: ACL決勝ホーム開催          │
│    • その他 +912: 優勝賞金400万ドル          │
└─────────────────────────────────────────────┘

案3: サイドパネル（詳細モード）

• チャート横に年度詳細パネル
• 広い画面向け

データ取得方法

方法A: JSONファイル管理

public/data/comments/
  ├── urawa.json
  ├── kawasaki.json
  └── ...

方法B: Markdownからパース

• 既存の urawa.md のテーブルをパースして構造化データに変換
• スクリプトで自動変換

方法C: コンテンツファイルに直接埋め込み

• content.config.ts でスキーマ拡張
• Nuxt Contentのクエリで取得

実装タスク

• コメントデータの型定義
• 浦和レッズのデータをJSON化（テスト用）
• コメント表示UIの決定（レイアウト検討）
• useJLeagueComments composable作成
• チャートコンポーネントへの統合
• 他チームのドキュメント作成（Deep Research）

サンプル: 浦和レッズ 2023年のコメント

{
  "year": 2023,
  "headline": "ACL優勝賞金＋ホーム増で100億超達成",
  "details": {
    "revenue": {
      "ticket": "ACL決勝ホーム開催で+706",
      "distribution": "ACL2022優勝賞金400万ドル認識",
      "other": "グッズ+464、その他+912"
    }
  },
  "notes": ["純資産1,610（コロナ前水準へ回復）"],
  "sources": ["https://www.urawa-reds.co.jp/clubinfo/..."]
}

参考

• 現在のP/L Waterfall: JLeaguePLWaterfallSection.vue
• 比例縮尺BS/PL: ProportionalFinancialStatementsAnimated.vue
• ウォーターフォールベース: BaseWaterfallChart.vue