有利子負債の領域横断表示：技術的課題と代替案

1. やりたかったこと

貸借対照表の可視化において、有利子負債（短期借入債務＋長期借入債務）を以下のように表示したい：

┌─────────────────┐
│    流動負債      │
│  ┌───────────┐  │
│  │ 買掛金     │  │
│  │ 前受収益   │  │
│  │ その他     │  │
│  ├───────────┤  │◄─┐
│  │ 短期借入金  │  │  │
│  │ 短期リース  │  │  │ 有利子負債
├─────────────────┤  │ （ラベルで括る）
│    固定負債      │  │
│  ├───────────┤  │  │
│  │ 長期借入金  │  │  │
│  │ 長期リース  │  │◄─┘
│  ├───────────┤  │
│  │ その他固定  │  │
│  └───────────┘  │
└─────────────────┘

この画像だとあの配置が逆になってますけどそういうことです alt text

つまり、短期借入債務と長期借入債務を流動負債セクションと固定負債セクションを跨いで視覚的にグルーピングしたい。

2. 現在のレイアウト構造

2.1 Flexboxベースの構造

┌─────────────────────────────────────────────────┐
│                    BS全体                        │
│  ┌──────────────────┐  ┌──────────────────────┐ │
│  │      資産        │  │        負債          │ │
│  │  ┌────────────┐  │  │  ┌────────────────┐  │ │
│  │  │  流動資産   │  │  │  │    流動負債     │  │ │
│  │  │  (column)  │  │  │  │    (column)    │  │ │
│  │  └────────────┘  │  │  └────────────────┘  │ │
│  │  ┌────────────┐  │  │  ┌────────────────┐  │ │
│  │  │  固定資産   │  │  │  │    固定負債     │  │ │
│  │  │  (column)  │  │  │  │    (column)    │  │ │
│  │  └────────────┘  │  │  └────────────────┘  │ │
│  │                  │  │  ┌────────────────┐  │ │
│  │                  │  │  │    純資産       │  │ │
│  │                  │  │  └────────────────┘  │ │
│  └──────────────────┘  └──────────────────────┘ │
└─────────────────────────────────────────────────┘

2.2 コード構造（簡略化）

<template>
  <!-- 負債側 -->
  <div class="liabilities-column">
    <!-- 流動負債 -->
    <div class="current-liabilities">
      <div v-for="item in currentLiabilities" :key="item.label">
        {{ item.label }}
      </div>
    </div>

    <!-- 固定負債 -->
    <div class="fixed-liabilities">
      <div v-for="item in fixedLiabilities" :key="item.label">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

2.3 問題点

流動負債と固定負債は別々のFlexコンテナになっている。

各セクションは独立した <div> で、それぞれが flex-direction: column で項目を積み重ねている
Flexboxでは、異なるコンテナ間を跨ぐ要素を作ることができない
CSSだけでは、流動負債の最下部と固定負債の最上部を「括弧で囲む」ような表現が困難

3. 今回採用した暫定対応

短期借入債務を流動負債から「除外」し、固定負債セクションに統合した「有利子負債」として表示：

変更前:                    変更後:
┌─────────────┐           ┌─────────────┐
│  流動負債    │           │  流動負債    │
│  買掛金      │           │  買掛金      │
│  短期借入金  │  ───→     │  前受収益    │  ※短期借入なし
│  前受収益    │           │  その他      │
├─────────────┤           ├─────────────┤
│  固定負債    │           │  固定負債    │
│  長期借入金  │  ───→     │  有利子負債  │  ※短期+長期を統合
│  その他      │           │  その他      │
└─────────────┘           └─────────────┘

3.1 暫定対応の問題

会計的に不正確: 短期借入債務は流動負債に分類されるべき
視覚的に誤解を招く: 有利子負債全体が固定負債に見える
本来の意図と異なる: 2つのセクションを「跨ぐ」表現ではない

4. 代替案

4.1 案A: 別レイヤーでラベル列を追加

概要: 負債列の右側に、セクションを跨ぐラベル用の列を追加

┌────────────┬────────┐
│  流動負債   │        │
│  買掛金     │        │
│  前受収益   │        │
│  短期借入金 │ 有     │
│  短期リース │ 利     │
├────────────┤ 子     │
│  固定負債   │ 負     │
│  長期借入金 │ 債     │
│  長期リース │        │
│  その他     │        │
└────────────┴────────┘

実装方法:

<div class="bs-with-labels">
  <div class="liabilities-main">
    <!-- 既存の負債表示 -->
  </div>
  <div class="debt-label-column">
    <!-- position: absolute または Grid で位置調整 -->
    <div class="interest-bearing-debt-label"
         :style="{ top: shortTermDebtTop, height: totalDebtHeight }">
      有利子負債
    </div>
  </div>
</div>

メリット:

既存のFlexbox構造を大きく変更しない
会計的に正確な配置を維持

デメリット:

位置計算が複雑（各項目の高さを計算してラベル位置を決定）
レスポンシブ対応が難しい
アニメーション時の同期が必要

4.2 案B: CSS Gridへの移行

概要: Flexboxから CSS Grid に移行し、grid-row でセクション横断を実現

.balance-sheet {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  /* 資産 | ラベル | 負債 | ラベル */
}

.interest-bearing-debt-label {
  grid-row: 5 / 9;  /* 複数行にまたがる */
  grid-column: 4;
}

メリット:

CSSネイティブでセクション横断が可能
複雑なJavaScript計算が不要

デメリット:

大規模なリファクタリングが必要
既存のアニメーションロジックの書き直し
各企業で項目数が異なるため、動的なgrid-row計算が必要

4.3 案C: SVGオーバーレイ

概要: 括弧やラベルをSVGで描画し、既存のHTML上にオーバーレイ

<div class="bs-container" ref="bsContainer">
  <!-- 既存のFlexbox構造 -->
  <svg class="debt-bracket-overlay">
    <path :d="bracketPath" />
    <text :x="labelX" :y="labelY">有利子負債</text>
  </svg>
</div>

メリット:

既存構造を変更せずに追加可能
自由な視覚表現（括弧、矢印など）

デメリット:

DOM要素の位置取得が必要（getBoundingClientRect）
リサイズ・アニメーション時の再計算
SVGとHTMLの座標系の管理

4.4 案D: 会計区分を維持しつつ色で関連付け

概要: 短期・長期を各セクションに残しつつ、同じ色で視覚的にグルーピング

┌─────────────┐
│  流動負債    │
│  買掛金      │  グレー
│  前受収益    │  グレー
│  短期借入金  │  オレンジ ◄── 同色
│  短期リース  │  オレンジ ◄── 同色
├─────────────┤
│  固定負債    │
│  長期借入金  │  オレンジ ◄── 同色
│  長期リース  │  オレンジ ◄── 同色
│  その他      │  グレー
└─────────────┘

+ マウスオーバーで「有利子負債合計: XX」を表示

メリット:

実装が最も簡単
会計的に正確
既存構造の変更なし

デメリット:

「括弧で囲む」ほど明示的ではない
色だけでは関連性が伝わりにくい可能性

4.5 案E: ツールチップ/ポップアップでの補足

概要: 有利子負債項目にホバーすると、関連項目をハイライト＋合計を表示

// 短期借入金にホバー時
onHover('短期借入金') {
  highlight(['短期借入金', '短期リース', '長期借入金', '長期リース'])
  showTooltip('有利子負債合計: 28,137')
}

メリット:

インタラクティブで情報量が多い
既存構造の変更なし

デメリット:

静的表示では関連性が見えない
マウス操作が必要

5. 最終的な実装（案D + 案E の発展形）

5.1 実装内容

案D（色による関連付け）+ 案E（ホバーでハイライト） を発展させた形で実装。

レイアウト構造

┌─────────────┐
│  流動負債    │
│  買掛金      │  ピンク
│  前受収益    │  ピンク
│  その他      │  ピンク
│  短期借入債務 │  オレンジ ◄── 集約表示
├─────────────┤
│  固定負債    │
│  長期借入債務 │  オレンジ ◄── 集約表示
│  その他      │  別色
└─────────────┘

特徴

会計区分を維持: 短期借入債務は流動負債、長期借入債務は固定負債に配置
項目の集約: 短期借入金＋短期リース → 「短期借入債務」、長期借入金＋長期リース → 「長期借入債務」
同色でグルーピング: 両者ともオレンジ系（#ffb74d）で視覚的関連付け
隣接配置: 短期借入債務を流動負債の最下部、長期借入債務を固定負債の最上部に配置し隣接させる
ホバー時のハイライト: いずれかにマウスオーバーすると両方がオレンジ枠でハイライト

5.2 ツールチップの内訳表示

どちらにホバーしても同一の内訳情報が表示される：

長期借入債務: 10,742
短期借入債務: 1,336
- 短期借入金: 1,195
- 短期リース: 141
長期借入債務: 10,742
- 長期借入金: 10,207
- 長期リース: 535
────────────────────
有利子負債合計: 12,078

短期借入債務にホバー → 短期・長期両方の内訳 + 合計
長期借入債務にホバー → 短期・長期両方の内訳 + 合計
内訳項目は - で表示（全breakdown共通形式）
区切り線は合計の前のみ

5.3 実装ファイル

app/components/financial-quiz/ProportionalFinancialStatementsAnimated.vue
- extractShortTermDebt(): 短期借入債務の抽出
- extractLongTermDebt(): 長期借入債務の抽出
- buildInterestBearingDebtBreakdown(): ツールチップ用内訳データ構築
- transformCurrentLiabilities(): 流動負債の変換（短期借入債務を集約）
- transformFixedLiabilities(): 固定負債の変換（長期借入債務を集約）
- highlightDebtGroup(): ホバー時のハイライト制御

6. 将来の改善案

中長期的（本格対応）

案A: ラベル列の追加

負債列の右側にラベル用の列を追加
JavaScriptで各項目の位置を計算
「有利子負債」ラベルを適切な位置に配置
括弧（ブラケット）でグルーピングを視覚化

7. 結論

現在のFlexboxベースのレイアウトでは、異なるセクション（流動負債・固定負債）を跨ぐ要素を自然に表現することが困難である。

根本的な解決には、以下のいずれかが必要：

CSS Gridへの移行（大規模リファクタリング）
別レイヤー（SVG or absolute positioning）でのラベル追加
位置計算のためのJavaScriptロジック追加

今回は 案D + 案E の発展形（項目集約 + 同色グルーピング + ホバーで全内訳表示）で実装し、会計的正確性と視覚的関連付けの両立を実現した。