[{"data":1,"prerenderedAt":178},["ShallowReactive",2],{"content-/bookkeeping-story-trial-balance-layout":3,"all-pages-for-dir":156,"related-/bookkeeping-story-trial-balance-layout":157,"og-image-/bookkeeping-story-trial-balance-layout":177},{"id":4,"title":5,"body":6,"category":136,"concepts":137,"description":138,"extension":139,"meta":140,"navigation":141,"ogImage":137,"path":142,"project_name":143,"published":144,"publishedAt":145,"seo":146,"source":147,"stem":148,"tags":149,"todo":137,"unpublished":144,"updatedAt":137,"__hash__":155},"pages/2026-10/2026-10-16/bookkeeping-story-trial-balance-layout.md","簿記教材の図解で残高試算表と財務3表を分け、合計残高試算表を正式な5列に作り直す",{"type":7,"value":8,"toc":124},"minimark",[9,13,17,20,24,27,30,34,37,40,43,47,50,53,56,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,121],[10,11,5],"h1",{"id":12},"簿記教材の図解で残高試算表と財務3表を分け合計残高試算表を正式な5列に作り直す",[14,15,16],"p",{},"この日は eurekapu-nuxt4 で、簿記教材のまとめ節（ストーリー版）の図解を Claude Code と直していた。\n第1弾と第2弾の実装は午前のうちにコミットしてもらっていた（f8a243e3、57b3b1da）。\nそこから先は、画面を見ては指摘し、直してもらう往復になった。",[14,18,19],{},"その往復の終盤で、自分で頼んだ数え上げの演出に、自分で疑問を持つことになる。",[21,22,23],"h2",{"id":23},"ファーストビューで残高試算表と財務3表を離す",[14,25,26],{},"最初の指摘は、ファーストビューの配置だった。\n残高試算表と財務3表は、要素の種類が違う。\n近接の法則をちゃんと使うなら離して置くべきで、画面の上下それぞれの中央を使ったらどうか、と伝えた。",[14,28,29],{},"Claude Code には、残高試算表を枠の上半分の中央に、財務3表を下半分の中央に置く形で直してもらった。\n2つの表の倍率はそろえてある。\nこの上下2分割はほかの STEP にも広げ、STEP 2 では仕訳帳が上半分の中央に、2つの元帳が下半分に収まった。\nここまでの指摘は 9ba644b9 でコミットした。",[21,31,33],{"id":32},"財務諸表ですと言う場面に帳簿を混ぜない","「財務諸表です」と言う場面に帳簿を混ぜない",[14,35,36],{},"次に引っかかったのは、「財務諸表（決算書）」を説明している節だった。\nそこにも残高試算表が並んでいた。\n残高試算表は帳簿なので、財務諸表の場面に含めなくていい。\nBS と PL を枠の縦横の中央に入れてくれればいい、と伝えた。",[14,38,39],{},"直した結果、この節には BS、PL、SS だけが残り、枠の縦横の中央に収まった。\n測ってもらうと、ステージの中心が 640、中身の中心が 640.5 だった。\n残高試算表は、試算表から財務諸表を作る STEP 5 にだけ出す（4281d91b）。",[14,41,42],{},"同じ回の指摘で、細かいところもいくつか直した。\n取引内容の節では、①〜④の番号を灰色の枠の外に縦に並べて1本の線でつなぎ、番号を各枠の上端にそろえた。\nBS の右側には、負債合計（300）と純資産合計（500）の小計を足した。",[21,44,46],{"id":45},"矢印をやめて塗りの丸でつなぐ","矢印をやめて、塗りの丸でつなぐ",[14,48,49],{},"財務3表の数字のつながりは、数字を囲む枠どうしを線でつなぐ形で描いてもらっていた。\n最初の版は、矢印の先が目標のセルより約20px下に落ち、オレンジの線が SS の見出しの文字を横切っていた。\nこのずれを測ってもらい、ほかの指摘とあわせてコミットした（95b5c81f）。",[14,51,52],{},"矢印と言ったのは自分だったが、このつながりには向きがない。\nそこで、矢印をやめて塗りの丸でつなぐように頼んだ。\n丸は両端に置き、数字を囲む四角の枠線の上に重ねる。\n色は、緑の線なら緑、オレンジの線ならオレンジにする。",[14,54,55],{},"DOM で確かめてもらうと、丸が4つ、矢印の marker は0だった。\nこれは 206a15d2 でコミットした。",[21,57,59],{"id":58},"_700-を数え上げる演出と合計の行への疑問","700 を数え上げる演出と、合計の行への疑問",[14,61,62],{},"同じ流れで、数字の数え上げも入れてもらった。\nSTEP 2 で #3 の取引を転記すると、普通預金の合計のセルは、数字の札（pill）が着地するまで約0.9秒のあいだ 300 のままになる。\n着地したあと、そこから 700 まで数え上がる。",[14,64,65],{},"それを見て、もう1つ頼んだ。\n借方の普通預金に 700 が入ったのだから、合計残高試算表の一番下にある合計の行の残高も、700 で数え上げてほしい。\n返ってきた実装は、合計の行の残高を「借方合計 − 貸方合計」で出すものだった。\nミラーカラム版の試算表と同じ計算で、全部の勘定を載せ終えると 0（「-」）になる（1302ea94）。",[14,67,68],{},"ところが、画面で合計残高試算表を追っていくうちに引っかかった。\n普通預金と商品は借方残高になり、買掛金、資本金、売上は貸方残高になる。\nその残高を1本の列で差し引いた最後の行に、表示する意味があるのか。\nそもそも合計の行に意味があるのかも、Claude Code に聞いた。",[14,70,71],{},"説明はこうだった。\n合計の行で意味があるのは借方と貸方の2列で、残高の列の合計には意味がない。\n試算表を作る目的は記帳の正確性を確かめることで、そのしるしが「借方合計＝貸方合計」になる。\n決算整理前なら 1,000＝1,000、決算整理後なら 1,100＝1,100 だ。",[14,73,74],{},"対応の案を出してもらい、自分は「2」を選んだ。\n合計残高試算表を、正式な形に作り直す案である。",[21,76,77],{"id":77},"正式な5列の合計残高試算表",[14,79,80],{},"作り直した表は、「借方残高｜借方合計｜勘定科目｜貸方合計｜貸方残高」の5列になった。\n残高は、その勘定の側の列にだけ入る。\n普通預金、商品、仕入は借方残高の列に、買掛金、資本金、売上は貸方残高の列に入る。\n元帳の合計行の残高も、その列へ飛ばすようにした。",[14,82,83],{},"合計の行は、4つとも数え上げる。\n決算整理前は、残高が 1,000＝1,000、合計が 1,000＝1,000 になる。\n決算整理後は、残高が 1,000＝1,000、合計が 1,100＝1,100 になる。\n関連するテストは57本とも通り、8f87c203 でコミットした。",[14,85,86],{},"残高が1本の列だったときは、貸借の向きが違う数字を同じ列で差し引いていた。\n列を借方と貸方に分けたことで、残高どうしも合計どうしも、左右の一致として見せられる形になった。",[21,88,89],{"id":89},"縦長の5ステップの図",[14,91,92],{},"700 の数え上げを頼んだときに、縦長の5ステップの図のことも話していた。\n見つけられていないのだと思い込んでいて、STEP 1〜4 の場所を枠で囲む形でもいい、と伝えた。\n実際には、入門講座にあった縦長の図はすでに見つかっていた。",[14,94,95],{},"この図を「簿記の5つのStep」の節に使い、説明を送るたびに、該当する STEP の場所を枠で囲む。\n枠の動きには、簿記の流れまとめの節にある仕組みを使い回してもらった。\n確かめると、STEP 5 の枠が2行目の「財務諸表を作成」を横切っていた。\nそのラベルは図の y 1080 付近まで続いていたので、枠の範囲を 945〜1100 に広げてもらい、2行とも収めた。\n合計の行の数え上げとあわせて、1302ea94 でコミットした。",[21,97,98],{"id":98},"コンテキストが一杯になって引き継ぐ",[14,100,101],{},"8f87c203 までコミットしたところで、セッションのコンテキストが一杯になった。\n急ぎの引き継ぎはなく、作業はすべてコミット済みだった。\n残っている作業は4つあった。",[14,103,104],{},"それでも、次に触るときのために引き継ぎを残すことにした。\n第2弾の計画書に、その後の修正と残りの作業の2つの節を書き足してもらい、HTML も作り直して 557659c0 でコミットした。\n引き継ぎのプロンプトは、ダウンロードフォルダにテキストファイルで置いてもらった。",[21,106,107],{"id":107},"学びメモ",[109,110,111,115,118],"ul",{},[112,113,114],"li",{},"帳簿と財務諸表は種類が違うので、離して置く。「財務諸表です」と言う場面に、帳簿の残高試算表を混ぜない",[112,116,117],{},"向きのない関係を矢印で描かない。両端の塗りの丸を枠線の上に重ねて、同じ色でつなぐ",[112,119,120],{},"合計残高試算表の合計の行で意味があるのは「借方合計＝貸方合計」。残高は借方残高と貸方残高の列に分け、1本の列で差し引かない",[14,122,123],{},"700 を数え上げてほしいと頼んだ時点では、合計の行の残高の列に意味があるかどうかを考えていなかった。\n出来上がった表を見て、ようやくその列を疑った。\n残りの4つは、次のセッションで引き継ぎのプロンプトから拾い直す。",{"title":125,"searchDepth":126,"depth":126,"links":127},"",2,[128,129,130,131,132,133,134,135],{"id":23,"depth":126,"text":23},{"id":32,"depth":126,"text":33},{"id":45,"depth":126,"text":46},{"id":58,"depth":126,"text":59},{"id":77,"depth":126,"text":77},{"id":89,"depth":126,"text":89},{"id":98,"depth":126,"text":98},{"id":107,"depth":126,"text":107},"dev",null,"簿記教材のストーリー版まとめ節で、残高試算表と財務3表を近接の法則で上下に離し、つなぎの矢印を塗りの丸に替え、合計残高試算表を借方残高と貸方残高の5列に作り直した記録。最後はコンテキストが一杯になり、引き継ぎを残した。","md",{},true,"/bookkeeping-story-trial-balance-layout","eurekapu-nuxt4",false,"2026-10-16T00:00:00.000Z",{"title":5,"description":138},"make-diary","2026-10/2026-10-16/bookkeeping-story-trial-balance-layout",[150,151,152,153,154],"簿記","図解","試算表","近接の法則","Claude Code","MWsT2q2rS62uooBcBBYzC0xkgE_8TtUThZCjPL5zC98",[],[158,162,166,170,174],{"title":159,"path":160,"publishedAt":161},"簿記ストーリー講座の図を電子書籍の素材へ差し替える。Illustratorが開いていないように見えた理由と430コマの置き換え","/bookkeeping-story-ebook-figure-replace","2026-10-18T00:00:00.000Z",{"title":163,"path":164,"publishedAt":165},"Git講座を「左に図、右に解説」のスクロールテリングに作り替え、簿記講座の全20章へ広げた記録","/git-course-sticky-side-by-side-scrollytelling","2026-10-12T00:00:00.000Z",{"title":167,"path":168,"publishedAt":169},"Excel講座の動画図解を作り直す：命名ルールは白い板へ、マインドマップには画面再現をつなぐ","/excel-course-naming-rules-board-mindmap-screen","2026-10-02T00:00:00.000Z",{"title":171,"path":172,"publishedAt":173},"2026年9月1日の開発日記 - 図解と帳票を並べ直し、検索順位の測り方を変えた","/2026-09-01-diary","2026-09-01T00:00:00.000Z",{"title":175,"path":176,"publishedAt":173},"別表四・五講座の図解を SVG 生成器で作り直す：図解49枚と帳票175枚をギャラリーに並べるまで","/beppyo-figures-svg-pipeline","https://log.eurekapu.com/og/blog/bookkeeping-story-trial-balance-layout.png?v=2026-10-16T00%3A00%3A00.000Z&title=%E7%B0%BF%E8%A8%98%E6%95%99%E6%9D%90%E3%81%AE%E5%9B%B3%E8%A7%A3%E3%81%A7%E6%AE%8B%E9%AB%98%E8%A9%A6%E7%AE%97%E8%A1%A8%E3%81%A8%E8%B2%A1%E5%8B%993%E8%A1%A8%E3%82%92%E5%88%86%E3%81%91%E3%80%81%E5%90%88%E8%A8%88%E6%AE%8B%E9%AB%98%E8%A9%A6%E7%AE%97%E8%A1%A8%E3%82%92%E6%AD%A3%E5%BC%8F%E3%81%AA5%E5%88%97%E3%81%AB%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%99&author=Kei%20Komatsu&sig=731de7a4b0dec6d7",1792550157279]