[{"data":1,"prerenderedAt":233},["ShallowReactive",2],{"content-/git-course-sticky-side-by-side-scrollytelling":3,"all-pages-for-dir":212,"related-/git-course-sticky-side-by-side-scrollytelling":213,"og-image-/git-course-sticky-side-by-side-scrollytelling":232},{"id":4,"title":5,"body":6,"category":190,"concepts":191,"description":192,"extension":193,"meta":194,"navigation":195,"ogImage":191,"path":196,"project_name":197,"published":198,"publishedAt":199,"seo":200,"source":201,"stem":202,"tags":203,"todo":191,"unpublished":198,"updatedAt":191,"__hash__":211},"pages/2026-10/2026-10-12/git-course-sticky-side-by-side-scrollytelling.md","Git講座を「左に図、右に解説」のスクロールテリングに作り替え、簿記講座の全20章へ広げた記録",{"type":7,"value":8,"toc":176},"minimark",[9,13,17,26,31,34,37,40,43,46,49,52,55,58,61,64,67,70,73,77,80,83,86,89,92,95,98,101,104,108,116,119,122,125,129,132,159,162,170,173],[10,11,5],"h1",{"id":12},"git講座を左に図右に解説のスクロールテリングに作り替え簿記講座の全20章へ広げた記録",[14,15,16],"p",{},"午前の時点で、Git講座の checkout の回は「次へ」ボタンで進む作りのままだった。\nほかのレッスンと見た目がそろわず、講座一覧にも載っていなかった。\n昼前には、左にターミナルが固定され、右の説明をスクロールすると左でコマンドが1文字ずつ打たれる画面に変わっていた。\nその画面を見て、「こういうレイアウトは何というパターンなのか」と聞いた。\n同じ形でやりたい解説が、ほかにもあったからだ。",[14,18,19,20,25],{},"前日に作った画面再現と音声の話は、",[21,22,24],"a",{"href":23},"/git-terminal-replay-katakana-voice","Git の checkout や reset --hard を画面再現で見せる動画教材づくり","に書いた。",[27,28,30],"h2",{"id":29},"ミラーカラム版にそろえ余白と表を詰める","ミラーカラム版にそろえ、余白と表を詰める",[14,32,33],{},"最初に頼んだのは、Git講座をミラーカラム版にして、ほかの講座とトーン＆マナーを合わせることだった。\n「次へ」ボタンは残してよいが、ミラーカラム版の矢印キーでも切り替えられるようにしてほしい、とも伝えた。\n既存のミラーカラム講座と同じ共通の枠に載せてもらい、講座一覧では「コーディング」に入れた。\n本番ではまだ公開していなかったので、一覧には「ドラフト」扱いで載った。",[14,35,36],{},"開いてみると、見出しの上がかなり空いていた。\n本文エリア上の余白（40px）と、区間の先頭の見出しの上マージン（64px）が重なっていたためである。\nGit講座のページだけ両方を詰めてもらい、見出しの上は116pxから28pxになった。\n画面再現が「次へ」ボタンまで1画面に収まった。",[14,38,39],{},"表にも注文を付けた。\n横スクロールバーを出さず、中央に寄せて本文の max-width をはみ出してよい。\nスクロールさせるのは、閲覧環境の幅が上限に達したときだけでよい。\nClaude Code に全8回の表31個を調べてもらい、PC幅ではどれも横スクロールバーが出なくなった。\n表は本文幅（760px）の外まで広がり、いちばん広い表は1381pxだった。",[27,41,42],{"id":42},"スクロールに合わせて左のターミナルが動く2列へ",[14,44,45],{},"続けて、画面再現をスクロール連動の作りに直してもらった。\n左にターミナルと「中で起きていること」の図を固定し、右の説明を読み進めると、左でコマンドが1文字ずつ打たれてから出力と図が変わる。\n右の目次の列は消し、その幅を2列に回した。",[14,47,48],{},"一つ不具合が出た。\n矢印キーを押したあと、スクロール位置が約24px手前で止まり、1ステップ前へ引き戻されていた。\n直したあとは←→キーが両方向で効き、最後のステップで→を押すと次の区間へ移るようになった。",[14,50,51],{},"動く画面を見て、「控えめに言って最高ですね」と口に出た。",[27,53,54],{"id":54},"このレイアウトの名前",[14,56,57],{},"Claude Code の答えは「スクロールテリング（scrollytelling）」だった。\nその中でも、図を画面に固定して横の説明だけをスクロールさせる形は、「スティッキー・グラフィック（sticky graphic）」や「サイドバイサイド型」と呼ばれる。\n英語なら \"sticky side-by-side scrollytelling\" で通じ、説明の1つ1つを「ステップ」、固定される側を「グラフィック」または「ステージ」と呼ぶ。",[14,59,60],{},"名前が分かったので、作り方を非公開の記事にまとめてもらった。\nほかの解説でこの形を使うときの下敷きにするためである。",[27,62,63],{"id":63},"左のステージが画面の下で切れる",[14,65,66],{},"左のステージは、最初は上半分をターミナル、下半分を「中で起きていること」に分け、全体を広げる形にしてもらった。\nターミナルは高さ465pxになり、中でスクロールしなくなった。\n下半分に空きが出たので、ターミナルに高さを多めに回した（約57:43）。\nところが、図が縦に長い stash の後半のステップでは、下半分が最大で約150pxはみ出した。\n比率で分けるのをやめ、下半分は図の自然な高さにして、残りをターミナルで埋める形に変えてもらった。",[14,68,69],{},"そのあと、自分のブラウザで左のステージの下のパネルが切れているのを見つけて伝えた。\nClaude Code の手元のタブでは収まっていたので、窓の大きさや表示のタイミングによらず収まる作りに直すことにした。\nステージを枠に合わせて縮める計算を入れ、1440×900 の窓で全8回の全ステップを確かめてもらった。",[14,71,72],{},"この確認は一度では通らなかった。\n最初の失敗は、確認スクリプトの待ち時間が短すぎただけだった。\n次に、縮めるときの丸めで5pxはみ出す場面が1つ見つかり、計算に小さな余裕を足した。\n高さ900pxの窓では、いちばん縮む場面が0.55倍になり、切れはしないものの読みにくかった。\n自分の画面の高さ（1214px）では、0.93〜1.00倍でほぼ原寸に収まっていた。\nCodex の指摘を実際のページで確かめて直すと、その場面は0.72〜0.76倍になった。\nそれでもステップ7が数pxはみ出したので、縮めたあとにまだはみ出していれば、はみ出した分だけ縮める2段目の処理を足してもらった。",[27,74,76],{"id":75},"ドラフトを外して公開し音声の操作を付ける","ドラフトを外して公開し、音声の操作を付ける",[14,78,79],{},"ここまで見て、「素晴らしすぎるコンテンツ」だと思えた。\nまだ第1部しかないが、途中でもいいので自分のウェブ上で確かめたかった。\nドラフトを外して公開扱いにしてもらった。",[14,81,82],{},"タブレットで左右がちゃんと出るのかも気になった。\niPad の横向きと縦向きのどちらでも、左右2列で出るようにしてもらった。\n幅390pxのスマホは640px未満なので、これまでどおり縦に積む。",[14,84,85],{},"公開後、ほかの講座の試作で入れていた音声の操作を、Git講座にも付けてもらった。\n前へ／次へが並ぶ帯の左に、読み上げのオンとオフ、速さ（1×／1.25×／1.5×／2×）、「自動で進む」を並べている。\n読み上げが終わると次のステップへ進む。\n音声の再生に失敗したときは、説明の文字数から決めた待ち時間で進む（約70字のステップで10.4秒だった）。",[27,87,88],{"id":88},"簿記講座へ持ち出す",[14,90,91],{},"Git講座の作りを見て、簿記の基礎講座にも使えると考えた。\n自分の書籍を元にした講座なので、左に図を置き、右にその説明を置けば、この形に乗るはずだと思った。\nまず第1章だけ、ミラーカラム版とは別に「ストーリーテリング版」を作ってもらった。",[14,93,94],{},"見ながら2点を直してもらった。\n1点目として、タイトルを本文から外し、前へ／次へのボタンが並ぶ帯の左に移した。\nあわせて、左の図の枠が画面の下で切れないようにした。\n2点目はマゼンタの強調が始まる位置である。\n1番目の説明だけが画面のいちばん上で光っていたので、2番目の要素があるあたりの真ん中から必ず始めるよう頼んだ。\n画面の上から40%の位置で光るようになった。",[14,96,97],{},"第1章を見て、全部この形で見たくなった。\nただ、その前にここまでの内容を実装計画にまとめてもらった。\n実装はサブエージェントにさせ、Claude Code にはメインエージェントとして全体を管理させた。\n計画書が Codex のレビューを通ったあと、実装担当2体を並行で動かし、全20章の巡回検証は3体目に任せた。\n単体テスト15件が通り、全20章が200を返す状態でコミットした。",[14,99,100],{},"まとめの章には、縦に長い図が1枚ある。\nこれを矢印キーで説明と一緒に1、2と送れないか、座標でうまく区切れないかと聞いた。\n→キーで1ステップずつ図の位置が進むようになった。\nあわせて伝えた件では、白い背景に白い矢印と白い箱を描いた図が見えなくなっていた（同じ作りの図はほかに747枚あった）。\n図の背後に薄いグレーを敷いて、見えるようにしてもらった。",[14,102,103],{},"3列目の件は、1回では済まなかった。\nページの下の節を3列目に出す設定をストーリー版から外すと、右側の幅が748pxになり、2列表示の閾値（880px）を下回って縦積みに戻ってしまった。\n閾値を700pxまで下げてもらい、2列を保った。\n最後に、トピック列の緑の下線が→キーで進めた分だけ伸びるようにしてもらった（20→40→60→80→100%）。",[27,105,107],{"id":106},"まとめは左に右は左に沿った画面を","まとめは左に、右は左に沿った画面を",[14,109,110,111,115],{},"同じ日の朝には、Excel講座の動画を分割画面（左にマインドマップ、右に画面）へ移す作業も進めていた（前日の経緯は",[21,112,114],{"href":113},"/sim-modules-video-split-mindmap","計算モジュールの動画化","）。\nあるまとめの区間で、右に「このセクションのまとめ」の表が出ていた。\n章立てのパターンでは、まとめはマインドマップ上で左に出しているべきものなので、右に出す必要はないと伝えた。\n出すならマインドマップのほうを細かく分け、右は Excel だけにしてほしい。\n表をなくすと、2分20秒のあいだ右はずっと Excel の画面になった。",[14,117,118],{},"あとで言い足したのは、右を Excel に限るという意味ではない、という点である。\n以前「Excel で」と言ったのは、Excel で見せられる論点をわざわざ箇条書きにしていたからだった。\n右には左のまとめに沿った画面を出せばよい。\nフォルダの話ならエクスプローラーの画面を出す。\n命名ルールのまとめでは、右にエクスプローラーの画を出し、最後の拍で命名ルールの表に替えた。",[14,120,121],{},"Git講座では左が画面、右が説明だったが、Excel講座の動画では左がまとめ、右が画面になる。",[14,123,124],{},"同じ講座では、ゲシュタルトの法則の図も作り直してもらった。\n元の動画10本を SVG で作り直し、まとまりの強さの順に並べた比較ページを見て、「動画にしてみることで、要するにそれが上書きされるってことがよくわかる」と感じた。\nそこで、章3の頭に新しい区間として組み込んでもらった。",[27,126,128],{"id":127},"windows-と-mac-の分業","Windows と Mac の分業",[14,130,131],{},"音声の合成とデプロイは、この日も Mac 側のセッション（tmux の claude2）に回した。",[133,134,135,139,142,145,148,156],"ul",{},[136,137,138],"li",{},"朝の時点で、頼んであった Git講座の音声合成が Mac で35本終わっていた。Windows への送り返し（音声259件と manifest 35件の計294件）は、Mac 側が本人の OK を待って止まっていた。OK を出すと294件がそろって届いた",[136,140,141],{},"git status の回に書いたフィードバックから、1-0「Git は何をするものか」を独立した回として作ってもらい、その合成も Mac に頼んだ",[136,143,144],{},"昼過ぎ、Windows で別の作業をするとメモリが一杯になりそうだったので、GitHub に push して Mac にデプロイを頼んだ",[136,146,147],{},"Mac からのデプロイは成功したが、バンドルの余裕が前回の約1,300 KiB から898 KiB に減っていた",[136,149,150,151,155],{},"調べると、Mac のビルドには ",[152,153,154],"code",{},"public/"," の静的ファイル一覧（6,226件、259 KiB）が埋め込まれ、Windows のビルドには無かった。今回入ったコードが原因ではなかったので、開発用メモに残した",[136,157,158],{},"簿記講座の読み上げは、全20章分（1,525クリップ）の合成を Mac に頼んだ。明日 Mac で pull して確かめるタスクを、Google タスクに期日 2026-10-13 で登録した",[27,160,161],{"id":161},"学び",[133,163,164,167],{},[136,165,166],{},"Git講座で作った形は、簿記講座では「左に図、右に説明」と言い換えるだけで頼めた。ターミナルが図に替わっても、Git講座と同じ作りで組めた",[136,168,169],{},"画面に収まるよう縮める処理は、丸めの余裕、Codex の指摘、縮めたあとの残りと3回手を入れて、ようやく切れなくなった。確認スクリプトの待ち時間が短いだけの失敗も混じっていた",[27,171,172],{"id":172},"振り返り",[14,174,175],{},"午前の時点で、Git講座の checkout の回は「次へ」ボタンで進んでいた。\n午後には、簿記講座の全20章が左に図、右に説明の形で動いていた。\n残っているのは、簿記講座の読み上げ音声である。\n16:20 の時点で、Mac からの合成の完了報告はまだ届いていなかった。",{"title":177,"searchDepth":178,"depth":178,"links":179},"",2,[180,181,182,183,184,185,186,187,188,189],{"id":29,"depth":178,"text":30},{"id":42,"depth":178,"text":42},{"id":54,"depth":178,"text":54},{"id":63,"depth":178,"text":63},{"id":75,"depth":178,"text":76},{"id":88,"depth":178,"text":88},{"id":106,"depth":178,"text":107},{"id":127,"depth":178,"text":128},{"id":161,"depth":178,"text":161},{"id":172,"depth":178,"text":172},"dev",null,"Git講座の講義ノートをミラーカラム版にそろえ、左にターミナルを固定して右の解説をスクロールで送る作りに変えた。この見せ方の名前（sticky side-by-side scrollytelling）を知って型として扱い、簿記講座の全20章へ広げた。左の図が画面の下で切れる問題の試行錯誤と、まとめを左に置く判断、Mac への音声合成とデプロイの依頼も残す。","md",{},true,"/git-course-sticky-side-by-side-scrollytelling","eurekapu-nuxt4",false,"2026-10-12T00:00:00.000Z",{"title":5,"description":192},"make-diary","2026-10/2026-10-12/git-course-sticky-side-by-side-scrollytelling",[204,205,206,207,208,209,210],"スクロールテリング","sticky side-by-side","Git","簿記","レイアウト","Claude Code","Mac","Ls_rhEBVMN919zuo-EmOebF98h7vHbn0LApl-lF_cLk",[],[214,218,222,226,229],{"title":215,"path":216,"publishedAt":217},"簿記ストーリー講座の図を電子書籍の素材へ差し替える。Illustratorが開いていないように見えた理由と430コマの置き換え","/bookkeeping-story-ebook-figure-replace","2026-10-18T00:00:00.000Z",{"title":219,"path":220,"publishedAt":221},"簿記教材の図解で残高試算表と財務3表を分け、合計残高試算表を正式な5列に作り直す","/bookkeeping-story-trial-balance-layout","2026-10-16T00:00:00.000Z",{"title":223,"path":224,"publishedAt":225},"会計講座の動画にフィードバックを反映した記録：IB配色は数字だけに、財務諸表講座は縦の画と台本の横並びへ","/accounting-course-scene-feedback-ib-color-fs-layout","2026-10-14T00:00:00.000Z",{"title":227,"path":228,"publishedAt":199},"2026年10月12日の開発日記 - 講座を「左に図、右に解説」の型に作り替え、困りごと動画48本をそろえた","/2026-10-12-diary",{"title":230,"path":23,"publishedAt":231},"Git の checkout や reset --hard を画面再現で見せる動画教材づくりと、英字の読み上げをカタカナ台本で直した記録","2026-10-11T00:00:00.000Z","https://log.eurekapu.com/og/blog/git-course-sticky-side-by-side-scrollytelling.png?v=2026-10-12T00%3A00%3A00.000Z&title=Git%E8%AC%9B%E5%BA%A7%E3%82%92%E3%80%8C%E5%B7%A6%E3%81%AB%E5%9B%B3%E3%80%81%E5%8F%B3%E3%81%AB%E8%A7%A3%E8%AA%AC%E3%80%8D%E3%81%AE%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%86%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E4%BD%9C%E3%82%8A%E6%9B%BF%E3%81%88%E3%80%81%E7%B0%BF%E8%A8%98%E8%AC%9B%E5%BA%A7%E3%81%AE%E5%85%A820%E7%AB%A0%E3%81%B8%E5%BA%83%E3%81%92%E3%81%9F%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=a179db8f90256536",1792550155071]