[{"data":1,"prerenderedAt":328},["ShallowReactive",2],{"content-/fs-video-mobile-vertical-layout":3,"all-pages-for-dir":305,"related-/fs-video-mobile-vertical-layout":306,"og-image-/fs-video-mobile-vertical-layout":327},{"id":4,"title":5,"body":6,"category":285,"concepts":286,"description":287,"extension":288,"meta":289,"navigation":290,"ogImage":286,"path":291,"project_name":292,"published":293,"publishedAt":294,"seo":295,"source":296,"stem":297,"tags":298,"todo":286,"unpublished":293,"updatedAt":286,"__hash__":304},"pages/2026-10/2026-10-05/fs-video-mobile-vertical-layout.md","財務諸表講座の動画をスマホ縦画面に作り直す：縦1列のレイアウトと、見出しを消した財務諸表シーン",{"type":7,"value":8,"toc":264},"minimark",[9,13,17,20,25,33,36,39,42,45,48,51,54,57,61,64,69,72,75,78,81,84,87,90,93,96,100,103,106,116,120,123,130,133,136,139,146,150,153,156,159,166,169,248,251],[10,11,12],"h1",{"id":12},"財務諸表講座の動画をスマホ縦画面に作り直す",[14,15,16],"p",{},"財務諸表講座の動画は、これまで PC の横表示で作ってきた。\n今日は期中取引の1本目（No01）を、スマホの縦表示でも見られるように作り直した。",[14,18,19],{},"縦に並べ替えるところまでは、すぐに形になった。\n困ったのは最後のまとめの場面である。\n縦に4つの表を重ねると、どうしても表が縮む。\n画面の幅は1080しかない。",[21,22,24],"h2",{"id":23},"プレビュー画面を-pc-版とスマホ版に分けた","プレビュー画面を PC 版とスマホ版に分けた",[14,26,27,28,32],{},"最初に頼んだのは、動画そのものではなく、レビューする場所だった。\nプレビュー画面（",[29,30,31],"code",{},"/dev/fs-scene","）の目次は、財務諸表講座の PC 版のトップから始まっていた。\nこれを一番上で「PC 版」と「スマホ版」に分け、その下にチャプター、さらにその下に動画を置く形にしてもらった。",[14,34,35],{},"PC 版のカメラ（寄りと引き）の計算は、1920×764 の画面に固定されていた。\nこれを机の状態ごとに持たせる形に変えてもらい、縦画面（1080×1920）でも寄り引きできるようにした。\nテストは355件が通り、PC 版の見え方は変わらなかった。",[21,37,38],{"id":38},"取引から財務諸表までを縦1列に積む",[14,40,41],{},"最初のスマホ版は、机の配置が PC 版のままだった。\nPC 版なら、取引の右側にほかの段が並んでいても、なんとなく理解できる。\nスマホでは、縦にスクロールしていく見え方のほうがいい。",[14,43,44],{},"そこで、1の下に2、2の下に3と、全部を縦に並べてもらった。\n並びは次のとおりである。",[14,46,47],{},"① 取引 → ② 5つの要素 → ③ 仕訳帳 → ④ 総勘定元帳 → ⑤ 残高試算表 → ⑥ 財務諸表",[14,49,50],{},"段が進むたびにカメラが下へ動くので、画面を下へ送っていくように見える。",[14,52,53],{},"途中で、元帳の枠が全科目ぶんの高さを取っていて、ほとんど空いていることがわかった。\nその回で使う科目の数だけの高さに変えてもらい、No01 では元帳が1段に収まった。",[14,55,56],{},"ただ、財務諸表どうしのつながりを見せる場面と最後のまとめでは、表が小さく映った。\n縦に4つの表を積む作りである以上、表が縮むのは避けられない。",[21,58,60],{"id":59},"最後のまとめの画から要素を1つずつ削った","最後のまとめの画から、要素を1つずつ削った",[14,62,63],{},"ここからは、画面に載せるものを減らしていく作業になった。",[65,66,68],"h3",{"id":67},"取引を外す","① 取引を外す",[14,70,71],{},"まとめの場面（3分10秒あたり）では、取引と財務諸表を一緒に映していた。\nスマホ版では取引をあえて外し、財務諸表だけを画面いっぱいに映すことにした。",[65,73,74],{"id":74},"見出しと字幕も消す",[14,76,77],{},"それでも表は小さすぎた。\nこれでは表示しない方がマシなくらいだったので、最後の部分だけ、上の見出しと下の字幕も取ってみることにした。\nまとめの画では、財務諸表だけが画面全体（1080×1920）に映るようになった。",[65,79,80],{"id":80},"財務諸表の段に入った瞬間から消す",[14,82,83],{},"この見え方は結構いいと思った。\nそこで試しに、⑥ 財務諸表の説明に入った瞬間から見出しを消すことにした。\n取引、5つの要素、仕訳帳、元帳、試算表までは今までどおりにした。\n字幕は専用の帯を取るのをやめ、コンテンツの上にかぶせる形にした。",[14,85,86],{},"⑥ に入ると、見出しと字幕の帯が0.6秒で消え、表がほぼ画面いっぱいに映る。\n字幕は半透明の黒い箱になり、表の上にかぶさる。",[14,88,89],{},"最初は、字幕の箱が CS の下の行（期末残高）に重なっていた。\n財務諸表の段では、カメラが字幕の箱より上だけを映すように直してもらった。",[65,91,92],{"id":92},"上に空いた余白を詰める",[14,94,95],{},"次に気になったのは画面の上だった。\n下では字幕が表にかぶっているのに、上には試算表の空きが映っていた。\nもったいないので、財務諸表の枠の上端を画面の上端に寄せてもらった。\n試算表の空きは映らなくなり、そのぶん表全体が下へずれて、字幕の箱のすぐ上で終わる。",[21,97,99],{"id":98},"帳簿を通って財務諸表に到達しましたをやめる","「帳簿を通って財務諸表に到達しました」をやめる",[14,101,102],{},"画面が片付いたので、最後の「全体を見る」の場面を見た。\nすると、締めのナレーションが気になった。\n取引が帳簿を通って財務諸表に到達しました、という意味のないメッセージだったのである。",[14,104,105],{},"この取引が何だったのか、何がどうこの財務諸表に反映したのかを振り返る文に書き直してもらった。\n新しい ⑧ 全体を見る は、PC 版とスマホ版で共通にした。",[14,107,108,109,112,113,115],{},"ここで事故が起きた。\n別セッションも同じファイル（",[29,110,111],{},"fsScene.ts","）を書き換えていた。\n書き込みが衝突し、ファイルが一度空（0バイト）になった。\nバックアップから復元してもらい、作業が終わるまで ",[29,114,111],{}," に書き込まないよう、別セッションへ連絡させた。\n共有しているファイルは perl でその場書き換えせず、Edit ツールで2か所を当て直す形に切り替えた。\nテストは370件が通った。",[65,117,119],{"id":118},"irodori-で音声を作り直す","Irodori で音声を作り直す",[14,121,122],{},"文が変わったので、音声も Irodori で作り直してもらった。",[14,124,125,126,129],{},"先にコミットして、別セッションの待ちを解いた。\nコミット前の Codex のレビューで、書き出し用の表示（",[29,127,128],{},"capture=1","）だとスマホ版の右側が切れると指摘された。\n1行で直せる指摘だったので直して、38109e26 でコミットした。",[14,131,132],{},"合成は文ごとのキャッシュがある作りで、変わった文だけが作り直される。\n台本を書き出すスクリプトは無かったので、プレビュー画面の「音声の合成に渡す台本」から No01 の8拍分を取ってもらった。\nグリッド検査も OK で、No01 全体が226秒、作り直した拍8は40秒になった。\n音声と台本の食い違いも消え、仮の時刻ではなく声に合わせて画面が動くようになった。",[21,134,135],{"id":135},"別セッションと分担しながら進めた",[14,137,138],{},"今日は同じリポジトリで別セッション（eurekapu-nuxt4-68）も動いていて、セッション間メッセージでやりとりしながら進めた。\n向こうは決算の回（No23）用の変更を進めていて、38109e26 の上に変更を当て直し終えたと連絡してきた。\nそのあとのスマホ版 No01 を1:20、2:03、3:20の3か所で確かめてもらい、崩れは無かった。",[14,140,141,142,145],{},"区切りがついたところで、ここまでの決まりをスキルにまとめてもらった。\n財務諸表講座の動画づくり用のスキルを1本にして、PC 版とスマホ版の決まりは別々の参照ファイルに分けた（コミット 2cb53d2d）。\n引き継ぎのプロンプトも書き出してもらってから、",[29,143,144],{},"/compact"," をかけた。",[65,147,149],{"id":148},"compact-のあとno02no19-へ広げる","/compact のあと、No02〜No19 へ広げる",[14,151,152],{},"引き継ぎのファイルを読ませて再開し、期中取引 No02〜No19 の18本について、スマホ版を作ってもらった。\n直したのは No08 と No09 の ⑧ の2か所で、コミットは 10098d32 になった。",[14,154,155],{},"No02 を見たが、特に違和感はなかった。\nNo19 も問題なかった。\nNo02〜No19 の ⑧ は、要点を1文で言う今の形のままにして、No01 のような振り返りにはそろえないことにした。\nそろえないことは台帳に書いてもらった。",[14,157,158],{},"元帳の段で全体を映すと T 勘定の字が小さい、という指摘が Claude Code から出ていた。\nこちらから出した案のうち、寄ったときに今回動いた科目の T 勘定だけを前に引き出して大きく見せる形を試作させた（コミット ec53c7d5）。\nPC 版は7列で字が読めているので、触らなかった。",[14,160,161,162,165],{},"そのあとは「はじめに」と導入1〜9のスマホ版の試作、導入の回で語っている行を光らせる作業、導入6（キャッシュ・フロー計算書）の MP4 書き出しまで進んだ。\nMP4 は思った以上に解像度が低く見えたので、2倍の解像度（2160×3840）で撮ってから1080×1920に縮める形で書き出し直してもらった。\n字は少しはっきりした。\n1回目の書き出し直しは失敗していたのに、出力を ",[29,163,164],{},"tail"," で絞って読んでいたせいで、終了コードが成功に見えていた。",[21,167,168],{"id":168},"試行錯誤のまとめ",[170,171,172,185],"table",{},[173,174,175],"thead",{},[176,177,178,182],"tr",{},[179,180,181],"th",{},"試したこと",[179,183,184],{},"結果",[186,187,188,197,205,213,221,229,237],"tbody",{},[176,189,190,194],{},[191,192,193],"td",{},"机の配置を PC 版のまま縦画面に収める",[191,195,196],{},"スマホでは縦にスクロールする見え方がいいと判断し、並べ替えへ",[176,198,199,202],{},[191,200,201],{},"①〜⑥ を縦1列に積み、カメラを下へ送る",[191,203,204],{},"縦にスクロールする見え方になった。最後のまとめでは表が縮む",[176,206,207,210],{},[191,208,209],{},"まとめの画から ① 取引を外す",[191,211,212],{},"財務諸表だけになったが、まだ小さい",[176,214,215,218],{},[191,216,217],{},"まとめの画で見出しと字幕を消す",[191,219,220],{},"表が画面全体に映り、見え方は結構よかった",[176,222,223,226],{},[191,224,225],{},"⑥ に入った瞬間から見出しを消し、字幕を箱でかぶせる",[191,227,228],{},"字幕の箱が CS の期末残高の行に重なった。カメラを箱の上までに収めて解消",[176,230,231,234],{},[191,232,233],{},"財務諸表の枠の上端を画面の上端に寄せる",[191,235,236],{},"上の空きが消え、表が字幕の箱のすぐ上で終わる",[176,238,239,245],{},[191,240,241,242,244],{},"締めの文を書き直して ",[29,243,111],{}," を更新",[191,246,247],{},"別セッションと書き込みが衝突してファイルが0バイトに。復元して Edit ツールで当て直した",[21,249,250],{"id":250},"学び",[252,253,254,258,261],"ul",{},[255,256,257],"li",{},"縦に4つの表を積む限り、表は縮む。今日は表を縮めるかわりに、取引、見出し、字幕の帯と、表以外のものを1つずつ画面から外していった",[255,259,260],{},"締めのナレーションは、帳簿の流れをなぞる一般論より、その回の取引が各表にどう載ったかを語るほうが、振り返りとして意味を持つ",[255,262,263],{},"別セッションと同じファイルを触るときは、その場書き換えをやめ、書き込む前に相手へ連絡する",{"title":265,"searchDepth":266,"depth":266,"links":267},"",2,[268,269,270,277,280,283,284],{"id":23,"depth":266,"text":24},{"id":38,"depth":266,"text":38},{"id":59,"depth":266,"text":60,"children":271},[272,274,275,276],{"id":67,"depth":273,"text":68},3,{"id":74,"depth":273,"text":74},{"id":80,"depth":273,"text":80},{"id":92,"depth":273,"text":92},{"id":98,"depth":266,"text":99,"children":278},[279],{"id":118,"depth":273,"text":119},{"id":135,"depth":266,"text":135,"children":281},[282],{"id":148,"depth":273,"text":149},{"id":168,"depth":266,"text":168},{"id":250,"depth":266,"text":250},"dev",null,"PC横表示で作ってきた財務諸表講座の動画No01を、スマホ縦画面（1080×1920）でもレビューできるようにした日の記録。取引から財務諸表までを縦1列に積み、財務諸表の段では見出しと字幕の帯を消した。意味の薄い締めの文は取引の振り返りに書き直し、Irodoriで音声を合成し直した。","md",{},true,"/fs-video-mobile-vertical-layout","eurekapu-nuxt4",false,"2026-10-05T00:00:00.000Z",{"title":5,"description":287},"make-diary","2026-10/2026-10-05/fs-video-mobile-vertical-layout",[292,299,300,301,302,303],"動画制作","スマホ縦動画","財務諸表","レイアウト","Claude Code","j9xc95PnnpWNCi553d5Cr7VjsmwJ4l5aqvx4avMCUzc",[],[307,311,315,319,323],{"title":308,"path":309,"publishedAt":310},"財務諸表のテキストを節ごとの動画にする：Claude Codeのサブエージェント5体で1〜5章の台本と画をそろえた","/fs-textbook-video-scenes","2026-10-10T00:00:00.000Z",{"title":312,"path":313,"publishedAt":314},"財務諸表の動画で数字のカウントアップをゲーム風に作り込む：花火の作り直しから「浮き出て吸い込まれる＋500」に決めるまで","/fs-summary-video-countup-effects","2026-10-07T00:00:00.000Z",{"title":316,"path":317,"publishedAt":318},"財務諸表講座の動画で株主資本等変動計算書の見出しを階層ごとに塗り分け、まとめの回を取引と財務諸表の2枚で作り直す","/fs-summary-animation-ss-header-hierarchy","2026-10-06T00:00:00.000Z",{"title":320,"path":321,"publishedAt":322},"財務諸表講座の動画プレビューにTTSで仮の声を付ける：PR #34 の取り込み、後追いの Codex レビュー、完了とフィードバック欄","/fs-video-tts-narration-merge","2026-10-04T00:00:00.000Z",{"title":324,"path":325,"publishedAt":326},"計算モジュールの動画化：Excel画面再現とマインドマップを分割画面にまとめるまで","/sim-modules-video-split-mindmap","2026-10-11T00:00:00.000Z","https://log.eurekapu.com/og/blog/fs-video-mobile-vertical-layout.png?v=2026-10-05T00%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%82%92%E3%82%B9%E3%83%9E%E3%83%9B%E7%B8%A6%E7%94%BB%E9%9D%A2%E3%81%AB%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%99%EF%BC%9A%E7%B8%A61%E5%88%97%E3%81%AE%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%A8%E3%80%81%E8%A6%8B%E5%87%BA%E3%81%97%E3%82%92%E6%B6%88%E3%81%97%E3%81%9F%E8%B2%A1%E5%8B%99%E8%AB%B8%E8%A1%A8%E3%82%B7%E3%83%BC%E3%83%B3&author=Kei%20Komatsu&sig=74e0a03386d1a14d",1791766732855]