{
  "id": "kpi-dark-three-figures",
  "schemaVersion": 2,
  "title": {
    "ja": "暗地に数値 3 本 — 決算・KPI 向け",
    "en": "Three Figures on a Dark Ground"
  },
  "summary": {
    "ja": "同じ大きさの数値を 3 本並べる。増減は色でなく符号と太さで示す",
    "en": "Three figures at one size; gain and loss shown by sign and weight, not color"
  },
  "capturedAt": "2026-09-01",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "bold"
  ],
  "useCases": [
    "kpi"
  ],
  "format": "slide-16x9",
  "density": "low",
  "layout": {
    "kind": "3-column",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 128,
      "right": 144,
      "bottom": 128,
      "left": 144
    },
    "columns": {
      "count": 3,
      "gap": 56
    }
  },
  "type": {
    "figure": {
      "size": 96,
      "weight": 700,
      "tracking": "-.02em",
      "leading": 1,
      "numeric": "tabular"
    },
    "unit": {
      "size": 24,
      "weight": 400
    },
    "label": {
      "size": 14,
      "weight": 500,
      "tracking": ".12em",
      "transform": "upper"
    },
    "delta": {
      "size": 18,
      "weight": 500,
      "numeric": "tabular"
    },
    "note": {
      "size": 15,
      "weight": 400,
      "leading": 1.8
    }
  },
  "colors": {
    "ground": "#0E1116",
    "surface": "#161B22",
    "ink": "#F4F5F7",
    "muted": "#8B949E",
    "accent": "#4C8BF5",
    "rule": "#262C36",
    "series": [
      "#25D88A"
    ]
  },
  "rules": [
    {
      "ja": "3 本は同じ大きさ。1 つだけ大きくすると残り 2 つが飾りになる",
      "en": "All three at one size — enlarging one turns the others into decoration"
    },
    {
      "ja": "増減を色に頼らない。符号と太さで示す（色覚配慮と印刷の両方に効く）",
      "en": "Signal change with sign and weight, not red and green"
    },
    {
      "ja": "暗地では罫を引かず、面（surface）の差で区切る",
      "en": "On a dark ground, separate with surface steps rather than rules"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.fTv8FVBi.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "case-study-2col-single-figure"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "low",
      "layout": {
        "kind": "3-column",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 128,
          "right": 144,
          "bottom": 128,
          "left": 144
        },
        "columns": {
          "count": 3,
          "gap": 56
        }
      },
      "type": {
        "figure": {
          "size": 96,
          "weight": 700,
          "tracking": "-.02em",
          "leading": 1,
          "numeric": "tabular"
        },
        "unit": {
          "size": 24,
          "weight": 400
        },
        "label": {
          "size": 14,
          "weight": 500,
          "tracking": ".12em",
          "transform": "upper"
        },
        "delta": {
          "size": 18,
          "weight": 500,
          "numeric": "tabular"
        },
        "note": {
          "size": 15,
          "weight": 400,
          "leading": 1.8
        }
      },
      "colors": {
        "ground": "#0E1116",
        "surface": "#161B22",
        "ink": "#F4F5F7",
        "muted": "#8B949E",
        "accent": "#4C8BF5",
        "rule": "#262C36",
        "series": [
          "#25D88A"
        ]
      },
      "rules": [
        "All three at one size — enlarging one turns the others into decoration",
        "Signal change with sign and weight, not red and green",
        "On a dark ground, separate with surface steps rather than rules"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 128 右 144 下 128 左 144\n- 3 カラム（等分）、間隔 56\n\n## 文字（版面 1920px に対する px）\nfigure  96px / 700 / 字間 -.02em / 行送り 1 / 等幅数字\nunit  24px / 400\nlabel  14px / 500 / 字間 .12em / 大文字\ndelta  18px / 500 / 等幅数字\nnote  15px / 400 / 行送り 1.8\n\n## 配色\n地 #0E1116 / 面 #161B22 / 文字 #F4F5F7 / 補助 #8B949E / 強調 #4C8BF5 / 罫 #262C36 / #25D88A\n\n## 外すと崩れる点\n- 3 本は同じ大きさ。1 つだけ大きくすると残り 2 つが飾りになる\n- 増減を色に頼らない。符号と太さで示す（色覚配慮と印刷の両方に効く）\n- 暗地では罫を引かず、面（surface）の差で区切る\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/kpi-dark-three-figures/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 128 right 144 bottom 128 left 144\n- 3 equal columns, gap 56\n\n## Type (px against a 1920px canvas)\nfigure  96px / 700 / tracking -.02em / leading 1 / tabular numerals\nunit  24px / 400\nlabel  14px / 500 / tracking .12em / uppercase\ndelta  18px / 500 / tabular numerals\nnote  15px / 400 / leading 1.8\n\n## Colour\nGround #0E1116 / Surface #161B22 / Ink #F4F5F7 / Muted #8B949E / Accent #4C8BF5 / Rule #262C36 / #25D88A\n\n## Constraints — dropping these breaks it\n- All three at one size — enlarging one turns the others into decoration\n- Signal change with sign and weight, not red and green\n- On a dark ground, separate with surface steps rather than rules\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-dark-three-figures/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>暗地に数値 3 本 — 決算・KPI 向け</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  :root {\n    --ground: #0E1116; --surface: #161B22; --ink: #F4F5F7;\n    --muted: #8B949E; --accent: #4C8BF5; --rule: #262C36;\n    --series-1: #25D88A;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"Zen Kaku Gothic New\", \"IPAGothic\", sans-serif; }\n  .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 128px 144px; }\n  .content { height: 100%; display: grid; align-content: center; }\n  /* 3 本は同じ大きさ。1 つだけ大きくすると残り 2 つが飾りになる。 */\n  .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }\n  .kpi { background: var(--surface); padding: 64px 52px 68px; }\n  .label { font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }\n  .amount { margin-top: 28px; display: flex; align-items: baseline; gap: 10px; }\n  .figure { font-size: 96px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }\n  .unit { font-size: 24px; font-weight: 400; color: var(--muted); }\n  /* 増減は色でなく符号と太さで示す。 */\n  .delta { margin-top: 28px; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }\n  .delta i { font-style: normal; color: var(--muted); font-weight: 400; margin-left: 10px; }\n  .note { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 15px; font-weight: 400; line-height: 1.8; color: var(--muted); }\n</style>\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div class=\"cols\">\n      <section class=\"kpi\" data-col=\"1\">\n        <p class=\"label\" data-type=\"label\">売上高</p>\n        <p class=\"amount\"><span class=\"figure\" data-type=\"figure\">184</span><span class=\"unit\" data-type=\"unit\">億円</span></p>\n        <p class=\"delta\" data-type=\"delta\">+ 12.4 %<i>前年同期</i></p>\n        <p class=\"note\" data-type=\"note\">主力 2 領域が通期で伸長。下期は横ばいを見込む。</p>\n      </section>\n      <section class=\"kpi\" data-col=\"2\">\n        <p class=\"label\">営業利益</p>\n        <p class=\"amount\"><span class=\"figure\">21</span><span class=\"unit\">億円</span></p>\n        <p class=\"delta\">+ 3.1 %<i>前年同期</i></p>\n        <p class=\"note\">先行投資の計上により、伸び率は売上を下回る。</p>\n      </section>\n      <section class=\"kpi\" data-col=\"3\">\n        <p class=\"label\">継続率</p>\n        <p class=\"amount\"><span class=\"figure\">96</span><span class=\"unit\">%</span></p>\n        <p class=\"delta\">− 0.4 pt<i>前年同期</i></p>\n        <p class=\"note\">大口 1 社の満了による。新規の獲得で相殺見込み。</p>\n      </section>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/kpi-dark-three-figures/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/kpi-dark-three-figures/font.css",
        "https://design-vault.pages.dev/designs/kpi-dark-three-figures/font-0.woff2",
        "https://design-vault.pages.dev/designs/kpi-dark-three-figures/font-1.woff2",
        "https://design-vault.pages.dev/designs/kpi-dark-three-figures/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/kpi-dark-three-figures",
    "en": "https://design-vault.pages.dev/en/designs/kpi-dark-three-figures"
  },
  "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- 暗地の KPI は罫を引くと図表めいて見える。面の明度差 1 段で足りる\n- 数値は等幅（tabular）。桁が揃わないと 3 本並べた意味が消える\n- 強調色は前年比など「1 種類の意味」にだけ割り当てる\n\n### Apply to\n\n- 決算説明資料のハイライト\n- 社内向け月次 KPI の 1 枚目"
}