• #別表
  • #SVG
  • #デフォルメ
  • #ウォーターフォールチャート
  • #法人税
  • #並列処理
  • #図解
開発eurekapu-nuxt4メモ

別表デフォルメSVG図解を22枚制作しウォーターフォールチャートをv4まで磨いた記録

22個のプレースホルダーSVGを実際の図解に置き換えた。5つのサブエージェントに分担させ、別表四・五(一)・五(二)・十四(二)のデフォルメ版を並列に描いた。寄付金のウォーターフォールチャートは4回描き直した。v1で「計算構造が見えない」と突き返され、v4でようやく計算式が紙面に乗った。

プレースホルダー22枚を一括置換する

解説コンテンツのSVG欄には「ここに図が入ります」と書かれたグレーの矩形が22枚並んでいた。1枚ずつ手で差し替えていたら日が暮れる。サブエージェント5つを立て、章ごとに割り振った。

割り振り方はシンプルで、章番号で区切った。各サブエージェントには「この章のプレースホルダーSVGを、本文の内容に合った図解に置き換えろ」と一文で指示を投げる。別表四を担当するエージェント、別表五(一)を担当するエージェント、という具合だ。5つが同時に動き始め、22枚が揃うまでの時間は1枚ずつ描くのと比べて体感で3分の1に縮まった。

デフォルメ版別表の設計思想

別表の原本は国税庁の様式そのままだと行数が多く、初学者の目が泳ぐ。そこで「デフォルメ版」を描いた。行を間引き、数値を丸め、構造だけが残るようにする。会計の参考書に載っている実際の数値をそのまま使い、読者が書籍と突き合わせられるようにした。

別表四(所得計算の明細書)

損益計算書の当期純利益からスタートし、加算・減算の調整を経て所得金額に着地する。この一連の流れを1枚に収めた。仮計の行だけ背景色を変えた。仮計は別表五(一)へ数字を送り出す中継地点で、ここを読み飛ばすと別表間の連動が途切れる。

別表五(一)(利益積立金額 + 資本金等の額)

I区分(利益積立金額)とII区分(資本金等の額)を上下に並べた。期首 → 増減 → 期末の流れを左から右に読めるレイアウトにした。繰越損益金と納税充当金の行だけ背景色を濃くして、読者の目がまずそこに止まるようにした。参考書に載っている具体的な金額をそのまま入れたので、書籍を横に開きながら図を追える。

別表五(二)(租税公課の納付状況)

概要版とディテール版の2枚を描いた。概要版は「法人税・住民税・事業税がどこに消えたか」だけを追える。ディテール版は各税目の充当金・中間納付・確定納付を行単位で展開した。1枚にまとめると情報が詰まりすぎるので、ズームイン・ズームアウトの2段階構成にした。

別表十四(二)(寄付金の損金算入)

ここが最も手がかかった。寄付金の損金算入限度額は計算式が複数段に分かれる。この構造をどう図にするかで4回描き直した。

ウォーターフォールチャートv1→v4の反復

v1: ただの棒グラフ

最初に描いたウォーターフォールは、寄付金の総額・損金算入限度額・損金不算入額を棒グラフで並べただけだった。レビューで「これはただの棒グラフだ。ウォーターフォールになっていない」と突き返された。

ウォーターフォールチャートは「前の値の上に次の値が積み上がる」ことで増減の内訳を見せる。v1の棒は全部ベースラインから立ち上がっていた。積み上がっていないのだから、ウォーターフォールではない。

v2: 棒の開始位置を揃える

棒の開始位置を前の棒の終了位置に合わせた。加算は上に伸び、減算は下に削れる。損金算入限度額が所得金額と資本金等の額から計算される過程を、2本の棒が合流する形で描いた。構造は見えるようになった。しかし図の入口が唐突で、「この数字はどこから来たのか」がわからなかった。

v3: 別表四から矢印を引く

別表四の仮計と資本金等の額を図の上段に小さく配置し、矢印でウォーターフォールの入口に接続した。数字の出所が1枚で追えるようになった。ただ上段が詰まりすぎて、計算式を書くスペースがなかった。文字が7ptまで縮んでいた。

v4: 上段を広げ計算式を書き込む

上段の縦幅を倍に広げた。10,000,000 x 6.25/100 = 625,000 のような計算式をSVGの<text>要素として直接書き込んだ。読者が電卓を叩かなくても、図の中だけで計算が追える。4回目にしてようやく「初学者がこの1枚で手を動かせる」と判断できた。

v1からv4まで、描いては壊しを繰り返した。完成形だけ見ればv4の1枚で済む話だが、v1の失敗がなければv2の発想は出なかったし、v3の窮屈さを経験しなければv4で上段を広げる判断もできなかった。

論点別3点セットSVG

別表を1枚ずつ理解しても、論点単位でつなげて読めないと実務で手が止まる。そこで「論点別3点セット」を描いた。

たとえば貸倒引当金なら、別表十一(一)(貸倒引当金の計算) → 別表四(加算・減算の調整) → 別表五(一)(利益積立金額への反映)の3枚が1つの論点を構成する。この流れを1枚のSVGに横並びで配置し、矢印でつないだ。読者は左から右に目を動かすだけで、1つの論点が別表をどう横断するかを追える。

フロー x ストックの対応関係

簿記3級で学ぶ「フロー(P/L) x ストック(B/S)」の構造が、そのまま別表にも当てはまる。P/Lで計算した利益がB/Sに流れるように、別表四で計算した所得が別表五(一)に流れる。

この対応関係を概念図にして解説コンテンツの冒頭に置いた。「難しそうな別表も、簿記3級の延長で読める」と読者が気づけば、学習の心理的ハードルが下がる。実際、別表四は「税務版P/L」、別表五(一)は「税務版B/S」と呼べる構造になっている。

「正規化テーブル」というアプローチ

別表の様式を眺めていて気づいたことがある。これは「正規化されていないテーブル」だ。

RDBの設計でいえば、1つのテーブルに複数の関心事が詰め込まれている。別表五(二)がその典型で、税目別の納付状況と納税充当金の計算が1枚の紙に同居している。だから読みづらいし、どこから読み始めればいいかわからない。

解説コンテンツでは「中間テーブル」を挟むアプローチを採った。まず別表の数値を論点ごとに分解して、正規化されたテーブルに整理する。それから別表の様式に転記する。別表をいきなり読むのではなく、一度分解してから組み立て直す。この順番の方が読者の手が動く。

RDBの正規化を知っているエンジニアなら、この説明で「ああ、あれか」と腑に落ちるはずだ。別表の読みにくさの正体は、正規化されていないスキーマと同じだった。

Q&Aで固めた概念

制作中に出てきた疑問を3つ、Q&A形式で整理した。

社外流出はなぜ別表五(一)に残らないのか。 社外流出した金額(配当・役員賞与など)は会社の外に出ていくので、税務B/S(別表五(一))に相手科目が立たない。だから別表四で加算しても、別表五(一)には反映されない。

CF計算書の間接法とのアナロジー。 別表四は間接法のキャッシュフロー計算書に似ている。当期純利益からスタートし、「会計と税務のズレ」を加減算して所得金額に着地する。間接法が「利益からキャッシュへの橋渡し」なら、別表四は「利益から所得への橋渡し」だ。

納税充当金と法人税等の差額は何か。 納税充当金(税務上の概念)と未払法人税等(会計上の概念)は通常一致するが、事業税でズレが生じる。事業税は損金算入されるため、別表五(二)の納税充当金から事業税を引いた残額と、B/Sの未払法人税等が一致しない。この差額の正体は事業税だ。

この3つのQ&Aを図解の余白に配置した。SVGを見ている最中に「なぜ?」が浮かんだとき、視線を動かすだけで答えに辿り着ける。

今日の手の動き

  • SVGプレースホルダー22枚 → 実図解に置換(サブエージェント5並列)
  • デフォルメ版別表: 四、五(一)、五(二)x2枚、十四(二)
  • ウォーターフォールチャート: v1→v2→v3→v4の4回描き直し
  • 論点別3点セットSVG: 別表十一(一)→四→五(一)
  • フローxストック概念図
  • 正規化テーブルアプローチの図解
  • Q&A 3問の概念整理