{ "id": "kpi-grid-four-deltas", "schemaVersion": 2, "title": { "ja": "指標 4 枚 — 増減を符号と推移で、色では言わない", "en": "Four Metrics — Change Read From Sign and Trend, Not Colour" }, "summary": { "ja": "4 指標を同格の 2×2 に置く。下がってよい指標が混ざるので、良し悪しを色で塗り分けない", "en": "Four equal cards in a 2×2 grid, uncoloured because some metrics are meant to fall" }, "capturedAt": "2026-09-15", "categories": [ "presentation" ], "tags": [ "data-viz" ], "useCases": [ "kpi" ], "format": "slide-16x9", "density": "high", "layout": { "kind": "grid", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 88, "right": 128, "bottom": 88, "left": 128 }, "columns": { "count": 2, "gap": 32 } }, "type": { "title": { "size": 42, "weight": 700, "tracking": "0.02em" }, "period": { "size": 17, "weight": 400, "numeric": "tabular" }, "label": { "size": 18, "weight": 500, "tracking": "0.04em" }, "figure": { "size": 76, "weight": 700, "tracking": "-0.03em", "leading": 1, "numeric": "tabular" }, "unit": { "size": 22, "weight": 400 }, "deltaFig": { "size": 26, "weight": 700, "numeric": "tabular" }, "deltaNote": { "size": 15, "weight": 400 }, "spark": { "size": 16, "weight": 400 }, "why": { "size": 15, "weight": 400, "leading": 1.7 }, "note": { "size": 17, "weight": 400, "leading": 1.8 }, "src": { "size": 15, "weight": 400 } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F5F7", "ink": "#14171B", "muted": "#737A84", "accent": "#2C4CA8", "rule": "#D7DBE1", "series": [ "#7C879A" ] }, "rules": [ { "ja": "良し悪しを色で塗り分けない。下がってよい指標（解約率・所要日数）が混ざる", "en": "Never colour good and bad — some of these metrics improve by falling" }, { "ja": "数値 1 つでは「たまたま」と区別できない。6 点の推移を必ず添える", "en": "One value cannot be told from noise — always carry six points of history" }, { "ja": "棒は細く、背は高く。幅が高さを上回ると差が読めない", "en": "Bars narrow and tall — wider than they are high, the differences vanish" } ], "cover": "https://design-vault.pages.dev/_astro/cover.DlbePHZo.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "kpi-dark-three-figures", "kpi-hero-single-figure", "waterfall-variance-bridge" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "high", "layout": { "kind": "grid", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 88, "right": 128, "bottom": 88, "left": 128 }, "columns": { "count": 2, "gap": 32 } }, "type": { "title": { "size": 42, "weight": 700, "tracking": "0.02em" }, "period": { "size": 17, "weight": 400, "numeric": "tabular" }, "label": { "size": 18, "weight": 500, "tracking": "0.04em" }, "figure": { "size": 76, "weight": 700, "tracking": "-0.03em", "leading": 1, "numeric": "tabular" }, "unit": { "size": 22, "weight": 400 }, "deltaFig": { "size": 26, "weight": 700, "numeric": "tabular" }, "deltaNote": { "size": 15, "weight": 400 }, "spark": { "size": 16, "weight": 400 }, "why": { "size": 15, "weight": 400, "leading": 1.7 }, "note": { "size": 17, "weight": 400, "leading": 1.8 }, "src": { "size": 15, "weight": 400 } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F5F7", "ink": "#14171B", "muted": "#737A84", "accent": "#2C4CA8", "rule": "#D7DBE1", "series": [ "#7C879A" ] }, "rules": [ "Never colour good and bad — some of these metrics improve by falling", "One value cannot be told from noise — always carry six points of history", "Bars narrow and tall — wider than they are high, the differences vanish" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 88 右 128 下 88 左 128\n- 2 カラム（等分）、間隔 32\n\n## 文字（版面 1920px に対する px）\ntitle 42px / 700 / 字間 0.02em\nperiod 17px / 400 / 等幅数字\nlabel 18px / 500 / 字間 0.04em\nfigure 76px / 700 / 字間 -0.03em / 行送り 1 / 等幅数字\nunit 22px / 400\ndeltaFig 26px / 700 / 等幅数字\ndeltaNote 15px / 400\nspark 16px / 400\nwhy 15px / 400 / 行送り 1.7\nnote 17px / 400 / 行送り 1.8\nsrc 15px / 400\n\n## 配色\n地 #FFFFFF / 面 #F4F5F7 / 文字 #14171B / 補助 #737A84 / 強調 #2C4CA8 / 罫 #D7DBE1 / #7C879A\n\n## 外すと崩れる点\n- 良し悪しを色で塗り分けない。下がってよい指標（解約率・所要日数）が混ざる\n- 数値 1 つでは「たまたま」と区別できない。6 点の推移を必ず添える\n- 棒は細く、背は高く。幅が高さを上回ると差が読めない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/kpi-grid-four-deltas/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 88 right 128 bottom 88 left 128\n- 2 equal columns, gap 32\n\n## Type (px against a 1920px canvas)\ntitle 42px / 700 / tracking 0.02em\nperiod 17px / 400 / tabular numerals\nlabel 18px / 500 / tracking 0.04em\nfigure 76px / 700 / tracking -0.03em / leading 1 / tabular numerals\nunit 22px / 400\ndeltaFig 26px / 700 / tabular numerals\ndeltaNote 15px / 400\nspark 16px / 400\nwhy 15px / 400 / leading 1.7\nnote 17px / 400 / leading 1.8\nsrc 15px / 400\n\n## Colour\nGround #FFFFFF / Surface #F4F5F7 / Ink #14171B / Muted #737A84 / Accent #2C4CA8 / Rule #D7DBE1 / #7C879A\n\n## Constraints — dropping these breaks it\n- Never colour good and bad — some of these metrics improve by falling\n- One value cannot be told from noise — always carry six points of history\n- Bars narrow and tall — wider than they are high, the differences vanish\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-grid-four-deltas/pattern.html." }, "code": { "html": "\n\n指標 4 枚 — 増減を符号と推移で、色では言わない\n\n\n\n\n
\n
\n
\n

第 2 四半期の 4 指標

\n

2026 年 7 – 9 月 / 前四半期比

\n
\n\n
\n
\n

受注高

\n
\n
\n

62.4億円

\n

+ 8.1 %

前四半期

\n
\n
\n
\n

大口 2 社の更新が同じ四半期に重なったもの。通期では均されます。

\n
\n\n
\n

粗利率

\n
\n
\n

31.2%

\n

− 1.4 pt

前四半期

\n
\n
\n
\n

部材の上昇分を単価へ転嫁しきれていません。4 四半期続けて低下しています。

\n
\n\n
\n

受注から出荷まで

\n
\n
\n

19.4日

\n

− 2.6 日

前四半期

\n
\n
\n
\n

設計の往復を 4 回から 3 回に減らした効果。目標の 14 日にはまだ届きません。

\n
\n\n
\n

解約率

\n
\n
\n

0.62%

\n

− 0.18 pt

前四半期

\n
\n
\n
\n

予兆の検知を運用に載せてから 3 四半期連続で低下。施策の効果と見ています。

\n
\n
\n\n
\n

4 指標のうち手を打つべきは粗利率の 1 つだけです。残る 3 つは説明のつく動きで、来期も同じ方向に進む見込みです。

\n

出典: 基幹システム 月次集計（2026 年 9 月 30 日 締）

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/kpi-grid-four-deltas/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/kpi-grid-four-deltas/font.css", "https://design-vault.pages.dev/designs/kpi-grid-four-deltas/font-0.woff2", "https://design-vault.pages.dev/designs/kpi-grid-four-deltas/font-1.woff2", "https://design-vault.pages.dev/designs/kpi-grid-four-deltas/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/kpi-grid-four-deltas", "en": "https://design-vault.pages.dev/en/designs/kpi-grid-four-deltas" }, "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- 最新の 1 本だけ accent、残りは series-1。推移の中の現在地を示す\n- 各指標に「なぜそうなったか」を 1 行添える。数字だけでは議題にならない\n- 4 つのうち手を打つべきものを注記で 1 つに絞る\n\n### Apply to\n\n- 四半期の業績報告\n- 定例会の冒頭に置くダッシュボード" }