{ "id": "kpi-scorecard-sparklines", "schemaVersion": 2, "title": { "ja": "指標の成績表 — 目標・実績・差・8 四半期の推移・判定を 1 行に", "en": "KPI Scorecard — Target, Actual, Gap, Eight-Quarter Trend and Verdict on One Row" }, "summary": { "ja": "経営指標を 1 行ずつ、通期目標・上期実績・目標との差・直近 8 四半期の小さな線・判定で並べる。色は判定にだけ使う", "en": "One row per KPI with target, actual, gap, a small eight-quarter line and a verdict; colour is spent on the verdict alone" }, "capturedAt": "2026-10-19", "categories": [ "presentation" ], "tags": [ "data-viz", "minimal" ], "useCases": [ "kpi" ], "format": "slide-16x9", "density": "high", "layout": { "kind": "table", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 140, "bottom": 56, "left": 140 } }, "type": { "kicker": { "size": 22, "weight": 700, "tracking": "0.16em", "numeric": "tabular" }, "title": { "size": 52, "weight": 700, "leading": 1.35, "numeric": "tabular" }, "colHead": { "size": 22, "weight": 500, "numeric": "tabular" }, "item": { "size": 30, "weight": 500, "numeric": "tabular" }, "target": { "size": 30, "weight": 400, "numeric": "tabular" }, "actual": { "size": 36, "weight": 700, "numeric": "tabular" }, "gap": { "size": 30, "weight": 400, "numeric": "tabular" }, "judge": { "size": 24, "weight": 700, "numeric": "tabular" }, "note": { "size": 20, "weight": 400, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F2F4F8", "ink": "#0E1A2B", "muted": "#5B6879", "accent": "#1D3F72", "rule": "#D6DCE5", "series": [] }, "rules": [ { "ja": "色は判定にだけ使う。推移の線まで色分けすると、どこを見ればよいか分からない", "en": "Use colour only for the verdict — colour the trend lines too and nothing stands out" }, { "ja": "推移の線は指標ごとに目盛りが違う。形だけを読む図だと注記する", "en": "Each trend line has its own scale; note that only the shape is meant to be read" }, { "ja": "差は pt で揃え、符号を必ず付ける", "en": "Express gaps in points, always with a sign" }, { "ja": "判定は 2 値（達成・未達）にする。3 色の信号にすると、黄色の意味を毎回説明することになる", "en": "Two verdicts, met or not — a three-colour signal means explaining amber every time" } ], "cover": "https://design-vault.pages.dev/_astro/cover.Dn9IDEjh.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "status-report-rag-rows", "kpi-grid-four-deltas", "pl-summary-yoy-table" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "high", "layout": { "kind": "table", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 140, "bottom": 56, "left": 140 } }, "type": { "kicker": { "size": 22, "weight": 700, "tracking": "0.16em", "numeric": "tabular" }, "title": { "size": 52, "weight": 700, "leading": 1.35, "numeric": "tabular" }, "colHead": { "size": 22, "weight": 500, "numeric": "tabular" }, "item": { "size": 30, "weight": 500, "numeric": "tabular" }, "target": { "size": 30, "weight": 400, "numeric": "tabular" }, "actual": { "size": 36, "weight": 700, "numeric": "tabular" }, "gap": { "size": 30, "weight": 400, "numeric": "tabular" }, "judge": { "size": 24, "weight": 700, "numeric": "tabular" }, "note": { "size": 20, "weight": 400, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F2F4F8", "ink": "#0E1A2B", "muted": "#5B6879", "accent": "#1D3F72", "rule": "#D6DCE5" }, "rules": [ "Use colour only for the verdict — colour the trend lines too and nothing stands out", "Each trend line has its own scale; note that only the shape is meant to be read", "Express gaps in points, always with a sign", "Two verdicts, met or not — a three-colour signal means explaining amber every time" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 56 左 140\n\n## 文字（版面 1920px に対する px）\nkicker 22px / 700 / 字間 0.16em / 等幅数字\ntitle 52px / 700 / 行送り 1.35 / 等幅数字\ncolHead 22px / 500 / 等幅数字\nitem 30px / 500 / 等幅数字\ntarget 30px / 400 / 等幅数字\nactual 36px / 700 / 等幅数字\ngap 30px / 400 / 等幅数字\njudge 24px / 700 / 等幅数字\nnote 20px / 400 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5\n\n## 外すと崩れる点\n- 色は判定にだけ使う。推移の線まで色分けすると、どこを見ればよいか分からない\n- 推移の線は指標ごとに目盛りが違う。形だけを読む図だと注記する\n- 差は pt で揃え、符号を必ず付ける\n- 判定は 2 値（達成・未達）にする。3 色の信号にすると、黄色の意味を毎回説明することになる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 56 left 140\n\n## Type (px against a 1920px canvas)\nkicker 22px / 700 / tracking 0.16em / tabular numerals\ntitle 52px / 700 / leading 1.35 / tabular numerals\ncolHead 22px / 500 / tabular numerals\nitem 30px / 500 / tabular numerals\ntarget 30px / 400 / tabular numerals\nactual 36px / 700 / tabular numerals\ngap 30px / 400 / tabular numerals\njudge 24px / 700 / tabular numerals\nnote 20px / 400 / tabular numerals\nfolio 16px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F2F4F8 / Ink #0E1A2B / Muted #5B6879 / Accent #1D3F72 / Rule #D6DCE5\n\n## Constraints — dropping these breaks it\n- Use colour only for the verdict — colour the trend lines too and nothing stands out\n- Each trend line has its own scale; note that only the shape is meant to be read\n- Express gaps in points, always with a sign\n- Two verdicts, met or not — a three-colour signal means explaining amber every time\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-scorecard-sparklines/pattern.html." }, "code": { "html": "\n\n指標の成績表 — 目標・実績・差・8 四半期の推移・判定を 1 行に\n\n\n\n\n
\n
\n
\n

経営指標

\n

5 指標のうち 2 つが目標を上回った

\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
指標通期目標上期実績目標との差直近 8 四半期判定
受注高の前年比+5.0%+7.3%+2.3pt達成
継続収入の比率32.0%31.4%−0.6pt未達
営業利益率8.8%8.5%−0.3pt未達
海外売上の比率38.0%39.2%+1.2pt達成
ROE（年換算）9.0%8.6%−0.4pt未達
\n

推移の線は指標ごとに縦の目盛りが違う。形だけを見る

\n
\n
\n

アオバ精工株式会社　2027 年 3 月期 第 2 四半期 決算説明資料

\n

07

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/font.css", "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/font-0.woff2", "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/font-1.woff2", "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines", "en": "https://design-vault.pages.dev/en/designs/kpi-scorecard-sparklines" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「決算・経営報告」の\n1 枚で、架空の会社「アオバ精工」の第 2 四半期決算説明として描いてある。会社・人物・数値はすべて架空。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it. One of the eight results-briefing slides, drawn\nas a fictional company's half-year results deck; every company, person and figure on it is invented.\n\n### Techniques\n\n- 推移は 240×56 の小さな SVG。最新の点だけ墨の丸\n- 達成の判定だけ紺の面に白抜き\n- 実績の列だけ太字・一回り大きく\n\n### Apply to\n\n- 決算説明・経営会議の指標一覧\n- 事業部の月次の成績表" }