{ "id": "kpi-hero-single-figure", "schemaVersion": 2, "title": { "ja": "数値 1 本 — 1 つの指標だけを主役にする", "en": "Single Figure — One Metric Carries the Page" }, "summary": { "ja": "指標を 1 つに絞った報告。数値の隣に 4 年ぶんの推移を置き、単発の値と区別させる", "en": "One metric only, with four years of history beside it so the value is not read as a fluke" }, "capturedAt": "2026-09-15", "categories": [ "presentation" ], "tags": [ "minimal", "data-viz" ], "useCases": [ "kpi" ], "format": "slide-16x9", "density": "low", "layout": { "kind": "centered", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 116, "right": 150, "bottom": 116, "left": 150 } }, "type": { "label": { "size": 22, "weight": 500, "tracking": "0.1em" }, "figure": { "size": 268, "weight": 700, "tracking": "-0.04em", "leading": 0.86, "numeric": "tabular" }, "unit": { "size": 56, "weight": 500 }, "deltaFig": { "size": 52, "weight": 700, "tracking": "-0.01em", "numeric": "tabular" }, "deltaNote": { "size": 19, "weight": 400 }, "barLabel": { "size": 18, "weight": 400, "numeric": "tabular" }, "barValue": { "size": 18, "weight": 500, "numeric": "tabular" }, "note": { "size": 17, "weight": 400, "leading": 1.8 }, "asof": { "size": 15, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F3F6F4", "ink": "#101613", "muted": "#6F7A75", "accent": "#0B7A52", "rule": "#D5DDD9", "series": [] }, "rules": [ { "ja": "主役は 1 つ。2 つ目を同じ級数で置いた時点で、どちらも主役でなくなる", "en": "One hero figure — a second at the same size leaves neither as the subject" }, { "ja": "数値 1 つでは「たまたま」と区別できない。推移を必ず添える", "en": "A lone number cannot be told from a fluke — always show the trend beside it" }, { "ja": "帯は最新年だけ accent。過去は rule のまま置く", "en": "Only the latest bar takes the accent; the history stays in the rule colour" } ], "cover": "https://design-vault.pages.dev/_astro/cover.Du6GU_JR.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "kpi-dark-three-figures", "kpi-grid-four-deltas", "waterfall-variance-bridge" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "low", "layout": { "kind": "centered", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 116, "right": 150, "bottom": 116, "left": 150 } }, "type": { "label": { "size": 22, "weight": 500, "tracking": "0.1em" }, "figure": { "size": 268, "weight": 700, "tracking": "-0.04em", "leading": 0.86, "numeric": "tabular" }, "unit": { "size": 56, "weight": 500 }, "deltaFig": { "size": 52, "weight": 700, "tracking": "-0.01em", "numeric": "tabular" }, "deltaNote": { "size": 19, "weight": 400 }, "barLabel": { "size": 18, "weight": 400, "numeric": "tabular" }, "barValue": { "size": 18, "weight": 500, "numeric": "tabular" }, "note": { "size": 17, "weight": 400, "leading": 1.8 }, "asof": { "size": 15, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F3F6F4", "ink": "#101613", "muted": "#6F7A75", "accent": "#0B7A52", "rule": "#D5DDD9" }, "rules": [ "One hero figure — a second at the same size leaves neither as the subject", "A lone number cannot be told from a fluke — always show the trend beside it", "Only the latest bar takes the accent; the history stays in the rule colour" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 116 右 150 下 116 左 150\n\n## 文字（版面 1920px に対する px）\nlabel 22px / 500 / 字間 0.1em\nfigure 268px / 700 / 字間 -0.04em / 行送り 0.86 / 等幅数字\nunit 56px / 500\ndeltaFig 52px / 700 / 字間 -0.01em / 等幅数字\ndeltaNote 19px / 400\nbarLabel 18px / 400 / 等幅数字\nbarValue 18px / 500 / 等幅数字\nnote 17px / 400 / 行送り 1.8\nasof 15px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F3F6F4 / 文字 #101613 / 補助 #6F7A75 / 強調 #0B7A52 / 罫 #D5DDD9\n\n## 外すと崩れる点\n- 主役は 1 つ。2 つ目を同じ級数で置いた時点で、どちらも主役でなくなる\n- 数値 1 つでは「たまたま」と区別できない。推移を必ず添える\n- 帯は最新年だけ accent。過去は rule のまま置く\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/kpi-hero-single-figure/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 116 right 150 bottom 116 left 150\n\n## Type (px against a 1920px canvas)\nlabel 22px / 500 / tracking 0.1em\nfigure 268px / 700 / tracking -0.04em / leading 0.86 / tabular numerals\nunit 56px / 500\ndeltaFig 52px / 700 / tracking -0.01em / tabular numerals\ndeltaNote 19px / 400\nbarLabel 18px / 400 / tabular numerals\nbarValue 18px / 500 / tabular numerals\nnote 17px / 400 / leading 1.8\nasof 15px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F3F6F4 / Ink #101613 / Muted #6F7A75 / Accent #0B7A52 / Rule #D5DDD9\n\n## Constraints — dropping these breaks it\n- One hero figure — a second at the same size leaves neither as the subject\n- A lone number cannot be told from a fluke — always show the trend beside it\n- Only the latest bar takes the accent; the history stays in the rule colour\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/kpi-hero-single-figure/pattern.html." }, "code": { "html": "\n\n数値 1 本 — 1 つの指標だけを主役にする\n\n\n\n\n
\n
\n

解約率（月次・全社）

\n\n
\n

0.62%

\n
\n

− 0.41 pt前年同月比

\n
\n
20231.48 %
\n
20241.03 %
\n
20251.03 %
\n
20260.62 %
\n
\n
\n
\n\n
\n

2025 年は横ばい。改善は解約予兆の検知を運用に載せた 2026 年 2 月以降に集中しており、施策の効果と時期が一致しています。

\n

2026 年 8 月末時点

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/kpi-hero-single-figure/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/kpi-hero-single-figure/font.css", "https://design-vault.pages.dev/designs/kpi-hero-single-figure/font-0.woff2", "https://design-vault.pages.dev/designs/kpi-hero-single-figure/font-1.woff2", "https://design-vault.pages.dev/designs/kpi-hero-single-figure/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/kpi-hero-single-figure", "en": "https://design-vault.pages.dev/en/designs/kpi-hero-single-figure" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。編集するのは `pattern.html`\nだけで、寸法を手で書き直すことはない。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it, so the three cannot drift apart.\nEdit the artboard, never the numbers.\n\n### Techniques\n\n- 268px の数値と 56px の単位。単位を同じ級数にすると桁が読みにくくなる\n- 推移の帯は span なので display を起こす。inline のままだと高さが効かない\n- 基準日を右下に置き、数値がいつのものかを毎回明示する\n\n### Apply to\n\n- 改善施策の効果を 1 枚で示す\n- 経営会議で 1 指標だけを報告する" }