別表四・五講座の図解を SVG 生成器で作り直す：図解49枚と帳票175枚をギャラリーに並べるまで

朝からのやり取りを並べると、同じ形の質問が何度も出てくる。「これ、進んでますか」「多分止まってますよね」「作られてないじゃないですか」。

答えは毎回ちがった。動いていたこともあれば、本当に止まっていたこともあり、ディスクは新しいのにブラウザのタブだけが古かったこともある。別表四・五講座の図の作り直しは、この日で Phase 2 の仕上げから Phase 3.5 まで進んだ。枚数だけ見れば大きく動いたが、後から効いたのは「できているかどうかを自分の目でどう確かめるか」を決め直したところだった。

朝、レビュー1周目を4つの段に割る

前日の続きで、Phase 2（別表生成器）のレビュー1周目を再開した。 Windows 機の作業ツリーに途中編集が残っていたので、まず stash へ退避させた。そのうえで origin から Codex 側のコミットを fast-forward で取り込んでから始めた。向こうは codex-v2 配下の追加とギャラリーページの修正だけで、こちらの生成器、JSON 正本、public の SVG には触れていない。 2台運用なので、この重なりの確認を毎回はさむ。

指摘を4つの段（A〜D）に割って、段ごとにサブエージェント（opus）を1体ずつ走らせた。段 A は枠線と空欄行、段 B は帯ラベルの折り返しと丸め、段 C は器を担当させた。段 D では、五(二)から五(一)への転記と別表四から五(一)への転記を、縦積みの複票に作り替えさせた。各段の完了通知が来るたびに、上がってきたスクショを自分で開いて見る。報告文だけで OK にしない。これはこの日ずっと守った。

途中で vitest が5件落ちた。中を見ると、どれも本番 instance の旧数値と旧 ID をテスト側に直値で書いてあるものだった。新しい数値へ機械的に置換させたら、formatRate(-3.2828) の純粋関数テストまで巻き込んで書き換えてしまい、そこだけ戻した。「本番データの期待値」と「関数そのものの期待値」が同じファイルに同居していると、一括置換が滑る。

段 D の後にコードレビュー（opus）を通したら、3件の指摘が返ってきた。検算の参照先が不正なときに「空欄なのでスキップ」として無音で通ってしまう。折り返した帯ラベルが帯の高さを超えても例外にならない。バッジのクランプで衝突が復活しても検出しない。どれも壊れているのに黙って通る型だったので、直させた。修正後は SVG が1バイトも変わらず、差分検査も通っている。

数字は関係するものだけ残す

ギャラリーの p28 を見て、図の中の数字について指示を出した。関係のある数字だけ残して、関係のない数字は「×××」で統一する。図の主張に関わらない桁が並んでいると、そこを読もうとして時間を使ってしまう。

これは実装させず、フィードバック台帳に改善事項として書き足させるだけにした（B-6 から B-12 の仮番号）。段 A から D の反映が終わっていない状態で新しい指示を混ぜると、どの指摘がどの成果物に効いたのか追えなくなる。記録の追記でも小さく詰まった。 heredoc の引用符解釈でコマンドが落ちたので、いったん scratchpad にファイルとして書き出してから追記させた。

なぜここだけ洗い替えないのか

ch2 の記事を読んでいて、準資産まわりの説明が足りないことに気づいた。繰越損益金と納税充当金、未納法人税等だけが洗い替えになる理由が、本文のどこにも書かれていない。 2-6 のパターン A と B の説明の直後に、なぜこの2つに分かれるのかを説明する段落を足させた。差分は2行。 Chrome で表示を見ると、パターン B の直後、表の手前に入って崩れもなかった。

確認は SVG のパスではなくページの URL で

Phase 2 の1周目が終わったときに、確認用の一覧として SVG のファイルパスが並んで出てきた。それでは開いて比べられない。 before と after が横並びになるギャラリーのページ URL で出し直させた。

確認の導線をどう渡すかは、一日のうちに何度も出た話だった。 dev サーバーは 3200 番で動いているので、ページの URL さえ渡ればクリックひとつで見に行ける。ファイルパスを渡されると、そこから表示までの手順が全部こちら側の手間になる。

午後、図解49枚を SVG にする

Phase 3 は「図解の SVG 化 → ギャラリーに全部出す」。章ごとに A から F のバッチへ割り、サブエージェントを並列で走らせて 49 枚を出した。上がってきたバッチから順に、親の側で描画し直して全数を目視する。共通ライブラリの細部（タイムライン右端ラベルの余白、注記の折り返し幅、合計行だけの濃淡、貸方のない仕訳行）を直してから、41 枚を一度まとめて再生成した。

ギャラリーには Codex 版の図がオーバーレイで重なる仕組みが入っているので、確認するときは DOM で img[src*="codex"] を隠してから撮る。記事本文の HTML には手を入れていない。 8コミットに分けて push した。

拡大モーダルが横いっぱいに開く

ギャラリーで Codex 版の図をクリックすると、モーダルが画面の横幅いっぱいに広がって、図の全体が一覧できない。 Claude Code 版は縦いっぱいに開いて全体が入る。同じページの同じ図なのに開き方が違うので、まず SVG 側の属性の差を疑った。

調べさせたら、原因は拡大モーダルの側にあった。 縦横比が 1.4 倍を超える縦長の画像は幅優先で開き、縦はスクロールさせる、という判定が入っていた。 720×4712 のような、別の教材から起こした極端に縦長の図を枠に収めると、字が読めなくなる。その対策として入れたものだった。 p28 で比べると、Codex 版は 720×1208 で 1.68 倍、こちらは 720×872 で 1.21 倍。 viewBox・width・height の書き方はどちらも同じで、違っていたのは図の高さだけだった。その高さから出る縦横比が、たまたま閾値の両側に落ちていた。

同じものが2つ並んでいて片方だけ挙動が違うと、つい書き方の差を探しにいく。今回は書き方に差がなく、受け側の分岐が図の縦横比を見ていた。

夕方、帳票175枚と足りない様式

Phase 3.5 は「帳票ページ 175 枚の after を生成器で出してギャラリーに並べる」。波ごとにサブエージェントを5体前後投入し、記入例の JSON を書かせては親が PNG に描いて全数を目視する、という手順を繰り返した。このとき、レビュー前の SVG が台帳で done にならないよう、選別スクリプトに「親が目視した担当だけ done にする」ゲートを入れさせた。これがないと、上がった瞬間に台帳が緑になって、後から見たときに何を確認済みなのか分からなくなる。

途中で仕分けの結果が出た。 175 枚のうち、既存の4様式で描けるのが 90 枚、設例が同じで1枚にまとまるのが 37 枚、新しい様式が要るのが 48 枚だった。足りない様式が 10 種あり、あらかじめ決めておいた中断条件（4種以上なら止めて相談）に当たったので、そこで判断を求められた。

テンプレートを足すか、汎用の図解スキルで書くか

気になったのは、新しい様式を生成器の template として足すのと、汎用の図解スキルの生成スクリプトで書くのとで、本質的な違いがあるのかという点だった。どちらもスクリプトから SVG を吐く前提なので、手で描いて再現性を失う心配は同じようにない。他プロジェクトへの持ち出しやすさで言えば、汎用側で書いたほうがよさそうにも思える。

返ってきた答えは、再現性の面では差がない、というものだった。どちらもスクリプト生成で、手編集は差分検査と書き出し側の lint が拾う。差が出るのは、同じ1枚の中に別表と組めるかどうかだった。新様式が要るページの多くは「引当前の決算書と税金引当前の別表四」「税金勘定の動きと Tax Proof」のように、別表と決算書を1枚に積む構成になっている。生成器の縦積み複票（矢印や箱、番号バッジ）に載せるには、template 側でないと組めない。汎用スキルで書くと、同じページの中で別表部分と決算書部分が2系統に割れる。

納得したので template を足す方針にした。 11 種類の template が入り、テストは 242 件緑、既存の 96 枚は差分なしで通った。その上で第3波の4体（47 枚）を投入し、累計 115 枚まで after が出た。

「まだ作っていません」が残っている

夕方、ギャラリーを見ていて引っかかった。 Phase 2 の生成器で作ると書いてあるはずのページに、「まだ作っていません」の表示が残っている。第5章あたりが該当した。これはその場で片付けさせて、17 件が after 付きになった。

次に別のページを開いて同じことを言ったら、今度は違った。ディスク上には SVG があり、台帳も done になっていて、開いていたタブが古いデータのままだっただけだった。朝から続いていた「進んでますか」の答えが、ここで3つ目に分かれた。動いている、止まっている、画面が古い。どれも同じ見え方をする。

そこで、個別のページを1つずつ聞くのをやめた。このメッセージが残っているのはおかしいので、残らないように全数をチェックしてほしいと伝えて、機械で確認させた。結果は0件。見えていたのは、その日の夜の更新より前のデータだった。

学び

報告文とスクショだけで完了にしない。段ごとに自分で開いて見る手順を崩さなかったのは正解だった
同じものが2つあって片方だけ挙動が違うときは、中身の差より受け側の分岐条件を先に見る。今回は縦横比 1.4 倍という閾値ひとつだった
台帳の done は「上がった」ではなく「目視した」で立てる。ゲートを1つ入れるだけで、後から状態を信用できる
「できていない」には3種類ある。本当に未生成、処理中、表示が古い。1ページずつ聞くより、全数を機械でチェックさせたほうが早い

明日

新様式が要る残りのページについて、template を足す優先順位を決める
「×××」表記の統一（台帳に仮番号で積んだぶん）を実装に落とす

#SVG生成 #図解 #サブエージェント#税務コンテンツ #Claude Code