連結精算表インタラクティブビューアー実装計画
背景と目的
「連結精算表から理解する連結会計入門」の例題をWebコンテンツ化できるか検証する。連結精算表は右に長くなる宿命があり、スプレッドシートでもスクロールが発生する。ミラーレイアウト(3カラムビュー)で表を分割し、シート間をリンクやキーボードで移動できれば、分割のストレスを解消できるという仮説を検証したい。
連結精算表の全体像
以下の画像は書籍の連結精算表の構造を示す。左から親会社(P社)・子会社(A社)・単純合算表・個別修正仕訳と続き、右側に連結修正仕訳(資本連結、のれん等)のカラムが並ぶ。各カラムには対応する書籍の参照章が矢印で示されている。

この幅広い表を1画面に収めるのではなく、シートごとに分割表示する。
レイアウト設計
デザイン原則ページと同じミラーレイアウト(3カラムビュー)を採用する。ミラーレイアウトとは、画面を3つの縦カラムに分割し、左から大カテゴリ→中カテゴリ→コンテンツと階層的にドリルダウンするナビゲーション方式を指す。各カラムは独立スクロール可能で、左のカラムで項目を選ぶと右のカラムの内容が切り替わる。

第1カラムに大カテゴリ、第2カラムに中カテゴリ、第3カラム(メインエリア)にコンテンツを表示する。
第1カラム: 大カテゴリ
| 大カテゴリ | 役割 |
|---|---|
| 仕訳 | フロー情報。各仕訳をクリックすると関連するワークシートのカラムにジャンプ |
| 連結ワークシート | ストック情報。精算表を分割表示 |
第2カラム: 中カテゴリ
「連結ワークシート」選択時の中カテゴリ:
| # | 中カテゴリ | 内容 |
|---|---|---|
| 1 | 単純合算表 | P社・A社の個別F/Sを単純合算 |
| 2 | 個別修正仕訳後の合算表 | 単純合算 + 個別修正仕訳群 = 修正後合算 |
| 3 | 連結AJE(Adjusting Journal Entries: 連結修正仕訳) | 修正後合算 + 資本連結等の連結修正仕訳 = 連結精算表残高 |
| 4 | 連結RGE(Reclassification Entries: 組替仕訳) | 開示項目への組替仕訳 |
| 5 | 連結財務諸表 | 開示ベースの最終数値 |
「連結財務諸表」にはさらに小カテゴリを設ける:
- BS(連結貸借対照表)
- PL(連結損益計算書)
- SS(連結株主資本等変動計算書)
- CF(連結キャッシュ・フロー計算書)※今回は対象外の可能性
第3カラム: コンテンツエリア
選択された中カテゴリに応じた表を表示する。
各シートのカラム構成
全シートに共通の固定カラムと、シート固有のカラムがある。
共通カラム(全シートで左端に固定)
- 項目(連結B/S、連結P/L等の区分)
- 勘定コード
- 精算表勘定科目
シート固有カラム
1. 単純合算表
| P社 | A社 | 単純合算表 |
|---|
2. 個別修正仕訳後の合算表
| 単純合算表 | 開始仕訳 | 損益連結修正 | 調整・組替仕訳 | 期ズレ未連結取引 | その他 | 個別修正仕訳合計 | 個別修正仕訳後合算表 |
|---|
- スタート値: 単純合算表の数字
- ゴール値: 個別修正仕訳後合算表
3. 連結AJE
| 個別修正仕訳後合算表 | 開始仕訳(資本連結) | 投資資本 | のれん/負ののれん | 資本剰余・繰越利益 | ... | 連結修正仕訳合計 | 連結精算表 |
|---|
- スタート値: 個別修正仕訳後合算表の数字
- ゴール値: 連結精算表の合計残高
4. 連結RGE
開示項目への組替仕訳を表示。
5. 連結財務諸表
開示ベースの最終数値。BS/PL/SS別に小カテゴリで分割。
ナビゲーション設計
シート間リンク
各シートのスタート値(左端のカラム)は、同一勘定科目について前のシートのゴール値と同じ数字になる。この数字をクリックすると前のシートの該当カラムにジャンプする。ただしRGE(組替仕訳)では勘定科目の集約・分解が発生するため、対応関係が1:1にならない場合がある。
例:
- 連結AJEシートの「個別修正仕訳後合算表」カラムの数字をクリック → 個別修正仕訳後の合算表シートの「個別修正仕訳後合算表」カラムに遷移
仕訳→ワークシート連携
仕訳の大カテゴリから各仕訳を選択すると、その仕訳が反映される連結ワークシートの該当シート・カラムにジャンプする。仕訳はフロー情報であり、それがワークシートのどこに着地するかをリンクで表現する。
キーボードナビゲーション
→キー: 次のシートへ移動←キー: 前のシートへ移動- シート間を素早く行き来できることで、分割表示のストレスを軽減する
URLクエリパラメータ
ページ分割はせず、1ページ内でクエリパラメータにより表示シートを管理する。
?sheet=simple-aggregation # 単純合算表(デフォルト)
?sheet=individual-adjustment # 個別修正仕訳後合算表
?sheet=consolidation-aje # 連結AJE
?sheet=consolidation-rge # 連結RGE
?sheet=consolidated-fs&sub=bs # 連結財務諸表 - BS
?sheet=consolidated-fs&sub=pl # 連結財務諸表 - PL
?sheet=consolidated-fs&sub=ss # 連結財務諸表 - SS
sheetのデフォルト値:simple-aggregationsubはsheet=consolidated-fsの場合のみ有効。デフォルト値:bs- 不正な値の場合はデフォルトにフォールバック
全体一覧+虫眼鏡機能
全体像を一画面で俯瞰するモードも用意する。
- 表示: 全シートを縮小表示(font-size: 10px程度)で横並びに配置
- 操作: マウスホバーで該当セル周辺を2〜3倍に拡大表示(CSS transform + position: fixed のツールチップ風)
- キーボード: Tab/Shift+Tabでセル間移動、Enterで拡大固定
- モバイル: ピンチズームで代替(虫眼鏡は非表示)
ビューは複数あってもよい。
検証ポイント
- ミラーレイアウトの
→キー移動は快適か - 仕訳シートとワークシート間の遷移はスムーズか
- 表が分割されていても全体像を把握できるか
- 一覧表示+虫眼鏡機能は実用的か
- ダミーデータでリンクとナビゲーションが正しく動作するか
実装方針
- まずダミーデータでプロトタイプを作成する
- 数字は適当でよいが、シート間のリンクは動作するようにする
- 既存のデザイン原則ページのミラーレイアウトコンポーネントを流用する
- Vueのカスタムページとして実装する