[{"data":1,"prerenderedAt":249},["ShallowReactive",2],{"content-/beppyo-svg-deformed-design":3,"all-pages-for-dir":247,"og-image-/beppyo-svg-deformed-design":248},{"id":4,"title":5,"body":6,"category":225,"description":226,"extension":227,"meta":228,"navigation":229,"path":230,"project_name":231,"published":232,"publishedAt":233,"seo":234,"stem":235,"tags":236,"todo":244,"unpublished":232,"updatedAt":245,"__hash__":246},"pages/2026-04/2026-04-22/beppyo-svg-deformed-design.md","別表デフォルメSVG図解を22枚制作しウォーターフォールチャートをv4まで磨いた記録",{"type":7,"value":8,"toc":202},"minimark",[9,13,17,21,24,27,30,33,38,41,45,48,52,55,59,62,66,70,73,76,80,83,87,90,94,106,109,113,116,119,123,126,129,133,136,139,142,145,149,152,159,165,171,174,177],[10,11,5],"h1",{"id":12},"別表デフォルメsvg図解を22枚制作しウォーターフォールチャートをv4まで磨いた記録",[14,15,16],"p",{},"22個のプレースホルダーSVGを実際の図解に置き換えた。5つのサブエージェントに分担させ、別表四・五(一)・五(二)・十四(二)のデフォルメ版を並列に描いた。寄付金のウォーターフォールチャートは4回描き直した。v1で「計算構造が見えない」と突き返され、v4でようやく計算式が紙面に乗った。",[18,19,20],"h2",{"id":20},"プレースホルダー22枚を一括置換する",[14,22,23],{},"解説コンテンツのSVG欄には「ここに図が入ります」と書かれたグレーの矩形が22枚並んでいた。1枚ずつ手で差し替えていたら日が暮れる。サブエージェント5つを立て、章ごとに割り振った。",[14,25,26],{},"割り振り方はシンプルで、章番号で区切った。各サブエージェントには「この章のプレースホルダーSVGを、本文の内容に合った図解に置き換えろ」と一文で指示を投げる。別表四を担当するエージェント、別表五(一)を担当するエージェント、という具合だ。5つが同時に動き始め、22枚が揃うまでの時間は1枚ずつ描くのと比べて体感で3分の1に縮まった。",[18,28,29],{"id":29},"デフォルメ版別表の設計思想",[14,31,32],{},"別表の原本は国税庁の様式そのままだと行数が多く、初学者の目が泳ぐ。そこで「デフォルメ版」を描いた。行を間引き、数値を丸め、構造だけが残るようにする。会計の参考書に載っている実際の数値をそのまま使い、読者が書籍と突き合わせられるようにした。",[34,35,37],"h3",{"id":36},"別表四所得計算の明細書","別表四（所得計算の明細書）",[14,39,40],{},"損益計算書の当期純利益からスタートし、加算・減算の調整を経て所得金額に着地する。この一連の流れを1枚に収めた。仮計の行だけ背景色を変えた。仮計は別表五(一)へ数字を送り出す中継地点で、ここを読み飛ばすと別表間の連動が途切れる。",[34,42,44],{"id":43},"別表五一利益積立金額-資本金等の額","別表五(一)（利益積立金額 + 資本金等の額）",[14,46,47],{},"I区分（利益積立金額）とII区分（資本金等の額）を上下に並べた。期首 → 増減 → 期末の流れを左から右に読めるレイアウトにした。繰越損益金と納税充当金の行だけ背景色を濃くして、読者の目がまずそこに止まるようにした。参考書に載っている具体的な金額をそのまま入れたので、書籍を横に開きながら図を追える。",[34,49,51],{"id":50},"別表五二租税公課の納付状況","別表五(二)（租税公課の納付状況）",[14,53,54],{},"概要版とディテール版の2枚を描いた。概要版は「法人税・住民税・事業税がどこに消えたか」だけを追える。ディテール版は各税目の充当金・中間納付・確定納付を行単位で展開した。1枚にまとめると情報が詰まりすぎるので、ズームイン・ズームアウトの2段階構成にした。",[34,56,58],{"id":57},"別表十四二寄付金の損金算入","別表十四(二)（寄付金の損金算入）",[14,60,61],{},"ここが最も手がかかった。寄付金の損金算入限度額は計算式が複数段に分かれる。この構造をどう図にするかで4回描き直した。",[18,63,65],{"id":64},"ウォーターフォールチャートv1v4の反復","ウォーターフォールチャートv1→v4の反復",[34,67,69],{"id":68},"v1-ただの棒グラフ","v1: ただの棒グラフ",[14,71,72],{},"最初に描いたウォーターフォールは、寄付金の総額・損金算入限度額・損金不算入額を棒グラフで並べただけだった。レビューで「これはただの棒グラフだ。ウォーターフォールになっていない」と突き返された。",[14,74,75],{},"ウォーターフォールチャートは「前の値の上に次の値が積み上がる」ことで増減の内訳を見せる。v1の棒は全部ベースラインから立ち上がっていた。積み上がっていないのだから、ウォーターフォールではない。",[34,77,79],{"id":78},"v2-棒の開始位置を揃える","v2: 棒の開始位置を揃える",[14,81,82],{},"棒の開始位置を前の棒の終了位置に合わせた。加算は上に伸び、減算は下に削れる。損金算入限度額が所得金額と資本金等の額から計算される過程を、2本の棒が合流する形で描いた。構造は見えるようになった。しかし図の入口が唐突で、「この数字はどこから来たのか」がわからなかった。",[34,84,86],{"id":85},"v3-別表四から矢印を引く","v3: 別表四から矢印を引く",[14,88,89],{},"別表四の仮計と資本金等の額を図の上段に小さく配置し、矢印でウォーターフォールの入口に接続した。数字の出所が1枚で追えるようになった。ただ上段が詰まりすぎて、計算式を書くスペースがなかった。文字が7ptまで縮んでいた。",[34,91,93],{"id":92},"v4-上段を広げ計算式を書き込む","v4: 上段を広げ計算式を書き込む",[14,95,96,97,101,102,105],{},"上段の縦幅を倍に広げた。",[98,99,100],"code",{},"10,000,000 x 6.25/100 = 625,000"," のような計算式をSVGの",[98,103,104],{},"\u003Ctext>","要素として直接書き込んだ。読者が電卓を叩かなくても、図の中だけで計算が追える。4回目にしてようやく「初学者がこの1枚で手を動かせる」と判断できた。",[14,107,108],{},"v1からv4まで、描いては壊しを繰り返した。完成形だけ見ればv4の1枚で済む話だが、v1の失敗がなければv2の発想は出なかったし、v3の窮屈さを経験しなければv4で上段を広げる判断もできなかった。",[18,110,112],{"id":111},"論点別3点セットsvg","論点別3点セットSVG",[14,114,115],{},"別表を1枚ずつ理解しても、論点単位でつなげて読めないと実務で手が止まる。そこで「論点別3点セット」を描いた。",[14,117,118],{},"たとえば貸倒引当金なら、別表十一(一)(貸倒引当金の計算) → 別表四(加算・減算の調整) → 別表五(一)(利益積立金額への反映)の3枚が1つの論点を構成する。この流れを1枚のSVGに横並びで配置し、矢印でつないだ。読者は左から右に目を動かすだけで、1つの論点が別表をどう横断するかを追える。",[18,120,122],{"id":121},"フロー-x-ストックの対応関係","フロー x ストックの対応関係",[14,124,125],{},"簿記3級で学ぶ「フロー(P/L) x ストック(B/S)」の構造が、そのまま別表にも当てはまる。P/Lで計算した利益がB/Sに流れるように、別表四で計算した所得が別表五(一)に流れる。",[14,127,128],{},"この対応関係を概念図にして解説コンテンツの冒頭に置いた。「難しそうな別表も、簿記3級の延長で読める」と読者が気づけば、学習の心理的ハードルが下がる。実際、別表四は「税務版P/L」、別表五(一)は「税務版B/S」と呼べる構造になっている。",[18,130,132],{"id":131},"正規化テーブルというアプローチ","「正規化テーブル」というアプローチ",[14,134,135],{},"別表の様式を眺めていて気づいたことがある。これは「正規化されていないテーブル」だ。",[14,137,138],{},"RDBの設計でいえば、1つのテーブルに複数の関心事が詰め込まれている。別表五(二)がその典型で、税目別の納付状況と納税充当金の計算が1枚の紙に同居している。だから読みづらいし、どこから読み始めればいいかわからない。",[14,140,141],{},"解説コンテンツでは「中間テーブル」を挟むアプローチを採った。まず別表の数値を論点ごとに分解して、正規化されたテーブルに整理する。それから別表の様式に転記する。別表をいきなり読むのではなく、一度分解してから組み立て直す。この順番の方が読者の手が動く。",[14,143,144],{},"RDBの正規化を知っているエンジニアなら、この説明で「ああ、あれか」と腑に落ちるはずだ。別表の読みにくさの正体は、正規化されていないスキーマと同じだった。",[18,146,148],{"id":147},"qaで固めた概念","Q&Aで固めた概念",[14,150,151],{},"制作中に出てきた疑問を3つ、Q&A形式で整理した。",[14,153,154,158],{},[155,156,157],"strong",{},"社外流出はなぜ別表五(一)に残らないのか。"," 社外流出した金額（配当・役員賞与など）は会社の外に出ていくので、税務B/S（別表五(一)）に相手科目が立たない。だから別表四で加算しても、別表五(一)には反映されない。",[14,160,161,164],{},[155,162,163],{},"CF計算書の間接法とのアナロジー。"," 別表四は間接法のキャッシュフロー計算書に似ている。当期純利益からスタートし、「会計と税務のズレ」を加減算して所得金額に着地する。間接法が「利益からキャッシュへの橋渡し」なら、別表四は「利益から所得への橋渡し」だ。",[14,166,167,170],{},[155,168,169],{},"納税充当金と法人税等の差額は何か。"," 納税充当金（税務上の概念）と未払法人税等（会計上の概念）は通常一致するが、事業税でズレが生じる。事業税は損金算入されるため、別表五(二)の納税充当金から事業税を引いた残額と、B/Sの未払法人税等が一致しない。この差額の正体は事業税だ。",[14,172,173],{},"この3つのQ&Aを図解の余白に配置した。SVGを見ている最中に「なぜ?」が浮かんだとき、視線を動かすだけで答えに辿り着ける。",[18,175,176],{"id":176},"今日の手の動き",[178,179,180,184,187,190,193,196,199],"ul",{},[181,182,183],"li",{},"SVGプレースホルダー22枚 → 実図解に置換（サブエージェント5並列）",[181,185,186],{},"デフォルメ版別表: 四、五(一)、五(二)x2枚、十四(二)",[181,188,189],{},"ウォーターフォールチャート: v1→v2→v3→v4の4回描き直し",[181,191,192],{},"論点別3点セットSVG: 別表十一(一)→四→五(一)",[181,194,195],{},"フローxストック概念図",[181,197,198],{},"正規化テーブルアプローチの図解",[181,200,201],{},"Q&A 3問の概念整理",{"title":203,"searchDepth":204,"depth":204,"links":205},"",2,[206,207,214,220,221,222,223,224],{"id":20,"depth":204,"text":20},{"id":29,"depth":204,"text":29,"children":208},[209,211,212,213],{"id":36,"depth":210,"text":37},3,{"id":43,"depth":210,"text":44},{"id":50,"depth":210,"text":51},{"id":57,"depth":210,"text":58},{"id":64,"depth":204,"text":65,"children":215},[216,217,218,219],{"id":68,"depth":210,"text":69},{"id":78,"depth":210,"text":79},{"id":85,"depth":210,"text":86},{"id":92,"depth":210,"text":93},{"id":111,"depth":204,"text":112},{"id":121,"depth":204,"text":122},{"id":131,"depth":204,"text":132},{"id":147,"depth":204,"text":148},{"id":176,"depth":204,"text":176},"dev","法人税別表四・五・十四のデフォルメSVG図解を並列サブエージェント5つで一括制作。寄付金のウォーターフォールチャートはv1からv4まで4回描き直して計算構造を視覚化した","md",{},true,"/beppyo-svg-deformed-design","eurekapu-nuxt4",false,"2026-04-22T00:00:00.000Z",{"title":5,"description":226},"2026-04/2026-04-22/beppyo-svg-deformed-design",[237,238,239,240,241,242,243],"別表","SVG","デフォルメ","ウォーターフォールチャート","法人税","並列処理","図解","memo",null,"Vfnqath_JMMnDXSNF1bMFoLkJTL-A5FV4q5dIOPWBKs",[],"https://log.eurekapu.com/og/blog/beppyo-svg-deformed-design.png?v=2026-04-22T00%3A00%3A00.000Z&title=%E5%88%A5%E8%A1%A8%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%A1SVG%E5%9B%B3%E8%A7%A3%E3%82%9222%E6%9E%9A%E5%88%B6%E4%BD%9C%E3%81%97%E3%82%A6%E3%82%A9%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A9%E3%83%BC%E3%83%AB%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%82%92v4%E3%81%BE%E3%81%A7%E7%A3%A8%E3%81%84%E3%81%9F%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=8de76e171fe30417",1780786054052]