[{"data":1,"prerenderedAt":520},["ShallowReactive",2],{"content-/miller-to-scroll-layout-conversion":3,"all-pages-for-dir":518,"og-image-/miller-to-scroll-layout-conversion":519},{"id":4,"title":5,"body":6,"category":497,"description":498,"extension":499,"meta":500,"navigation":501,"path":502,"project_name":503,"published":504,"publishedAt":505,"seo":506,"stem":507,"tags":508,"todo":515,"unpublished":504,"updatedAt":516,"__hash__":517},"pages/2026-04/2026-04-23/miller-to-scroll-layout-conversion.md","教育コンテンツのUI改善 — ミラーカラムからスクロール形式へレイアウトを変換した記録",{"type":7,"value":8,"toc":473},"minimark",[9,14,18,22,25,28,33,36,40,43,47,55,58,61,64,219,223,226,230,233,237,252,256,263,267,270,273,288,421,425,429,436,440,443,447,450,453,456,459,462,469],[10,11,13],"h1",{"id":12},"ミラーカラムからスクロール形式へ-教育コンテンツのレイアウト変換","ミラーカラムからスクロール形式へ — 教育コンテンツのレイアウト変換",[15,16,17],"p",{},"CF計算書の基礎知識ページ（boki3/ch0）で、ミラーカラムレイアウトのトピック列を消してスクロール形式に差し替えた。ユーザーからスクリーンショットが3回飛んできて、そのたびにレイアウトを書き直した。最終的にExcel基礎講座にも横展開し、Ch1以降の全チャプターにも適用した。",[19,20,21],"h2",{"id":21},"発端",[15,23,24],{},"ミラーカラムレイアウトは「セクション → チャプター → トピック → スライド」の4列構造で、1枚ずつスライドを切り替えるUIになっている。スライド形式だとチャートの説明が冗長になり、テキストが断片化する。ユーザーから「普通のスクロールコンテンツにしたい」という要望が出た。",[19,26,27],{"id":27},"試行錯誤のプロセス",[29,30,32],"h3",{"id":31},"_1回目-レイアウト全体をstepsレイアウトに差し替え","1回目: レイアウト全体をstepsレイアウトに差し替え",[15,34,35],{},"最初はstepsレイアウト（左サイドバー + スクロールコンテンツ）に丸ごと置き換えた。ユーザーの反応は「違う」。左側のセクション列・チャプター列はミラーカラムの見た目を維持してほしい、中身だけスクロールにしてほしい、とのこと。",[29,37,39],{"id":38},"_2回目-millerviewerのスロットでコンテンツ差し替え","2回目: MillerViewerのスロットでコンテンツ差し替え",[15,41,42],{},"MillerViewerコンポーネントのslotを使い、右のコンテンツ領域（Column 4）だけをスクロールHTMLに差し替えた。これもユーザーの意図とは違った。「チャプター列は残していいけど、トピック列をスクロールでまとめてほしい」。",[29,44,46],{"id":45},"_3回目-singlesectionmodeでトピック列を消す","3回目: singleSectionModeでトピック列を消す",[15,48,49,50,54],{},"MillerViewerは、各チャプターのセクション数が1の場合にトピック列を自動非表示にする",[51,52,53],"code",{},"singleSectionMode","を持っていた。これを利用し、データ側で各チャプターのセクションを1つに統合。トピック列が消え、セクション列 + チャプター列 + スクロールコンテンツの3列構成になった。ここでユーザーからOKが出た。",[19,56,57],{"id":57},"実装した変更",[29,59,60],{"id":60},"stepsレイアウトのスタイル適用",[15,62,63],{},"steps側のch0では、コンテンツ幅・行間・段落間隔をすでに調整してあった。boki3/ch0にも同じスタイルを移植した。",[65,66,71],"pre",{"className":67,"code":68,"language":69,"meta":70,"style":70},"language-css shiki shiki-themes vitesse-light vitesse-light","/* stepsレイアウトから移植した主要スタイル */\n.scroll-inner h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; }\n.scroll-inner h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }\n.scroll-inner p { line-height: 1.8; margin-bottom: 1rem; }\n","css","",[51,72,73,82,141,184],{"__ignoreMap":70},[74,75,78],"span",{"class":76,"line":77},"line",1,[74,79,81],{"class":80},"sxvE3","/* stepsレイアウトから移植した主要スタイル */\n",[74,83,85,89,93,97,100,104,107,111,115,118,121,123,126,128,131,134,136,138],{"class":76,"line":84},2,[74,86,88],{"class":87},"shFtX",".",[74,90,92],{"class":91},"s4oTP","scroll-inner",[74,94,96],{"class":95},"sHkkW"," h2",[74,98,99],{"class":87}," {",[74,101,103],{"class":102},"sz8Xr"," font-size",[74,105,106],{"class":87},":",[74,108,110],{"class":109},"sM54T"," 1.5",[74,112,114],{"class":113},"stQ0i","rem",[74,116,117],{"class":87},";",[74,119,120],{"class":102}," margin",[74,122,106],{"class":87},[74,124,125],{"class":109}," 2.5",[74,127,114],{"class":113},[74,129,130],{"class":109}," 0",[74,132,133],{"class":109}," 1",[74,135,114],{"class":113},[74,137,117],{"class":87},[74,139,140],{"class":87}," }\n",[74,142,144,146,148,151,153,155,157,160,162,164,166,168,171,173,175,178,180,182],{"class":76,"line":143},3,[74,145,88],{"class":87},[74,147,92],{"class":91},[74,149,150],{"class":95}," h3",[74,152,99],{"class":87},[74,154,103],{"class":102},[74,156,106],{"class":87},[74,158,159],{"class":109}," 1.25",[74,161,114],{"class":113},[74,163,117],{"class":87},[74,165,120],{"class":102},[74,167,106],{"class":87},[74,169,170],{"class":109}," 2",[74,172,114],{"class":113},[74,174,130],{"class":109},[74,176,177],{"class":109}," 0.75",[74,179,114],{"class":113},[74,181,117],{"class":87},[74,183,140],{"class":87},[74,185,187,189,191,194,196,199,201,204,206,209,211,213,215,217],{"class":76,"line":186},4,[74,188,88],{"class":87},[74,190,92],{"class":91},[74,192,193],{"class":95}," p",[74,195,99],{"class":87},[74,197,198],{"class":102}," line-height",[74,200,106],{"class":87},[74,202,203],{"class":109}," 1.8",[74,205,117],{"class":87},[74,207,208],{"class":102}," margin-bottom",[74,210,106],{"class":87},[74,212,133],{"class":109},[74,214,114],{"class":113},[74,216,117],{"class":87},[74,218,140],{"class":87},[29,220,222],{"id":221},"右サイドtoc追加","右サイドTOC追加",[15,224,225],{},"スクロールコンテンツの右側に目次（Table of Contents）を追加。セクション見出しへのアンカーリンクで、スクロール位置を把握できるようにした。",[29,227,229],{"id":228},"セクションチャプタータイトルの整理","セクション・チャプタータイトルの整理",[15,231,232],{},"タイトルから冗長な「ch」「0-1」などの接頭辞を削除し、数字だけに整理した。3ファイル（TOC、millerデータ、ch0.vue内のscrollChapters）を一括修正。",[29,234,236],{"id":235},"svgのwidth100追加","SVGのwidth=\"100%\"追加",[15,238,239,240,243,244,247,248,251],{},"SVGのルート",[51,241,242],{},"\u003Csvg>","タグに",[51,245,246],{},"width","属性がなく、ブラウザがintrinsic sizeで小さく描画する問題があった。初期読み込み時に画像が一瞬小さく表示され、リフロー後に正しいサイズになる。全SVGに",[51,249,250],{},"width=\"100%\"","を追加して解消した。",[29,253,255],{"id":254},"steps側のコンテンツをboki3ch0に流し込み","steps側のコンテンツをboki3/ch0に流し込み",[15,257,258,259,262],{},"steps/ch0-1とch0-2の方が内容が充実していた。基礎知識の差分を埋めるため、steps側のテキスト・キーワード・SVG図をboki3/ch0に流し込んだ。会計基準の引用（",[51,260,261],{},"BookkeepingStandardRef","コンポーネント）も3箇所追加した。",[29,264,266],{"id":265},"ch1以降のスクロール変換","Ch1以降のスクロール変換",[15,268,269],{},"Ch1（借入金ライフサイクル）もch0と同じパターンで変換。millerデータのテキストをHTML化し、singleSectionModeでトピック列を消し、右TOCを追加した。",[29,271,272],{"id":272},"チャプター切替時のスクロール位置リセット",[15,274,275,276,279,280,283,284,287],{},"チャプターを矢印キーで切り替えると、スクロール位置が前のチャプターの下部のまま残る問題があった。",[51,277,278],{},"nextTick","だけではブラウザのスクロール復元に負けるため、",[51,281,282],{},"flush: 'post'"," + ",[51,285,286],{},"requestAnimationFrame","の二段構えで対処した。",[65,289,293],{"className":290,"code":291,"language":292,"meta":70,"style":70},"language-javascript shiki shiki-themes vitesse-light vitesse-light","watch(chapterIdx, () => {\n  // flush: 'post' でDOM更新後に発火\n  nextTick(() => {\n    // requestAnimationFrame でブラウザのレイアウト後に再度リセット\n    requestAnimationFrame(() => {\n      scrollContainer.value?.scrollTo({ top: 0 })\n    })\n  })\n}, { flush: 'post' })\n","javascript",[51,294,295,319,324,336,341,353,383,389,395],{"__ignoreMap":70},[74,296,297,301,304,307,310,313,316],{"class":76,"line":77},[74,298,300],{"class":299},"senZ8","watch",[74,302,303],{"class":87},"(",[74,305,306],{"class":91},"chapterIdx",[74,308,309],{"class":87},",",[74,311,312],{"class":87}," ()",[74,314,315],{"class":87}," =>",[74,317,318],{"class":87}," {\n",[74,320,321],{"class":76,"line":84},[74,322,323],{"class":80},"  // flush: 'post' でDOM更新後に発火\n",[74,325,326,329,332,334],{"class":76,"line":143},[74,327,328],{"class":299},"  nextTick",[74,330,331],{"class":87},"(()",[74,333,315],{"class":87},[74,335,318],{"class":87},[74,337,338],{"class":76,"line":186},[74,339,340],{"class":80},"    // requestAnimationFrame でブラウザのレイアウト後に再度リセット\n",[74,342,344,347,349,351],{"class":76,"line":343},5,[74,345,346],{"class":299},"    requestAnimationFrame",[74,348,331],{"class":87},[74,350,315],{"class":87},[74,352,318],{"class":87},[74,354,356,359,361,364,367,370,373,376,378,380],{"class":76,"line":355},6,[74,357,358],{"class":91},"      scrollContainer",[74,360,88],{"class":87},[74,362,363],{"class":91},"value",[74,365,366],{"class":87},"?.",[74,368,369],{"class":299},"scrollTo",[74,371,372],{"class":87},"({",[74,374,375],{"class":102}," top",[74,377,106],{"class":87},[74,379,130],{"class":109},[74,381,382],{"class":87}," })\n",[74,384,386],{"class":76,"line":385},7,[74,387,388],{"class":87},"    })\n",[74,390,392],{"class":76,"line":391},8,[74,393,394],{"class":87},"  })\n",[74,396,398,401,403,406,408,412,416,419],{"class":76,"line":397},9,[74,399,400],{"class":87},"},",[74,402,99],{"class":87},[74,404,405],{"class":102}," flush",[74,407,106],{"class":87},[74,409,411],{"class":410},"sMJiu"," '",[74,413,415],{"class":414},"sdGka","post",[74,417,418],{"class":410},"'",[74,420,382],{"class":87},[19,422,424],{"id":423},"excel基礎講座への横展開","Excel基礎講座への横展開",[29,426,428],{"id":427},"contentsvueのスクロール変換","contents.vueのスクロール変換",[15,430,431,432,435],{},"boki3/ch0と同じ手法でExcel基礎講座のcontents.vueもスクロール形式に変換した。こちらはチャプター列も消す（TOCのchildrenを1つに統合して",[51,433,434],{},"noChapterCol","を発動）仕様。セクション列 + スクロールコンテンツ + 右TOCの3列になった。",[29,437,439],{"id":438},"topvueも同様にスクロール変換","top.vueも同様にスクロール変換",[15,441,442],{},"top.vueも同じパターンで変換。「テキスト→図」の順を全セクションで統一した。",[29,444,446],{"id":445},"svg図のトーンマナー統一","SVG図のトーン&マナー統一",[15,448,449],{},"contents.vueの3つのSVG図を、svg-diagramスキルのデザインルール（グレー8段階、フォントサイズ規則）に合わせて作り直した。",[29,451,452],{"id":452},"コンテンツ一覧テーブルの追加",[15,454,455],{},"「作業スピードを上げる3つの方法」ページの各セクション（基本機能・ショートカット・関数）の直下に、チャプター名（左・rowspan結合）とサブトピック（右）の階層テーブルを追加。全サブトピックにクエリパラメータ付きリンクを設定し、該当ページに直接遷移できるようにした。",[19,457,458],{"id":458},"振り返り",[15,460,461],{},"ミラーカラムのsingleSectionModeという既存機能を見つけたことで、コンポーネントを書き直さずにトピック列だけを消せた。ユーザーの要望を3回聞き直す過程で「セクション列とチャプター列は残す」「トピック列だけスクロール化する」という仕様が固まった。1回目で正解を出そうとするより、スクリーンショットを見ながら方向を修正するフローの方が、手戻りが小さく済む。",[15,463,464,283,466,468],{},[51,465,282],{},[51,467,286],{},"の二段構えは、Vue + ブラウザのスクロール復元が競合する場面で使い回せるパターンとして覚えておく。",[470,471,472],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}",{"title":70,"searchDepth":84,"depth":84,"links":474},[475,476,481,490,496],{"id":21,"depth":84,"text":21},{"id":27,"depth":84,"text":27,"children":477},[478,479,480],{"id":31,"depth":143,"text":32},{"id":38,"depth":143,"text":39},{"id":45,"depth":143,"text":46},{"id":57,"depth":84,"text":57,"children":482},[483,484,485,486,487,488,489],{"id":60,"depth":143,"text":60},{"id":221,"depth":143,"text":222},{"id":228,"depth":143,"text":229},{"id":235,"depth":143,"text":236},{"id":254,"depth":143,"text":255},{"id":265,"depth":143,"text":266},{"id":272,"depth":143,"text":272},{"id":423,"depth":84,"text":424,"children":491},[492,493,494,495],{"id":427,"depth":143,"text":428},{"id":438,"depth":143,"text":439},{"id":445,"depth":143,"text":446},{"id":452,"depth":143,"text":452},{"id":458,"depth":84,"text":458},"dev","CF計算書boki3/ch0のミラーカラムレイアウトをスクロール形式に変換し、stepsのスタイル適用、右TOC追加、SVG表示修正、Excel基礎講座への横展開まで、ユーザーの要望を何度もヒアリングしながら進めた1日の記録","md",{},true,"/miller-to-scroll-layout-conversion","eurekapu-nuxt4",false,"2026-04-23T00:00:00.000Z",{"title":5,"description":498},"2026-04/2026-04-23/miller-to-scroll-layout-conversion",[509,510,511,512,513,514],"レイアウト","ミラーカラム","スクロール","Vue","SVG","UX","memo",null,"zp6yIVbi6tfPtiHml8RE2ZTKV1C_WbkTjyM_mHAIIt8",[],"https://log.eurekapu.com/og/blog/miller-to-scroll-layout-conversion.png?v=2026-04-23T00%3A00%3A00.000Z&title=%E6%95%99%E8%82%B2%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AEUI%E6%94%B9%E5%96%84%20%E2%80%94%20%E3%83%9F%E3%83%A9%E3%83%BC%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%8B%E3%82%89%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E5%BD%A2%E5%BC%8F%E3%81%B8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E5%A4%89%E6%8F%9B%E3%81%97%E3%81%9F%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=2f636f3c1f91cba7",1780786054926]