As measured
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.
Everything in this panel, including the contents behind each URL, in one Markdown file — Large, so it goes as a file (copy is for 32 KB and under)
Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 96 right 140 bottom 96 left 140 ## Type (px against a 1920px canvas) title 44px / 700 / tracking 0.01em / leading 1.3 window 20px / 500 / leading 1.5 / tabular numerals share 32px / 700 / leading 1 / tabular numerals total 108px / 700 / tracking -0.01em / leading 1 / tabular numerals unit 22px / 500 / leading 1.4 label 26px / 500 / leading 1.4 count 30px / 700 / leading 1.2 / tabular numerals note 16px / 400 / leading 1.6 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #1C8C79 / #2F6FB5 / #9A6B12 / #A85A2E ## Constraints — dropping these breaks it - 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 Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/donut-share-center-total/pattern.html.
/ai/designs/donut-share-center-total.json
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{
"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"
]
} /designs/donut-share-center-total/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>問い合わせの内訳 — 半分近くが「使い方が分からない」</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
/* 色のリテラルはこの :root にだけ置く。以下の規則は var() か color-mix() で名指す。
系列色は輝度 0.15〜0.21 の中間色から採ってある —— 系列色は配色プリセットを
当てても置き換わらないので、淡地でも濃地でも 3.0 を割らない帯から選ぶ必要がある。 */
:root {
--ground: #FFFFFF;
--surface: #F4F6F9;
--ink: #131820;
--muted: #667183;
--accent: #1F5FA8;
--rule: #DBE1E9;
--series-1: #1C8C79;
--series-2: #2F6FB5;
--series-3: #9A6B12;
--series-4: #A85A2E;
}
* { box-sizing: border-box; margin: 0; }
html, body { width: 1920px; height: 1080px; }
body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
.artboard {
width: 1920px;
height: 1080px;
background: var(--ground);
color: var(--ink);
padding: 96px 140px;
}
.content {
height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
}
/* 見出し */
.head { border-bottom: 2px solid var(--rule); padding-bottom: 28px; }
.title { font-size: 44px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; }
.window { margin-top: 14px; font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 図と凡例。
図は 680px 角に収めてある —— 中身の段の高さは 888 − 見出し約 131 − 脚注約 49 ＝
約 708px で、ここを超えると割合の札が罫に乗る。CSS で縮めて合わせないのは、
SVG を等倍でなくすと中の文字の実測値が画面の見えかたと食い違うため。
見出しや脚注を増やすときは、この 680 も一緒に見直すこと。 */
.body { display: grid; grid-template-columns: 680px minmax(0, 1fr); gap: 96px; align-items: center; }
.figure { position: relative; width: 680px; height: 680px; }
.ring { display: block; }
.seg { fill: none; stroke-width: 86; }
.seg-1 { stroke: var(--series-1); }
.seg-2 { stroke: var(--series-2); }
.seg-3 { stroke: var(--series-3); }
.seg-4 { stroke: var(--series-4); }
/* 割合は輪の外側の地の上に置く。帯の上に白で抜くと、系列色ごとに読みやすさが
変わってしまう —— 地の上の ink なら 4 色のどれでも同じに読める。 */
.share { fill: var(--ink); font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
/* 中心の総数だけは HTML を重ねる。輪の中央に置く値なので、図形の座標ではなく
版面の中央として決まるほうが崩れない。 */
.center {
position: absolute;
left: 0;
top: 0;
width: 680px;
height: 680px;
display: grid;
place-content: center;
text-align: center;
}
.total { font-size: 108px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.unit { margin-top: 12px; font-size: 22px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.legend { display: grid; gap: 28px; }
.row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.chip { width: 28px; height: 28px; border-radius: 6px; }
.chip-1 { background: var(--series-1); }
.chip-2 { background: var(--series-2); }
.chip-3 { background: var(--series-3); }
.chip-4 { background: var(--series-4); }
.label { font-size: 26px; font-weight: 500; line-height: 1.4; }
.count { font-size: 30px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.foot { border-top: 1px solid var(--rule); padding-top: 22px; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted); }
</style>
<div class="artboard" data-artboard>
<div class="content" data-content>
<div class="head">
<h1 class="title" data-type="title">問い合わせの内訳 — 半分近くが「使い方が分からない」</h1>
<p class="window" data-type="window">2026 年 4 月〜9 月 / 一次受付のみ / 再問い合わせは 1 件として数える</p>
</div>
<div class="body">
<div class="figure">
<!-- 等倍で描く。viewBox と width/height を一致させてあるので、SVG の中の
文字の級数は版面の px とそのまま同じ数字になる。 -->
<svg class="ring" width="680" height="680" viewBox="0 0 680 680">
<g transform="rotate(-90 340 340)">
<circle class="seg seg-1" cx="340" cy="340" r="222" stroke-dasharray="577.84 817.03" stroke-dashoffset="0"/>
<circle class="seg seg-2" cx="340" cy="340" r="222" stroke-dasharray="368.61 1026.26" stroke-dashoffset="-585.84"/>
<circle class="seg seg-3" cx="340" cy="340" r="222" stroke-dasharray="257.02 1137.85" stroke-dashoffset="-962.45"/>
<circle class="seg seg-4" cx="340" cy="340" r="222" stroke-dasharray="159.38 1235.49" stroke-dashoffset="-1227.47"/>
</g>
<text class="share" data-type="share" x="625" y="267" text-anchor="middle" dominant-baseline="middle">42%</text>
<text class="share" x="240" y="617" text-anchor="middle" dominant-baseline="middle">27%</text>
<text class="share" x="53" y="276" text-anchor="middle" dominant-baseline="middle">19%</text>
<text class="share" x="231" y="67" text-anchor="middle" dominant-baseline="middle">12%</text>
</svg>
<div class="center">
<div class="total" data-type="total">1,240</div>
<div class="unit" data-type="unit">件 / 半期</div>
</div>
</div>
<div class="legend">
<div class="row">
<span class="chip chip-1"></span>
<span class="label" data-type="label">使い方が分からない</span>
<span class="count" data-type="count">521</span>
</div>
<div class="row">
<span class="chip chip-2"></span>
<span class="label">仕様どおりに動かない</span>
<span class="count">335</span>
</div>
<div class="row">
<span class="chip chip-3"></span>
<span class="label">権限と設定の変更</span>
<span class="count">236</span>
</div>
<div class="row">
<span class="chip chip-4"></span>
<span class="label">請求と契約</span>
<span class="count">148</span>
</div>
</div>
</div>
<div class="foot" data-type="note">構成比は四捨五入のため合計が 100% にならないことがある。中心の総数は 4 区分の合計と一致する。</div>
</div>
</div>
/designs/donut-share-center-total/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 88 (94724b26cd2872e9)
*
* 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+2c, U+2f-39, U+2014, U+3002, U+300c-300d, U+301c, U+3042, U+3044, U+3048, U+304a-304c, U+304f-3050, U+3053-3054, U+3057-305c, U+305f-3060, U+3066-306b, U+306e-3070, U+307f, U+3081, U+3089-308b, U+308f, U+3099, U+4e00, U+4e2d, U+4e94, U+4ed5, U+4ed8, U+4ef6, U+4f7f, U+5165, U+5185, U+518d, U+5206, U+52d5, U+533a, U+534a, U+53d7, U+5408, U+554f, U+56db, U+5909, U+5951, U+5b9a, U+5e74, U+5fc3, U+6210, U+6368, U+6570, U+65b9, U+66f4, U+6708, U+671f, U+69cb, U+69d8, U+6a29, U+6b21, U+6bd4, U+6c42, U+7d04, U+7dcf, U+81f4, U+8a08, U+8a2d, U+8a33, U+8acb, U+8fd1, U+9650;
}
@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+2c, U+2f-39, U+2014, U+3002, U+300c-300d, U+301c, U+3042, U+3044, U+3048, U+304a-304c, U+304f-3050, U+3053-3054, U+3057-305c, U+305f-3060, U+3066-306b, U+306e-3070, U+307f, U+3081, U+3089-308b, U+308f, U+3099, U+4e00, U+4e2d, U+4e94, U+4ed5, U+4ed8, U+4ef6, U+4f7f, U+5165, U+5185, U+518d, U+5206, U+52d5, U+533a, U+534a, U+53d7, U+5408, U+554f, U+56db, U+5909, U+5951, U+5b9a, U+5e74, U+5fc3, U+6210, U+6368, U+6570, U+65b9, U+66f4, U+6708, U+671f, U+69cb, U+69d8, U+6a29, U+6b21, U+6bd4, U+6c42, U+7d04, U+7dcf, U+81f4, U+8a08, U+8a2d, U+8a33, U+8acb, U+8fd1, U+9650;
}
@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+2c, U+2f-39, U+2014, U+3002, U+300c-300d, U+301c, U+3042, U+3044, U+3048, U+304a-304c, U+304f-3050, U+3053-3054, U+3057-305c, U+305f-3060, U+3066-306b, U+306e-3070, U+307f, U+3081, U+3089-308b, U+308f, U+3099, U+4e00, U+4e2d, U+4e94, U+4ed5, U+4ed8, U+4ef6, U+4f7f, U+5165, U+5185, U+518d, U+5206, U+52d5, U+533a, U+534a, U+53d7, U+5408, U+554f, U+56db, U+5909, U+5951, U+5b9a, U+5e74, U+5fc3, U+6210, U+6368, U+6570, U+65b9, U+66f4, U+6708, U+671f, U+69cb, U+69d8, U+6a29, U+6b21, U+6bd4, U+6c42, U+7d04, U+7dcf, U+81f4, U+8a08, U+8a2d, U+8a33, U+8acb, U+8fd1, U+9650;
}
構成比の図が答えない問いは、たいてい「それは何件のうちの 42% なのか」である。 ドーナツは中心が空くので、そこに母数を置ける——円グラフにできて棒グラフにできない ことがあるとすれば、これに尽きる。
区分を 4 つに抑えているのは意匠ではなく制約である。角度の差は面積や長さより読み取り にくく、5 つを超えると隣どうしの大小が目で決められなくなる。まとめられない 5 つ目が 出てきたときは、区分を足すのではなく図を分ける。