{
"id": "sunburst-it-budget-hierarchy",
"schemaVersion": 2,
"title": {
"ja": "年間IT予算1億円の配分 — 基盤運用48%",
"en": "Annual IT Budget Allocation — Platform Operations Account for 48%"
},
"summary": {
"ja": "全体から親カテゴリ、親から内訳へと同心円セクターを分割し、放射角を構成比に比例させるsunburst chart",
"en": "A sunburst chart partitions concentric sectors from whole to parent categories and subcategories, with angular span proportional to share."
},
"capturedAt": "2026-09-25",
"categories": [
"presentation"
],
"tags": [
"data-viz",
"minimal"
],
"useCases": [
"comparison",
"comparison"
],
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "radial",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 100,
"right": 140,
"bottom": 100,
"left": 140
}
},
"type": {
"title": {
"size": 46,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 500
},
"axisTitle": {
"size": 22,
"weight": 700
},
"total": {
"size": 28,
"weight": 700
},
"group": {
"size": 22,
"weight": 700
},
"child": {
"size": 20,
"weight": 500
},
"takeaway": {
"size": 28,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#1F5FA8",
"#668CB9",
"#A85A2E",
"#D78D64",
"#1C8C79",
"#5DB5A5"
]
},
"rules": [
{
"ja": "親カテゴリは48/30/22で全額の100%、子カテゴリは31/17/18/12/14/8で全額の100%を分ける",
"en": "Parent shares 48/30/22 and child shares 31/17/18/12/14/8 each partition the full 100%."
},
{
"ja": "内側リングのセクター角度が親カテゴリ比、外側リングの角度が個別内訳比に比例する",
"en": "Inner-ring sector angle is proportional to parent share; outer-ring angle is proportional to each child share."
},
{
"ja": "同じ色相の濃淡が親子を対応させ、リングの位置が階層レベルを示す",
"en": "Related hues connect parent and child categories; ring position encodes hierarchy level."
},
{
"ja": "架空の年間予算。単位と配賦期間を揃え、階層ごとの合計が親金額と一致する",
"en": "Fictional annual budget. Keep unit and period consistent; child totals must equal each parent amount."
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.Cl4vmoOS.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": []
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "radial",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 100,
"right": 140,
"bottom": 100,
"left": 140
}
},
"type": {
"title": {
"size": 46,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 500
},
"axisTitle": {
"size": 22,
"weight": 700
},
"total": {
"size": 28,
"weight": 700
},
"group": {
"size": 22,
"weight": 700
},
"child": {
"size": 20,
"weight": 500
},
"takeaway": {
"size": 28,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#1F5FA8",
"#668CB9",
"#A85A2E",
"#D78D64",
"#1C8C79",
"#5DB5A5"
]
},
"rules": [
"Parent shares 48/30/22 and child shares 31/17/18/12/14/8 each partition the full 100%.",
"Inner-ring sector angle is proportional to parent share; outer-ring angle is proportional to each child share.",
"Related hues connect parent and child categories; ring position encodes hierarchy level.",
"Fictional annual budget. Keep unit and period consistent; child totals must equal each parent amount."
]
},
"prompt": {
"ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 140 下 100 左 140\n\n## 文字（版面 1920px に対する px）\ntitle 46px / 700 / 字間 0.01em\nsubtitle 22px / 500\naxisTitle 22px / 700\ntotal 28px / 700\ngroup 22px / 700\nchild 20px / 500\ntakeaway 28px / 500\nnote 20px / 400\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1F5FA8 / #668CB9 / #A85A2E / #D78D64 / #1C8C79 / #5DB5A5\n\n## 外すと崩れる点\n- 親カテゴリは48/30/22で全額の100%、子カテゴリは31/17/18/12/14/8で全額の100%を分ける\n- 内側リングのセクター角度が親カテゴリ比、外側リングの角度が個別内訳比に比例する\n- 同じ色相の濃淡が親子を対応させ、リングの位置が階層レベルを示す\n- 架空の年間予算。単位と配賦期間を揃え、階層ごとの合計が親金額と一致する\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/sunburst-it-budget-hierarchy/pattern.html",
"en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 140 bottom 100 left 140\n\n## Type (px against a 1920px canvas)\ntitle 46px / 700 / tracking 0.01em\nsubtitle 22px / 500\naxisTitle 22px / 700\ntotal 28px / 700\ngroup 22px / 700\nchild 20px / 500\ntakeaway 28px / 500\nnote 20px / 400\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #1F5FA8 / #668CB9 / #A85A2E / #D78D64 / #1C8C79 / #5DB5A5\n\n## Constraints — dropping these breaks it\n- Parent shares 48/30/22 and child shares 31/17/18/12/14/8 each partition the full 100%.\n- Inner-ring sector angle is proportional to parent share; outer-ring angle is proportional to each child share.\n- Related hues connect parent and child categories; ring position encodes hierarchy level.\n- Fictional annual budget. Keep unit and period consistent; child totals must equal each parent amount.\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/sunburst-it-budget-hierarchy/pattern.html."
},
"code": {
"html": "年間IT予算1億円の配分 — 基盤運用48%