{
"id": "donut-share-center-total",
"schemaVersion": 2,
"title": {
"ja": "問い合わせの内訳 — 半分近くが「使い方が分からない」",
"en": "Support Mix — Nearly Half Is “I Can't Find How”"
},
"summary": {
"ja": "4 区分のドーナツ。輪の角度で構成比を、中心の数字で母数を同時に示し、割合だけを見て母数を忘れる読み方を防ぐ",
"en": "A four-part donut: the ring carries the shares and the centre carries the total, so a percentage is never read without the number it is a percentage of"
},
"capturedAt": "2026-09-16",
"categories": [
"presentation"
],
"tags": [
"data-viz",
"minimal"
],
"useCases": [
"kpi"
],
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "radial",
"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,
"numeric": "tabular"
},
"share": {
"size": 32,
"weight": 700,
"leading": 1,
"numeric": "tabular"
},
"total": {
"size": 108,
"weight": 700,
"tracking": "-0.01em",
"leading": 1,
"numeric": "tabular"
},
"unit": {
"size": 22,
"weight": 500,
"leading": 1.4
},
"label": {
"size": 26,
"weight": 500,
"leading": 1.4
},
"count": {
"size": 30,
"weight": 700,
"leading": 1.2,
"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": "中心を空にしない。角度は「全体に対する割合」しか言わないので、母数が消えると 42% が 521 件なのか 5 件なのか分からなくなる",
"en": "Never leave the centre empty. An angle can only say 'share of the whole' — without the total, 42% could be 521 tickets or five"
},
{
"ja": "区分は 4 つまで。5 つ目からは隣り合う角度の差が読み取れなくなり、凡例を往復しないと図が読めなくなる",
"en": "Four segments at most. From the fifth, neighbouring angles stop being distinguishable and the figure can only be read by going back and forth to the key"
},
{
"ja": "割合は輪の外側の地の上に置く。帯の上に地の色で抜くと、区分色ごとに読みやすさが変わってしまう",
"en": "Put the percentages outside the ring, on the page. Reversed out of the band, each one reads differently depending on which series colour is behind it"
},
{
"ja": "区分色は輝度 0.15〜0.21 の中間色から採る。配色を差し替えても区分色は置き換わらないので、淡い地でも濃い地でも見分けが付く帯から選ぶ必要がある",
"en": "Take the series colours from the mid-luminance band (0.15–0.21). A colour preset replaces the roles but keeps the series, so each one has to hold up on a light ground and a dark one alike"
},
{
"ja": "図は割合、凡例は実数。同じ数字を 2 か所に書くと、読み手はどちらが正なのかを確かめる作業を始める",
"en": "Shares in the figure, counts in the key. Print the same number twice and the reader starts checking which of the two is authoritative"
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.DhEsNI5e.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": [
"waffle-one-in-hundred",
"venn-two-set-sweet-spot"
]
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "radial",
"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,
"numeric": "tabular"
},
"share": {
"size": 32,
"weight": 700,
"leading": 1,
"numeric": "tabular"
},
"total": {
"size": 108,
"weight": 700,
"tracking": "-0.01em",
"leading": 1,
"numeric": "tabular"
},
"unit": {
"size": 22,
"weight": 500,
"leading": 1.4
},
"label": {
"size": 26,
"weight": 500,
"leading": 1.4
},
"count": {
"size": 30,
"weight": 700,
"leading": 1.2,
"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": [
"Never leave the centre empty. An angle can only say 'share of the whole' — without the total, 42% could be 521 tickets or five",
"Four segments at most. From the fifth, neighbouring angles stop being distinguishable and the figure can only be read by going back and forth to the key",
"Put the percentages outside the ring, on the page. Reversed out of the band, each one reads differently depending on which series colour is behind it",
"Take the series colours from the mid-luminance band (0.15–0.21). A colour preset replaces the roles but keeps the series, so each one has to hold up on a light ground and a dark one alike",
"Shares in the figure, counts in the key. Print the same number twice and the reader starts checking which of the two is authoritative"
]
},
"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 / 等幅数字\nshare 32px / 700 / 行送り 1 / 等幅数字\ntotal 108px / 700 / 字間 -0.01em / 行送り 1 / 等幅数字\nunit 22px / 500 / 行送り 1.4\nlabel 26px / 500 / 行送り 1.4\ncount 30px / 700 / 行送り 1.2 / 等幅数字\nnote 16px / 400 / 行送り 1.6\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1C8C79 / #2F6FB5 / #9A6B12 / #A85A2E\n\n## 外すと崩れる点\n- 中心を空にしない。角度は「全体に対する割合」しか言わないので、母数が消えると 42% が 521 件なのか 5 件なのか分からなくなる\n- 区分は 4 つまで。5 つ目からは隣り合う角度の差が読み取れなくなり、凡例を往復しないと図が読めなくなる\n- 割合は輪の外側の地の上に置く。帯の上に地の色で抜くと、区分色ごとに読みやすさが変わってしまう\n- 区分色は輝度 0.15〜0.21 の中間色から採る。配色を差し替えても区分色は置き換わらないので、淡い地でも濃い地でも見分けが付く帯から選ぶ必要がある\n- 図は割合、凡例は実数。同じ数字を 2 か所に書くと、読み手はどちらが正なのかを確かめる作業を始める\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/donut-share-center-total/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 / tabular numerals\nshare 32px / 700 / leading 1 / tabular numerals\ntotal 108px / 700 / tracking -0.01em / leading 1 / tabular numerals\nunit 22px / 500 / leading 1.4\nlabel 26px / 500 / leading 1.4\ncount 30px / 700 / leading 1.2 / 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- Never leave the centre empty. An angle can only say 'share of the whole' — without the total, 42% could be 521 tickets or five\n- Four segments at most. From the fifth, neighbouring angles stop being distinguishable and the figure can only be read by going back and forth to the key\n- Put the percentages outside the ring, on the page. Reversed out of the band, each one reads differently depending on which series colour is behind it\n- Take the series colours from the mid-luminance band (0.15–0.21). A colour preset replaces the roles but keeps the series, so each one has to hold up on a light ground and a dark one alike\n- Shares in the figure, counts in the key. Print the same number twice and the reader starts checking which of the two is authoritative\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/donut-share-center-total/pattern.html."
},
"code": {
"html": "\n\n問い合わせの内訳 — 半分近くが「使い方が分からない」\n\n\n\n\n