簿記教材の図解で残高試算表と財務3表を分け、合計残高試算表を正式な5列に作り直す

この日は eurekapu-nuxt4 で、簿記教材のまとめ節（ストーリー版）の図解を Claude Code と直していた。 第1弾と第2弾の実装は午前のうちにコミットしてもらっていた（f8a243e3、57b3b1da）。 そこから先は、画面を見ては指摘し、直してもらう往復になった。

その往復の終盤で、自分で頼んだ数え上げの演出に、自分で疑問を持つことになる。

ファーストビューで残高試算表と財務3表を離す

最初の指摘は、ファーストビューの配置だった。 残高試算表と財務3表は、要素の種類が違う。 近接の法則をちゃんと使うなら離して置くべきで、画面の上下それぞれの中央を使ったらどうか、と伝えた。

Claude Code には、残高試算表を枠の上半分の中央に、財務3表を下半分の中央に置く形で直してもらった。 2つの表の倍率はそろえてある。 この上下2分割はほかの STEP にも広げ、STEP 2 では仕訳帳が上半分の中央に、2つの元帳が下半分に収まった。 ここまでの指摘は 9ba644b9 でコミットした。

「財務諸表です」と言う場面に帳簿を混ぜない

次に引っかかったのは、「財務諸表（決算書）」を説明している節だった。 そこにも残高試算表が並んでいた。 残高試算表は帳簿なので、財務諸表の場面に含めなくていい。 BS と PL を枠の縦横の中央に入れてくれればいい、と伝えた。

直した結果、この節には BS、PL、SS だけが残り、枠の縦横の中央に収まった。 測ってもらうと、ステージの中心が 640、中身の中心が 640.5 だった。 残高試算表は、試算表から財務諸表を作る STEP 5 にだけ出す（4281d91b）。

同じ回の指摘で、細かいところもいくつか直した。 取引内容の節では、①〜④の番号を灰色の枠の外に縦に並べて1本の線でつなぎ、番号を各枠の上端にそろえた。 BS の右側には、負債合計（300）と純資産合計（500）の小計を足した。

矢印をやめて、塗りの丸でつなぐ

財務3表の数字のつながりは、数字を囲む枠どうしを線でつなぐ形で描いてもらっていた。 最初の版は、矢印の先が目標のセルより約20px下に落ち、オレンジの線が SS の見出しの文字を横切っていた。 このずれを測ってもらい、ほかの指摘とあわせてコミットした（95b5c81f）。

矢印と言ったのは自分だったが、このつながりには向きがない。 そこで、矢印をやめて塗りの丸でつなぐように頼んだ。 丸は両端に置き、数字を囲む四角の枠線の上に重ねる。 色は、緑の線なら緑、オレンジの線ならオレンジにする。

DOM で確かめてもらうと、丸が4つ、矢印の marker は0だった。 これは 206a15d2 でコミットした。

700 を数え上げる演出と、合計の行への疑問

同じ流れで、数字の数え上げも入れてもらった。 STEP 2 で #3 の取引を転記すると、普通預金の合計のセルは、数字の札（pill）が着地するまで約0.9秒のあいだ 300 のままになる。 着地したあと、そこから 700 まで数え上がる。

それを見て、もう1つ頼んだ。 借方の普通預金に 700 が入ったのだから、合計残高試算表の一番下にある合計の行の残高も、700 で数え上げてほしい。 返ってきた実装は、合計の行の残高を「借方合計 − 貸方合計」で出すものだった。 ミラーカラム版の試算表と同じ計算で、全部の勘定を載せ終えると 0（「-」）になる（1302ea94）。

ところが、画面で合計残高試算表を追っていくうちに引っかかった。 普通預金と商品は借方残高になり、買掛金、資本金、売上は貸方残高になる。 その残高を1本の列で差し引いた最後の行に、表示する意味があるのか。 そもそも合計の行に意味があるのかも、Claude Code に聞いた。

説明はこうだった。 合計の行で意味があるのは借方と貸方の2列で、残高の列の合計には意味がない。 試算表を作る目的は記帳の正確性を確かめることで、そのしるしが「借方合計＝貸方合計」になる。 決算整理前なら 1,000＝1,000、決算整理後なら 1,100＝1,100 だ。

対応の案を出してもらい、自分は「2」を選んだ。 合計残高試算表を、正式な形に作り直す案である。

正式な5列の合計残高試算表

作り直した表は、「借方残高｜借方合計｜勘定科目｜貸方合計｜貸方残高」の5列になった。 残高は、その勘定の側の列にだけ入る。 普通預金、商品、仕入は借方残高の列に、買掛金、資本金、売上は貸方残高の列に入る。 元帳の合計行の残高も、その列へ飛ばすようにした。

合計の行は、4つとも数え上げる。 決算整理前は、残高が 1,000＝1,000、合計が 1,000＝1,000 になる。 決算整理後は、残高が 1,000＝1,000、合計が 1,100＝1,100 になる。 関連するテストは57本とも通り、8f87c203 でコミットした。

残高が1本の列だったときは、貸借の向きが違う数字を同じ列で差し引いていた。 列を借方と貸方に分けたことで、残高どうしも合計どうしも、左右の一致として見せられる形になった。

縦長の5ステップの図

700 の数え上げを頼んだときに、縦長の5ステップの図のことも話していた。 見つけられていないのだと思い込んでいて、STEP 1〜4 の場所を枠で囲む形でもいい、と伝えた。 実際には、入門講座にあった縦長の図はすでに見つかっていた。

この図を「簿記の5つのStep」の節に使い、説明を送るたびに、該当する STEP の場所を枠で囲む。 枠の動きには、簿記の流れまとめの節にある仕組みを使い回してもらった。 確かめると、STEP 5 の枠が2行目の「財務諸表を作成」を横切っていた。 そのラベルは図の y 1080 付近まで続いていたので、枠の範囲を 945〜1100 に広げてもらい、2行とも収めた。 合計の行の数え上げとあわせて、1302ea94 でコミットした。

コンテキストが一杯になって引き継ぐ

8f87c203 までコミットしたところで、セッションのコンテキストが一杯になった。 急ぎの引き継ぎはなく、作業はすべてコミット済みだった。 残っている作業は4つあった。

それでも、次に触るときのために引き継ぎを残すことにした。 第2弾の計画書に、その後の修正と残りの作業の2つの節を書き足してもらい、HTML も作り直して 557659c0 でコミットした。 引き継ぎのプロンプトは、ダウンロードフォルダにテキストファイルで置いてもらった。

学びメモ

• 帳簿と財務諸表は種類が違うので、離して置く。「財務諸表です」と言う場面に、帳簿の残高試算表を混ぜない
• 向きのない関係を矢印で描かない。両端の塗りの丸を枠線の上に重ねて、同じ色でつなぐ
• 合計残高試算表の合計の行で意味があるのは「借方合計＝貸方合計」。残高は借方残高と貸方残高の列に分け、1本の列で差し引かない

700 を数え上げてほしいと頼んだ時点では、合計の行の残高の列に意味があるかどうかを考えていなかった。 出来上がった表を見て、ようやくその列を疑った。 残りの4つは、次のセッションで引き継ぎのプロンプトから拾い直す。