[{"data":1,"prerenderedAt":503},["ShallowReactive",2],{"content-/financial-statements-book-svg-diagrams":3,"all-pages-for-dir":501,"og-image-/financial-statements-book-svg-diagrams":502},{"id":4,"title":5,"body":6,"category":482,"description":483,"extension":484,"meta":485,"navigation":192,"ogImage":486,"path":487,"project_name":488,"published":489,"publishedAt":490,"seo":491,"stem":492,"tags":493,"todo":486,"unpublished":489,"updatedAt":486,"__hash__":500},"pages/2026-05/2026-05-11/financial-statements-book-svg-diagrams.md","決算書の読み方教材: PDF199ページから47枚のSVG図解作成と表示確認の落とし穴",{"type":7,"value":8,"toc":467},"minimark",[9,13,17,20,25,28,72,75,82,86,89,106,109,113,116,127,130,134,141,146,161,170,206,210,213,224,227,286,296,300,307,310,327,330,334,337,341,344,347,351,358,372,379,382,425,428,463],[10,11,5],"h1",{"id":12},"決算書の読み方教材-pdf199ページから47枚のsvg図解作成と表示確認の落とし穴",[14,15,16],"p",{},"1ヶ月前に「いつかやる」と棚に置いた決算書教材のPDFを、今日ようやく開いた。199ページの分厚いやつだ。「これを全部SVG図解に置き換える」と決めて、pdftoppmにPDFを食わせた瞬間からセッションが走り出した。",[14,18,19],{},"夜になる頃には、preview.htmlに47枚のSVGが章ごとに並んでいた。途中で踏んだ地雷と、svg-diagramスキルに追加した新ルールを残しておく。",[21,22,24],"h2",{"id":23},"_1-pdf199ページを画像化して図インベントリを作る","1. PDF199ページを画像化して、図インベントリを作る",[14,26,27],{},"最初にやったのは「どのページに図があるか」のマッピング。これをサボると、後で「あれ、この図やった？」と何度も聞き直すことになる。",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-bash shiki shiki-themes vitesse-light vitesse-light","pdftoppm -r 150 input.pdf p -png\n# → p-001.png 〜 p-199.png\n","bash","",[36,37,38,65],"code",{"__ignoreMap":34},[39,40,43,47,51,55,59,62],"span",{"class":41,"line":42},"line",1,[39,44,46],{"class":45},"senZ8","pdftoppm",[39,48,50],{"class":49},"snbK4"," -r",[39,52,54],{"class":53},"sM54T"," 150",[39,56,58],{"class":57},"sdGka"," input.pdf",[39,60,61],{"class":57}," p",[39,63,64],{"class":49}," -png\n",[39,66,68],{"class":41,"line":67},2,[39,69,71],{"class":70},"sxvE3","# → p-001.png 〜 p-199.png\n",[14,73,74],{},"全199ページが画像になった。次に Claude Code に「ページごとに図あり/なしを判定して、図のタイプ（フロー、概念図、ツリー、表）と一行サマリを書いて」と頼んだ。",[14,76,77,78,81],{},"最初は ",[36,79,80],{},"memo/2026-05-11/figure-pages-1to50.md"," に1〜50ページ分だけ作った。中身を見て「これでいける」と判断してから、全199ページ版に拡張した。インベントリができた段階で「SVG化対象は47ページ」と確定した。",[21,83,85],{"id":84},"_2-1ページ1図下回らない改善okルールで書く","2. 「1ページ＝1図」「下回らない・改善OKルール」で書く",[14,87,88],{},"方針は2つだけ決めた。",[90,91,92,100],"ul",{},[93,94,95,99],"li",{},[96,97,98],"strong",{},"1ページ＝1図",": ページをまたいで複合図にしない。教材として「このページの図」と参照しやすくする",[93,101,102,105],{},[96,103,104],{},"下回らない・改善OKルール",": 書籍の図を再現するのが最低ライン。情報量を削らない。ただし配置や表現で改善できるならOK",[14,107,108],{},"この方針が後で効いた。サブエージェントに丸投げするときに「元の図と同じ情報を全部入れて、改善は任せる」と一言で渡せた。",[21,110,112],{"id":111},"_3-svg-diagramスキルを起動してバッチ並列で47枚","3. svg-diagramスキルを起動してバッチ並列で47枚",[14,114,115],{},"svg-diagramスキルにはグレー8段階の濃淡、文字サイズ、レイアウト規則、マゼンタ強調のパターンが定義してある。これに従ってサブエージェントを並列起動した。",[90,117,118,121,124],{},[93,119,120],{},"第1バッチ: 22枚を並列生成",[93,122,123],{},"第2バッチ: 25枚を並列生成",[93,125,126],{},"合計47枚",[14,128,129],{},"人間がやったのは「方針を一言で渡す」「バッチを切る」だけ。実装はサブエージェントが回した。",[21,131,133],{"id":132},"_4-ここから地雷踏みのターン","4. ここから地雷踏みのターン",[14,135,136,137,140],{},"47枚生成して「できた」と提出したら、ユーザーから「",[96,138,139],{},"表示確認をちゃんと","」と一刺しされた。確かに、preview.htmlで開いてもいない。慌ててChrome DevToolsでpreviewを開いた瞬間、画面が崩れていた。ここから3つのバグを順に潰した。",[142,143,145],"h3",{"id":144},"バグ1-セブンアイのxmlエスケープ漏れ","バグ1: 「セブン&アイ」のXMLエスケープ漏れ",[14,147,148,149,152,153,156,157,160],{},"p020あたりのSVGで、テキストがそこから先全部消えていた。SVGをエディタで開いて目で追ったら、",[36,150,151],{},"\u003Ctext>セブン&アイ\u003C/text>"," と書いてあった。",[36,154,155],{},"&"," は XML予約文字なので ",[36,158,159],{},"&"," に書かないとパーサーが死ぬ。",[14,162,163,164,166,167,169],{},"3箇所ヒットした。",[36,165,155],{}," を ",[36,168,159],{}," に置換して直した。",[29,171,175],{"className":172,"code":173,"language":174,"meta":34,"style":34},"language-xml shiki shiki-themes vitesse-light vitesse-light","\u003C!-- NG -->\n\u003Ctext>セブン&アイ・ホールディングス\u003C/text>\n\n\u003C!-- OK -->\n\u003Ctext>セブン&アイ・ホールディングス\u003C/text>\n","xml",[36,176,177,182,187,194,200],{"__ignoreMap":34},[39,178,179],{"class":41,"line":42},[39,180,181],{},"\u003C!-- NG -->\n",[39,183,184],{"class":41,"line":67},[39,185,186],{},"\u003Ctext>セブン&アイ・ホールディングス\u003C/text>\n",[39,188,190],{"class":41,"line":189},3,[39,191,193],{"emptyLinePlaceholder":192},true,"\n",[39,195,197],{"class":41,"line":196},4,[39,198,199],{},"\u003C!-- OK -->\n",[39,201,203],{"class":41,"line":202},5,[39,204,205],{},"\u003Ctext>セブン&アイ・ホールディングス\u003C/text>\n",[142,207,209],{"id":208},"バグ2-反復ラベルの太字が内容差分をぼかす","バグ2: 反復ラベルの太字が「内容差分」をぼかす",[14,211,212],{},"対比図（左に「日本企業A」、右に「日本企業B」のような構造）で、両側に同じ「売上高」「営業利益」というラベルが並ぶ。これを両方とも太字にしていた。",[14,214,215,216,219,220,223],{},"並べてみると、視線が",[96,217,218],{},"ラベルの太字","に吸われて、本来見せたい",[96,221,222],{},"右側の数字差分","が頭に入ってこない。「対比図では反復するラベルは太字にしない」とその場で気づいた。",[14,225,226],{},"svg-diagramスキルに新ルールを追加した:",[29,228,232],{"className":229,"code":230,"language":231,"meta":34,"style":34},"language-markdown shiki shiki-themes vitesse-light vitesse-light","## 対比図での反復ラベル太字禁止\n\n左右や上下で対比する図では、両側に同じラベル（「売上高」「営業利益」等）が並ぶ。\nこのとき反復するラベルを太字にすると、視線がラベルに吸われて\n本来見せたい「内容の差分」がぼやける。\n\n- 反復ラベル: regular weight\n- 差分の数値・キーワード: bold\n","markdown",[36,233,234,244,248,254,259,264,269,278],{"__ignoreMap":34},[39,235,236,240],{"class":41,"line":42},[39,237,239],{"class":238},"sFA8A","##",[39,241,243],{"class":242},"syTZV"," 対比図での反復ラベル太字禁止\n",[39,245,246],{"class":41,"line":67},[39,247,193],{"emptyLinePlaceholder":192},[39,249,250],{"class":41,"line":189},[39,251,253],{"class":252},"sG7-3","左右や上下で対比する図では、両側に同じラベル（「売上高」「営業利益」等）が並ぶ。\n",[39,255,256],{"class":41,"line":196},[39,257,258],{"class":252},"このとき反復するラベルを太字にすると、視線がラベルに吸われて\n",[39,260,261],{"class":41,"line":202},[39,262,263],{"class":252},"本来見せたい「内容の差分」がぼやける。\n",[39,265,267],{"class":41,"line":266},6,[39,268,193],{"emptyLinePlaceholder":192},[39,270,272,275],{"class":41,"line":271},7,[39,273,274],{"class":49},"-",[39,276,277],{"class":252}," 反復ラベル: regular weight\n",[39,279,281,283],{"class":41,"line":280},8,[39,282,274],{"class":49},[39,284,285],{"class":252}," 差分の数値・キーワード: bold\n",[14,287,288,289,166,292,295],{},"ルール追加後、9ファイル35箇所の ",[36,290,291],{},"font-weight=\"bold\"",[36,293,294],{},"font-weight=\"normal\""," に書き換えた。preview.htmlを再描画したら、視線が数字に向くようになった。",[142,297,299],{"id":298},"バグ3-テキストはみ出しp026の現金化スピード列p050の見切れ","バグ3: テキストはみ出し（p026の現金化スピード列、p050の「。」見切れ）",[14,301,302,303,306],{},"これが一番やっかいだった。Chrome DevToolsで開いて初めて「右端の文字が切れている」「最下部の句点が見切れている」と気づくケース。SVGのviewBox内に収まっているように見えても、",[36,304,305],{},"\u003Ctext>"," のサイズ計算が甘いと枠外に飛び出す。",[14,308,309],{},"Pythonで全47枚を厳密チェックするスクリプトを書いた。",[29,311,315],{"className":312,"code":313,"language":314,"meta":34,"style":34},"language-python shiki shiki-themes vitesse-light vitesse-light","# 各 \u003Ctext> 要素の x + 文字数 * フォントサイズ係数 を計算し、\n# viewBox の幅を超えるテキストを検出\n","python",[36,316,317,322],{"__ignoreMap":34},[39,318,319],{"class":41,"line":42},[39,320,321],{"class":70},"# 各 \u003Ctext> 要素の x + 文字数 * フォントサイズ係数 を計算し、\n",[39,323,324],{"class":41,"line":67},[39,325,326],{"class":70},"# viewBox の幅を超えるテキストを検出\n",[14,328,329],{},"スクリプトで弾かれた候補を、Chrome DevToolsで16枚実画面確認した。p026の「現金化スピード」列のヘッダーが幅をはみ出していたのと、p050の本文最下行の「。」が下にはみ出していたのを修正した。",[21,331,333],{"id":332},"_5-マゼンタ強調をここだけ見ればいい12箇所に追加","5. マゼンタ強調を「ここだけ見ればいい」1〜2箇所に追加",[14,335,336],{},"47枚の構造修正が落ち着いた後、各SVGに「読者がここだけ見ればこのページの言いたいことが伝わる」という1〜2箇所をマゼンタで強調した。svg-diagramスキルにあるパターンを素直に適用しただけだが、preview.htmlで一気にスクロールすると、マゼンタの位置だけ目で拾える。教材としての「視線の導線」が一段強くなった。",[21,338,340],{"id":339},"_6-previewhtmlで章別に並べる","6. preview.htmlで章別に並べる",[14,342,343],{},"最後に preview.html を作って、47枚のSVGを章ごとに整理した。全部一画面でスクロールできるので、構成のバランス（第3章だけ図が多すぎないか等）が一目で分かる。",[14,345,346],{},"ついでに「サブメッセージ以下は+16pxシフト」の調整も入れた。各図の説明文がメインメッセージに寄りすぎていて読みづらかったので、垂直方向の余白を広げた。",[21,348,350],{"id":349},"_7-引き継ぎドキュメント-session-handovermd","7. 引き継ぎドキュメント session-handover.md",[14,352,353,354,357],{},"セッションが長くなってきたので、明日以降の続きのために ",[36,355,356],{},"session-handover.md"," を作った。",[90,359,360,363,366,369],{},[93,361,362],{},"どのページが完了したか（47/47）",[93,364,365],{},"どのバグを潰したか",[93,367,368],{},"svg-diagramスキルに追加した新ルール",[93,370,371],{},"preview.htmlの場所と開き方",[14,373,374,375,378],{},"明日 ",[36,376,377],{},"/clear"," してもこのファイルから再開できる。",[21,380,381],{"id":381},"今日の学び",[90,383,384,390,396,402],{},[93,385,386,389],{},[96,387,388],{},"インベントリを先に作る",": 199ページを「全部見る」のは無理。図あり/なしを先に判定して、対象を47枚に絞ってから着手したのが正解だった",[93,391,392,395],{},[96,393,394],{},"「表示確認をちゃんと」は毎回言われる前にやる",": 生成して終わり、ではなく Chrome DevTools で1枚ずつ画面で見る。これをサボったので3バグ連続で踏んだ",[93,397,398,401],{},[96,399,400],{},"対比図の反復ラベルは太字にしない",": スキルに追加した。次回以降のSVG生成でこの罠を踏まなくなる",[93,403,404,410,411,414,415,418,419,421,422,424],{},[96,405,406,407,409],{},"XMLエスケープは ",[36,408,155],{}," だけで十分死ぬ",": ",[36,412,413],{},"\u003C"," や ",[36,416,417],{},">"," 以外にも ",[36,420,155],{}," がトラップ。対象テキストに会社名が出てきたら最初に grep で ",[36,423,155],{}," を探す癖をつけたい",[21,426,427],{"id":427},"明日やること",[90,429,432,445,451,457],{"className":430},[431],"contains-task-list",[93,433,436,440,441,444],{"className":434},[435],"task-list-item",[437,438],"input",{"disabled":192,"type":439},"checkbox"," preview.html を本番ページに組み込む（",[36,442,443],{},"/financial-statements-textbook"," のような専用ページに配置）",[93,446,448,450],{"className":447},[435],[437,449],{"disabled":192,"type":439}," 47枚のSVGに alt テキストを追加してアクセシビリティ対応",[93,452,454,456],{"className":453},[435],[437,455],{"disabled":192,"type":439}," 図の下に出典ページ番号（p.026 等）を小さく入れて、原書との突合を可能にする",[93,458,460,462],{"className":459},[435],[437,461],{"disabled":192,"type":439}," svg-diagramスキルの新ルール「対比図での反復ラベル太字禁止」を、過去に作った他のSVG資産にも適用するか検討",[464,465,466],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sFA8A, html code.shiki .sFA8A{--shiki-default:#999999;--shiki-default-font-weight:bold;--shiki-dark:#999999;--shiki-dark-font-weight:bold}html pre.shiki code .syTZV, html code.shiki .syTZV{--shiki-default:#1C6B48;--shiki-default-font-weight:bold;--shiki-dark:#1C6B48;--shiki-dark-font-weight:bold}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}",{"title":34,"searchDepth":67,"depth":67,"links":468},[469,470,471,472,477,478,479,480,481],{"id":23,"depth":67,"text":24},{"id":84,"depth":67,"text":85},{"id":111,"depth":67,"text":112},{"id":132,"depth":67,"text":133,"children":473},[474,475,476],{"id":144,"depth":189,"text":145},{"id":208,"depth":189,"text":209},{"id":298,"depth":189,"text":299},{"id":332,"depth":67,"text":333},{"id":339,"depth":67,"text":340},{"id":349,"depth":67,"text":350},{"id":381,"depth":67,"text":381},{"id":427,"depth":67,"text":427},"dev","1ヶ月寝かせていた決算書教材PDF（199ページ）の図解化に着手。pdftoppmで全ページを画像化、図インベントリを作成し、サブエージェント並列でSVG47枚を生成。途中でXMLエスケープ漏れ、反復ラベル太字、テキストはみ出しのバグを連続で踏み、svg-diagramスキルに新ルールを追加した記録。","md",{},null,"/financial-statements-book-svg-diagrams","eurekapu-nuxt4",false,"2026-05-11T00:00:00.000Z",{"title":5,"description":483},"2026-05/2026-05-11/financial-statements-book-svg-diagrams",[494,495,496,497,498,499],"svg-diagram","pdf","教材作成","決算書","サブエージェント","Claude-Code","gidQVFwMMvbObZdGLzIgG1sxJwE4GDFAAqVX2U1IlV4",[],"https://log.eurekapu.com/og/blog/financial-statements-book-svg-diagrams.png?v=2026-05-11T00%3A00%3A00.000Z&title=%E6%B1%BA%E7%AE%97%E6%9B%B8%E3%81%AE%E8%AA%AD%E3%81%BF%E6%96%B9%E6%95%99%E6%9D%90%3A%20PDF199%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8B%E3%82%8947%E6%9E%9A%E3%81%AESVG%E5%9B%B3%E8%A7%A3%E4%BD%9C%E6%88%90%E3%81%A8%E8%A1%A8%E7%A4%BA%E7%A2%BA%E8%AA%8D%E3%81%AE%E8%90%BD%E3%81%A8%E3%81%97%E7%A9%B4&author=Kei%20Komatsu&sig=0c08f2589eb120e4",1782528835396]