SVG-diagramスキルに ①②③ の中央寄せとカード下パディングのルールを追加

この記事のポイント

カード左に大きく置いた ①②③ の縦位置が、rect の中央から 8〜10px 上にズレていた
3行の本文を入れたのに rect の height が 72 のままで、最終行の descender が下端から 1px しか空いていなかった
ルールを本文に埋め込んだだけでは再発するので、svg-diagram スキルの SKILL.md §4.5 に節を新設した
追加後、同じセッションで tsukumi 記事の全 17 枚 + 新規 2 枚を検証・修正、翌昼のセッションで別記事 ai-era-dismantle-division-of-labor の 6 枚も新スキル規律で作り直した

朝、tsukumi-backoffice-ai-seminar-draft の記事に §0.5「AIエージェント導入の『7つの壁』と本セミナーの前提」を差し込み、対応するSVG図2枚 (slide-00b-seven-walls.svg / slide-00c-five-views.svg) を Claude Code に描かせた。カードの左に大きな①②③〜⑦を並べる意匠で、パッと見は成立している。

出来上がりを見て気づいたのは、①の重心がカード上端から 10px 弱の位置に載っていることだった。カード高さが 72px なので中心は y=180 相当のはず。数字を目で追うと、視覚重心が y=170 前後まで浮き上がって、隣に並んだ font-size 15 の見出しと縦位置が噛み合っていない。

これを Claude Code に投げ返した。「①、②とかも、この四角の高さのちょうど真ん中に来てなくて、上の方についちゃってるじゃないですか」。

原因 — SVG の `y` は baseline 起点

Claude Code に追わせたところ、原因はすぐに割れた。

SVG の <text> の y はグリフの baseline を指す座標
何も指定せずに y="172" と書くと、グリフは y=172 から上方向に伸びるので、rect 中央より上に載る
dominant-baseline="central" を付けると em-height の中央が y に来るので、y = rect_y + height/2 で数字の重心が rect 中央に落ちる

dominant-baseline="middle" も候補に上がったが、こちらは x-height（小文字 x の高さ）を基準にするので数字だと 2〜3px 上にズレる。数字・記号なら central、混在テキストなら middle という切り分けが今回の学びだった。

修正は 2 ファイル × 7個 + 5個の <text> に dominant-baseline="central" を付けて、y を card_y + height/2 に書き直した。Chrome で開き直すと、①の重心が rect 中央線から±2px の範囲に収まった。

2つ目の指摘 — グレー背景に被せるときは中身にパディングを取る

中央寄せが直った直後、続く指摘が飛んできた。「グレーの背景に被せてるじゃないですか。その場合、パディング取ってほしいんですよ、中身の素材の」。

該当箇所は同じ 2 ファイル。改めて見ると、height=72 で作った rect に見出し 1 行と本文 2 行を押し込んでいた。y の内訳はこうなっていた。

rect 上端 y=144、下端 y=216
見出し baseline y=172
本文1 baseline y=192
本文2 baseline y=212

本文2 の descender（g・p のしっぽ）が y=215 あたりまで伸びるので、rect 下端との隙間は 1px。cardのグレー面が「本文2の下線」として機能してしまい、パディングが完全に消えていた。

Claude Code に追わせて根本原因を言語化させた。「2行になったらパディングが取れない、というのは正しい。行数に関係なく height を固定で 72 のまま使い回したのが原因。行数に応じて height を算出する形に変えます」。

スキルに書き込む — 現場修正だけでは再発する

ここで一度手を止めた。今この記事だけ直しても、次に SVG を描き起こしたときに同じ事故が起きる。ルールを ~/.claude/skills/svg-diagram/SKILL.md に書き込むところまでやらないと、Claude Code は次のセッションで同じ位置に ① を落とす。

追加した節が §4.5 カード内のテキスト配置 — 中央揃えとパディング（重要・事故多発）。骨子は 4 つ。

番号バッジは矩形の縦中央に置く — dominant-baseline="central" + y = card_y + height/2
カード height は行数から算出 — 固定値を使い回さない。行数別の推奨表（1行=56 / 2行=72 / 3行=96 / 4行=120 / 5行=136）を暗記用に載せた
テキスト y は card 上端からの相対系列に乗せる — 見出し=+28、本文1=+52、本文2=+68、本文3=+84、本文4=+100
下パディングチェック — 最終行 baseline + 4（descender 余裕）が rect 下端から 12px 以上空いているか

チェックリストも 5 項目で末尾に付けた。次に SVG を描くとき、Claude Code はこのチェックリストを回してから提出する運用になる。

既存の SVG 図解に遡って適用

スキル更新が済んだら、次の指示が来た。「今回作ったSVGに限らず、他のこの記事内だけで一旦いいんですけど、他のこのページ内にあるスライドの記事のやつも同じようにずれてるんで、全部ね、同じように修正して」。

tsukumi-backoffice-ai-seminar-draft に埋め込まれている SVG を Claude Code に列挙させた。合計 17 枚。意匠を 2 系統に分けて処理させた。

横並び系（左に番号、右にテキスト）: slide-03-fault / slide-05-turning / slide-05b-orchestrator / slide-06-backoffice / slide-07-demos / slide-07b-book-to-skill-flow / slide-08-toolbox / slide-09-judgment / slide-10-pitfalls / slide-11b-front-vs-back / slide-11c-front-examples — 番号中央揃え + 下パディング再算出の対象
縦フロー系（番号が上バッジ）: slide-01-takeaway / slide-04-three-hands / slide-11-three-steps / slide-13-integration — 番号がバッジ機能で、意匠として上寄せが正しい。対象外

判定に迷った 3 枚は、実際に Chrome で開いて y 座標を目視した上で振り分けた。「判定は人間、実装は AI」という切り分けが、こういう修正一括作業ではいちばんラクに回る。

修正後、Claude Code に Bash スクリプトを書かせてカード下パディングの残差を全 SVG について機械チェックした。「最終行 baseline + 4 が card 下端から 12px 未満のカードを列挙」する 20 行程度のスクリプトで、残問題ゼロを確認して終わった。

昼のセッション — 別記事の SVG も新スキル規律で作り直す

昼にセッションを開き直したら、次の依頼が来た。「ai-era-dismantle-division-of-labor この記事なんですけど、SVG-ダイアグラムのスキルを使って、スキル自体を新しくしたんで、ちょっともう一回修正してもらえませんか」。

対象は figure-01-bottleneck から figure-06-talent までの 6 枚。既存版は §4.5 追加前に描いたもので、新ルールを踏んでいない。

Claude Code に新スキル（英語 kicker 削除・図下のキーメッセージブロック削除・1メッセージ完結）で 6 枚を書き直させて、パースを通した上でブラウザで実描画を確認した。1 枚だけ「レビュー」「リリース」のラベルが次のボックスに重なる事故があったので、ラベルを短縮させて解消。残り 5 枚は初回パスで通った。

朝の 17 枚と違い、こちらは「スキルが更新されたら過去の図も遡って作り直す」型の作業。手作業でやっていたら半日溶ける規模だが、Claude Code が新スキルを最初から読み直して 6 枚同時に生成するので、確認は Chrome で目視するだけで済んだ。

学び — ルールは「本文に書く」ではなく「スキル配下に置く」

今回の 2 セッションで一番効いたのは、朝の修正段階でスキルファイル (~/.claude/skills/svg-diagram/SKILL.md) を更新したことだった。

記事本文の指示だけで済ませると、次にSVGを描くときに Claude Code は同じ位置に ① を落とす
スキルに §4.5 を切って推奨表とチェックリストを書き込むと、次のセッションでは最初から中央寄せ + 可変 height で描いてくる
昼のセッションで別記事の 6 枚が初回パスでほぼ通ったのは、スキル側にルールが載っていたおかげ

スキルは「作業ログの物差し」ではなく「次回セッションの入力データ」として扱う。同じ指摘を 2 回しないための最短経路が、その日のうちにスキルへ書き込むことだと確認できた 1 日だった。

変更したファイル

~/.claude/skills/svg-diagram/SKILL.md — §4.5「カード内のテキスト配置 — 中央揃えとパディング」を新設
apps/web/public/images/tsukumi-backoffice-ai-seminar-draft/slide-00b-seven-walls.svg / slide-00c-five-views.svg — 新規、中央寄せ + 可変 height で作成
apps/web/public/images/tsukumi-backoffice-ai-seminar-draft/slide-03-fault.svg ほか横並び系 10 枚 — 番号中央寄せ + 下パディング再算出
apps/web/public/images/ai-era-dismantle-division-of-labor/figure-01-bottleneck.svg 〜 figure-06-talent.svg — 新スキル規律で作り直し