[{"data":1,"prerenderedAt":432},["ShallowReactive",2],{"content-/svg-diagram-skill-numbering-padding":3,"all-pages-for-dir":430,"og-image-/svg-diagram-skill-numbering-padding":431},{"id":4,"title":5,"body":6,"category":412,"description":413,"extension":414,"meta":415,"navigation":416,"ogImage":417,"path":418,"project_name":419,"published":420,"publishedAt":421,"seo":422,"stem":423,"tags":424,"todo":417,"unpublished":420,"updatedAt":417,"__hash__":429},"pages/2026-07/2026-07-01/svg-diagram-skill-numbering-padding.md","SVG-diagramスキルに ①②③ の中央寄せとカード下パディングのルールを追加",{"type":7,"value":8,"toc":398},"minimark",[9,13,42,46,62,65,68,76,79,113,130,143,147,150,153,167,170,177,181,188,195,228,231,235,238,243,303,306,309,313,319,330,333,336,340,346,361,364,367],[10,11,12],"h2",{"id":12},"この記事のポイント",[14,15,16,20,23,35],"ul",{},[17,18,19],"li",{},"カード左に大きく置いた ①②③ の縦位置が、rect の中央から 8〜10px 上にズレていた",[17,21,22],{},"3行の本文を入れたのに rect の height が 72 のままで、最終行の descender が下端から 1px しか空いていなかった",[17,24,25,26,30,31,34],{},"ルールを本文に埋め込んだだけでは再発するので、",[27,28,29],"code",{},"svg-diagram"," スキルの ",[27,32,33],{},"SKILL.md §4.5"," に節を新設した",[17,36,37,38,41],{},"追加後、同じセッションで tsukumi 記事の全 17 枚 + 新規 2 枚を検証・修正、翌昼のセッションで別記事 ",[27,39,40],{},"ai-era-dismantle-division-of-labor"," の 6 枚も新スキル規律で作り直した",[10,43,45],{"id":44},"発端-四角の高さの真ん中に来てないの分かりますかね","発端 — 「四角の高さの真ん中に来てないの分かりますかね」",[47,48,49,50,53,54,57,58,61],"p",{},"朝、",[27,51,52],{},"tsukumi-backoffice-ai-seminar-draft"," の記事に §0.5「AIエージェント導入の『7つの壁』と本セミナーの前提」を差し込み、対応するSVG図2枚 (",[27,55,56],{},"slide-00b-seven-walls.svg"," / ",[27,59,60],{},"slide-00c-five-views.svg",") を Claude Code に描かせた。カードの左に大きな①②③〜⑦を並べる意匠で、パッと見は成立している。",[47,63,64],{},"出来上がりを見て気づいたのは、①の重心がカード上端から 10px 弱の位置に載っていることだった。カード高さが 72px なので中心は y=180 相当のはず。数字を目で追うと、視覚重心が y=170 前後まで浮き上がって、隣に並んだ font-size 15 の見出しと縦位置が噛み合っていない。",[47,66,67],{},"これを Claude Code に投げ返した。「①、②とかも、この四角の高さのちょうど真ん中に来てなくて、上の方についちゃってるじゃないですか」。",[10,69,71,72,75],{"id":70},"原因-svg-の-y-は-baseline-起点","原因 — SVG の ",[27,73,74],{},"y"," は baseline 起点",[47,77,78],{},"Claude Code に追わせたところ、原因はすぐに割れた。",[14,80,81,96,103],{},[17,82,83,84,87,88,90,91,95],{},"SVG の ",[27,85,86],{},"\u003Ctext>"," の ",[27,89,74],{}," はグリフの ",[92,93,94],"strong",{},"baseline"," を指す座標",[17,97,98,99,102],{},"何も指定せずに ",[27,100,101],{},"y=\"172\""," と書くと、グリフは y=172 から上方向に伸びるので、rect 中央より上に載る",[17,104,105,108,109,112],{},[27,106,107],{},"dominant-baseline=\"central\""," を付けると em-height の中央が y に来るので、",[27,110,111],{},"y = rect_y + height/2"," で数字の重心が rect 中央に落ちる",[47,114,115,118,119,129],{},[27,116,117],{},"dominant-baseline=\"middle\""," も候補に上がったが、こちらは x-height（小文字 x の高さ）を基準にするので数字だと 2〜3px 上にズレる。",[92,120,121,122,125,126],{},"数字・記号なら ",[27,123,124],{},"central","、混在テキストなら ",[27,127,128],{},"middle"," という切り分けが今回の学びだった。",[47,131,132,133,135,136,138,139,142],{},"修正は 2 ファイル × 7個 + 5個 の ",[27,134,86],{}," に ",[27,137,107],{}," を付けて、y を ",[27,140,141],{},"card_y + height/2"," に書き直した。Chrome で開き直すと、①の重心が rect 中央線から±2px の範囲に収まった。",[10,144,146],{"id":145},"_2つ目の指摘-グレー背景に被せるときは中身にパディングを取る","2つ目の指摘 — グレー背景に被せるときは中身にパディングを取る",[47,148,149],{},"中央寄せが直った直後、続く指摘が飛んできた。「グレーの背景に被せてるじゃないですか。その場合、パディング取ってほしいんですよ、中身の素材の」。",[47,151,152],{},"該当箇所は同じ 2 ファイル。改めて見ると、height=72 で作った rect に見出し 1 行と本文 2 行を押し込んでいた。y の内訳はこうなっていた。",[14,154,155,158,161,164],{},[17,156,157],{},"rect 上端 y=144、下端 y=216",[17,159,160],{},"見出し baseline y=172",[17,162,163],{},"本文1 baseline y=192",[17,165,166],{},"本文2 baseline y=212",[47,168,169],{},"本文2 の descender（g・p のしっぽ）が y=215 あたりまで伸びるので、rect 下端との隙間は 1px。cardのグレー面が「本文2の下線」として機能してしまい、パディングが完全に消えていた。",[47,171,172,173,176],{},"Claude Code に追わせて根本原因を言語化させた。「2行になったらパディングが取れない、というのは正しい。",[92,174,175],{},"行数に関係なく height を固定で 72 のまま使い回したのが原因","。行数に応じて height を算出する形に変えます」。",[10,178,180],{"id":179},"スキルに書き込む-現場修正だけでは再発する","スキルに書き込む — 現場修正だけでは再発する",[47,182,183,184,187],{},"ここで一度手を止めた。今この記事だけ直しても、次に SVG を描き起こしたときに同じ事故が起きる。ルールを ",[27,185,186],{},"~/.claude/skills/svg-diagram/SKILL.md"," に書き込むところまでやらないと、Claude Code は次のセッションで同じ位置に ① を落とす。",[47,189,190,191,194],{},"追加した節が ",[27,192,193],{},"§4.5 カード内のテキスト配置 — 中央揃えとパディング（重要・事故多発）","。骨子は 4 つ。",[196,197,198,210,216,222],"ol",{},[17,199,200,203,204,206,207],{},[92,201,202],{},"番号バッジは矩形の縦中央に置く"," — ",[27,205,107],{}," + ",[27,208,209],{},"y = card_y + height/2",[17,211,212,215],{},[92,213,214],{},"カード height は行数から算出"," — 固定値を使い回さない。行数別の推奨表（1行=56 / 2行=72 / 3行=96 / 4行=120 / 5行=136）を暗記用に載せた",[17,217,218,221],{},[92,219,220],{},"テキスト y は card 上端からの相対系列に乗せる"," — 見出し=+28、本文1=+52、本文2=+68、本文3=+84、本文4=+100",[17,223,224,227],{},[92,225,226],{},"下パディングチェック"," — 最終行 baseline + 4（descender 余裕）が rect 下端から 12px 以上空いているか",[47,229,230],{},"チェックリストも 5 項目で末尾に付けた。次に SVG を描くとき、Claude Code はこのチェックリストを回してから提出する運用になる。",[10,232,234],{"id":233},"既存の-svg-図解に遡って適用","既存の SVG 図解に遡って適用",[47,236,237],{},"スキル更新が済んだら、次の指示が来た。「今回作ったSVGに限らず、他のこの記事内だけで一旦いいんですけど、他のこのページ内にあるスライドの記事のやつも同じようにずれてるんで、全部ね、同じように修正して」。",[47,239,240,242],{},[27,241,52],{}," に埋め込まれている SVG を Claude Code に列挙させた。合計 17 枚。意匠を 2 系統に分けて処理させた。",[14,244,245,285],{},[17,246,247,250,251,57,254,57,257,57,260,57,263,57,266,57,269,57,272,57,275,57,278,57,281,284],{},[92,248,249],{},"横並び系（左に番号、右にテキスト）",": ",[27,252,253],{},"slide-03-fault",[27,255,256],{},"slide-05-turning",[27,258,259],{},"slide-05b-orchestrator",[27,261,262],{},"slide-06-backoffice",[27,264,265],{},"slide-07-demos",[27,267,268],{},"slide-07b-book-to-skill-flow",[27,270,271],{},"slide-08-toolbox",[27,273,274],{},"slide-09-judgment",[27,276,277],{},"slide-10-pitfalls",[27,279,280],{},"slide-11b-front-vs-back",[27,282,283],{},"slide-11c-front-examples"," — 番号中央揃え + 下パディング再算出の対象",[17,286,287,250,290,57,293,57,296,57,299,302],{},[92,288,289],{},"縦フロー系（番号が上バッジ）",[27,291,292],{},"slide-01-takeaway",[27,294,295],{},"slide-04-three-hands",[27,297,298],{},"slide-11-three-steps",[27,300,301],{},"slide-13-integration"," — 番号がバッジ機能で、意匠として上寄せが正しい。対象外",[47,304,305],{},"判定に迷った 3 枚は、実際に Chrome で開いて y 座標を目視した上で振り分けた。「判定は人間、実装は AI」という切り分けが、こういう修正一括作業ではいちばんラクに回る。",[47,307,308],{},"修正後、Claude Code に Bash スクリプトを書かせてカード下パディングの残差を全 SVG について機械チェックした。「最終行 baseline + 4 が card 下端から 12px 未満のカードを列挙」する 20 行程度のスクリプトで、残問題ゼロを確認して終わった。",[10,310,312],{"id":311},"昼のセッション-別記事の-svg-も新スキル規律で作り直す","昼のセッション — 別記事の SVG も新スキル規律で作り直す",[47,314,315,316,318],{},"昼にセッションを開き直したら、次の依頼が来た。「",[27,317,40],{}," この記事なんですけど、SVG-ダイアグラムのスキルを使って、スキル自体を新しくしたんで、ちょっともう一回修正してもらえませんか」。",[47,320,321,322,325,326,329],{},"対象は ",[27,323,324],{},"figure-01-bottleneck"," から ",[27,327,328],{},"figure-06-talent"," までの 6 枚。既存版は §4.5 追加前に描いたもので、新ルールを踏んでいない。",[47,331,332],{},"Claude Code に新スキル（英語 kicker 削除・図下のキーメッセージブロック削除・1メッセージ完結）で 6 枚を書き直させて、パースを通した上でブラウザで実描画を確認した。1 枚だけ「レビュー」「リリース」のラベルが次のボックスに重なる事故があったので、ラベルを短縮させて解消。残り 5 枚は初回パスで通った。",[47,334,335],{},"朝の 17 枚と違い、こちらは「スキルが更新されたら過去の図も遡って作り直す」型の作業。手作業でやっていたら半日溶ける規模だが、Claude Code が新スキルを最初から読み直して 6 枚同時に生成するので、確認は Chrome で目視するだけで済んだ。",[10,337,339],{"id":338},"学び-ルールは本文に書くではなくスキル配下に置く","学び — ルールは「本文に書く」ではなく「スキル配下に置く」",[47,341,342,343,345],{},"今回の 2 セッションで一番効いたのは、朝の修正段階でスキルファイル (",[27,344,186],{},") を更新したことだった。",[14,347,348,351,358],{},[17,349,350],{},"記事本文の指示だけで済ませると、次にSVGを描くときに Claude Code は同じ位置に ① を落とす",[17,352,353,354,357],{},"スキルに ",[27,355,356],{},"§4.5"," を切って推奨表とチェックリストを書き込むと、次のセッションでは最初から中央寄せ + 可変 height で描いてくる",[17,359,360],{},"昼のセッションで別記事の 6 枚が初回パスでほぼ通ったのは、スキル側にルールが載っていたおかげ",[47,362,363],{},"スキルは「作業ログの物差し」ではなく「次回セッションの入力データ」として扱う。同じ指摘を 2 回しないための最短経路が、その日のうちにスキルへ書き込むことだと確認できた 1 日だった。",[10,365,366],{"id":366},"変更したファイル",[14,368,369,374,382,388],{},[17,370,371,373],{},[27,372,186],{}," — §4.5「カード内のテキスト配置 — 中央揃えとパディング」を新設",[17,375,376,57,379,381],{},[27,377,378],{},"apps/web/public/images/tsukumi-backoffice-ai-seminar-draft/slide-00b-seven-walls.svg",[27,380,60],{}," — 新規、中央寄せ + 可変 height で作成",[17,383,384,387],{},[27,385,386],{},"apps/web/public/images/tsukumi-backoffice-ai-seminar-draft/slide-03-fault.svg"," ほか横並び系 10 枚 — 番号中央寄せ + 下パディング再算出",[17,389,390,393,394,397],{},[27,391,392],{},"apps/web/public/images/ai-era-dismantle-division-of-labor/figure-01-bottleneck.svg"," 〜 ",[27,395,396],{},"figure-06-talent.svg"," — 新スキル規律で作り直し",{"title":399,"searchDepth":400,"depth":400,"links":401},"",2,[402,403,404,406,407,408,409,410,411],{"id":12,"depth":400,"text":12},{"id":44,"depth":400,"text":45},{"id":70,"depth":400,"text":405},"原因 — SVG の y は baseline 起点",{"id":145,"depth":400,"text":146},{"id":179,"depth":400,"text":180},{"id":233,"depth":400,"text":234},{"id":311,"depth":400,"text":312},{"id":338,"depth":400,"text":339},{"id":366,"depth":400,"text":366},"dev","カード左に置いた ①②③ が rect の上寄りに落ちていた。dominant-baseline=central と height の可変算出をスキルに書き込み、既存 SVG 図解にも遡って適用した記録。","md",{},true,null,"/svg-diagram-skill-numbering-padding","mdx-playground",false,"2026-07-01T00:00:00.000Z",{"title":5,"description":413},"2026-07/2026-07-01/svg-diagram-skill-numbering-padding",[425,29,426,427,428],"SVG","スキル改善","図解","Claude Code","rZQe_mygasU2PVcSYzqiznrVVhGmi3KzS4B2-h-GLfg",[],"https://log.eurekapu.com/og/blog/svg-diagram-skill-numbering-padding.png?v=2026-07-01T00%3A00%3A00.000Z&title=SVG-diagram%E3%82%B9%E3%82%AD%E3%83%AB%E3%81%AB%20%E2%91%A0%E2%91%A1%E2%91%A2%20%E3%81%AE%E4%B8%AD%E5%A4%AE%E5%AF%84%E3%81%9B%E3%81%A8%E3%82%AB%E3%83%BC%E3%83%89%E4%B8%8B%E3%83%91%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0&author=Kei%20Komatsu&sig=025ee8d034a5db10",1782975568272]