[{"data":1,"prerenderedAt":740},["ShallowReactive",2],{"content-/quiz-cockpit-style-unification":3,"all-pages-for-dir":738,"og-image-/quiz-cockpit-style-unification":739},{"id":4,"title":5,"body":6,"category":720,"description":721,"extension":722,"meta":723,"navigation":681,"ogImage":724,"path":725,"project_name":726,"published":727,"publishedAt":728,"seo":729,"stem":730,"tags":731,"todo":736,"unpublished":727,"updatedAt":724,"__hash__":737},"pages/2026-05/2026-05-09/quiz-cockpit-style-unification.md","クイズ画面のCS/BS/PLをコクピットスタイルに統一しdelta-popupと装飾点線で連携を可視化",{"type":7,"value":8,"toc":709},"minimark",[9,14,22,25,42,45,49,52,64,74,77,91,93,97,104,111,117,259,271,273,277,280,287,294,378,389,391,395,398,454,461,478,481,483,487,490,528,535,579,601,603,606,613,620,622,625,665,667,670,705],[10,11,13],"h2",{"id":12},"_3表がバラバラだった","3表がバラバラだった",[15,16,17,21],"p",{},[18,19,20],"code",{},"/quiz/practice"," のクイズ画面は、財務諸表の表示を BS/PL/CS の3コンポーネントで担っていたが、見た目が三者三様だった。BS は左右2列、PL は上から積み上げ、CS は別レイアウト。それぞれカード枠で囲まれていて、フォントサイズも揃っておらず、画面に並べると「3つ別の画面が並んでいる」ように見えた。",[15,23,24],{},"学習者の視点で見ると、PL の当期純利益が BS の繰越利益剰余金に流れるという縦の連携が、この見た目では伝わらない。同じ世界の数字が3面に映っていることを、見た目から伝えたかった。",[15,26,27,33,34,37,38,41],{},[28,29,31],"a",{"href":30},"/lessons/financial-statements/cockpit-00-summary",[18,32,30],{}," で先に作ってあったコクピット風スタイル（タイトルバー ",[18,35,36],{},"#d1d5db","・テーブルベース・GL階調・カード枠なし・フォント ",[18,39,40],{},"0.825rem","）に、quiz 側の3コンポーネントを丸ごと寄せる方針にした。",[43,44],"hr",{},[10,46,48],{"id":47},"bs-は合計を上内訳を下に組み替えた","BS は「合計を上、内訳を下」に組み替えた",[15,50,51],{},"BS は従来「資産は左、負債純資産は右」の左右2列だった。これをコクピット形式の縦1列に合わせるため、構造を組み替えた。",[15,53,54,55,59,60,63],{},"最上段に",[56,57,58],"strong",{},"資産合計","と",[56,61,62],{},"負債純資産合計","を置いて、その下にブレイクダウンしていく形にした。",[65,66,71],"pre",{"className":67,"code":69,"language":70},[68],"language-text","資産合計 ＝ 負債純資産合計        ← 一番上\n├─ 流動資産合計\n│   ├─ 現金及び預金\n│   ├─ 売掛金\n│   └─ その他の流動資産\n├─ 固定資産合計\n│   └─ ...\n├─ 流動負債合計\n│   └─ ...\n└─ 純資産合計\n","text",[18,72,69],{"__ignoreMap":73},"",[15,75,76],{},"「上から順に内訳を開いていく」読み方に統一した結果、PL/CS と縦軸が揃って画面の視線移動が一方向になった。",[15,78,79,80,83,84,83,87,90],{},"マイナス表記もこのタイミングで全箇所「▲」に統一した。",[18,81,82],{},"-1,000"," と ",[18,85,86],{},"△1,000",[18,88,89],{},"▲1,000"," が3コンポーネントで混在していて、視覚的なノイズになっていた。",[43,92],{},[10,94,96],{"id":95},"cs表示時だけ画面を広げる-全画面が広がってうざい問題","CS表示時だけ画面を広げる — 「全画面が広がってうざい」問題",[15,98,99,100,103],{},"CS は科目数が多く、3列（営業/投資/財務）あるため、デフォルトの ",[18,101,102],{},"max-width: 1024px"," のままだと CS だけ窮屈だった。",[15,105,106,107,110],{},"最初は「CS 表示中はページ全体を 1480px に広げる」実装にしたら、ヘッダー（累積/単体/CS表示ボタン）まで一緒に広がってボタンが間延びした。",[56,108,109],{},"全画面が広がってうざい","という違和感が拭えなかった。",[15,112,113,114,116],{},"ヘッダーは ",[18,115,102],{}," を維持して、財務三表エリア（body）だけ親の枠を突き抜けてブレイクアウトする形に変更した。",[65,118,122],{"className":119,"code":120,"language":121,"meta":73,"style":73},"language-css shiki shiki-themes vitesse-light vitesse-light",".fs-area {\n  max-width: 1480px;\n  margin-left: calc(50% - min(50vw - 1rem, 740px));\n  margin-right: calc(50% - min(50vw - 1rem, 740px));\n}\n","css",[18,123,124,140,161,213,253],{"__ignoreMap":73},[125,126,129,133,137],"span",{"class":127,"line":128},"line",1,[125,130,132],{"class":131},"shFtX",".",[125,134,136],{"class":135},"s4oTP","fs-area",[125,138,139],{"class":131}," {\n",[125,141,143,147,150,154,158],{"class":127,"line":142},2,[125,144,146],{"class":145},"sz8Xr","  max-width",[125,148,149],{"class":131},":",[125,151,153],{"class":152},"sM54T"," 1480",[125,155,157],{"class":156},"stQ0i","px",[125,159,160],{"class":131},";\n",[125,162,164,167,169,172,175,178,181,184,187,189,191,194,196,199,202,205,208,210],{"class":127,"line":163},3,[125,165,166],{"class":145},"  margin-left",[125,168,149],{"class":131},[125,170,171],{"class":145}," calc",[125,173,174],{"class":131},"(",[125,176,177],{"class":152},"50",[125,179,180],{"class":156},"%",[125,182,183],{"class":156}," -",[125,185,186],{"class":145}," min",[125,188,174],{"class":131},[125,190,177],{"class":152},[125,192,193],{"class":156},"vw",[125,195,183],{"class":135},[125,197,198],{"class":152}," 1",[125,200,201],{"class":156},"rem",[125,203,204],{"class":131},",",[125,206,207],{"class":152}," 740",[125,209,157],{"class":156},[125,211,212],{"class":131},"));\n",[125,214,216,219,221,223,225,227,229,231,233,235,237,239,241,243,245,247,249,251],{"class":127,"line":215},4,[125,217,218],{"class":145},"  margin-right",[125,220,149],{"class":131},[125,222,171],{"class":145},[125,224,174],{"class":131},[125,226,177],{"class":152},[125,228,180],{"class":156},[125,230,183],{"class":156},[125,232,186],{"class":145},[125,234,174],{"class":131},[125,236,177],{"class":152},[125,238,193],{"class":156},[125,240,183],{"class":135},[125,242,198],{"class":152},[125,244,201],{"class":156},[125,246,204],{"class":131},[125,248,207],{"class":152},[125,250,157],{"class":156},[125,252,212],{"class":131},[125,254,256],{"class":127,"line":255},5,[125,257,258],{"class":131},"}\n",[15,260,261,83,264,267,268,270],{},[18,262,263],{},"50%",[18,265,266],{},"50vw"," の差で親要素の中央から viewport 中央までのオフセットを取り、ネガティブマージンで親を突き抜ける。CS 非表示時は ",[18,269,102],{}," に戻る。ヘッダーは動かず、body だけがフワッと広がる挙動になった。",[43,272],{},[10,274,276],{"id":275},"delta-popup-数字が変わったら浮き上がる","delta-popup — 数字が変わったら浮き上がる",[15,278,279],{},"数値が変化したことを学習者に伝えるため、変化量を「+1,000」「▲500」と数字の右上に浮上させて消える delta-popup を BS/PL/CS の3コンポーネントに入れた。",[15,281,282,283,286],{},"最初の実装では、流動資産合計や資産合計といった",[56,284,285],{},"集計値の上にも delta-popup が出た","。集計値は内訳科目が動けば自動で動くため、内訳と合計の両方でポップアップが出ると画面が花火大会になり、どこに注目していいか分からなくなった。",[15,288,289,290,293],{},"科目に ",[18,291,292],{},"acct:"," prefix を付けたものだけポップアップを発火するように制限した。",[65,295,299],{"className":296,"code":297,"language":298,"meta":73,"style":73},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003CDeltaPopup\n  v-if=\"row.id.startsWith('acct:')\"\n  :value=\"row.value\"\n/>\n","vue",[18,300,301,310,352,372],{"__ignoreMap":73},[125,302,303,306],{"class":127,"line":128},[125,304,305],{"class":131},"\u003C",[125,307,309],{"class":308},"sHkkW","DeltaPopup\n",[125,311,312,315,318,321,324,326,329,331,335,337,341,344,346,349],{"class":127,"line":142},[125,313,314],{"class":308},"  v-if",[125,316,317],{"class":131},"=",[125,319,320],{"class":131},"\"",[125,322,323],{"class":135},"row",[125,325,132],{"class":131},[125,327,328],{"class":135},"id",[125,330,132],{"class":131},[125,332,334],{"class":333},"senZ8","startsWith",[125,336,174],{"class":131},[125,338,340],{"class":339},"sMJiu","'",[125,342,292],{"class":343},"sdGka",[125,345,340],{"class":339},[125,347,348],{"class":131},")",[125,350,351],{"class":131},"\"\n",[125,353,354,357,360,362,364,366,368,370],{"class":127,"line":163},[125,355,356],{"class":131},"  :",[125,358,359],{"class":333},"value",[125,361,317],{"class":131},[125,363,320],{"class":131},[125,365,323],{"class":135},[125,367,132],{"class":131},[125,369,359],{"class":135},[125,371,351],{"class":131},[125,373,374],{"class":127,"line":215},[125,375,377],{"class":376},"sG7-3","/>\n",[15,379,380,381,384,385,388],{},"集計値（",[18,382,383],{},"total:","、",[18,386,387],{},"subtotal:"," prefix）は静かに動き、個別科目だけが「+1,000」と浮かぶ。視線が個別科目に集まり、その後で合計が連動して動く順番に整った。",[43,390],{},[10,392,394],{"id":393},"_3表をつなぐ装飾点線-match-cue-overlay","3表をつなぐ装飾点線 — match-cue overlay",[15,396,397],{},"3表が別画面に見える問題は構造で半分解決したが、もう半分は「数字の連携」をどう見せるかだった。CockpitMatchCueOverlay.vue を quiz 側に移植して、3組の点線を引いた。",[399,400,401,417],"table",{},[402,403,404],"thead",{},[405,406,407,411,414],"tr",{},[408,409,410],"th",{},"結ぶ箇所",[408,412,413],{},"色",[408,415,416],{},"意味",[418,419,420,432,443],"tbody",{},[405,421,422,426,429],{},[423,424,425],"td",{},"PL 当期純利益 → BS 当期純利益",[423,427,428],{},"オレンジ",[423,430,431],{},"損益が純資産に振り替わる",[405,433,434,437,440],{},[423,435,436],{},"PL 税引前 → CS 間接法税引前",[423,438,439],{},"紫",[423,441,442],{},"間接法のスタート点",[405,444,445,448,451],{},[423,446,447],{},"CS 期末現金 → BS 現金及び預金",[423,449,450],{},"ティール",[423,452,453],{},"期末残高と BS 現金が一致する",[15,455,456,457,460],{},"点線は SVG overlay で、3表の DOM 要素から ",[18,458,459],{},"getBoundingClientRect()"," を取って端点を計算する。3組同時に表示するとうるさいので、シーケンス制御を入れた。",[462,463,464,468,471],"ul",{},[465,466,467],"li",{},"Next/Back で問題を切り替えると全リセット（点線は0本）",[465,469,470],{},"解答後、カウントアップアニメーション（1.5s）が完了",[465,472,473,474,477],{},"そこから 200ms 待って、1本ずつ描画開始（",[18,475,476],{},"t = 1700ms"," で1本目、以後一定間隔）",[15,479,480],{},"カウントアップ中に点線が出ると、数字が動いている最中に注意が分散する。「数字が止まってから線を引く」順序にしたら、視線が「動いた数字 → どこにつながったか」の順で流れた。",[43,482],{},[10,484,486],{"id":485},"キーボードショートカット-マウスから手を離さなくていい","キーボードショートカット — マウスから手を離さなくていい",[15,488,489],{},"クイズを連打する学習者が、毎回ボタンにカーソルを運ぶのが面倒だった。3つだけショートカットを足した。",[399,491,492,502],{},[402,493,494],{},[405,495,496,499],{},[408,497,498],{},"キー",[408,500,501],{},"動作",[418,503,504,512,520],{},[405,505,506,509],{},[423,507,508],{},"←",[423,510,511],{},"前の問題",[405,513,514,517],{},[423,515,516],{},"→",[423,518,519],{},"次の問題",[405,521,522,525],{},[423,523,524],{},"Ctrl+Enter",[423,526,527],{},"解答&解説",[15,529,530,531,534],{},"ボタンには ",[18,532,533],{},"\u003Ckbd>"," でキーラベルを表示して、初見でも気付けるようにした。",[65,536,538],{"className":296,"code":537,"language":298,"meta":73,"style":73},"\u003Cbutton @click=\"next\">\n  次の問題 \u003Ckbd>→\u003C/kbd>\n\u003C/button>\n",[18,539,540,565,570],{"__ignoreMap":73},[125,541,542,544,547,550,553,555,557,560,562],{"class":127,"line":128},[125,543,305],{"class":131},[125,545,546],{"class":308},"button",[125,548,549],{"class":131}," @",[125,551,552],{"class":333},"click",[125,554,317],{"class":131},[125,556,320],{"class":131},[125,558,559],{"class":135},"next",[125,561,320],{"class":131},[125,563,564],{"class":131},">\n",[125,566,567],{"class":127,"line":142},[125,568,569],{"class":376},"  次の問題 \u003Ckbd>→\u003C/kbd>\n",[125,571,572,575,577],{"class":127,"line":163},[125,573,574],{"class":131},"\u003C/",[125,576,546],{"class":308},[125,578,564],{"class":131},[15,580,581,584,585,588,589,592,593,596,597,600],{},[18,582,583],{},"window.addEventListener('keydown')"," で拾って、",[18,586,587],{},"\u003Cinput>"," や ",[18,590,591],{},"\u003Ctextarea>"," にフォーカスがある時はスキップ。Mac 用に ",[18,594,595],{},"Cmd+Enter"," も並列で受ける（",[18,598,599],{},"event.metaKey || event.ctrlKey","）。",[43,602],{},[10,604,605],{"id":605},"担当分のみコミット",[15,607,608,609,612],{},"並行で他の変更（shogi 関連）が走っていたので、コミットは quiz 関連のファイルだけに絞った。",[18,610,611],{},"git add -p"," で1ハンクずつ確認して、cockpit スタイル変換と delta-popup と match-cue overlay とキーボードショートカットの4テーマを4コミットに分割した。",[15,614,615,616,619],{},"作業ログは ",[18,617,618],{},"memo/2026-05-09/quiz-financial-statements-cockpit-style-worklog.md"," に残した。試行錯誤の脇道（最初は全画面ブレイクアウトしていた・delta-popup が集計値で発火していた）も全部書いておいた。同じ画面を半年後に触る時の自分への申し送りになる。",[43,621],{},[10,623,624],{"id":624},"学びメモ",[462,626,627,634,640,646,652],{},[465,628,629,630,633],{},"「全画面が広がってうざい」を初手で実装したら、ヘッダーが間延びしてダサくなった。",[18,631,632],{},"calc(50% - min(50vw - 1rem, 740px))"," のネガティブマージンで body だけ親の枠を突き抜ける形に書き換えたら、ヘッダーは動かず body だけが広がるようになった。",[465,635,636,637,639],{},"delta-popup を全行に出した最初のバージョンは、画面が花火大会になって視線が定まらなかった。",[18,638,292],{}," prefix で個別科目だけに絞ったら、視線が「個別科目で動く → 合計が連動」の順に流れた。",[465,641,642,643,645],{},"match-cue overlay の点線は、カウントアップ中に出すと数字と線が同時に動いて注意が散った。",[18,644,476],{}," まで待って1本ずつ引くようにしたら、視線が一方向に流れた。",[465,647,648,649,651],{},"キーボードショートカットは ",[18,650,533],{}," でボタンに表示しないと存在に気付かれない。実装と告知をセットにした。",[465,653,654,655,83,658,83,661,664],{},"マイナス表記の混在（",[18,656,657],{},"-",[18,659,660],{},"△",[18,662,663],{},"▲","）は、コンポーネントごとに別の人が書くと必ず起きる。共通の formatter に集約してしまうのが結局速い。",[43,666],{},[10,668,669],{"id":669},"次にやること",[462,671,674,684,690,699],{"className":672},[673],"contains-task-list",[465,675,678,683],{"className":676},[677],"task-list-item",[679,680],"input",{"disabled":681,"type":682},true,"checkbox"," delta-popup の浮上速度・滞留時間を、簿記初学者にヒアリングして調整する",[465,685,687,689],{"className":686},[677],[679,688],{"disabled":681,"type":682}," match-cue overlay の3組目（CS 期末現金 → BS 現金）が、画面下までスクロールしないと見えない問題を解決する。スクロール追従するかスナップする",[465,691,693,695,696,698],{"className":692},[677],[679,694],{"disabled":681,"type":682}," キーボードショートカット（← → Ctrl+Enter）を ",[18,697,30],{}," 側にも横展開する",[465,700,702,704],{"className":701},[677],[679,703],{"disabled":681,"type":682}," CS 非表示時の 1024px ↔ CS 表示時の 1480px の切り替えに 200ms の transition を入れて、ジャンプを和らげる",[706,707,708],"style",{},"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 .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 .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}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}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}",{"title":73,"searchDepth":142,"depth":142,"links":710},[711,712,713,714,715,716,717,718,719],{"id":12,"depth":142,"text":13},{"id":47,"depth":142,"text":48},{"id":95,"depth":142,"text":96},{"id":275,"depth":142,"text":276},{"id":393,"depth":142,"text":394},{"id":485,"depth":142,"text":486},{"id":605,"depth":142,"text":605},{"id":624,"depth":142,"text":624},{"id":669,"depth":142,"text":669},"dev","eurekapu-nuxt4 の quiz/practice 画面で BS/PL/CS をコクピット風（GL階調・小フォント・カード枠なし）に書き換え、CS表示時だけ財務三表エリアを1480pxにブレイクアウト。数値変化を浮上させる delta-popup を `acct:` prefix 限定で導入し、PL→BS・PL→CS・CS→BS の3組を点線で結ぶ match-cue overlay とキーボードショートカット（←→・Ctrl+Enter）を仕込んだ作業記録。","md",{},null,"/quiz-cockpit-style-unification","eurekapu-nuxt4",false,"2026-05-09T00:00:00.000Z",{"title":5,"description":721},"2026-05/2026-05-09/quiz-cockpit-style-unification",[732,733,734,735],"Vue","クイズ","アニメーション","簿記","memo","rtxLFjdtX1nHQQ_Ii56XMhX-VY5Vz2k66qvII9HWv64",[],"https://log.eurekapu.com/og/blog/quiz-cockpit-style-unification.png?v=2026-05-09T00%3A00%3A00.000Z&title=%E3%82%AF%E3%82%A4%E3%82%BA%E7%94%BB%E9%9D%A2%E3%81%AECS%2FBS%2FPL%E3%82%92%E3%82%B3%E3%82%AF%E3%83%94%E3%83%83%E3%83%88%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E7%B5%B1%E4%B8%80%E3%81%97delta-popup%E3%81%A8%E8%A3%85%E9%A3%BE%E7%82%B9%E7%B7%9A%E3%81%A7%E9%80%A3%E6%90%BA%E3%82%92%E5%8F%AF%E8%A6%96%E5%8C%96&author=Kei%20Komatsu&sig=9482b88f73eef006",1782528834594]