{
  "id": "case-study-2col-single-figure",
  "schemaVersion": 2,
  "title": {
    "ja": "数値ひとつを主役にする 2 分割",
    "en": "Two-column Split on a Single Figure"
  },
  "summary": {
    "ja": "左に特大の数値 1 つ、右に文脈。1 枚に数値を 2 つ置かない",
    "en": "One oversized figure on the left, its context on the right — never two figures on a page"
  },
  "capturedAt": "2026-09-01",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "bold"
  ],
  "useCases": [
    "case-study",
    "kpi"
  ],
  "format": "slide-16x9",
  "density": "low",
  "layout": {
    "kind": "2-column",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 120,
      "right": 128,
      "bottom": 120,
      "left": 128
    },
    "columns": {
      "count": 2,
      "gap": 64
    },
    "emphasis": {
      "column": 1,
      "via": [
        "scale"
      ]
    }
  },
  "type": {
    "figure": {
      "size": 200,
      "weight": 700,
      "tracking": "-.03em",
      "leading": 1,
      "numeric": "tabular"
    },
    "unit": {
      "size": 32,
      "weight": 400
    },
    "label": {
      "size": 14,
      "weight": 500,
      "tracking": ".12em",
      "transform": "upper"
    },
    "body": {
      "size": 18,
      "weight": 400,
      "leading": 1.8
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "ink": "#14171A",
    "muted": "#79808A",
    "accent": "#0F6B5E",
    "series": []
  },
  "rules": [
    {
      "ja": "1 枚に数値は 1 つ。2 つ置いた時点でどちらも主役でなくなる",
      "en": "One figure per page — a second one demotes both"
    },
    {
      "ja": "単位は数値の 1/4 以下。同じ大きさにすると桁が読めない",
      "en": "Keep the unit at a quarter of the figure or less, or the digits stop reading"
    },
    {
      "ja": "根拠は数値の下に 2 行まで。右の段は文脈であって説明ではない",
      "en": "At most two lines of evidence under the figure; the right column is context, not explanation"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.Kfq48JM_.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "kpi-dark-three-figures"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "low",
      "layout": {
        "kind": "2-column",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 120,
          "right": 128,
          "bottom": 120,
          "left": 128
        },
        "columns": {
          "count": 2,
          "gap": 64
        },
        "emphasis": {
          "column": 1,
          "via": [
            "scale"
          ]
        }
      },
      "type": {
        "figure": {
          "size": 200,
          "weight": 700,
          "tracking": "-.03em",
          "leading": 1,
          "numeric": "tabular"
        },
        "unit": {
          "size": 32,
          "weight": 400
        },
        "label": {
          "size": 14,
          "weight": 500,
          "tracking": ".12em",
          "transform": "upper"
        },
        "body": {
          "size": 18,
          "weight": 400,
          "leading": 1.8
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "ink": "#14171A",
        "muted": "#79808A",
        "accent": "#0F6B5E"
      },
      "rules": [
        "One figure per page — a second one demotes both",
        "Keep the unit at a quarter of the figure or less, or the digits stop reading",
        "At most two lines of evidence under the figure; the right column is context, not explanation"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 120 右 128 下 120 左 128\n- 2 カラム（等分）、間隔 64\n\n## 強調\n1 列目のみ。手段は 拡大 だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\nfigure  200px / 700 / 字間 -.03em / 行送り 1 / 等幅数字\nunit  32px / 400\nlabel  14px / 500 / 字間 .12em / 大文字\nbody  18px / 400 / 行送り 1.8\n\n## 配色\n地 #FFFFFF / 文字 #14171A / 補助 #79808A / 強調 #0F6B5E\n\n## 外すと崩れる点\n- 1 枚に数値は 1 つ。2 つ置いた時点でどちらも主役でなくなる\n- 単位は数値の 1/4 以下。同じ大きさにすると桁が読めない\n- 根拠は数値の下に 2 行まで。右の段は文脈であって説明ではない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/case-study-2col-single-figure/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 120 right 128 bottom 120 left 128\n- 2 equal columns, gap 64\n\n## Emphasis\ncolumn 1 only, by scale and nothing else\n\n## Type (px against a 1920px canvas)\nfigure  200px / 700 / tracking -.03em / leading 1 / tabular numerals\nunit  32px / 400\nlabel  14px / 500 / tracking .12em / uppercase\nbody  18px / 400 / leading 1.8\n\n## Colour\nGround #FFFFFF / Ink #14171A / Muted #79808A / Accent #0F6B5E\n\n## Constraints — dropping these breaks it\n- One figure per page — a second one demotes both\n- Keep the unit at a quarter of the figure or less, or the digits stop reading\n- At most two lines of evidence under the figure; the right column is context, not explanation\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/case-study-2col-single-figure/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>数値ひとつを主役にする 2 分割</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 { --ground: #FFFFFF; --ink: #14171A; --muted: #79808A; --accent: #0F6B5E; }\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: 120px 128px; }\n  .content { height: 100%; display: grid; align-content: center; }\n  .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }\n  /* 強調は「拡大」1 手段 — 変形ではなく級数で効かせる。 */\n  .figbox { display: grid; gap: 20px; }\n  .label { font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }\n  .amount { display: flex; align-items: baseline; gap: 12px; }\n  .figure { font-size: 200px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); }\n  .unit { font-size: 32px; font-weight: 400; color: var(--muted); }\n  .body { font-size: 18px; font-weight: 400; line-height: 1.8; }\n  .note { font-size: 14px; font-weight: 400; line-height: 1.8; color: var(--muted); margin-top: 28px; }\n</style>\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div class=\"cols\">\n      <div class=\"figbox\" data-col=\"1\" data-emphasis=\"scale\">\n        <p class=\"label\" data-type=\"label\">一次対応の所要時間</p>\n        <p class=\"amount\"><span class=\"figure\" data-type=\"figure\">62</span><span class=\"unit\" data-type=\"unit\">% 減</span></p>\n      </div>\n      <div data-col=\"2\">\n        <p class=\"body\" data-type=\"body\">問い合わせの一次受けを切り出したことで、担当者が着手するまでの待ち時間が 62% 減りました。窓口の運用そのものは変えていません。</p>\n        <p class=\"note\">導入 3 か月後・同一の集計方法で比較</p>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/case-study-2col-single-figure/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/case-study-2col-single-figure/font.css",
        "https://design-vault.pages.dev/designs/case-study-2col-single-figure/font-0.woff2",
        "https://design-vault.pages.dev/designs/case-study-2col-single-figure/font-1.woff2",
        "https://design-vault.pages.dev/designs/case-study-2col-single-figure/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/case-study-2col-single-figure",
    "en": "https://design-vault.pages.dev/en/designs/case-study-2col-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- 数値を 200px まで上げられるのは、1 枚に 1 つしか置かないから\n- 単位（%、億円、pt）は数値のベースラインに揃える。中央揃えにすると浮く\n- 右段は本文 1 段落 + 出典 1 行で止める\n\n### Apply to\n\n- 導入事例の成果ページ\n- 決算・KPI 報告の「1 枚で言い切る」スライド"
}