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 rate 140px / 700 / tracking -0.02em / leading 1 / tabular numerals rateNote 28px / 500 / leading 1.4 detail 24px / 400 / leading 1.7 note 16px / 400 / leading 1.6 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 ## Constraints — dropping these breaks it - Exactly one hundred cells. At fifty or two hundred a cell is no longer one percent, and counting — the whole reason for this form — stops working - Two states only. Add a third colour and the reader stops counting and starts comparing areas - Fill from one corner, contiguously. Scattered cells assert randomness, and this figure is only making a claim about how many - Put the count beside the rate. Seven percent is seven percent of something, and the same rate carries a different weight when the base changes - Do not report the falling rate alone. Here the cost per incident rose; a rate can improve while the burden grows 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/waffle-one-in-hundred/pattern.html.
/ai/designs/waffle-one-in-hundred.json
format: slide-16x9
density: low
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
rate:
size: 140
weight: 700
tracking: -0.02em
leading: 1
numeric: tabular
rateNote:
size: 28
weight: 500
leading: 1.4
detail:
size: 24
weight: 400
leading: 1.7
note:
size: 16
weight: 400
leading: 1.6
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- Exactly one hundred cells. At fifty or two hundred a cell is no longer one percent, and counting — the whole reason for this form — stops working
- Two states only. Add a third colour and the reader stops counting and starts comparing areas
- Fill from one corner, contiguously. Scattered cells assert randomness, and this figure is only making a claim about how many
- Put the count beside the rate. Seven percent is seven percent of something, and the same rate carries a different weight when the base changes
- Do not report the falling rate alone. Here the cost per incident rose; a rate can improve while the burden grows{
"format": "slide-16x9",
"density": "low",
"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
},
"rate": {
"size": 140,
"weight": 700,
"tracking": "-0.02em",
"leading": 1,
"numeric": "tabular"
},
"rateNote": {
"size": 28,
"weight": 500,
"leading": 1.4
},
"detail": {
"size": 24,
"weight": 400,
"leading": 1.7
},
"note": {
"size": 16,
"weight": 400,
"leading": 1.6
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"Exactly one hundred cells. At fifty or two hundred a cell is no longer one percent, and counting — the whole reason for this form — stops working",
"Two states only. Add a third colour and the reader stops counting and starts comparing areas",
"Fill from one corner, contiguously. Scattered cells assert randomness, and this figure is only making a claim about how many",
"Put the count beside the rate. Seven percent is seven percent of something, and the same rate carries a different weight when the base changes",
"Do not report the falling rate alone. Here the cost per incident rose; a rate can improve while the burden grows"
]
} /designs/waffle-one-in-hundred/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>不具合の再発率 — 100 件に 7 件</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
/* 色のリテラルはこの :root にだけ置く。以下の規則は var() か color-mix() で名指す。
区分色は持たない —— この図が言うのは「当てはまる／当てはまらない」の 2 値だけで、
3 つ目の色は数える手を止めてしまう。 */
:root {
--ground: #FFFFFF;
--surface: #F4F6F9;
--ink: #131820;
--muted: #667183;
--accent: #1F5FA8;
--rule: #DBE1E9;
}
* { 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); }
.body { display: grid; grid-template-columns: 590px minmax(0, 1fr); gap: 110px; align-items: center; }
/* 100 マスは div で敷く。SVG の矩形を 100 個並べても同じ絵は出るが、
数えられる粒であることが読み手に伝わるのは「同じ大きさの区画が整列している」
ことなので、格子そのものを組むほうが版の作りと意味が一致する。 */
.waffle {
display: grid;
grid-template-columns: repeat(10, 50px);
grid-auto-rows: 50px;
gap: 10px;
}
.cell { background: var(--surface); border-radius: 4px; }
.cell-on { background: var(--accent); }
.rate { font-size: 140px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.rate-note { margin-top: 18px; font-size: 28px; font-weight: 500; line-height: 1.4; }
.detail { margin-top: 32px; font-size: 24px; font-weight: 400; line-height: 1.7; color: var(--muted); }
.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">不具合の再発率 — 100 件に 7 件</h1>
<p class="window" data-type="window">2026 年度上期 / 一次対応を完了した 860 件のうち / 再発は 30 日以内の同一事象</p>
</div>
<div class="body">
<div class="waffle">
<span class="cell cell-on"></span><span class="cell cell-on"></span><span class="cell cell-on"></span><span class="cell cell-on"></span><span class="cell cell-on"></span><span class="cell cell-on"></span><span class="cell cell-on"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span>
<span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span>
<span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span>
<span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span>
<span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span>
<span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span>
<span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span>
<span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span>
<span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span>
<span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span><span class="cell"></span>
</div>
<div class="figures">
<div class="rate" data-type="rate">7%</div>
<div class="rate-note" data-type="rateNote">100 件に 7 件が再発している</div>
<div class="detail" data-type="detail">前期は 100 件に 12 件。率は半分近くまで下がったが、再発 1 件あたりの平均対応時間は 3.4 倍に伸びている</div>
</div>
</div>
<div class="foot" data-type="note">母数は一次対応を完了した件数。対応中のものは含まない。端数は四捨五入している。</div>
</div>
</div>
/designs/waffle-one-in-hundred/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 78 (7e8cc748c00d4a79)
*
* 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+36-38, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+304b-304c, U+304f-3050, U+3057-3058, U+305f-3063, U+3066-3067, U+306a-306b, U+306e-3070, U+3072-3073, U+307e, U+3082, U+308a-308b, U+3092, U+3094, U+3099, U+4e00, U+4e0a-4e0b, U+4e0d, U+4e2d, U+4e86, U+4e8b, U+4e94, U+4ee5, U+4ef6, U+4f38, U+500d, U+5165, U+5177, U+5185, U+518d, U+5206, U+524d, U+534a, U+5408, U+540c, U+542b, U+56db, U+5747, U+5b8c, U+5bfe, U+5e73-5e74, U+5ea6, U+5fdc, U+6368, U+6570, U+65e5, U+6642, U+671f, U+6b21, U+6bcd, U+7387, U+767a, U+7aef, U+8c61, U+8fd1, U+9593;
}
@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+36-38, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+304b-304c, U+304f-3050, U+3057-3058, U+305f-3063, U+3066-3067, U+306a-306b, U+306e-3070, U+3072-3073, U+307e, U+3082, U+308a-308b, U+3092, U+3094, U+3099, U+4e00, U+4e0a-4e0b, U+4e0d, U+4e2d, U+4e86, U+4e8b, U+4e94, U+4ee5, U+4ef6, U+4f38, U+500d, U+5165, U+5177, U+5185, U+518d, U+5206, U+524d, U+534a, U+5408, U+540c, U+542b, U+56db, U+5747, U+5b8c, U+5bfe, U+5e73-5e74, U+5ea6, U+5fdc, U+6368, U+6570, U+65e5, U+6642, U+671f, U+6b21, U+6bcd, U+7387, U+767a, U+7aef, U+8c61, U+8fd1, U+9593;
}
@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+36-38, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+304b-304c, U+304f-3050, U+3057-3058, U+305f-3063, U+3066-3067, U+306a-306b, U+306e-3070, U+3072-3073, U+307e, U+3082, U+308a-308b, U+3092, U+3094, U+3099, U+4e00, U+4e0a-4e0b, U+4e0d, U+4e2d, U+4e86, U+4e8b, U+4e94, U+4ee5, U+4ef6, U+4f38, U+500d, U+5165, U+5177, U+5185, U+518d, U+5206, U+524d, U+534a, U+5408, U+540c, U+542b, U+56db, U+5747, U+5b8c, U+5bfe, U+5e73-5e74, U+5ea6, U+5fdc, U+6368, U+6570, U+65e5, U+6642, U+671f, U+6b21, U+6bcd, U+7387, U+767a, U+7aef, U+8c61, U+8fd1, U+9593;
}
割合の図で数えられるものは少ない。円グラフの 7% は目測になるが、100 マスの 7 個は 数えられる。この違いは、聞き手が「本当に少ないのか」を自分で確かめられるかどうかに そのまま出る。
代償として、この形は 100 という数に縛られる。1 マスを 1% 以外の意味にした瞬間、 数えるという読み方は成立しなくなり、ただの格子になる。