{
  "id": "equation-driver-formula",
  "schemaVersion": 2,
  "title": {
    "ja": "売上の分解 — 今期に動かせるのは頻度だけ",
    "en": "Revenue, Decomposed — Only One Factor Is Reachable This Half"
  },
  "summary": {
    "ja": "恒等式を版面の主役に据え、項ごとに「何がそれを動かすか」と前期比を添える。強調するのは今期に手が届く 1 項だけ",
    "en": "An identity as the whole slide: each factor carries what moves it and how it shifted, and only the one factor reachable this half is emphasised"
  },
  "capturedAt": "2026-09-16",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "kpi"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "centered",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 140,
      "bottom": 96,
      "left": 140
    }
  },
  "type": {
    "title": {
      "size": 44,
      "weight": 700,
      "tracking": "0.01em",
      "leading": 1.3
    },
    "window": {
      "size": 20,
      "weight": 500,
      "leading": 1.5
    },
    "termName": {
      "size": 24,
      "weight": 500,
      "leading": 1.4
    },
    "termValue": {
      "size": 64,
      "weight": 700,
      "tracking": "-0.01em",
      "leading": 1.1,
      "numeric": "tabular"
    },
    "operator": {
      "size": 40,
      "weight": 500,
      "leading": 1
    },
    "driver": {
      "size": 20,
      "weight": 400,
      "leading": 1.6
    },
    "delta": {
      "size": 20,
      "weight": 700,
      "leading": 1.4,
      "numeric": "tabular"
    },
    "conclusion": {
      "size": 26,
      "weight": 500,
      "leading": 1.6
    },
    "note": {
      "size": 16,
      "weight": 400,
      "leading": 1.6
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": []
  },
  "rules": [
    {
      "ja": "実際に掛け合わせて左辺になる数を置く。合わない式は、その場では気づかれず、あとで全部の数字を疑わせる",
      "en": "Use numbers that actually multiply out to the left-hand side. A formula that does not balance passes unnoticed in the room and later casts doubt on every figure in the deck"
    },
    {
      "ja": "項ごとに「何がそれを動かすか」を書く。式だけでは、どの項に手が届くのかが分からない",
      "en": "Give every factor what moves it. The identity alone does not say which factor anyone can reach"
    },
    {
      "ja": "塗るのは 1 項だけ。3 つとも塗ると、分解そのものが主題に見えて、決めるべき 1 つが消える",
      "en": "Fill one factor only. Fill all three and the decomposition becomes the subject, burying the one decision"
    },
    {
      "ja": "項は 3 つまで。4 つを超えると 1 項あたりの寄与が小さくなり、どれを動かしても効かない図になる",
      "en": "Three factors at most. Past four, each contributes so little that no factor looks worth moving"
    },
    {
      "ja": "式は恒等式であって因果ではないと明記する。右辺を動かせば左辺は動くが、動かせるかどうかは式の外にある",
      "en": "State that the formula is an identity, not a causal claim. Moving the right side moves the left, but whether it can be moved lives outside the formula"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.CfENIUGo.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "donut-share-center-total",
      "waffle-one-in-hundred"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "centered",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 140,
          "bottom": 96,
          "left": 140
        }
      },
      "type": {
        "title": {
          "size": 44,
          "weight": 700,
          "tracking": "0.01em",
          "leading": 1.3
        },
        "window": {
          "size": 20,
          "weight": 500,
          "leading": 1.5
        },
        "termName": {
          "size": 24,
          "weight": 500,
          "leading": 1.4
        },
        "termValue": {
          "size": 64,
          "weight": 700,
          "tracking": "-0.01em",
          "leading": 1.1,
          "numeric": "tabular"
        },
        "operator": {
          "size": 40,
          "weight": 500,
          "leading": 1
        },
        "driver": {
          "size": 20,
          "weight": 400,
          "leading": 1.6
        },
        "delta": {
          "size": 20,
          "weight": 700,
          "leading": 1.4,
          "numeric": "tabular"
        },
        "conclusion": {
          "size": 26,
          "weight": 500,
          "leading": 1.6
        },
        "note": {
          "size": 16,
          "weight": 400,
          "leading": 1.6
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9"
      },
      "rules": [
        "Use numbers that actually multiply out to the left-hand side. A formula that does not balance passes unnoticed in the room and later casts doubt on every figure in the deck",
        "Give every factor what moves it. The identity alone does not say which factor anyone can reach",
        "Fill one factor only. Fill all three and the decomposition becomes the subject, burying the one decision",
        "Three factors at most. Past four, each contributes so little that no factor looks worth moving",
        "State that the formula is an identity, not a causal claim. Moving the right side moves the left, but whether it can be moved lives outside the formula"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 96 左 140\n\n## 文字（版面 1920px に対する px）\ntitle  44px / 700 / 字間 0.01em / 行送り 1.3\nwindow  20px / 500 / 行送り 1.5\ntermName  24px / 500 / 行送り 1.4\ntermValue  64px / 700 / 字間 -0.01em / 行送り 1.1 / 等幅数字\noperator  40px / 500 / 行送り 1\ndriver  20px / 400 / 行送り 1.6\ndelta  20px / 700 / 行送り 1.4 / 等幅数字\nconclusion  26px / 500 / 行送り 1.6\nnote  16px / 400 / 行送り 1.6\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 実際に掛け合わせて左辺になる数を置く。合わない式は、その場では気づかれず、あとで全部の数字を疑わせる\n- 項ごとに「何がそれを動かすか」を書く。式だけでは、どの項に手が届くのかが分からない\n- 塗るのは 1 項だけ。3 つとも塗ると、分解そのものが主題に見えて、決めるべき 1 つが消える\n- 項は 3 つまで。4 つを超えると 1 項あたりの寄与が小さくなり、どれを動かしても効かない図になる\n- 式は恒等式であって因果ではないと明記する。右辺を動かせば左辺は動くが、動かせるかどうかは式の外にある\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/equation-driver-formula/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 96 left 140\n\n## Type (px against a 1920px canvas)\ntitle  44px / 700 / tracking 0.01em / leading 1.3\nwindow  20px / 500 / leading 1.5\ntermName  24px / 500 / leading 1.4\ntermValue  64px / 700 / tracking -0.01em / leading 1.1 / tabular numerals\noperator  40px / 500 / leading 1\ndriver  20px / 400 / leading 1.6\ndelta  20px / 700 / leading 1.4 / tabular numerals\nconclusion  26px / 500 / leading 1.6\nnote  16px / 400 / leading 1.6\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Use numbers that actually multiply out to the left-hand side. A formula that does not balance passes unnoticed in the room and later casts doubt on every figure in the deck\n- Give every factor what moves it. The identity alone does not say which factor anyone can reach\n- Fill one factor only. Fill all three and the decomposition becomes the subject, burying the one decision\n- Three factors at most. Past four, each contributes so little that no factor looks worth moving\n- State that the formula is an identity, not a causal claim. Moving the right side moves the left, but whether it can be moved lives outside the formula\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/equation-driver-formula/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>売上の分解 — 今期に動かせるのは頻度だけ</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 にだけ置く。以下の規則は var() か color-mix() で名指す。\n     区分色は持たない —— 3 つの項は違う種類のものではなく同じ式の因子で、\n     強調するのは「今期に動かせる 1 つ」だけ。 */\n  :root {\n    --ground: #FFFFFF;\n    --surface: #F4F6F9;\n    --ink: #131820;\n    --muted: #667183;\n    --accent: #1F5FA8;\n    --rule: #DBE1E9;\n  }\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\n  .artboard {\n    width: 1920px;\n    height: 1080px;\n    background: var(--ground);\n    color: var(--ink);\n    padding: 96px 140px;\n  }\n\n  .content {\n    height: 100%;\n    display: grid;\n    grid-template-rows: auto minmax(0, 1fr) auto;\n  }\n\n  .head { border-bottom: 2px solid var(--rule); padding-bottom: 28px; }\n  .title { font-size: 44px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; }\n  .window { margin-top: 14px; font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--muted); }\n\n  .body { display: grid; align-content: center; row-gap: 44px; }\n\n  .equation { display: flex; align-items: center; justify-content: center; gap: 20px; }\n  .term { width: 340px; padding: 30px 24px; border-radius: 12px; background: var(--surface); text-align: center; }\n  .term-result { width: 340px; border: 3px solid var(--accent); background: var(--ground); }\n  /* 今期に手が届く項だけを塗る。3 つとも塗ると、式の分解そのものが主題に見える。 */\n  .term-live { background: color-mix(in srgb, var(--accent) 14%, var(--ground)); }\n  .term-name { font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--muted); }\n  .term-value { margin-top: 12px; font-size: 64px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }\n  /* 幅を固定する。下の行が 40px の枠を空けて桁を合わせているので、演算子が\n     字送り任せだと、書体が変わった日に式と説明の列がずれる。 */\n  .operator { width: 40px; text-align: center; font-size: 40px; font-weight: 500; line-height: 1; color: var(--muted); }\n\n  .drivers { display: flex; align-items: flex-start; justify-content: center; gap: 20px; }\n  .driver-slot { width: 340px; text-align: center; }\n  .driver-gap { width: 340px; }\n  .driver-op { width: 40px; }\n  .driver { font-size: 20px; font-weight: 400; line-height: 1.6; color: var(--muted); }\n  .delta { margin-top: 6px; font-size: 20px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }\n\n  .conclusion { text-align: center; font-size: 26px; font-weight: 500; line-height: 1.6; color: var(--muted); }\n\n  .foot { border-top: 1px solid var(--rule); padding-top: 22px; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted); }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div class=\"head\">\n      <h1 class=\"title\" data-type=\"title\">売上の分解 — 今期に動かせるのは頻度だけ</h1>\n      <p class=\"window\" data-type=\"window\">2026 年度上期の実績 / 単価は税抜 / 頻度は 1 社あたりの年間購入回数</p>\n    </div>\n\n    <div class=\"body\">\n      <div class=\"equation\">\n        <div class=\"term term-result\">\n          <div class=\"term-name\" data-type=\"termName\">売上</div>\n          <div class=\"term-value\" data-type=\"termValue\">2.4 億</div>\n        </div>\n        <span class=\"operator\" data-type=\"operator\">=</span>\n        <div class=\"term\">\n          <div class=\"term-name\">客数</div>\n          <div class=\"term-value\">1,200 社</div>\n        </div>\n        <span class=\"operator\">×</span>\n        <div class=\"term\">\n          <div class=\"term-name\">単価</div>\n          <div class=\"term-value\">8.0 万</div>\n        </div>\n        <span class=\"operator\">×</span>\n        <div class=\"term term-live\">\n          <div class=\"term-name\">頻度</div>\n          <div class=\"term-value\">2.5 回</div>\n        </div>\n      </div>\n\n      <div class=\"drivers\">\n        <span class=\"driver-gap\"></span>\n        <span class=\"driver-op\"></span>\n        <div class=\"driver-slot\">\n          <div class=\"driver\" data-type=\"driver\">新規商談の数 × 受注率</div>\n          <div class=\"delta\" data-type=\"delta\">前期比 +3%</div>\n        </div>\n        <span class=\"driver-op\"></span>\n        <div class=\"driver-slot\">\n          <div class=\"driver\">構成の見直しでしか動かない</div>\n          <div class=\"delta\">前期比 0%</div>\n        </div>\n        <span class=\"driver-op\"></span>\n        <div class=\"driver-slot\">\n          <div class=\"driver\">更新案内の自動化で伸びる</div>\n          <div class=\"delta\">前期比 +12%</div>\n        </div>\n      </div>\n\n      <p class=\"conclusion\" data-type=\"conclusion\">客数は商談の数に縛られ、単価は価格の議論が要る。今期に手が届くのは右端の 1 つだけ</p>\n    </div>\n\n    <div class=\"foot\" data-type=\"note\">式は恒等式であって因果ではない。右辺のどれかを動かせば左辺が動くが、動かせるかどうかは式の外の話。</div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/equation-driver-formula/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/equation-driver-formula/font.css",
        "https://design-vault.pages.dev/designs/equation-driver-formula/font-0.woff2",
        "https://design-vault.pages.dev/designs/equation-driver-formula/font-1.woff2",
        "https://design-vault.pages.dev/designs/equation-driver-formula/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/equation-driver-formula",
    "en": "https://design-vault.pages.dev/en/designs/equation-driver-formula"
  },
  "notesMarkdown": "分解の式は、置いた瞬間に「どれを動かすか」という問いに変わる。だから項ごとに\n**何がそれを動かすか**を添えないと、式は正しいのに決められない図になる。\n\n数が合っていることは、思っている以上に重い。1,200 × 8.0 万 × 2.5 が 2.4 億に\nならない式は、その場では誰も検算しないが、あとで 1 つでも食い違いが見つかった\n瞬間に、この資料のすべての数字が疑われる。"
}