概要

Jリーグ財務データビューアーの改善要件をまとめたドキュメント。

対象ファイル・コンポーネント一覧

ページ（エントリーポイント）

コンポーネント

Composables（データ処理）

型定義

データファイル

ベースチャートコンポーネント（参考）

既存の参考実装

開発サーバー

cd apps/web
pnpm dev  # http://localhost:3000

アクセスURL: http://localhost:3000/financial-quiz/jleague

デフォルト表示クラブ（FEATURED_CLUBS）

apps/web/app/types/jleague.ts で定義:

export const FEATURED_CLUBS: FeaturedClub[] = [
  { id: 'kawasaki-frontale', name: '川崎フロンターレ', shortName: '川崎F' },
  { id: 'urawa-reds', name: '浦和レッズ', shortName: '浦和' },
  { id: 'kashima-antlers', name: '鹿島アントラーズ', shortName: '鹿島' },
  // ... 他クラブ
]

修正要件

1. デフォルト表示の変更

• デフォルトクラブ: 川崎フロンターレ
• デフォルト年度: 2019年

2. 貸借対照表（BS）の修正

BS項目が少ない（流動/固定の区分のみ）現状のJリーグ開示資料では、表示を簡素化する。

資産の部（借方・左側）

負債・純資産の部（貸方・右側）

勘定科目の幅調整

• 流動資産・固定資産・流動負債・固定負債は4文字以内なので、幅を小さくする

3. 構成比率（100分比）の追加

• BS・PLの金額の横にパーセンテージ（構成比率）を表示
• 横に配置が望ましい（スペースが確保できれば）

4. チャートの再構成

現状の4チャート構成を見直し、以下の4チャートに変更する。

チャート1: 営業収入・営業利益の推移（複合チャート）

• バーチャート（左軸）: 営業収入、営業利益
• 折れ線グラフ（右軸）: 営業利益率（%）
• 10年間の推移を表示

チャート2: 収益内訳の積み上げチャート

• 積み上げバーチャートで以下の4項目を表示:
  1. スポンサー収入
  2. 入場料収入
  3. Jリーグ配分金
  4. その他

注: 物販収入は2016年から集計開始のため、比較可能性を考慮して「その他」に含める

チャート3: 収益構成比率の推移（100%積み上げ）

• チャート2と同じ4項目を100%積み上げで表示
• 各収益源の構成比率の変化を可視化

チャート4: 営業費用の積み上げチャート

• 積み上げバーチャートで以下の4項目を表示:
  1. チーム人件費
  2. 試合関連経費
  3. トップチーム運営経費
  4. その他

Before/After スクリーンショット

Before

After

実装ステータス

• デフォルト表示の変更（川崎フロンターレ、2019年）
• BS表示の簡素化（資産/負債のラベル変更、幅調整）
• 構成比率の追加（BS・PL）
• チャート1: 営業収入・営業利益・利益率の複合チャート
• チャート2: 収益内訳の積み上げチャート
• チャート3: 収益構成比率の100%積み上げチャート
• チャート4: 営業費用の積み上げチャート

追加改善要件

5. チャートへのデータラベル追加

チャート内に数値を表示して、視覚的にわかりやすくする。

チャート2: 収益内訳の積み上げチャート

• バーの上部（外側）: 合計値を表示
• 各セグメント内: 内訳の金額を表示

チャート3: 収益構成比率の100%積み上げチャート

• 各セグメント内: パーセンテージ（%）を表示

チャート4: 営業費用の積み上げチャート

• バーの上部（外側）: 合計値を表示
• 各セグメント内: 内訳の金額を表示

6. BS勘定科目ラベルの幅縮小

• 流動資産・固定資産・流動負債・固定負債は4文字のみ
• 現状ラベル幅が広すぎて余白が目立つ
• 幅を縮小してコンパクトに表示 before after

7. PLウォーターフォールチャートの大幅改善

PLウォーターフォールを積み上げ棒グラフ対応に拡張する。新規コンポーネントとして実装推奨。 beore after

7-1. 表示サイズの動的拡張

幅

• チャートの表示幅を画面いっぱいまで動的に拡張
• 右側の余白を活用してバー間のマージンを広げる

高さ

• 画面の高さに合わせて動的に適応
• ウィンドウサイズ変更時に自動調整

実装

• 画面幅・高さを動的に取得して適応的にレイアウト（ResizeObserver使用推奨）

7-2. 売上高を積み上げ棒グラフ化

現状: 売上高6,969が単一バーで表示

修正後: 以下の4項目で積み上げ棒グラフを表示

1. スポンサー収入
2. 入場料収入
3. Jリーグ配分金
4. その他（アカデミー関連収入、物販収入、その他収入の合計）

収益内訳の推移チャート（チャート2）と同じ分解

7-3. 売上原価・販管費を積み上げ棒グラフ化

現状: 売上原価4,344、販管費1,824が単一バーで表示

修正後: 営業費用の内訳の推移チャート（チャート4）と同じ4項目で積み上げ

1. チーム人件費
2. 試合関連経費
3. トップチーム運営経費
4. その他（販管費、アカデミー運営経費、物販関連費、その他売上原価の合計）

売上原価と販管費を統合して「営業費用」として表示

7-4. バーの太さとマージン調整

• バーを太くする（積み上げ棒でセグメントを表示するため）
• バー間のマージンを広げる（右側の余白を活用）
• 純利益まで表示した後、右端まで余白を均等配置

7-5. 積み上げ棒内にラベル表示

各積み上げセグメント内に以下を表示:

• 項目名（例: スポンサー収入）
• 金額（例: 3,200）

セグメントが小さい場合はツールチップで対応を検討。

実装方針

• 既存のPLWaterfallChart.vueを拡張するか、新規コンポーネントPLWaterfallChartEnhanced.vueを作成
• ウィンドウリサイズ時の再描画対応（ResizeObserver使用推奨）
• 積み上げ棒のデータはuseJLeagueMetrics.tsから取得

実装ステータス（追加要件）

• チャート2: 収益内訳に合計値・内訳数値を追加
• チャート3: 100%積み上げにパーセンテージを追加
• チャート4: 営業費用に合計値・内訳数値を追加
• BS勘定科目ラベルの幅縮小
• 積み上げ棒グラフにグループツールチップ追加（バー全体にホバーで全内訳表示）
• チャート1（複合チャート）のフォントサイズ・太さを他チャートと統一
• financial-quizインデックスページにJリーグカードを追加
• 7-1: PLウォーターフォール表示幅の画面拡張（ResizeObserver使用）
• 7-2: 売上高の積み上げ棒グラフ化（スポンサー/入場料/配分金/その他）
• 7-3: 売上原価・販管費の積み上げ棒グラフ化（人件費/試合関連/運営費/その他）
• 7-4: バーの太さとマージン調整（barWidth=55px、動的gap計算）
• 7-5: 積み上げ棒内にラベル表示（引き出し線対応あり）

実装メモ

デフォルト表示の変更方法

ファイル: apps/web/app/pages/financial-quiz/jleague/index.vue

// 現状
const selectedClubId = ref('urawa-reds')  // または別のクラブ
const selectedPeriodIndex = ref(0)  // 最初の年度

// 修正後
const selectedClubId = ref('kawasaki-frontale')
const selectedPeriodIndex = ref(4)  // 2019年（2015年から数えて5番目 = index 4）

BS修正対象

ファイル: apps/web/app/components/financial-quiz/BalanceSheetVisualization.vue

現状のBS表示構造:

• 左側（借方）: 流動資産、固定資産を個別ブロックで表示
• 右側（貸方）: 流動負債、固定負債、純資産を個別ブロックで表示

修正ポイント:

1. 「流動資産」「固定資産」のラベルを「資産」に統合
2. 「流動負債」「固定負債」のラベルを「負債」に統合
3. 各項目の幅を縮小（4文字以内なので余白が多すぎる）
4. 金額の横に構成比率（%）を追加

チャート再構成

ファイル: apps/web/app/components/jleague/JLeagueChartsPanel.vue

現状のチャート構成（収支タブ）:

1. 営業収入推移（単一バーチャート）
2. 営業利益・純利益推移（2系列バーチャート）
3. 人件費率推移（折れ線チャート）
4. 利益率推移（2系列折れ線チャート）

修正後のチャート構成:

1. 営業収入・営業利益推移 + 営業利益率（複合チャート: バー+折れ線右軸）
2. 収益内訳積み上げ（スポンサー/入場料/配分金/その他）
3. 収益構成比率推移（100%積み上げ）
4. 営業費用積み上げ（人件費/試合関連/運営/その他）

積み上げチャートの実装

積み上げに対応していない可能性が現状のBaseBarChartにはある。以下の方法で対応:

1. BaseBarChartにstackedプロップを追加
2. または新規でStackedBarChart.vueコンポーネントを作成

データ項目の対応（j-league-data.json）

収益内訳:

• スポンサー収入 → スポンサー収入
• 入場料収入 → 入場料収入
• Jリーグ配分金 → 配分金
• その他 = 営業収入 - (スポンサー + 入場料 + 配分金)

費用内訳:

• チーム人件費 → チーム人件費
• 試合関連経費 → 試合関連経費
• トップチーム運営経費 → トップチーム運営経費
• その他 = 営業費用 - (人件費 + 試合関連 + 運営)