テーブルとpreブロックをSVG図解に一括変換した記録

CF精算表ステップ学習ページ（ch0〜step7）のHTMLテーブルとpreブロックを、すべてSVG図解に置き換えた。6つのサブエージェントが並列で走り、59件のSVGを一気に生成した。

背景: なぜSVGに置き換えたか

ch0.vueにはHTMLテーブルが6つ、preブロックで組んだ仕訳やフロー図が複数あった。問題は3点。

1. テーブルはレスポンシブ対応が面倒で、スマホで横スクロールが発生する
2. preブロックはモノスペースフォントの平坦な見た目で、構造が頭に入ってこない
3. ページごとに見た目がバラバラで、教材としての統一感がない

SVGなら width: 100% でレスポンシブが解決し、色・フォント・レイアウトを完全に制御できる。

グレー8段階のトンマナルール

最初にch0の「現金及び現金同等物の範囲」テーブルをSVG化したとき、タイトルにグレー背景を入れた。ユーザーのフィードバックで方向転換し、以下のルールが固まった。

• タイトル: 黒文字 + 下線（GL3 #D9D9D9）、背景なし
• 外枠: なし。線を減らして背景だけで構造を伝える
• 構造ラベル（カテゴリ名など）: GL1 #F2F2F2 または GL2 #E6E6E6 の背景
• 内容セル: 白背景 #fff で浮き上がらせる

「現金及び現金同等物の範囲」のSVGがお手本になった。ピラミッド型に「現金」「現金同等物」を配置し、中の項目は白カードで列挙する。この構造を全SVGに横展開した。

ch0のテーブル6件 + preブロック → SVG化

パイロットとしてch0.vueから着手。変換対象は以下。

ch0だけで約9件のSVGを手作業で調整しながら確定させ、トンマナが固まった。

6サブエージェント並列で59件を一気に変換

ch0のスタイルが確定した後、Step 1〜7の全preブロックとテーブルをSVGに変換する計画書を作成。Codexレビューで件数ズレ（56→59件）を指摘されて修正した。

実行は6つのサブエージェントを並列起動。

| エージェント | 対象     | SVG件数 |
|-------------|---------|---------|
| Agent 1     | Step 2  | 6件     |
| Agent 2     | Step 3  | 8件     |
| Agent 3     | Step 4  | 19件    |
| Agent 4     | Step 5  | 7件     |
| Agent 5     | Step 6  | 12件    |
| Agent 6     | Step 7  | 3件     |

Step 4が最大規模（19件）で最後まで残ったが、全エージェントが完了するまで数分だった。完了後、全7ステップをブラウザで表示確認。

試行錯誤: ウォーターフォールチャート

Step 2の売掛金・商品・買掛金の増減内訳を可視化するとき、最初は横4列テーブル（期首→増加→減少→期末）で作った。ユーザーから「ウォーターフォールチャートにしてほしい」と指示が入り、棒グラフ風の積み上げ構造に書き直した。

矢印の向きを逆に描いてしまい、指摘されて右向き（→）に修正。タイトル下線とチャート上部の間隔が詰まりすぎていた点も調整した。ウォーターフォールは「数値の積み上がり」が視覚的にわかるので、教材として効果が高い。

試行錯誤: CF仕訳SVGの作成と削除

Step 5で有形固定資産の取得・売却のCF仕訳をSVG化した。しかしユーザーが「直感的でない」と判断し、2件とも削除。代わりに通常の仕訳SVGの「現金預金」行にCF区分ラベルを追加する方針に切り替えた。

CFラベル付き仕訳SVG

全ステップの仕訳SVGで、現金預金が絡む行にマゼンタ背景（ML1 #fae8ff）のサブラベルを追加した。

現金預金  3,000,000
  → 株式の発行による収入（財務CF）   ← マゼンタ背景

仕訳を見た瞬間に「このお金はCF計算書のどこに分類されるか」がわかる。3つのサブエージェントで並列処理し、全ステップに反映。

マゼンタ4段階の追加

NEWバッジ（新規追加行のハイライト）用にマゼンタのカラーパレットを追加した。

グレー8段階だけでは「新しく追加された行」と「元からある行」の区別がつかなかった。マゼンタを1色入れるだけで、注目すべき箇所が一目で浮かぶ。

△→▲の一括置換

マイナス表記が白三角（△）と黒三角（▲）で混在していた。教材全体で黒三角に統一。6件のSVGを一括置換した。視認性が上がり、マイナスだと即座に判別できるようになった。

K表記→円単位への統一

Step 1〜2は円単位（3,000,000）、Step 3以降はK表記（500K）で混在していた。Excelの元データが全て円単位なので、SVGもvueテキストも円に揃えた。4つのサブエージェントで並列処理。

「1,000K」より「1,000,000円」の方が、日本語の教材ではすぐに金額がわかる。

SVG図解スキルの新規作成

繰り返し参照するルールが増えたため、グローバルスキル ~/.claude/skills/svg-diagram/SKILL.md を作成した。グレー8段階とマゼンタ4段階のカラーパレット、タイトルスタイル、レイアウト規則を1ファイルに集約。

今後どのプロジェクトでも「SVGで図を作って」と指示すれば、同じトンマナで図解が生成される。

学び

• SVG変換のようなパターン化された大量作業は、パイロットで1件仕上げてからサブエージェント並列に委任すると速い。59件を手で書いていたら丸1日かかる
• トンマナは最初に決めきれない。パイロットでユーザーと対話しながら固めて、後から一括適用する流れが現実的
• 「直感的でない」と判断したものはすぐ消す。作ったコストに引っ張られて残すと、教材全体の品質が下がる

関連記事

• CF精算表ステップ学習のVueページ化（2026-04-20 前半セッション）