[{"data":1,"prerenderedAt":218},["ShallowReactive",2],{"content-/fs-summary-video-countup-effects":3,"all-pages-for-dir":196,"related-/fs-summary-video-countup-effects":197,"og-image-/fs-summary-video-countup-effects":217},{"id":4,"title":5,"body":6,"category":177,"concepts":178,"description":179,"extension":180,"meta":181,"navigation":155,"ogImage":178,"path":182,"project_name":183,"published":184,"publishedAt":185,"seo":186,"source":187,"stem":188,"tags":189,"todo":178,"unpublished":184,"updatedAt":178,"__hash__":195},"pages/2026-10/2026-10-07/fs-summary-video-countup-effects.md","財務諸表の動画で数字のカウントアップをゲーム風に作り込む：花火の作り直しから「浮き出て吸い込まれる＋500」に決めるまで",{"type":7,"value":8,"toc":164},"minimark",[9,13,17,26,31,34,37,41,44,47,50,53,56,59,62,66,69,72,75,79,82,85,88,92,95,98,101,104,108,111,114,117,125,128,141,144],[10,11,12],"h1",{"id":12},"財務諸表の動画で数字のカウントアップをゲーム風に作り込む",[14,15,16],"p",{},"作り直した花火は、開いた瞬間に肝心の数字（1,070）を覆い隠した。\n派手にするほど、財務諸表の動画でいちばん見せたい金額が読めなくなる。\nこの日は、ゲームっぽさと読みやすさの落としどころを探して、比較ページに案を並べては選び直した。",[14,18,19,20,25],{},"前日までの流れは ",[21,22,24],"a",{"href":23},"/fs-summary-animation-ss-header-hierarchy","まとめの回を取引と財務諸表の2枚で作り直した記事"," にある。",[27,28,30],"h2",{"id":29},"朝のセッションスマホ版の間と字幕の箱","朝のセッション：スマホ版の間と字幕の箱",[14,32,33],{},"朝はスマホ版のまとめの回を見直した。\n現金が取引で動いても、何がどう変わったかを見る時間がまったくない。\nそこで、動いたあとに2拍の間を置くよう頼んだ。\nあわせて、財務諸表を画面いっぱいに広げ、字幕をその上にかぶせる形も試してもらった。\n取引の図がはっきり映る時間は、1回あたり約0.75秒から約1.9秒に延びた。",[14,35,36],{},"ところが、かぶせた字幕の箱が株主資本等変動計算書に常に重なる。\nこれはこれでいまいちなので、全取引で関係ない場所へ移すよう頼み、間ももう少し開けてほしいと伝えた。\n字幕の箱は財務諸表の枠の座標から置き場所を計算する形にしてもらい、キャッシュ・フロー計算書の間接法の列の下の空きに収まった。\n間を延ばすほど、つながりの線から次の取引までの余裕が減る（その時点で最小1.2秒）。\n3拍と4拍で計算させてから延ばし、PC版が変わっていないことは画素の比較で確かめさせた。",[27,38,40],{"id":39},"取引番号の読み上げとメモリ不足での中断","取引番号の読み上げと、メモリ不足での中断",[14,42,43],{},"次に台本を変えたくなった。\nいま何個目の取引なのかを、音声でも「1つ目の取引」や「次の取引です」のように言ってほしい。\n見出しも、小さい取引番号と大きいタイトルを分けず、「取引 No.3　PCの購入」のように1行にまとめたほうがコンパクトになる。",[14,45,46],{},"直し方が分かれる2点を、Claude Code は着手前に確認してきた。\nそれを決めてから台本を組み立て直すと、合成に渡す台本は5段で137文、無音を足す箇所は22になった。\nMac へ合成を頼む準備まで進んだところで依頼を止め、Windows のメモリを調べさせた。\n空きは31.9GB中4.8GBしかなかった。\n再起動することにして、その前にこのセッションの引き継ぎを Downloads のテキストファイルに書き出させた。\n未コミットの変更は、その時点で3ファイルあった。",[14,48,49],{},"引き継ぎ先のセッションでは、このファイルを読ませて残り6手順を片付けた。\nテストを直して通し（90件）、全取引の回で見出しのはみ出しと札の文字あふれを数値で確かめさせた。\nまとめの回の PC 版には、見出し「① 取引 No.3　PCの購入」と札、知らせの文の字幕が出ている。\nスマホ版では、知らせの文の途中で札が No.3 に替わり、取引の画へ切り替わる。\n本番の音声（692秒）の時刻でも同じように切り替わることを確かめ、コミットした。",[27,51,52],{"id":52},"ゲームっぽいカウントアップを3案で比べる",[14,54,55],{},"財務諸表の数字のカウントアップを、ゲームっぽく、派手好きな人に刺さる演出にしたらどうなるかを聞いた。\nClaude Code は3案を作り、いまの演出と並べて動かす比較ページを Chrome で開いた。\n題材は同じ取引（No06 借入600万円）で、本番の動画にはまだ何も入れていない。\nC案の「＋600」は上の行や見出しに重なっていたので、同じ行の数字の左で小さく浮かぶ形に直させた。",[14,57,58],{},"D案の花火は、もっと格好よくしてほしかった。\n「ドン！」というカタカナが出るのもやめてもらい、A案の光の色もまとめの回と同じ黄色にそろえさせた。\n作り直した花火は、開いた瞬間に数字（1,070）を覆って読めなかった。\n花火を数字の後ろに回し、中心を空けて開くように直すと、数字は読めるようになった。\n今度は合計の行の大きい花火が枠の下で切れたので、表示枠を高くした（いちばん詰まった瞬間でも余白は50px）。",[14,60,61],{},"続けて貼り付けた依頼をもとに、C案（RPGのダメージ表示）の改良版「C改：RPGのダメージ表示＋ドンドン」を作ってもらった。\n「＋600」はそのまま残し、数えきったあと、動いた勘定科目の行だけが拍に合わせて2回弾む。\n花火はなく、合計の行は弾ませない。\nカタカナの「ドン！」は消したのに、ドン、ドンという拍は行の動きとして戻ってきた。",[27,63,65],{"id":64},"_1本だけ切り替えられるか","1本だけ切り替えられるか",[14,67,68],{},"C改がいいと思ったので、これで行くことにした。\n気になったのは、全部の動画が一斉に変わるのか、1個だけ変えられるのかという点だった。\n答えは「動画1本ごとに切り替えられる」だった。\n演出の計算は純粋関数の側に足し、描画の側は計算結果を置くだけにしてもらった。\nC改はまとめの回だけに入れ、取引の回はそのままにした。",[14,70,71],{},"コミットしようとすると、Codex のレビューが「減価償却累計額の行は、飛び出す＋／−が逆になる」と止めた。\n符号の検査を全取引に流すと、最後に残った1件は、創立費の行がまだ現れる前の空欄を数字として読めなかっただけで、符号のずれではなかった。\n空欄を0と読むようにし、動画全体をなめる検査のタイムアウトを5秒から60秒に延ばすと、符号は全取引で一致した（減価償却累計額を含む）。",[14,73,74],{},"見てみると、格段に良くなっていた。\nスマホ版にも入っているかが気になったが、台本と机を PC 版と共有しているので、そのまま入っている。\nスマホ版の利息の「−9」と減価償却の「−128」の画でも確かめてもらい、計画書を更新させた。",[27,76,78],{"id":77},"取引の回25本と現金及び預金のafterの箱へ広げる","取引の回25本と、現金及び預金のAFTERの箱へ広げる",[14,80,81],{},"今度は、取引の図の「現金及び預金残高」のAFTERの箱にも同じ演出がほしくなった。\n各取引の動画にはまだ入っていなかったので、期中、決算、翌期の全25本の⑥財務諸表にも入れるよう頼んだ。",[14,83,84],{},"No01 では、AFTERの箱（6.2秒）、BSの現金と資本金（100秒）、CSの株式発行による収入（112秒）に「＋500」が出た。\nただ、取引の回には玉が見えるので、「＋500」と玉が重なる。\n見える玉が溶けきってから「＋500」を出すようにし、弾む拍は数え終わりのまま残した。\nfs のテストは全件（560件）通った。",[14,86,87],{},"スマホ版用には、冒頭の文を1文差し替えた。\nPC版の文ごとの音声キャッシュを写し、差し替えた1文だけを新しく合成させたので、PC版は692秒のまま、スマホ版は694秒になった。",[27,89,91],{"id":90},"_500の出方を4案で比べc案に決める","「＋500」の出方を4案で比べ、C案に決める",[14,93,94],{},"取引の回のAFTERの箱は、まだ物足りなかった。\nカウントアップが始まった瞬間に、数字から「＋500」が上へ浮き出てきて、数え終わると500になる。\nゲームでよくあるあの動きにしたい。\nここは一度で決めず、プレビュー案をいくつか作ってもらった。\n比較ページには4案が、「＋500（No01）」と「−200（No11）」の両方で並んだ。",[14,96,97],{},"D案の「跳ねて浮き上がる」と、C案の「浮き出て、止まって、吸い込まれる」が面白かった。\nC案では、吸い込まれたあとに黄色のハイライトがボン、ボンと光り、吸い込まれる動きとつながっている。\n一方、跳ねて浮き上がるパターンや他の案で光っても、あまり意味が感じられない。\nB案は、自分が最初に言ったシンプルな形だった。",[14,99,100],{},"音声入力が別の語に聞き取った箇所を、Claude Code は「C案のこと」と受け取り、違っていたら言ってほしいと返してきた。\nC案だけは、「＋500」が数字に吸い込まれた瞬間に黄色く弾むので、光る理由がある。\nB案とD案は「＋500」が上へ消えていくだけで、そのあとの光とは関係がない。\n光に意味を感じなかったのはそのためだ、という説明を聞いて、C案に決めた。\n変えるのは取引の回の①のAFTERの箱だけで、⑥財務諸表の行は数字の左に出る今の形のまま残した。",[14,102,103],{},"画を撮らせると、吸い込まれる直前の「＋500」が小さく薄くなり、数字へ落ちていった。",[27,105,107],{"id":106},"取引図の初期位置修正履歴コクピットの並び順","取引図の初期位置、修正履歴、コクピットの並び順",[14,109,110],{},"積み残しを聞くと、作業の残りはなく、あとは計画書に前から載っている自分の確認待ちだけだった。\n次に気になったのは、取引図の初期値の位置である。\nNo16 では、動き出す前のモノ（貸付債権200、お金200、利息10）の置き場所が元の図とずれていた。\n元の図（コクピットの静止版）の位置にそろえるよう頼んだ。\nNo16 の下の段（元本200）に No06 と同じずらしを入れると、書き出し直しで変わったのは No16 の3行だけで済んだ。\n200は「当社」の字から離れ、当社の右から出る位置になった。",[14,112,113],{},"あわせて、債権と債務の札が出る順番も直した。\n債権や債務を持つ図のうち9図、13か所に印を付け、お金やモノが着く時刻に札が出る（消える側は×が付く）ようにした。\nNo16 では、元本のお金が取引先に着く11.5秒まで貸付債権が超薄く、着いた瞬間に現れる。",[14,115,116],{},"修正の履歴は残しておきたかった。\n台帳には13-6〜13-14として、指摘の原文と直し方、確かめ方が記録されていた。\nそれとは別に、自分が出したフィードバックとその直し方はスキルに値すると思ったので、スキル fs-video に「取引図と数字の動き」の決まりとしてまとめさせた。\n途中でツール呼び出しが1つ壊れて参照ファイルの書き込みに失敗し、SKILL.md には要点の1行だけが入っていた。\nどこまで入ったかを確かめさせてから、参照ファイルを書き直させた。",[14,118,119,120,124],{},"最後に、コクピットの動く図9本（No06、10、11、12、14、16、17、18、19）にも同じ順番を入れるよう頼んだ。\nNo08 の作り（押してからお金やモノが着く時刻に債務を出す）を共通の部品にして使い回す方針になった。\n一括で書き換えるスクリプトは、書き出しで ",[121,122,123],"code",{},"\\\\"," が崩れて構文エラーになった（ファイルは何も変わっていない）。\nWrite ツールで書き直して流すと、No06 は書き換わったが No10 で止まった。\nimport の行の形が違っていたので、No10 を確かめてから続け、9本すべてに入った。\n動画用の書き出しが変わらないことと lint を確かめたうえで、コクピットの図を実際に押させ、No11 の取り消しで元に戻るかも見させた。\n本番のサイトには、次のデプロイで反映される。",[27,126,127],{"id":127},"学びメモ",[129,130,131,135,138],"ul",{},[132,133,134],"li",{},"演出を足すたびに、その光や動きが何の結果として起きているかを確かめる。C案を選んだ決め手は、吸い込まれる動きと黄色の弾みがつながっていた点だった",[132,136,137],{},"派手さの案出しは、同じ取引を題材にした比較ページで並べて動かしてから本番に入れる。花火が数字を覆う問題も、合計の花火が枠で切れる問題も、本番に入れる前に見つかった",[132,139,140],{},"演出の計算を純粋関数に寄せておくと、「この動画だけ切り替える」が後から効く",[27,142,143],{"id":143},"残っていること",[129,145,148,158],{"className":146},[147],"contains-task-list",[132,149,152,157],{"className":150},[151],"task-list-item",[153,154],"input",{"disabled":155,"type":156},true,"checkbox"," 計画書に前から載っている「本人の確認待ち」の項目を確認する",[132,159,161,163],{"className":160},[151],[153,162],{"disabled":155,"type":156}," コクピットの図の変更を、次のデプロイで本番に反映する",{"title":165,"searchDepth":166,"depth":166,"links":167},"",2,[168,169,170,171,172,173,174,175,176],{"id":29,"depth":166,"text":30},{"id":39,"depth":166,"text":40},{"id":52,"depth":166,"text":52},{"id":64,"depth":166,"text":65},{"id":77,"depth":166,"text":78},{"id":90,"depth":166,"text":91},{"id":106,"depth":166,"text":107},{"id":127,"depth":166,"text":127},{"id":143,"depth":166,"text":143},"dev",null,"財務諸表講座の動画で、数字のカウントアップをゲーム風の演出に作り変えた。比較ページで3案と改良版、取引図の4案を並べて動かし、まとめの回はRPGのダメージ表示風、取引の回のAFTERの箱は浮き出て吸い込まれる形に決めた。字幕の箱の移動と取引番号の読み上げも直した。","md",{},"/fs-summary-video-countup-effects","eurekapu-nuxt4",false,"2026-10-07T00:00:00.000Z",{"title":5,"description":179},"make-diary","2026-10/2026-10-07/fs-summary-video-countup-effects",[190,191,192,193,194],"財務諸表","動画制作","アニメーション","カウントアップ","Claude Code","zqrpbiVJluxTIpac0mhTMfQ383p_E71ByNy4UF-mUrg",[],[198,202,205,209,213],{"title":199,"path":200,"publishedAt":201},"財務諸表のテキストを節ごとの動画にする：Claude Codeのサブエージェント5体で1〜5章の台本と画をそろえた","/fs-textbook-video-scenes","2026-10-10T00:00:00.000Z",{"title":203,"path":23,"publishedAt":204},"財務諸表講座の動画で株主資本等変動計算書の見出しを階層ごとに塗り分け、まとめの回を取引と財務諸表の2枚で作り直す","2026-10-06T00:00:00.000Z",{"title":206,"path":207,"publishedAt":208},"財務諸表講座の動画をスマホ縦画面に作り直す：縦1列のレイアウトと、見出しを消した財務諸表シーン","/fs-video-mobile-vertical-layout","2026-10-05T00:00:00.000Z",{"title":210,"path":211,"publishedAt":212},"計算モジュールの動画化：Excel画面再現とマインドマップを分割画面にまとめるまで","/sim-modules-video-split-mindmap","2026-10-11T00:00:00.000Z",{"title":214,"path":215,"publishedAt":216},"キャッシュフロー計算書講座の動画をマインドマップ版のトンマナに合わせる：図への寄せ方とExcelを模した図、音声合成のMac委託","/cf-statement-video-mindmap-figures","2026-10-09T00:00:00.000Z","https://log.eurekapu.com/og/blog/fs-summary-video-countup-effects.png?v=2026-10-07T00%3A00%3A00.000Z&title=%E8%B2%A1%E5%8B%99%E8%AB%B8%E8%A1%A8%E3%81%AE%E5%8B%95%E7%94%BB%E3%81%A7%E6%95%B0%E5%AD%97%E3%81%AE%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E3%82%B2%E3%83%BC%E3%83%A0%E9%A2%A8%E3%81%AB%E4%BD%9C%E3%82%8A%E8%BE%BC%E3%82%80%EF%BC%9A%E8%8A%B1%E7%81%AB%E3%81%AE%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%97%E3%81%8B%E3%82%89%E3%80%8C%E6%B5%AE%E3%81%8D%E5%87%BA%E3%81%A6%E5%90%B8%E3%81%84%E8%BE%BC%E3%81%BE%E3%82%8C%E3%82%8B%EF%BC%8B500%E3%80%8D%E3%81%AB%E6%B1%BA%E3%82%81%E3%82%8B%E3%81%BE%E3%81%A7&author=Kei%20Komatsu&sig=c1aacd04dc572b80",1791766733753]