[{"data":1,"prerenderedAt":390},["ShallowReactive",2],{"content-/svg-diagram-conversion":3,"all-pages-for-dir":388,"og-image-/svg-diagram-conversion":389},{"id":4,"title":5,"body":6,"category":368,"description":369,"extension":370,"meta":371,"navigation":372,"path":373,"project_name":374,"published":375,"publishedAt":376,"seo":377,"stem":378,"tags":379,"todo":385,"unpublished":375,"updatedAt":386,"__hash__":387},"pages/2026-04/2026-04-20/svg-diagram-conversion.md","テーブルとpreブロックをSVG図解に一括変換した記録",{"type":7,"value":8,"toc":352},"minimark",[9,13,17,22,25,38,46,49,52,96,99,103,106,151,154,158,161,164,174,177,181,184,187,191,194,198,205,211,214,217,220,288,291,295,298,302,305,308,312,319,322,325,336,339,342],[10,11,5],"h1",{"id":12},"テーブルとpreブロックをsvg図解に一括変換した記録",[14,15,16],"p",{},"CF精算表ステップ学習ページ（ch0〜step7）のHTMLテーブルとpreブロックを、すべてSVG図解に置き換えた。6つのサブエージェントが並列で走り、59件のSVGを一気に生成した。",[18,19,21],"h2",{"id":20},"背景-なぜsvgに置き換えたか","背景: なぜSVGに置き換えたか",[14,23,24],{},"ch0.vueにはHTMLテーブルが6つ、preブロックで組んだ仕訳やフロー図が複数あった。問題は3点。",[26,27,28,32,35],"ol",{},[29,30,31],"li",{},"テーブルはレスポンシブ対応が面倒で、スマホで横スクロールが発生する",[29,33,34],{},"preブロックはモノスペースフォントの平坦な見た目で、構造が頭に入ってこない",[29,36,37],{},"ページごとに見た目がバラバラで、教材としての統一感がない",[14,39,40,41,45],{},"SVGなら ",[42,43,44],"code",{},"width: 100%"," でレスポンシブが解決し、色・フォント・レイアウトを完全に制御できる。",[18,47,48],{"id":48},"グレー8段階のトンマナルール",[14,50,51],{},"最初にch0の「現金及び現金同等物の範囲」テーブルをSVG化したとき、タイトルにグレー背景を入れた。ユーザーのフィードバックで方向転換し、以下のルールが固まった。",[53,54,55,66,72,86],"ul",{},[29,56,57,61,62,65],{},[58,59,60],"strong",{},"タイトル",": 黒文字 + 下線（GL3 ",[42,63,64],{},"#D9D9D9","）、背景なし",[29,67,68,71],{},[58,69,70],{},"外枠",": なし。線を減らして背景だけで構造を伝える",[29,73,74,77,78,81,82,85],{},[58,75,76],{},"構造ラベル（カテゴリ名など）",": GL1 ",[42,79,80],{},"#F2F2F2"," または GL2 ",[42,83,84],{},"#E6E6E6"," の背景",[29,87,88,91,92,95],{},[58,89,90],{},"内容セル",": 白背景 ",[42,93,94],{},"#fff"," で浮き上がらせる",[14,97,98],{},"「現金及び現金同等物の範囲」のSVGがお手本になった。ピラミッド型に「現金」「現金同等物」を配置し、中の項目は白カードで列挙する。この構造を全SVGに横展開した。",[18,100,102],{"id":101},"ch0のテーブル6件-preブロック-svg化","ch0のテーブル6件 + preブロック → SVG化",[14,104,105],{},"パイロットとしてch0.vueから着手。変換対象は以下。",[107,108,109,125],"table",{},[110,111,112],"thead",{},[113,114,115,119,122],"tr",{},[116,117,118],"th",{},"種類",[116,120,121],{},"内容",[116,123,124],{},"変換先",[126,127,128,140],"tbody",{},[113,129,130,134,137],{},[131,132,133],"td",{},"テーブル x6",[131,135,136],{},"現金同等物の範囲、活動区分、直接法vs間接法 等",[131,138,139],{},"構造図SVG",[113,141,142,145,148],{},[131,143,144],{},"pre.journal x3",[131,146,147],{},"設立仕訳、売上仕訳、CF計算書ひな型",[131,149,150],{},"仕訳SVG / フロー図SVG",[14,152,153],{},"ch0だけで約9件のSVGを手作業で調整しながら確定させ、トンマナが固まった。",[18,155,157],{"id":156},"_6サブエージェント並列で59件を一気に変換","6サブエージェント並列で59件を一気に変換",[14,159,160],{},"ch0のスタイルが確定した後、Step 1〜7の全preブロックとテーブルをSVGに変換する計画書を作成。Codexレビューで件数ズレ（56→59件）を指摘されて修正した。",[14,162,163],{},"実行は6つのサブエージェントを並列起動。",[165,166,171],"pre",{"className":167,"code":169,"language":170},[168],"language-text","| エージェント | 対象     | SVG件数 |\n|-------------|---------|---------|\n| Agent 1     | Step 2  | 6件     |\n| Agent 2     | Step 3  | 8件     |\n| Agent 3     | Step 4  | 19件    |\n| Agent 4     | Step 5  | 7件     |\n| Agent 5     | Step 6  | 12件    |\n| Agent 6     | Step 7  | 3件     |\n","text",[42,172,169],{"__ignoreMap":173},"",[14,175,176],{},"Step 4が最大規模（19件）で最後まで残ったが、全エージェントが完了するまで数分だった。完了後、全7ステップをブラウザで表示確認。",[18,178,180],{"id":179},"試行錯誤-ウォーターフォールチャート","試行錯誤: ウォーターフォールチャート",[14,182,183],{},"Step 2の売掛金・商品・買掛金の増減内訳を可視化するとき、最初は横4列テーブル（期首→増加→減少→期末）で作った。ユーザーから「ウォーターフォールチャートにしてほしい」と指示が入り、棒グラフ風の積み上げ構造に書き直した。",[14,185,186],{},"矢印の向きを逆に描いてしまい、指摘されて右向き（→）に修正。タイトル下線とチャート上部の間隔が詰まりすぎていた点も調整した。ウォーターフォールは「数値の積み上がり」が視覚的にわかるので、教材として効果が高い。",[18,188,190],{"id":189},"試行錯誤-cf仕訳svgの作成と削除","試行錯誤: CF仕訳SVGの作成と削除",[14,192,193],{},"Step 5で有形固定資産の取得・売却のCF仕訳をSVG化した。しかしユーザーが「直感的でない」と判断し、2件とも削除。代わりに通常の仕訳SVGの「現金預金」行にCF区分ラベルを追加する方針に切り替えた。",[18,195,197],{"id":196},"cfラベル付き仕訳svg","CFラベル付き仕訳SVG",[14,199,200,201,204],{},"全ステップの仕訳SVGで、現金預金が絡む行にマゼンタ背景（ML1 ",[42,202,203],{},"#fae8ff","）のサブラベルを追加した。",[165,206,209],{"className":207,"code":208,"language":170},[168],"現金預金  3,000,000\n  → 株式の発行による収入（財務CF）   ← マゼンタ背景\n",[42,210,208],{"__ignoreMap":173},[14,212,213],{},"仕訳を見た瞬間に「このお金はCF計算書のどこに分類されるか」がわかる。3つのサブエージェントで並列処理し、全ステップに反映。",[18,215,216],{"id":216},"マゼンタ4段階の追加",[14,218,219],{},"NEWバッジ（新規追加行のハイライト）用にマゼンタのカラーパレットを追加した。",[107,221,222,235],{},[110,223,224],{},[113,225,226,229,232],{},[116,227,228],{},"レベル",[116,230,231],{},"HEX",[116,233,234],{},"用途",[126,236,237,249,262,275],{},[113,238,239,242,246],{},[131,240,241],{},"ML1",[131,243,244],{},[42,245,203],{},[131,247,248],{},"強調行の背景、NEWバッジ背景",[113,250,251,254,259],{},[131,252,253],{},"ML2",[131,255,256],{},[42,257,258],{},"#f0abfc",[131,260,261],{},"ハイライト枠",[113,263,264,267,272],{},[131,265,266],{},"ML3",[131,268,269],{},[42,270,271],{},"#d946ef",[131,273,274],{},"強調テキスト",[113,276,277,280,285],{},[131,278,279],{},"ML4",[131,281,282],{},[42,283,284],{},"#c026d3",[131,286,287],{},"最強調テキスト",[14,289,290],{},"グレー8段階だけでは「新しく追加された行」と「元からある行」の区別がつかなかった。マゼンタを1色入れるだけで、注目すべき箇所が一目で浮かぶ。",[18,292,294],{"id":293},"の一括置換","△→▲の一括置換",[14,296,297],{},"マイナス表記が白三角（△）と黒三角（▲）で混在していた。教材全体で黒三角に統一。6件のSVGを一括置換した。視認性が上がり、マイナスだと即座に判別できるようになった。",[18,299,301],{"id":300},"k表記円単位への統一","K表記→円単位への統一",[14,303,304],{},"Step 1〜2は円単位（3,000,000）、Step 3以降はK表記（500K）で混在していた。Excelの元データが全て円単位なので、SVGもvueテキストも円に揃えた。4つのサブエージェントで並列処理。",[14,306,307],{},"「1,000K」より「1,000,000円」の方が、日本語の教材ではすぐに金額がわかる。",[18,309,311],{"id":310},"svg図解スキルの新規作成","SVG図解スキルの新規作成",[14,313,314,315,318],{},"繰り返し参照するルールが増えたため、グローバルスキル ",[42,316,317],{},"~/.claude/skills/svg-diagram/SKILL.md"," を作成した。グレー8段階とマゼンタ4段階のカラーパレット、タイトルスタイル、レイアウト規則を1ファイルに集約。",[14,320,321],{},"今後どのプロジェクトでも「SVGで図を作って」と指示すれば、同じトンマナで図解が生成される。",[18,323,324],{"id":324},"学び",[53,326,327,330,333],{},[29,328,329],{},"SVG変換のようなパターン化された大量作業は、パイロットで1件仕上げてからサブエージェント並列に委任すると速い。59件を手で書いていたら丸1日かかる",[29,331,332],{},"トンマナは最初に決めきれない。パイロットでユーザーと対話しながら固めて、後から一括適用する流れが現実的",[29,334,335],{},"「直感的でない」と判断したものはすぐ消す。作ったコストに引っ張られて残すと、教材全体の品質が下がる",[337,338],"hr",{},[18,340,341],{"id":341},"関連記事",[53,343,344],{},[29,345,346,351],{},[347,348,350],"a",{"href":349},"/cf-steps-vue-pages","CF精算表ステップ学習のVueページ化","（2026-04-20 前半セッション）",{"title":173,"searchDepth":353,"depth":353,"links":354},2,[355,356,357,358,359,360,361,362,363,364,365,366,367],{"id":20,"depth":353,"text":21},{"id":48,"depth":353,"text":48},{"id":101,"depth":353,"text":102},{"id":156,"depth":353,"text":157},{"id":179,"depth":353,"text":180},{"id":189,"depth":353,"text":190},{"id":196,"depth":353,"text":197},{"id":216,"depth":353,"text":216},{"id":293,"depth":353,"text":294},{"id":300,"depth":353,"text":301},{"id":310,"depth":353,"text":311},{"id":324,"depth":353,"text":324},{"id":341,"depth":353,"text":341},"dev","ch0.vueの全テーブルとpreブロックをSVG化し、グレー8段階のトンマナルールを確立。6サブエージェント並列で59件のSVGを生成した実装ログ","md",{},true,"/svg-diagram-conversion","eurekapu-nuxt4",false,"2026-04-20T00:00:00.000Z",{"title":5,"description":369},"2026-04/2026-04-20/svg-diagram-conversion",[380,381,382,383,384],"SVG","図解","Claude Code","並列処理","デザインシステム","memo",null,"NNhss5eVx00Vibd5yybWlAPme5IRevAg1VUcC40qRzM",[],"https://log.eurekapu.com/og/blog/svg-diagram-conversion.png?v=2026-04-20T00%3A00%3A00.000Z&title=%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%A8pre%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%92SVG%E5%9B%B3%E8%A7%A3%E3%81%AB%E4%B8%80%E6%8B%AC%E5%A4%89%E6%8F%9B%E3%81%97%E3%81%9F%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=6a6f12f70e5347d9",1780786053559]