[{"data":1,"prerenderedAt":315},["ShallowReactive",2],{"content-/fs-summary-animation-ss-header-hierarchy":3,"all-pages-for-dir":293,"related-/fs-summary-animation-ss-header-hierarchy":294,"og-image-/fs-summary-animation-ss-header-hierarchy":314},{"id":4,"title":5,"body":6,"category":273,"concepts":274,"description":275,"extension":276,"meta":277,"navigation":278,"ogImage":274,"path":279,"project_name":280,"published":281,"publishedAt":282,"seo":283,"source":284,"stem":285,"tags":286,"todo":274,"unpublished":281,"updatedAt":274,"__hash__":292},"pages/2026-10/2026-10-06/fs-summary-animation-ss-header-hierarchy.md","財務諸表講座の動画で株主資本等変動計算書の見出しを階層ごとに塗り分け、まとめの回を取引と財務諸表の2枚で作り直す",{"type":7,"value":8,"toc":259},"minimark",[9,13,17,21,24,27,30,33,36,39,50,53,56,59,62,65,117,120,123,126,129,132,135,138,141,144,147,151,154,157,160,163,166,170,173,176,179,182,185,189,192,230,233,237,240,243,246,249],[10,11,5],"h1",{"id":12},"財務諸表講座の動画で株主資本等変動計算書の見出しを階層ごとに塗り分けまとめの回を取引と財務諸表の2枚で作り直す",[14,15,16],"p",{},"朝6時台は、投資活動の見出しが1つだけ右へずれているのを直すところから始まった。\n昼前には、まとめの回から仕訳帳と元帳の工程を丸ごと外していた。\n細かな表示の修正と、回の作りそのものを捨てる判断が、同じ日に並んでいる。\n仕訳の流れを外しても数字の動きだけで伝わるのか、その答えはまだ出ていない。",[18,19,20],"h2",{"id":20},"投資活動の見出しだけが右に寄っていた",[14,22,23],{},"場面 fs-basics-02 で、投資活動のタイトルだけが右に出ていた。\n営業活動と財務活動と縦の線がそろうように左寄せを頼み、ほかの図も同じずれがあるはずなので全部確かめてほしいと伝えた。",[14,25,26],{},"Claude Code に直してもらったのは描画の共通部分である。\n静止画ごとに「描かれている範囲」を書き出させ、図に寄る場面では今のコマの中身へ寄るように変えてもらった。\n確認はヘッドレスのブラウザで、各回の図に寄る場面を全数撮って一覧にさせた。\nスマホ版では、ごく薄い灰色の楕円が中身の判定から漏れて、右端が切れかけていた。\n白と見なすしきい値を下げて測り直してもらった。",[14,28,29],{},"変更したURLは1つだけかと聞くと、10本すべてだという答えが返ってきた。\n左寄せは説明の回10本すべて（PC版とスマホ版の両方）に効き、図への寄りは静止画のある9本に効いている。",[18,31,32],{"id":32},"利益剰余金が何の合計なのかが見えない",[14,34,35],{},"株主資本等変動計算書（以下 SS）の列は、資本金、利益剰余金、株主資本合計、純資産合計の順に並んでいた。\n並びとしては合っている。\nただ、利益剰余金が利益準備金と繰越利益剰余金の2つを含む値だということが、この見出しからは読み取れない。\nかといって「利益剰余金合計」と書くと、株主資本合計や純資産合計と言葉が重なって冗長になる。",[14,37,38],{},"そこで、見出しを2段に組むイメージを画像で渡した。\n資本金と株主資本と純資産は2行ぶち抜きにし、利益剰余金の下に利益準備金、繰越利益剰余金、合計の3列を並べる。",[40,41,46],"pre",{"className":42,"code":44,"language":45},[43],"language-text","資本金 | 利益剰余金                           | 株主資本合計 | 純資産合計\n       | 利益準備金 | 繰越利益剰余金 | 合計 |              |\n","text",[47,48,44],"code",{"__ignoreMap":49},"",[14,51,52],{},"最初は、PL の高さを BS にそろえ、SS を、BS と PL を合わせた幅で下に横長に敷く案で動き出した。\n途中で方針を戻し、SS は BS と同じ幅（760）に収め、PL の高さと SS の位置、つながりの線は元のままにした。\n6列と見出し2段が BS の幅に収まり、線も崩れなかった。",[14,54,55],{},"組み替えには副作用が1つあった。\n導入7の台本が「縦の列は四つです」と語っていて、6列の表と食い違う。\n台本を直し、導入7の声だけを合成し直してもらった。",[18,57,58],{"id":58},"見出しの濃さで集計の階層を見せる",[14,60,61],{},"次に気になったのは、CS、BS、PL、SS の4表の表題である。\nもう少し濃くしたかった。\n表題の帯を濃い灰色に白い字へ変えてもらい、表の中の見出しの灰色と見分けがつくようになった。\nSS の見出しは、本体の列と利益剰余金の内訳とで色を分け、左上の角（当期首残高の上）は空欄の白にしてもらった。",[14,63,64],{},"見てみると、2色では足りなかった。\n資本金、利益剰余金合計、株主資本合計、純資産合計は、粒度として階層を持っている。\nその階層どおりに4段の灰色で塗り分けるよう頼み直した。",[66,67,68,81],"table",{},[69,70,71],"thead",{},[72,73,74,78],"tr",{},[75,76,77],"th",{},"濃さ",[75,79,80],{},"見出し",[82,83,84,93,101,109],"tbody",{},[72,85,86,90],{},[87,88,89],"td",{},"いちばん濃い",[87,91,92],{},"純資産合計",[72,94,95,98],{},[87,96,97],{},"2段目",[87,99,100],{},"株主資本合計",[72,102,103,106],{},[87,104,105],{},"3段目",[87,107,108],{},"資本金、利益剰余金合計",[72,110,111,114],{},[87,112,113],{},"いちばん薄い",[87,115,116],{},"利益準備金、繰越利益剰余金（内訳）",[14,118,119],{},"SS を株主資本合計と純資産合計に分けたのに、BS には株主資本合計の欄がなかった。\n今回の設例には、評価・換算差額等のような株主資本以外の項目がないので、2つの合計の違いは見えにくい。\nそれでも段階があることを明示しておけば、後の学習に効くはずだと考えた。\nBS の純資産の部に「株主資本」の段と「株主資本合計」の行を足してもらい、全回で行が合計行へはみ出さないかも確かめさせた。\nNo09 は並列実行で時間切れになったが、単独で流すと通った。\n変更は2つのコミットに分けて入れてもらった。",[18,121,122],{"id":122},"字幕の金額が漢数字で並んでいた",[14,124,125],{},"9時半からのセッションは、スマホ版の No20〜No25（決算3本、決算の確定と繰越、翌期2本）を作るところから入った。\n途中で T 勘定の字切れ（「未払法人税 200」「償却累計額 100」）も見つかり、PC版ごと直してもらった。",[14,127,128],{},"そのあとで字幕に引っかかった。\nBS や CS の表示はすべて万円単位の算用数字なのに、字幕では 468 のような金額が漢数字で出ている。\n万円という単位はそのままでいいので、数字を表に合わせて算用数字にしてほしいと頼んだ。\nIrodori-TTS に入れる文をそのまま表示しているなら、表示用と分けてほしいとも伝えた。",[14,130,131],{},"調べてもらうと、字幕と読み上げの文は分けて扱えた。\n字幕の側でだけ金額を算用数字にし、余計な読点も抜く。\n読点を抜く作業は全35本（約900文）を5体のサブエージェントに割り振って進めてもらい、字幕テスト80件が通った。\n台本と音声には手を入れていないので、合成し直しは要らない。",[14,133,134],{},"ここで1つ罠があった。\n「配送車を一台百万円で」から読点を抜くと、字幕で「一台100万円」と数字が続いてしまう。\nこの文だけ「一台、」を戻してもらった。",[18,136,137],{"id":137},"まとめの回を取引と財務諸表の2枚にする",[14,139,140],{},"PC版の本企画のまとめの回は、いつ作る予定だったのか。\n進めてよいなら進めてほしいと伝えると、筆者の確認が要らない段取りだったので、試作まで作ってもらえた。\n最初の試作は全景のまま、取引ごとに玉が仕訳帳から元帳、試算表、財務四表へ飛んでいく早回しだった。",[14,142,143],{},"動きは狙いどおりだったが、見ていて別の作りを思いついた。\n各取引の回の最後に、①取引と⑥財務諸表だけを並べたまとめの画がある。\nあそこから組めば、仕訳の要素が飛んでいくアニメーションはなくなる。\n代わりに、取引が財務諸表へ与える影響をカウントアップで見せれば、一覧性と見やすさが取れるのではないか。\nそう提案して、2枚の構成に組み替えてもらった。",[14,145,146],{},"カウントアップは、全取引で持ち時間の枠（6秒）に収まった（最長5.2秒）。\n語りを取引の歩みごとに付け直したところで、No01 が二重に数えられ、資産が 500 多く出た。\n最初の文でも机を切り替えていたのが原因で、最初の取引だけは切り替えないように直してもらった。",[18,148,150],{"id":149},"音声合成が止まったので-macbook-に回した","音声合成が止まったので MacBook に回した",[14,152,153],{},"仮の声の合成が、順番待ちのまま進まなくなった。\nIrodori のゲートが「空きメモリが 6GB 未満」（そのときは約 4.2GB）と判定して待っていて、CPU も 87% だった。\n11:57 からずっとこの状態だった。",[14,155,156],{},"MacBook 側では tmux で claude2 というセッションが立ち上がっている。\nそちらに合成を頼めないかと持ちかけた。\ncross-machine-message スキルで依頼文を送ってもらい、Windows 側では受信サーバーを開けて、二重にならないよう順番待ちの合成を止めさせた。\n依頼文には、git の操作とファイルの編集はしないことも書き込んでもらった。\nMac から音声6件（約7分24秒ぶん）が届き、まとめの回は「現金、相手側、合計」と一歩ずつ動く形で、仮の声付きになった。",[18,158,159],{"id":159},"つながりの線を1本ずつ見せる",[14,161,162],{},"各取引には、4つのつながりがあったはずだ。\n合計のアニメーションが終わったあとに、それも1本ずつ見せてほしいと頼んだ。\n説明は要らない。\nつながりがちゃんとあることが見えればいい。",[14,164,165],{},"実際の線は5本だった。\n当期純利益、純資産、現金、税引前当期純利益、営業キャッシュ・フローの順に、合計のカウントアップが終わってから0.5秒おきに1本ずつ出す（各取引の回と同じ順）。\nナレーションは付けず、取引ごとに無音を4秒ずつ足した。\n22取引で、全体は8分52秒になった。",[18,167,169],{"id":168},"cs-のどこに載るかが語られていない","CS のどこに載るかが語られていない",[14,171,172],{},"ここで説明の抜けに気づいた。\n語りには BS と PL の説明はあるが、CS のどこに記載されるかが入っていない。\n現金が動いたとき、その原因を表すのが CS である。\nBS の利益剰余金が動いたとき、その増減のうち利益の中身を表すのが PL である。\n現金が動く取引なら、CS の該当行も語ってほしい。",[14,174,175],{},"語りに CS の行を足し、語っている勘定科目の行を、いつもの薄い黄色で BS、PL、CS のすべてで光らせてもらった。\n今回は Windows のメモリが空いていたので、合成はこちらで流した。",[14,177,178],{},"次に引っかかったのは図のほうだった。\nNo16 の取引の図で、取引先から当社へ向かう矢印の先と、受け取った利息 10 の位置がずれている。\n利息のお金は x 688 から 472 へ動き、矢印の先（当社の右、x≈646）を通り越して当社の左上で止まっていた。\n当社の右上、矢印の先で止まるように直してもらった（No06 と同じ形）。",[14,180,181],{},"ほかの図にも、矢印が別のところに入っているものがあった。\n全部の図を見直すよう頼んだ。\nお金とモノが止まる位置と矢印の先の位置を数値で突き合わせ、あわせて動き終わって矢印が出ている瞬間を撮って目で確かめさせた。\n最初は数値の突き合わせの出力が空で、その原因を確かめるところから始まった。\n全24図（No01〜No22、No24、No25）のうち、おかしかった3図を直した。",[14,183,184],{},"CS の黄色にも抜けがあった。\n利息の支払額が、直接法の側だけ光っていて、間接法の側が光っていない。\n利息の受取額、利息の支払額、法人税等の支払額の3行は、直接法と間接法の両方の表にある。\n直接法の行を光らせるとき、間接法の同じ行も一緒に光るようにしてもらった。",[18,186,188],{"id":187},"字下げを直したのに入ってない","字下げを直したのに「入ってない」",[14,190,191],{},"CS のキャッシュ・フロー増減額は、営業、投資、財務の合計である。\nその3区分を1段下げ、内訳は2段下げたい。\n小計も字下げなしで、営業活動のキャッシュ・フローの見出しと同じ位置に並んでいて、ひどく読みにくかった。\n字下げを3段にしてもらった。",[66,193,194,204],{},[69,195,196],{},[72,197,198,201],{},[75,199,200],{},"段",[75,202,203],{},"行",[82,205,206,214,222],{},[72,207,208,211],{},[87,209,210],{},"字下げなし",[87,212,213],{},"キャッシュ・フロー増減額、期首、期末",[72,215,216,219],{},[87,217,218],{},"字下げ1",[87,220,221],{},"営業、投資、財務の各キャッシュ・フロー",[72,223,224,227],{},[87,225,226],{},"字下げ2",[87,228,229],{},"その内訳と小計（小計は太字のまま）",[14,231,232],{},"ところが、手元の画面では変わっていない。\n「私が見てる図では入ってないんですけど」と画像を添えて返した。\nページを読み込み直して同じ場面を確かめてもらうと、作業していたほうの開発サーバーでは3段になっていた。\n筆者が開いていたのは、別のワークツリー（別のセッションの作業用コピー）の開発サーバーだったようだ。\nそちらには今回の変更がまだ入っていないので、字下げも古いままになる。",[18,234,236],{"id":235},"明日の確認とスマホ版の案c","明日の確認と、スマホ版の案C",[14,238,239],{},"計画書の進捗を更新してもらい、明日筆者が確認する Google タスクを入れてもらった。\nまとめの回のスマホ版は別のセッションで作るつもりで、プロンプトをダウンロードフォルダのテキストファイル（48行）に書き出させた。",[14,241,242],{},"ところが /compact のあと、同じセッションでそのまま始めることになった。\n縦の画の3案（A: 取引と財務諸表、B: 財務諸表だけ、C: 文ごとに切り替え）を撮って並べてもらい、案C で作った。\n途中、指定した時刻と違う場面が写った。\n前に時間切れになった走査のスクリプトが、ページの中でまだ回り続けていたためで、ページを読み込み直して止めてもらった。\nPC版は変更の前後で1画素も変わっておらず、テスト559件が通った。\nCodex のレビューで「スマホ版の冒頭で字幕が隠れる」と指摘され、冒頭の字幕が出るよう直してからコミットしてもらった。",[14,244,245],{},"仕訳の流れを外したまとめの回は、取引ごとのつながりの線と、BS、PL、CS の黄色まで入った。\n取引がどの表のどの行を動かすかは、画面の上で追えるようになっている。\n仕訳帳から元帳へ玉が飛ぶ画を捨てて、それで足りたのか。\nその判定は、明日のタスクに残してある。",[18,247,248],{"id":248},"学び",[250,251,252,256],"ul",{},[253,254,255],"li",{},"字幕と読み上げの文を分けて持っておくと、表示だけを算用数字にしても合成し直しが要らない。",[253,257,258],{},"「直っていない」と言われたら、見ている開発サーバーがどのワークツリーのものかを先に確かめる。",{"title":49,"searchDepth":260,"depth":260,"links":261},2,[262,263,264,265,266,267,268,269,270,271,272],{"id":20,"depth":260,"text":20},{"id":32,"depth":260,"text":32},{"id":58,"depth":260,"text":58},{"id":122,"depth":260,"text":122},{"id":137,"depth":260,"text":137},{"id":149,"depth":260,"text":150},{"id":159,"depth":260,"text":159},{"id":168,"depth":260,"text":169},{"id":187,"depth":260,"text":188},{"id":235,"depth":260,"text":236},{"id":248,"depth":260,"text":248},"dev",null,"財務諸表講座の動画で、株主資本等変動計算書の見出しを集計の階層に合わせて4段の灰色に塗り分け、字幕の金額を算用数字にそろえた。まとめの回は仕訳の流れを外し、取引と財務諸表の2枚とつながりの線で作り直した。","md",{},true,"/fs-summary-animation-ss-header-hierarchy","eurekapu-nuxt4",false,"2026-10-06T00:00:00.000Z",{"title":5,"description":275},"make-diary","2026-10/2026-10-06/fs-summary-animation-ss-header-hierarchy",[287,288,289,290,291],"財務諸表","株主資本等変動計算書","キャッシュ・フロー計算書","動画制作","Claude Code","Frii84-V6WtYXOjU_GkKjHZ3f6s0hDnpvljdp9kldPk",[],[295,299,303,307,310],{"title":296,"path":297,"publishedAt":298},"財務諸表のテキストを節ごとの動画にする：Claude Codeのサブエージェント5体で1〜5章の台本と画をそろえた","/fs-textbook-video-scenes","2026-10-10T00:00:00.000Z",{"title":300,"path":301,"publishedAt":302},"財務諸表の動画で数字のカウントアップをゲーム風に作り込む：花火の作り直しから「浮き出て吸い込まれる＋500」に決めるまで","/fs-summary-video-countup-effects","2026-10-07T00:00:00.000Z",{"title":304,"path":305,"publishedAt":306},"irodori-ttsで「純資産」「減価償却費」の読みを直す：財務諸表講座の動画フィードバック反映ログ","/fs-course-feedback-irodori-reading","2026-10-05T00:00:00.000Z",{"title":308,"path":309,"publishedAt":306},"財務諸表講座の動画をスマホ縦画面に作り直す：縦1列のレイアウトと、見出しを消した財務諸表シーン","/fs-video-mobile-vertical-layout",{"title":311,"path":312,"publishedAt":313},"計算モジュールの動画化：Excel画面再現とマインドマップを分割画面にまとめるまで","/sim-modules-video-split-mindmap","2026-10-11T00:00:00.000Z","https://log.eurekapu.com/og/blog/fs-summary-animation-ss-header-hierarchy.png?v=2026-10-06T00%3A00%3A00.000Z&title=%E8%B2%A1%E5%8B%99%E8%AB%B8%E8%A1%A8%E8%AC%9B%E5%BA%A7%E3%81%AE%E5%8B%95%E7%94%BB%E3%81%A7%E6%A0%AA%E4%B8%BB%E8%B3%87%E6%9C%AC%E7%AD%89%E5%A4%89%E5%8B%95%E8%A8%88%E7%AE%97%E6%9B%B8%E3%81%AE%E8%A6%8B%E5%87%BA%E3%81%97%E3%82%92%E9%9A%8E%E5%B1%A4%E3%81%94%E3%81%A8%E3%81%AB%E5%A1%97%E3%82%8A%E5%88%86%E3%81%91%E3%80%81%E3%81%BE%E3%81%A8%E3%82%81%E3%81%AE%E5%9B%9E%E3%82%92%E5%8F%96%E5%BC%95%E3%81%A8%E8%B2%A1%E5%8B%99%E8%AB%B8%E8%A1%A8%E3%81%AE2%E6%9E%9A%E3%81%A7%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%99&author=Kei%20Komatsu&sig=b0dd4ccb164cf04a",1791766733279]