簿記3級勉強法ページ大規模改修と22取引AnimatedSFC並列量産
午前9時台にショートカット追加という軽い修正から始まったセッションが、昼をまたいでSFCの量産ラインになった。2つのセッションで動いた変更量をまとめる。
09:16 矢印キーショートカットを追加
簿記3級ノートの note.vue レイアウトに、←→ キーでページ移動するショートカットを追加した。auto-pager の下にヒント表示も置いた。操作説明を書かなくても矢印が視界に入れば使い方が伝わる。
09:18 study-method.vue の全面改修
「勉強法ページ」として公開していたコンテンツを、音声入力を使いながらリアルタイムで修正計画書に落とし、論点ごとに改修した。計画書は「修正前／修正後」のテーブル形式で作り、変更の差分を都度確認しながら進めた。
主張の変換（論点1）
「アウトプットしまくる暗記中心」という主張を「学習方法と特性のミスマッチが原因」に変えた。「なぜ落ちるか」を先に説明してから「だからこの学習法を選ぶ」という構造に切り替えたことで、読者が自分の状況に当てはめやすくなった。
topics-list の階層化（論点2・3）
タイトルと説明が同一行に並んでいたリストを、タイトル行と説明行を別行にしてインデントを加える構造に変えた。HTML は触らず CSS だけで再現できる設計を選び、全39ファイルに一括適用した。HTML を触ると記事数分の手作業が発生するが、CSS 1クラスで吸収できればゼロコストで揃う。この発想自体は新しくないが、「対象ファイル数を先に数えてからアプローチを選ぶ」という順序が大事だと再確認した。
SVGファネル図の作成（論点4）
合格者の分解フローを SVG ファネル図で表現した。設計方針は「3秒で主張が読めること」で、合格者ラインをマゼンタで強調して視線を誘導する構成にした。
図を作る過程で、manhattan routing（直角コネクタ）のルールを svg-diagram スキルに書き加えた。SVGで矢印を引くとき、斜め線を使うと概念の階層関係が視覚的に壊れる。コネクタは必ず水平・垂直の折れ線で引くというルールを明文化しておかないと、次回また同じ判断をやり直すことになる。スキルへの追記は作業の副産物だが、再現性という点ではメインの成果と同じ価値がある。
合格率推移チャートの追加
2002年から統一試験・ネット試験の合格率データを収集してチャートを作成した。「試験難度の変遷」を時系列で示すことで、現在の合格率が文脈のなかでどこに位置するかを読者が判断できるようにした。
サイドバーの6フェーズ構成への拡張
index.ts のデータ定義を変更し、レイアウト側で動的にフェーズを展開する実装に切り替えた。フェーズ数がハードコードされていると、コンテンツが増えるたびにレイアウトを触る必要が生じる。
.lead 文字色の一括変更
全25ファイルの .lead クラスに当たる文字色を var(--fg-sub) から var(--fg)（黒）に切り替えた。サブカラーだと冒頭の導入文が本文より薄く見え、読者が読み飛ばす可能性がある。一括置換は Grep で対象を確認してから実行した。
13:39 22取引 AnimatedSFC の並列量産
午後のセッションは引き継ぎドキュメント（memo/2026-05-05/multi-transaction-animation-progress.md）を読み込むところから始めた。前回セッションで到達した状態を確認し、残タスクを把握してから動かした。
Phase 1: 基準SFC 3個の切り出し
no01・no02・no07 の3ファイルを基準SFCとして先に整備した。no07 はリンゴグループに translate(43 0) が残っていたため、座標値に直接 +43 を加算して正規化した。SVG の transform が積み重なっているファイルをテンプレートに使うと、派生ファイルで座標がずれる事故が起きる。量産前に一度スクリーニングする手間が後の修正コストを下げた。
Phase 2: 並列エージェント6本で残19ファイルを作成
取引をパターン A〜F の6グループに分類し、エージェントを6本並列で投入した。autonomous-loop-dynamic でウェイクアップしながら完了状況を監視し、22個が全揃いするまで約45分かかった。
エージェントが作業中にターミナルを眺めながら、完了通知を受け取るたびにファイルを確認した。並列で動かしていると「どれが終わったか」の把握が追いつかなくなるが、引き継ぎドキュメントにチェックボックスを用意しておくと照合が楽になる。今回の引き継ぎドキュメントはその形式だったので、通知を受け取るたびにチェックを入れながら追えた。
Phase 3: 試作ページをSFCベースに書き換え
22個が揃った時点で、試作用ページのインポート元をSFCに切り替えた。動作確認後、ユーザーフィードバック待ちでループを終了した。
振り返り
今日は「CSS一括適用 vs HTML変更」の判断と、「スキルへの副産物追記」の2点が印象に残った。
対象ファイル数が増えるほど、変更の影響範囲を局所化する設計が効いてくる。39ファイルに手を入れるとなれば、CSSだけで吸収できるかを最初に検討する価値がある。
manhattan routing のルール追記は10分もかからなかったが、「SVGで直角コネクタを使う理由」が言語化されて残った。作業ログは消えるが、スキルに書いた内容は次のセッションでも参照される。