開発eurekapu-nuxt4

決算書の入門書（2026年版）を裁断してTurso DBに取り込み終えたので、トピック6（貸借対照表のしくみ）から18問のクイズを作って財務諸表クイズページにした。SVGを<BsShikumi>Vueコンポーネント化して、各クイズのhighlightフィールドでマゼンタ強調箇所を制御する仕組みも入れた。

BS/PL のブラケット構造SVG作成

朝はBS/PLのブラケット構造SVGを作るところから始めた。svg-diagramスキルでBSとPLを同じ系統で書き出したら、純資産ボックスの底辺が資産ボックスより上で止まっていた。スキルに「資産と負債+純資産を横並びにする際は図形の高さを揃える」というルールを追加し、純資産ボックスを下に伸ばして底辺を合わせた。

その後、Illustratorからエクスポートした自作SVG（アセット1〜4.svg）をpreview.htmlに取り込む工程に移った。AxisProNフォントを使ったままだったので環境依存で崩れる。3つの処理をまとめて適用した。

  • フォント置換（環境非依存のシステムフォントへ）
  • 「資産・負債・純資産」の円バッジを背景マゼンタ＋白文字
  • 外側パネルの白背景を透明に

マゼンタの色を印刷マゼンタに揃える

最初はsvg-diagramスキルの既定マゼンタを使っていたが、紫寄りに転んでいると指摘を受けた。#ed1e79（CMYK由来の印刷マゼンタ）に差し替え、svg-diagramスキルのパレット定義もこちらに作り直した。

図セットの外周マージン整合ルールをスキルに追加

3枚（BS/PL/CF）を等幅で並べたら、BSだけ左右マージンが詰まって見えた。viewBoxとwidth/heightが揃っていなかった。BSのviewBoxを修正してキャンバス寸法を343.62 × 468.615で統一し、コンテンツ周りに約10pxの余白が左右対称で揃うようにした。

svg-diagramスキルに「14. 図セット（BS/PL/CFなど）の外周マージン整合（必須）」セクションを追加した。同じシリーズの図を並べる際は、viewBoxを揃えてから書き出すルールに固定した。

Phase 1 パイロット - トピック6から18問のクイズ

Turso DBから書籍ID kessansho-kihon-50-2020 のトピック6本文を引いて、Nuxtページとしてクイズを実装した。最初は単一カラムでSVGとクイズが縦に並んでいたが、PCで見るとスクロール量が多い。レイアウト変更を依頼された。

左側に図、右側にクイズを配置してください。Q1が画面縦方向の中央に表示されるようにしてください。回答後はQ2が今度は中央に表示されるようになり、マウスのスクロールを減らしてほしい。

左固定SVG / 右スクロールクイズの2カラムに改修した。Q1が画面中央に来て、回答するとQ2が中央へスクロールしてくる動きにした。

SVGをVueコンポーネント化してハイライト連動

各クイズにhighlightフィールドを持たせ、SVGを<BsShikumi>コンポーネント化した。propsで受け取ったハイライト対象に応じて、該当パスにマゼンタクラスを当てる作りにした。

<BsShikumi :highlight="currentQuiz.highlight" />

初回実装で表示が崩れて、Viteのコンパイルエラーを覗いたら原因が分かった。SVGの<defs><style>をVue SFCのテンプレートに直接書いていたため、Vueテンプレートパーサーが<style>タグを誤解釈していた。CSSをscopedブロックに移して解決した。

ハイライト範囲が広すぎた問題

最初の実装ではallハイライトをQ1/Q12/Q15/Q16に当てていたが、画面を見ると問題と無関係な箇所までマゼンタに染まっていた。

allタイプを除外し、各クイズのハイライト対象を見直した。特にQ1の「B/Sが明らかにするのは」は、当初タイトル文字だけを強調していたが、本質は「資金の運用形態と調達源泉のバランス」なのでbalance（運用形態＋調達源泉の両軸）に再割り当てした。

それに合わせて問題順序も「B/S英語名 → 左側 → 右側 → 明らかにするもの」と易→難に並べ替えた。

下部ボックスをグレー背景に

SVG下部の「何にお金を投資したのか？」「どうやってお金を集めたか？」の2ボックスは常時マゼンタにしていたが、画面で見ると主張が強すぎてクイズのハイライトと喧嘩していた。グレー背景（#e6e6e6）＋黒文字（#333）に落として、マゼンタはクイズ連動時だけが目立つようにした。

Phase 2/3 と SVG タイポグラフィガイド

Phase 2（B/S編 12トピック・236問）が完了したあと、Phase 3（P/L編 トピック18〜26）に進んだ。Agentサブエージェントを並列で起動して3ラウンドに分けた。

  • R1: T18〜T21（4並列） → 73問追加
  • R2: T22〜T25（4並列） → 累計144問
  • R3: T26（1並列） → 9トピック完成

並列展開のあと、memo/2026-05-12/svg-figure-typography-guide.md を新規作成した。フォント階層L1〜L9のpx値・font-weight・用途を表にまとめたガイドだ。初版でSVGの文字が小さくなりがちな原因も書いた。

ガイドを作ったあとはphase2-parallel-tasks.md / phase3-parallel-tasks.md にも階層を反映し、Pl* 9ファイルを3並列で監査・修正した。タイポグラフィガイドの逆流反映で、既存ファイルの文字サイズが新ルールに揃った。

計画書とURL構造

計画書 memo/2026-05-12/kihon-50-2026-update-plan.md を更新した。Phase 1パイロット完了の状態を反映し、TOC + 個別ページのURL構造も決めた。クイズページから貸借対照表のしくみ6に直接飛ぶ動線を廃止し、目次ページ経由でトピック6〜17の一覧に入る形に変えた。

学び

  • SVGの<defs><style>はVue SFCに直貼りすると壊れる。CSSはscopedブロックに移す
  • ハイライトは「広く取りすぎない」が正解。allは逃げ
  • 図セットを並べる前に、viewBox/width/heightを揃える。後から直すと既存の整合が崩れる
  • スキルに新ルールを追加したら、既存ファイルへ逆流反映するまでが1セット