不具合の再発率 — 100 件に 7 件

140 96

1920 × 1080 作品として見る

この 1 枚について

100 マスのワッフル。割合を面積ではなく数えられる粒で示し、「7%」が何個ぶんなのかを目で数えられるようにする

使いどころ

数値・KPI の報告

出典

保存: 2026.09.16
ライセンス: Original

似た構成

以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白上 96 右 140 下 96 左 140 ## 文字（版面 1920px に対する px） title 44px / 700 / 字間 0.01em / 行送り 1.3 window 20px / 500 / 行送り 1.5 rate 140px / 700 / 字間 -0.02em / 行送り 1 / 等幅数字 rateNote 28px / 500 / 行送り 1.4 detail 24px / 400 / 行送り 1.7 note 16px / 400 / 行送り 1.6 ## 配色地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 ## 外すと崩れる点 - マスはちょうど 100 個。50 個や 200 個にすると 1 マスが 1% でなくなり、数えるという読み方そのものが成立しなくなる - 色は 2 値だけ。3 つ目の色を足した瞬間、読み手は数えるのをやめて面積を見比べ始める - 塗るマスは端から続ける。散らすと「ばらつき」という別の意味が生まれるが、この図が言っているのは個数だけである - 率の隣に実数を置く。7% は 860 件に対する数で、母数が変われば同じ 7% がまったく違う重さを持つ - 率が下がったことだけを言わない。この版では 1 件あたりの重さが増えており、率の改善と負担の増加は同時に起きうる内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/waffle-one-in-hundred/pattern.html

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: - マスはちょうど 100 個。50 個や 200 個にすると 1 マスが 1% でなくなり、数えるという読み方そのものが成立しなくなる - 色は 2 値だけ。3 つ目の色を足した瞬間、読み手は数えるのをやめて面積を見比べ始める - 塗るマスは端から続ける。散らすと「ばらつき」という別の意味が生まれるが、この図が言っているのは個数だけである - 率の隣に実数を置く。7% は 860 件に対する数で、母数が変われば同じ 7% がまったく違う重さを持つ - 率が下がったことだけを言わない。この版では 1 件あたりの重さが増えており、率の改善と負担の増加は同時に起きうる

{ "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": [ "マスはちょうど 100 個。50 個や 200 個にすると 1 マスが 1% でなくなり、数えるという読み方そのものが成立しなくなる", "色は 2 値だけ。3 つ目の色を足した瞬間、読み手は数えるのをやめて面積を見比べ始める", "塗るマスは端から続ける。散らすと「ばらつき」という別の意味が生まれるが、この図が言っているのは個数だけである", "率の隣に実数を置く。7% は 860 件に対する数で、母数が変われば同じ 7% がまったく違う重さを持つ", "率が下がったことだけを言わない。この版では 1 件あたりの重さが増えており、率の改善と負担の増加は同時に起きうる" ] }

<!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> 2026 年度上期 / 一次対応を完了した 860 件のうち / 再発は 30 日以内の同一事象 </div> <div class="body"> <div class="waffle"> </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>

/* 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% 以外の意味にした瞬間、数えるという読み方は成立しなくなり、ただの格子になる。

不具合の再発率 — 100 件に 7 件

持ち帰る

全部入り

依頼文

仕様

ファイル

pattern.html

font.css

ノート