{
"id": "treemap-budget-allocation",
"schemaVersion": 2,
"title": {
"ja": "2026 年度の開発予算 — 8.0 億円のうち 4.5 割が維持",
"en": "This Year's Development Budget — 45% of ¥800M Goes to Keeping the Lights On"
},
"summary": {
"ja": "面積が金額のツリーマップ。色は上位 4 群だけに使い、子は親の色を継ぐので、階層と配分を 1 枚で読ませる",
"en": "A treemap where area is money. Colour marks only the four top-level groups and children inherit it, so hierarchy and allocation are read at once"
},
"capturedAt": "2026-09-16",
"categories": [
"presentation"
],
"tags": [
"data-viz",
"minimal"
],
"useCases": [
"pricing",
"prioritization"
],
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "area",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 96,
"right": 140,
"bottom": 96,
"left": 140
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em",
"leading": 1.3
},
"window": {
"size": 20,
"weight": 500,
"leading": 1.5
},
"cellName": {
"size": 22,
"weight": 500,
"leading": 1.4
},
"cellAmount": {
"size": 26,
"weight": 700,
"leading": 1.2,
"numeric": "tabular"
},
"legendLabel": {
"size": 22,
"weight": 500,
"leading": 1.4,
"numeric": "tabular"
},
"note": {
"size": 16,
"weight": 400,
"leading": 1.6
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#1C8C79",
"#2F6FB5",
"#9A6B12",
"#A85A2E"
]
},
"rules": [
{
"ja": "面積を金額に厳密に比例させる。1 つでも合っていないと、読み手は全部の区画を数字で確かめ直すことになり、図の意味が消える",
"en": "Make every area exactly proportional to its amount. One cell that does not match sends the reader back to check all of them by number, which is the end of the figure"
},
{
"ja": "区画に枠線を持たせない。線の太さは面積に含まれないのに、目には面積の一部として入る",
"en": "Give the cells no stroke. A border's thickness is not part of the area but the eye counts it as area"
},
{
"ja": "色は上位の群にだけ使い、子は親の色を継ぐ。子ごとに色を変えると、階層ではなく並列の区分に見える",
"en": "Colour the top-level groups only and let children inherit. Colouring children makes the hierarchy read as a flat list"
},
{
"ja": "群は 5 つまで。6 つ目からは色の見分けが付かなくなり、色が階層を示す役を果たせなくなる",
"en": "Five groups at most. From the sixth the hues stop being distinguishable and colour can no longer carry the hierarchy"
},
{
"ja": "細長い区画を作らない。縦横比が 4 を超えると、同じ面積でも小さく見える —— 比べさせたい量が、形の錯覚に負ける",
"en": "Avoid slivers. Past an aspect ratio of about four a cell looks smaller than its area, and the quantity you meant to compare loses to the illusion"
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.BRJzApcN.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": [
"waffle-one-in-hundred",
"donut-share-center-total"
]
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "area",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 96,
"right": 140,
"bottom": 96,
"left": 140
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em",
"leading": 1.3
},
"window": {
"size": 20,
"weight": 500,
"leading": 1.5
},
"cellName": {
"size": 22,
"weight": 500,
"leading": 1.4
},
"cellAmount": {
"size": 26,
"weight": 700,
"leading": 1.2,
"numeric": "tabular"
},
"legendLabel": {
"size": 22,
"weight": 500,
"leading": 1.4,
"numeric": "tabular"
},
"note": {
"size": 16,
"weight": 400,
"leading": 1.6
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#1C8C79",
"#2F6FB5",
"#9A6B12",
"#A85A2E"
]
},
"rules": [
"Make every area exactly proportional to its amount. One cell that does not match sends the reader back to check all of them by number, which is the end of the figure",
"Give the cells no stroke. A border's thickness is not part of the area but the eye counts it as area",
"Colour the top-level groups only and let children inherit. Colouring children makes the hierarchy read as a flat list",
"Five groups at most. From the sixth the hues stop being distinguishable and colour can no longer carry the hierarchy",
"Avoid slivers. Past an aspect ratio of about four a cell looks smaller than its area, and the quantity you meant to compare loses to the illusion"
]
},
"prompt": {
"ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 96 左 140\n\n## 文字（版面 1920px に対する px）\ntitle 44px / 700 / 字間 0.01em / 行送り 1.3\nwindow 20px / 500 / 行送り 1.5\ncellName 22px / 500 / 行送り 1.4\ncellAmount 26px / 700 / 行送り 1.2 / 等幅数字\nlegendLabel 22px / 500 / 行送り 1.4 / 等幅数字\nnote 16px / 400 / 行送り 1.6\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1C8C79 / #2F6FB5 / #9A6B12 / #A85A2E\n\n## 外すと崩れる点\n- 面積を金額に厳密に比例させる。1 つでも合っていないと、読み手は全部の区画を数字で確かめ直すことになり、図の意味が消える\n- 区画に枠線を持たせない。線の太さは面積に含まれないのに、目には面積の一部として入る\n- 色は上位の群にだけ使い、子は親の色を継ぐ。子ごとに色を変えると、階層ではなく並列の区分に見える\n- 群は 5 つまで。6 つ目からは色の見分けが付かなくなり、色が階層を示す役を果たせなくなる\n- 細長い区画を作らない。縦横比が 4 を超えると、同じ面積でも小さく見える —— 比べさせたい量が、形の錯覚に負ける\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/treemap-budget-allocation/pattern.html",
"en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 96 left 140\n\n## Type (px against a 1920px canvas)\ntitle 44px / 700 / tracking 0.01em / leading 1.3\nwindow 20px / 500 / leading 1.5\ncellName 22px / 500 / leading 1.4\ncellAmount 26px / 700 / leading 1.2 / tabular numerals\nlegendLabel 22px / 500 / leading 1.4 / tabular numerals\nnote 16px / 400 / leading 1.6\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #1C8C79 / #2F6FB5 / #9A6B12 / #A85A2E\n\n## Constraints — dropping these breaks it\n- Make every area exactly proportional to its amount. One cell that does not match sends the reader back to check all of them by number, which is the end of the figure\n- Give the cells no stroke. A border's thickness is not part of the area but the eye counts it as area\n- Colour the top-level groups only and let children inherit. Colouring children makes the hierarchy read as a flat list\n- Five groups at most. From the sixth the hues stop being distinguishable and colour can no longer carry the hierarchy\n- Avoid slivers. Past an aspect ratio of about four a cell looks smaller than its area, and the quantity you meant to compare loses to the illusion\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/treemap-budget-allocation/pattern.html."
},
"code": {
"html": "\n\n2026 年度の開発予算 — 8.0 億円のうち 4.5 割が維持\n\n\n\n\n