簿記3級26章をHTMLで量産する：サブエージェント並列とCodex統合レビューで一日仕上げた話

簿記3級の全26章をHTML解説ページに起こすパイプラインを一日で回した。サブエージェントを6並列・17並列で走らせて章を量産し、Codex GPT-5.5に統合レビューをかけて致命バグを潰す。並列化で詰まった3件はリトライで全救出。最後に目次のレイアウトをCSS subgridに切り替えて、列ごとに散らばっていたサブグループの2段目ヘッダー位置を一直線に揃えた。

やったこと（時系列）

中学・高校レベルの参考書を題材に、章ごとのHTML記事を memo/2026-05-01/ 配下に量産した。最初は1章ずつ手で書いていたが、3章目あたりで「これは並列化しないと夜が明ける」と気付いて方針を切り替えた。

ページ2「①入門・複式簿記の基本」（intro-double-entry.html）を手で書いた
ページ3「②現金・通貨代用証券・現金過不足・小口現金」（cash-3-topics.html）も手で書いた
ページ4〜9（預金/商品売買/手形/固定資産/純資産/決算の全体像）を6並列サブエージェントで一気に生成
ページ10〜26の17章を17並列サブエージェントで生成（API Overloadで3件失敗→リトライ全成功）
chapter-generation-prompt.md（生成指示書）と html-svg-article-conventions.md（規約ドキュメント）をサブエージェントに併用させた
index.html（目次）を3列横並び＋CSS subgridに改修
共通CSS/JSを _layout.css / _layout.js に抽出してコンポーネント化
パンくず「蔵書」を削除（同じindex.htmlを指して冗長だった）
SVG拡大モーダル（クリック＋ESCキー閉じ）を全26ページに統一実装
Codex GPT-5.5の統合レビューを複数回かけて致命バグを5種類発見・修正

サブエージェント並列化の詰まりどころ

17章を一斉に投げた瞬間、3件が API Overloaded で落ちた。残りの14件は無事に完走していたので、失敗した3章だけを再起動でリトライしたら全部通った。並列度を上げるほどスループットは伸びるが、Anthropic API側のレート制限に当たる確率も上がる。「失敗章だけ拾い直す」運用を最初から想定しておくと精神衛生がいい。

サブエージェントには2つのドキュメントを必ず渡した。

chapter-generation-prompt.md：章単位の生成プロンプト（出力フォーマット・問題数・SVG使用ルール）
html-svg-article-conventions.md：HTML/SVG共通規約（クラス名、SVGモーダルの実装規約、配色）

これを渡さずに「いい感じに作って」と頼むと、章ごとに見出しレベルがズレたりSVGの色が揃わなかったりする。規約ドキュメントが揃っていれば、サブエージェントは規約通りに書く。 これは今日いちばんの学びだった。

SVG `<text>` の中で `<strong>` が爆発した

SVGの <text> 要素の中に <strong> や <em> を入れたら、ブラウザのSVGパーサーがそこで止まって以降のSVGが描画されなくなった。Chrome DevToolsで「ここでパースエラー」と教えてくれて初めて気付いた。SVGはXMLなので、HTMLのインライン要素を勝手に解釈しない。

<!-- NG: SVGパーサーが止まる -->
<text x="10" y="20">この勘定は<strong>負債</strong>です</text>

<!-- OK: HTMLタグを除去、強調は <tspan font-weight="bold"> で表現 -->
<text x="10" y="20">この勘定は<tspan font-weight="bold">負債</tspan>です</text>

26章ぶんのSVGに混入していたので、grep一発で全部 <tspan> に書き換えて解決した。

目次のCSS subgridで「2段目のヘッダー位置を揃えたい」が3回伝わらなかった

目次ページ（index.html）のレイアウト指示で、ユーザーの意図を3回取り違えた。

1回目: 「2段にして」→ 上下2段の縦積みにした → 違う
2回目: 「列を2列にして」→ 2列横並びにした → 違う
3回目: 「もっとキレイに揃えて」→ 余白を調整した → 違う

ようやく4回目で「3列横並びにしたうえで、各列の中で サブグループの2段目ヘッダーが横一直線に揃ってほしい」が伝わった。各列内で「グループ1の項目数」「グループ2の項目数」がバラバラなので、普通のflex/gridだと段が揃わない。これを解決するのがCSS subgridだった。

.toc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto;
}
.toc-column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

親グリッドが定義した行を子グリッドが継承するので、列をまたいで「2段目のヘッダー」が同じ行に乗る。subgridがなかった時代はJSで高さ計算して揃えていたらしいが、CSSだけで一行も書かずに揃う。気持ちよかった。

TOCの右配置位置を `calc(50% + 460px)` に微調整した

記事本文の右側に固定表示するTOCを position: fixed; left: calc(50% + 460px) で配置した。本文の最大幅が900pxなので、中央から+460px右に置くと本文の右端ぴったりに張り付く。right: 20px で固定すると本文幅が変わったときに本文と重なるので、本文中央からの相対位置で指定するのが正解だった。

Codex GPT-5.5の統合レビューが致命バグを5種類見つけた

26章ぶんを全部書き終えてから、Codex GPT-5.5に「全章まとめてレビューして。瑣末なクソリプはするな。致命的な点だけ指摘しろ」を投げた。返ってきた指摘がどれも本物だった。

equity.html で h3 の id がTOCのリンク先と入れ替わっていた（クリックすると別の節に飛ぶ）
仕訳例の借方・貸方の金額計算ミス（手書きで写経したときに桁を間違えた）
問題分類のミス（「現金過不足」の例題が「商品売買」の章に紛れていた）
期間計算の誤り（決算日を含めて計算していた）
各章の冒頭で「本記事で整理する大きな論点は◯つあります」の数字が、実際の節数と合っていない

最後の論点数の不整合は、26ファイル全部で起きていた。grepで全件抽出して、節数と一致しているかを照合し、ずれていた章を一括修正した。人間が26ファイルの数字を目視照合するのは無理。 Codexに「全部数えろ」と頼むのが速い。

Codexがサンドボックスでファイル読めずプランをプロンプトに直接埋め込んだ

最初Codexに「.claude/plans/ のプランファイルをレビューして」と頼んだら、サンドボックス権限でファイル読み取りに失敗した。仕方ないのでプランの中身を全部プロンプトに直接コピペして再実行したら通った。今後は最初からプロンプトに埋め込む運用にする。

重複検討の4組を別ファイルに退避した

Codexから「章17と章24、章11と章20、章11と章21、章10と章22で論点が重複している」と指摘が来た。今日の作業範囲では統合判断ができなかったので、検討メモを memo/2026-05-02/duplicates-review.md に切り出して明日の自分に投げた。

章17（その他の収益・費用）と章24（決算整理：収益費用の見越し繰延）を統合するか分離維持するか判断
章11（試算表）と章20（精算表）の重複部分を整理
章11（試算表）と章21（決算振替仕訳）の前後関係を再検討
章10（伝票会計）と章22（補助簿）の境界を引き直す

重複検討4組（17/24, 11/20, 11/21, 10/22）の統合・分離判断
簿記3級の章間リンク（前章・次章ボタン）を全26ページに追加
各章の「練習問題」セクションを問題集として独立ページ化するか検討
SVGモーダルでスマホ縦持ちのときのピンチズーム対応

今日の学び

規約ドキュメントを揃えてからサブエージェントを起動する。 プロンプトに chapter-generation-prompt.md と html-svg-article-conventions.md を読ませた章は揺れがゼロだった
API Overloadは前提として組む。 17並列で3件落ちる程度は誤差。失敗章だけ拾い直す運用にする
Codex GPT-5.5の統合レビューは「全件数えろ」系のチェックで価値が出る。 h3 idの入れ替わりや論点数の不整合は人間の目視では絶対拾えなかった
CSS subgridは「列をまたいで行を揃えたい」の決定打。 JSで高さ計算するより一段クリーンに書ける
SVG <text> の中にHTMLタグを入れない。 強調は <tspan font-weight="bold"> で表現する