SVG図解を4:3比率から解放する ─ スキルに縦流しルールを追加して記事図解を一括刷新した

S字に折り返す図に引っかかった

genai-ideas シリーズの記事をブラウザで眺めていて、フロー図の番号に目が止まった。①②③と右に進んだステップが、下の段で⑥⑤④と逆走している。到達点が真ん中に来る、S字型のレイアウトだ。

原因は見当がついた。svg-diagram スキルがスライドの4:3比率を維持しようとして、横幅に収まらないステップを下段に折り返している。スライドならそれで正しい。でもこれはWebページをスクロールしながら見る図であって、4:3にこだわる理由がどこにもない。

そこで Claude Code にこう伝えた。「Webインターフェースで確認するスライド形式の図なんだから、縦に流してほしい。上から①②③④⑤⑥。マゼンタの部分が右列に出るなら2列目を使ってもいい」。

figure-02.svg が縦流しに組み変わり、記事ページでの表示も確認できた。マゼンタの遮断ノードは⑤の右列に配置された。

「そもそも2列目は要るのか」を対話で詰める

修正後の図を見て、今度は別の違和感を拾った。2列目に置かれた「クライアントへの直接送信は設計で遮断」というガードノードに、フローから矢印が伸びている。でもこれはフローとして流れる処理ではない。ダウンロード→税務ソフトから出力→ファイル名判別→規定フォルダへ格納→税額読み取り→チャット投稿、という本流に対する「設計上の但し書き」であって、矢印で繋がるステップではない。

自分で最初に「2列目を使ってもいい」と言っておいて、出てきた図を見たら「そもそも2列目が要るのか」という論点に変わった。図は作らせてみないと違和感が見えてこない。

Claude Code に指摘を整理させて、ガードノードは2列目と矢印をやめて、⑤の直下に矢印なしで密着配置する形に落ち着いた。

# Before（S字型 + 2列目ガード）        # After（縦流し + 密着帯）
① → ② → ③                            ①
           ↓                           ↓
⑥ ← ⑤ ← ④                            ②〜⑤
     ↘ [遮断]                          [遮断] ←矢印なしで⑤に密着
                                       ↓
                                       ⑥

ついでに lint の誤検知も1件確認した。BS比例バー図のようなチャート系SVGでは、細いバーセグメントからラベルがあえてはみ出すデザインを「エラー」と誤判定していた。テキストレイアウト lint はカード型図解が対象で、チャート系への適用には制約がある、という位置づけを確認した。

スキルに3ルールを反映し、15記事を Sonnet 5 で一括レビュー

対話で固まったルールを svg-diagram スキルに反映させた。

Webで見る図は4:3比率にこだわらず縦に流す（上から①→②→③...）
フローに属さない注記・ガードノードは矢印で繋がず、密着帯として配置する
幅に余裕があれば2行テキストを1行化する（ただし対句・列挙は分割維持）

反映の途中、スキルファイルに「früher」というドイツ語のタイプミスが混入して直させる一幕もあった。

そのうえで、genai-ideas シリーズの全15記事に新ルールを適用するレビューを Sonnet 5 のサブエージェントで並列に走らせた。進捗報告を眺めていると、想定していなかった検出がいくつか出てきた。

bookshelf-rag の figure-02: シリーズ初の「コの字」レイアウトを検出、縦1列フローに組み替え（マゼンタの強調カードは維持）
monthly-data の figure-02: ルール2の実適用例。注記カードへの矢印を削除して密着帯化
blackbox-csv: 結合すると幅ちょうど（余裕0〜1px）の2件を、安全側で分割維持と判断
skills-vs-custom-gpt / svg-skill: 1行化できるものは修正しつつ、独立した2文や幅制約のあるものは分割維持

「1行化」と「分割維持」の判断が機械的な置換ではなく、各エージェントがルール3の但し書きを個別に適用していたのが良かった。

途中でAPIエラー、仕上げは手動スポットチェック

一括レビューを指示した直後、API が 529 Overloaded を返してセッションが止まった。少し置いてから「直ってますか？続きやってもらいたいんですけど」と聞いたら、そのまま再開できた。起動に失敗していた3記事分のエージェントもリトライで復帰した。

全15エージェント完了後、仕上げの検証をやらせた。

全16ディレクトリの最終 lint とマニフェスト再生成
自動組み替えが入った図（bookshelf-rag、monthly-data、tax-doc-pipeline）の目視スポットチェック

tax-doc-pipeline の figure-02 は密着帯が中央カードと一体化して見えたので、帯を8px下げて境界を作らせた。自動修正を全面的に信用せず、レイアウトが大きく動いたファイルだけ目で確認する運用が、ちょうどいい手間だった。

午後: 記事冒頭にサマリー図を1枚追加

午後は ai-earn-money-delegation の記事に手を入れた。本文を読み切らないと要点が掴めない構成だったので、冒頭にまとめの図を1枚作らせた。

注文はこう出した。「記事の要点を一文サマリーしたメッセージラインと、この記事が問うべき問い・解くべき問いを特定して、それに対する答えを図にしてほしい」。

figure-03.svg として、機械検証（XMLエスケープチェック＋テキストレイアウト lint）→3枚の読み込み確認→スクリーンショット目視、まで通して完了。はみ出しも重なりもなく、午前に固めた縦流しルールがそのまま新規作成にも効いていた。

学び

スライド用のデザインルールをWeb表示に流用すると、4:3比率の維持がS字レイアウトという歪みを生む。媒体が変わったら比率の前提から疑う
「2列目を使ってもいい」と自分で言った案でも、出てきた図を見ると論点が変わる。図の設計は一度作らせてから対話で削る方が速い
フローに属さない注記に矢印を付けると「処理の一部」に見えてしまう。矢印は接続の意味論を持つので、但し書きは密着配置で表現する
対話で固めたルールをスキルに反映→サブエージェント並列で既存資産に遡及適用、という流れが1セッションで回った。ルール改善の効果が15記事ぶん即座に回収できる
一括自動修正のあとは、レイアウトが大きく動いたファイルだけ目視する。全件確認は要らないが、ゼロ確認は危ない