1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 100 右 140 下 100 左 140 ## 文字（版面 1920px に対する px） title 46px / 700 / 字間 0.01em subtitle 22px / 500 axisTitle 22px / 700 total 28px / 700 group 22px / 700 child 20px / 500 takeaway 28px / 500 note 20px / 400 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1F5FA8 / #668CB9 / #A85A2E / #D78D64 / #1C8C79 / #5DB5A5 ## 外すと崩れる点 - 親カテゴリは48/30/22で全額の100%、子カテゴリは31/17/18/12/14/8で全額の100%を分ける - 内側リングのセクター角度が親カテゴリ比、外側リングの角度が個別内訳比に比例する - 同じ色相の濃淡が親子を対応させ、リングの位置が階層レベルを示す - 架空の年間予算。単位と配賦期間を揃え、階層ごとの合計が親金額と一致する 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/sunburst-it-budget-hierarchy/pattern.html
/ai/designs/sunburst-it-budget-hierarchy.json
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:
- 親カテゴリは48/30/22で全額の100%、子カテゴリは31/17/18/12/14/8で全額の100%を分ける
- 内側リングのセクター角度が親カテゴリ比、外側リングの角度が個別内訳比に比例する
- 同じ色相の濃淡が親子を対応させ、リングの位置が階層レベルを示す
- 架空の年間予算。単位と配賦期間を揃え、階層ごとの合計が親金額と一致する{
"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": [
"親カテゴリは48/30/22で全額の100%、子カテゴリは31/17/18/12/14/8で全額の100%を分ける",
"内側リングのセクター角度が親カテゴリ比、外側リングの角度が個別内訳比に比例する",
"同じ色相の濃淡が親子を対応させ、リングの位置が階層レベルを示す",
"架空の年間予算。単位と配賦期間を揃え、階層ごとの合計が親金額と一致する"
]
} /designs/sunburst-it-budget-hierarchy/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!doctype html><meta charset="utf-8"><title>年間IT予算1億円の配分 — 基盤運用48%</title><meta name="dv-font" content="Zen Kaku Gothic New:400;500;700"><link rel="stylesheet" href="./font.css"><style>:root{--ground:#FFFFFF;--surface:#F4F6F9;--ink:#131820;--muted:#667183;--accent:#1F5FA8;--rule:#DBE1E9;--series-1:#1F5FA8;--series-2:#668CB9;--series-3:#A85A2E;--series-4:#D78D64;--series-5:#1C8C79;--series-6:#5DB5A5;}*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px}body{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}.artboard{width:1920px;height:1080px;padding:100px 140px;background:var(--ground);color:var(--ink)}.content{width:100%;height:100%;position:relative}.figure{position:absolute;left:-140px;top:-100px;width:1920px;height:1080px}</style><div class="artboard" data-artboard><div class="content" data-content><svg class="figure" width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="年間IT予算1億円を基盤運用48%、商品開発30%、販売22%に分け、さらに6項目へ放射状に階層分解したsunburst chart。"><style>.figure{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}.ground{fill:var(--ground)}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.rule{stroke:var(--rule)}.title{font-size:46px;font-weight:700;letter-spacing:.01em}.subtitle{font-size:22px;font-weight:500}.axis-title{font-size:22px;font-weight:700}.parent-label{font-size:22px;font-weight:700;fill:var(--ground)}.group{font-size:22px;font-weight:700}.child{font-size:20px;font-weight:500}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}.swatch.series-1{fill:var(--series-1)}.swatch.series-2{fill:var(--series-2)}.swatch.series-3{fill:var(--series-3)}.swatch.series-4{fill:var(--series-4)}.swatch.series-5{fill:var(--series-5)}.swatch.series-6{fill:var(--series-6)}.series-1{fill:var(--series-1);stroke:var(--ground);stroke-width:3}.series-2{fill:var(--series-2);stroke:var(--ground);stroke-width:3}.series-3{fill:var(--series-3);stroke:var(--ground);stroke-width:3}.series-4{fill:var(--series-4);stroke:var(--ground);stroke-width:3}.series-5{fill:var(--series-5);stroke:var(--ground);stroke-width:3}.series-6{fill:var(--series-6);stroke:var(--ground);stroke-width:3}</style><rect class="ground" width="1920" height="1080"/><text class="ink title" data-type="title" x="140" y="153">年間IT予算1億円の配分 — 基盤運用48%</text><text class="muted subtitle" data-type="subtitle" x="140" y="201">親カテゴリの比率と各項目への内訳 / 架空予算</text><line class="rule" x1="140" y1="238" x2="1780" y2="238" stroke-width="2"/><text class="ink axis-title" data-type="axisTitle" x="960" y="294" text-anchor="middle">角度の合計が全体比率、リングの深さが階層を示す</text><path class="series-1" d="M 830.00 435.00 A 155 155 0 0 1 849.43 743.78 L 838.27 655.48 A 66 66 0 0 0 830.00 524.00 Z"/><path class="series-1" d="M 830.00 320.00 A 270 270 0 0 1 1081.04 689.39 L 974.12 647.06 A 155 155 0 0 0 830.00 435.00 Z"/><path class="series-2" d="M 1081.04 689.39 A 270 270 0 0 1 863.84 857.87 L 849.43 743.78 A 155 155 0 0 0 974.12 647.06 Z"/><path class="series-3" d="M 849.43 743.78 A 155 155 0 0 1 677.75 560.96 L 765.17 577.63 A 66 66 0 0 0 838.27 655.48 Z"/><path class="series-3" d="M 863.84 857.87 A 270 270 0 0 1 602.03 734.67 L 699.13 673.05 A 155 155 0 0 0 849.43 743.78 Z"/><path class="series-4" d="M 602.03 734.67 A 270 270 0 0 1 564.78 539.41 L 677.75 560.96 A 155 155 0 0 0 699.13 673.05 Z"/><path class="series-5" d="M 677.75 560.96 A 155 155 0 0 1 830.00 435.00 L 830.00 524.00 A 66 66 0 0 0 765.17 577.63 Z"/><path class="series-5" d="M 564.78 539.41 A 270 270 0 0 1 699.93 353.40 L 755.33 454.17 A 155 155 0 0 0 677.75 560.96 Z"/><path class="series-6" d="M 699.93 353.40 A 270 270 0 0 1 830.00 320.00 L 830.00 435.00 A 155 155 0 0 0 755.33 454.17 Z"/><circle cx="830" cy="590" r="64" fill="var(--ground)" stroke="var(--rule)" stroke-width="2"/><text class="muted" x="830" y="578" font-size="20" font-weight="500" text-anchor="middle">年間予算</text><text class="ink" data-type="total" x="830" y="615" font-size="28" font-weight="700" text-anchor="middle">1.0億円</text><line class="rule" x1="1150" y1="365" x2="1150" y2="840" stroke-width="1.5"/><rect class="swatch series-1" x="1190" y="405" width="18" height="18" rx="4"/><text class="ink group" data-type="group" x="1225" y="414" dominant-baseline="central">基盤運用 48% 4800万円</text><rect class="swatch series-1" x="1224" y="438" width="16" height="16" rx="3"/><text class="ink child" data-type="child" x="1254" y="447" dominant-baseline="central">インフラ 31% 3100万円</text><rect class="swatch series-2" x="1224" y="472" width="16" height="16" rx="3"/><text class="ink child" data-type="child" x="1254" y="481" dominant-baseline="central">監視・保守 17% 1700万円</text><rect class="swatch series-3" x="1190" y="555" width="18" height="18" rx="4"/><text class="ink group" data-type="group" x="1225" y="564" dominant-baseline="central">商品開発 30% 3000万円</text><rect class="swatch series-3" x="1224" y="588" width="16" height="16" rx="3"/><text class="ink child" data-type="child" x="1254" y="597" dominant-baseline="central">共通機能 18% 1800万円</text><rect class="swatch series-4" x="1224" y="622" width="16" height="16" rx="3"/><text class="ink child" data-type="child" x="1254" y="631" dominant-baseline="central">モバイル 12% 1200万円</text><rect class="swatch series-5" x="1190" y="705" width="18" height="18" rx="4"/><text class="ink group" data-type="group" x="1225" y="714" dominant-baseline="central">販売 22% 2200万円</text><rect class="swatch series-5" x="1224" y="738" width="16" height="16" rx="3"/><text class="ink child" data-type="child" x="1254" y="747" dominant-baseline="central">法人営業 14% 1400万円</text><rect class="swatch series-6" x="1224" y="772" width="16" height="16" rx="3"/><text class="ink child" data-type="child" x="1254" y="781" dominant-baseline="central">販促 8% 800万円</text><text class="ink takeaway" data-type="takeaway" x="960" y="927" text-anchor="middle">基盤運用が48% — 内訳はインフラ31%、監視・保守17%</text><line class="rule" x1="140" y1="974" x2="1780" y2="974" stroke-width="1"/><text class="muted note" data-type="note" x="140" y="1013">セクター面積は金額構成比に比例する。階層ごとに合計が全体と一致する架空例。</text></svg></div></div> /designs/sunburst-it-budget-hierarchy/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 104 (4f2ce31f6a3ce033)
*
* pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
* 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
* その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
*/
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(./font-0.woff2) format('woff2');
unicode-range: U+25, U+2e-34, U+37-38, U+49, U+54, U+2014, U+3001-3002, U+304b-304c, U+3053-3056, U+3059-305a, U+3068-3069, U+306b, U+306e-3070, U+3078-3079, U+308b, U+3092, U+3099, U+30a4, U+30ab-30ac, U+30af-30b0, U+30b3-30b4, U+30bb-30bc, U+30bf-30c0, U+30c6-30c7, U+30cf-30d0, U+30d5-30d6, U+30e2, U+30e9-30eb, U+30f3, U+30fb-30fc, U+4e00, U+4e07, U+4e88, U+4eba, U+4f53, U+4f8b, U+4fc3, U+4fdd, U+5104, U+5168, U+5171, U+5185-5186, U+5206, U+5404, U+5408, U+54c1, U+5546, U+55b6, U+57fa, U+58f2, U+5b88, U+5c64, U+5e74, U+5ea6, U+6210, U+67b6, U+696d, U+69cb, U+6a5f, U+6bd4, U+6cd5, U+6df1, U+7387, U+7528, U+767a, U+76e3-76e4, U+76ee, U+793a, U+7a4d, U+7a7a, U+7b97, U+80fd, U+81f4, U+8996, U+89aa, U+89d2, U+8a08, U+8a33, U+8ca9, U+901a, U+904b, U+914d, U+91d1, U+958b, U+9593, U+968e, U+9762, U+9805, U+984d;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 500;
font-display: block;
src: url(./font-1.woff2) format('woff2');
unicode-range: U+25, U+2e-34, U+37-38, U+49, U+54, U+2014, U+3001-3002, U+304b-304c, U+3053-3056, U+3059-305a, U+3068-3069, U+306b, U+306e-3070, U+3078-3079, U+308b, U+3092, U+3099, U+30a4, U+30ab-30ac, U+30af-30b0, U+30b3-30b4, U+30bb-30bc, U+30bf-30c0, U+30c6-30c7, U+30cf-30d0, U+30d5-30d6, U+30e2, U+30e9-30eb, U+30f3, U+30fb-30fc, U+4e00, U+4e07, U+4e88, U+4eba, U+4f53, U+4f8b, U+4fc3, U+4fdd, U+5104, U+5168, U+5171, U+5185-5186, U+5206, U+5404, U+5408, U+54c1, U+5546, U+55b6, U+57fa, U+58f2, U+5b88, U+5c64, U+5e74, U+5ea6, U+6210, U+67b6, U+696d, U+69cb, U+6a5f, U+6bd4, U+6cd5, U+6df1, U+7387, U+7528, U+767a, U+76e3-76e4, U+76ee, U+793a, U+7a4d, U+7a7a, U+7b97, U+80fd, U+81f4, U+8996, U+89aa, U+89d2, U+8a08, U+8a33, U+8ca9, U+901a, U+904b, U+914d, U+91d1, U+958b, U+9593, U+968e, U+9762, U+9805, U+984d;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 700;
font-display: block;
src: url(./font-2.woff2) format('woff2');
unicode-range: U+25, U+2e-34, U+37-38, U+49, U+54, U+2014, U+3001-3002, U+304b-304c, U+3053-3056, U+3059-305a, U+3068-3069, U+306b, U+306e-3070, U+3078-3079, U+308b, U+3092, U+3099, U+30a4, U+30ab-30ac, U+30af-30b0, U+30b3-30b4, U+30bb-30bc, U+30bf-30c0, U+30c6-30c7, U+30cf-30d0, U+30d5-30d6, U+30e2, U+30e9-30eb, U+30f3, U+30fb-30fc, U+4e00, U+4e07, U+4e88, U+4eba, U+4f53, U+4f8b, U+4fc3, U+4fdd, U+5104, U+5168, U+5171, U+5185-5186, U+5206, U+5404, U+5408, U+54c1, U+5546, U+55b6, U+57fa, U+58f2, U+5b88, U+5c64, U+5e74, U+5ea6, U+6210, U+67b6, U+696d, U+69cb, U+6a5f, U+6bd4, U+6cd5, U+6df1, U+7387, U+7528, U+767a, U+76e3-76e4, U+76ee, U+793a, U+7a4d, U+7a7a, U+7b97, U+80fd, U+81f4, U+8996, U+89aa, U+89d2, U+8a08, U+8a33, U+8ca9, U+901a, U+904b, U+914d, U+91d1, U+958b, U+9593, U+968e, U+9762, U+9805, U+984d;
}
全体予算はどの大分類に配分され、各分類の内訳はどこへ向かっているか。
中心の総額から内側リングの親カテゴリ、外側リングの子カテゴリへ放射状に分割する。各セクターの角度が全体に対する金額比、リングの深さが階層レベルを表す。色相は親カテゴリ、同系の濃淡はその内訳に対応する。
年間IT予算1億円は基盤運用48%、商品開発30%、販売22%に分かれる。たとえば基盤運用48百万円の内訳はインフラ31百万円と監視・保守17百万円で合計が一致する。矩形面積と入れ子で比率を示すtreemapや、等角度カテゴリの面積を比べるpolar-areaとは異なり、放射角とリング深さを階層比率へ割り当てる。架空データで、実際の支出を示さない。