{
  "id": "design:unit-economics-ltv-cac",
  "schemaVersion": 2,
  "title": {
    "ja": "単位あたりの採算 — LTV・CAC・回収月数を、式を添えて並べる",
    "en": "Unit Economics — LTV, CAC and Payback Side by Side, Each With Its Formula"
  },
  "summary": {
    "ja": "LTV・CAC・回収月数を 3 枚のカードに大きな数字で置き、各カードの下に算出の式を添える。比は下の帯で別に示す",
    "en": "LTV, CAC and payback as large figures on three cards, each with its formula beneath; the ratio gets its own band below"
  },
  "capturedAt": "2026-10-19",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "typography"
  ],
  "useCases": [
    "kpi"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "3-column",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 112,
      "right": 160,
      "bottom": 96,
      "left": 160
    },
    "columns": {
      "count": 3,
      "gap": 32
    }
  },
  "type": {
    "kicker": {
      "size": 22,
      "weight": 700,
      "tracking": "0.2em"
    },
    "title": {
      "size": 56,
      "weight": 900,
      "leading": 1.3
    },
    "cLabel": {
      "size": 22,
      "weight": 700
    },
    "cName": {
      "size": 20,
      "weight": 400,
      "tracking": "0.06em"
    },
    "cValue": {
      "size": 96,
      "weight": 900,
      "tracking": "-0.02em",
      "leading": 1,
      "numeric": "tabular"
    },
    "cHow": {
      "size": 22,
      "weight": 400,
      "leading": 1.7
    },
    "rLabel": {
      "size": 24,
      "weight": 700
    },
    "rValue": {
      "size": 56,
      "weight": 900,
      "numeric": "tabular"
    },
    "rNote": {
      "size": 22,
      "weight": 400
    },
    "source": {
      "size": 16,
      "weight": 400
    }
  },
  "colors": {
    "ground": "#F6F5F1",
    "surface": "#FFFFFF",
    "ink": "#15171C",
    "muted": "#686C75",
    "accent": "#9A6512",
    "rule": "#DDDAD2",
    "series": []
  },
  "rules": [
    {
      "ja": "各数字の下に算出の式を書く。式の無い LTV は、最初に疑われる",
      "en": "Write the formula under each figure — an LTV without one is the first thing doubted"
    },
    {
      "ja": "比（LTV ÷ CAC）はカードにせず、下の帯に分ける。4 枚目のカードにすると、別の指標に見える",
      "en": "Put the ratio in a band below, not a fourth card — as a card it reads as another metric"
    },
    {
      "ja": "用語は日本語を主に、略語を小さく添える",
      "en": "Lead with the plain term and set the abbreviation small beneath"
    },
    {
      "ja": "結論の 1 枚（回収月数）だけを強調色にする",
      "en": "Only the conclusion card (payback) takes the accent"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.CCUEwhoZ.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "kpi-dark-three-figures",
      "kpi-grid-four-deltas",
      "equation-driver-formula"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "3-column",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 112,
          "right": 160,
          "bottom": 96,
          "left": 160
        },
        "columns": {
          "count": 3,
          "gap": 32
        }
      },
      "type": {
        "kicker": {
          "size": 22,
          "weight": 700,
          "tracking": "0.2em"
        },
        "title": {
          "size": 56,
          "weight": 900,
          "leading": 1.3
        },
        "cLabel": {
          "size": 22,
          "weight": 700
        },
        "cName": {
          "size": 20,
          "weight": 400,
          "tracking": "0.06em"
        },
        "cValue": {
          "size": 96,
          "weight": 900,
          "tracking": "-0.02em",
          "leading": 1,
          "numeric": "tabular"
        },
        "cHow": {
          "size": 22,
          "weight": 400,
          "leading": 1.7
        },
        "rLabel": {
          "size": 24,
          "weight": 700
        },
        "rValue": {
          "size": 56,
          "weight": 900,
          "numeric": "tabular"
        },
        "rNote": {
          "size": 22,
          "weight": 400
        },
        "source": {
          "size": 16,
          "weight": 400
        }
      },
      "colors": {
        "ground": "#F6F5F1",
        "surface": "#FFFFFF",
        "ink": "#15171C",
        "muted": "#686C75",
        "accent": "#9A6512",
        "rule": "#DDDAD2"
      },
      "rules": [
        "Write the formula under each figure — an LTV without one is the first thing doubted",
        "Put the ratio in a band below, not a fourth card — as a card it reads as another metric",
        "Lead with the plain term and set the abbreviation small beneath",
        "Only the conclusion card (payback) takes the accent"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 112 右 160 下 96 左 160\n- 3 カラム（等分）、間隔 32\n\n## 文字（版面 1920px に対する px）\nkicker  22px / 700 / 字間 0.2em\ntitle  56px / 900 / 行送り 1.3\ncLabel  22px / 700\ncName  20px / 400 / 字間 0.06em\ncValue  96px / 900 / 字間 -0.02em / 行送り 1 / 等幅数字\ncHow  22px / 400 / 行送り 1.7\nrLabel  24px / 700\nrValue  56px / 900 / 等幅数字\nrNote  22px / 400\nsource  16px / 400\n\n## 配色\n地 #F6F5F1 / 面 #FFFFFF / 文字 #15171C / 補助 #686C75 / 強調 #9A6512 / 罫 #DDDAD2\n\n## 外すと崩れる点\n- 各数字の下に算出の式を書く。式の無い LTV は、最初に疑われる\n- 比（LTV ÷ CAC）はカードにせず、下の帯に分ける。4 枚目のカードにすると、別の指標に見える\n- 用語は日本語を主に、略語を小さく添える\n- 結論の 1 枚（回収月数）だけを強調色にする\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/unit-economics-ltv-cac/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 112 right 160 bottom 96 left 160\n- 3 equal columns, gap 32\n\n## Type (px against a 1920px canvas)\nkicker  22px / 700 / tracking 0.2em\ntitle  56px / 900 / leading 1.3\ncLabel  22px / 700\ncName  20px / 400 / tracking 0.06em\ncValue  96px / 900 / tracking -0.02em / leading 1 / tabular numerals\ncHow  22px / 400 / leading 1.7\nrLabel  24px / 700\nrValue  56px / 900 / tabular numerals\nrNote  22px / 400\nsource  16px / 400\n\n## Colour\nGround #F6F5F1 / Surface #FFFFFF / Ink #15171C / Muted #686C75 / Accent #9A6512 / Rule #DDDAD2\n\n## Constraints — dropping these breaks it\n- Write the formula under each figure — an LTV without one is the first thing doubted\n- Put the ratio in a band below, not a fourth card — as a card it reads as another metric\n- Lead with the plain term and set the abbreviation small beneath\n- Only the conclusion card (payback) takes the accent\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/unit-economics-ltv-cac/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>単位あたりの採算 — LTV・CAC・回収月数を、式でつないで並べる</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;700;900\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  /* この版そのもの。index.md の layout / type / colors は、この HTML を\n     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */\n  :root {\n    --ground: #F6F5F1;\n    --surface: #FFFFFF;\n    --ink: #15171C;\n    --muted: #686C75;\n    --accent: #9A6512;\n    --rule: #DDDAD2;\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; height: 1080px;\n    background: var(--ground); color: var(--ink);\n    padding: 112px 160px 96px;            /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; row-gap: 40px; }\n\n  .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); }\n  .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; }\n\n  .cards { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; align-content: center; }\n  .card { background: var(--surface); padding: 44px 48px; border-top: 6px solid var(--ink); }\n  .card.hi { border-top-color: var(--accent); }\n  .cLabel { font-size: 22px; font-weight: 700; color: var(--muted); }\n  .cName { font-size: 20px; font-weight: 400; color: var(--muted); margin-top: 4px; letter-spacing: .06em; }\n  .cValue { font-size: 96px; font-weight: 900; line-height: 1; margin-top: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }\n  .cValue small { font-size: 36px; font-weight: 900; margin-left: 8px; letter-spacing: 0; }\n  .card.hi .cValue { color: var(--accent); }\n  .cHow { font-size: 22px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 20px; }\n\n  /* 比は 1 本の帯で。カードの 4 枚目にすると、3 つと同列の別の指標に見える */\n  .ratio { display: grid; grid-template-columns: auto auto 1fr; column-gap: 40px; align-items: center; background: var(--ink); color: var(--surface); padding: 28px 48px; }\n  .rLabel { font-size: 24px; font-weight: 700; }\n  .rValue { font-size: 56px; font-weight: 900; font-variant-numeric: tabular-nums; }\n  .rNote { font-size: 22px; font-weight: 400; color: var(--rule); text-align: right; }\n\n  .source { font-size: 16px; font-weight: 400; color: var(--muted); }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div>\n      <p class=\"kicker\" data-type=\"kicker\">採算</p>\n      <h1 class=\"title\" data-type=\"title\">1 社を獲得する費用は、7 か月で回収できる</h1>\n    </div>\n\n    <div class=\"cards\">\n      <div class=\"card\" data-col=\"1\">\n        <p class=\"cLabel\" data-type=\"cLabel\">1 社が払う総額</p>\n        <p class=\"cName\" data-type=\"cName\">LTV</p>\n        <p class=\"cValue\" data-type=\"cValue\">35.3<small>万円</small></p>\n        <p class=\"cHow\" data-type=\"cHow\">月 9,800 円 × 平均の利用期間 36 か月</p>\n      </div>\n      <div class=\"card\" data-col=\"2\">\n        <p class=\"cLabel\">1 社の獲得費用</p>\n        <p class=\"cName\">CAC</p>\n        <p class=\"cValue\">6.9<small>万円</small></p>\n        <p class=\"cHow\">広告と営業の費用 ÷ 新規の社数</p>\n      </div>\n      <div class=\"card hi\" data-col=\"3\">\n        <p class=\"cLabel\">獲得費用の回収</p>\n        <p class=\"cName\">PAYBACK</p>\n        <p class=\"cValue\">7<small>か月</small></p>\n        <p class=\"cHow\">CAC ÷ 1 社の月の粗利 9,800 円</p>\n      </div>\n    </div>\n\n    <div class=\"ratio\">\n      <p class=\"rLabel\" data-type=\"rLabel\">LTV ÷ CAC</p>\n      <p class=\"rValue\" data-type=\"rValue\">5.1 倍</p>\n      <p class=\"rNote\" data-type=\"rNote\">目安の 3 倍を上回る。紹介経路の CAC は 2.1 万円</p>\n    </div>\n\n    <p class=\"source\" data-type=\"source\">CAC は直近 6 か月の平均。数値は説明用の架空のもの</p>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/unit-economics-ltv-cac/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/unit-economics-ltv-cac/font.css",
        "https://design-vault.pages.dev/designs/unit-economics-ltv-cac/font-0.woff2",
        "https://design-vault.pages.dev/designs/unit-economics-ltv-cac/font-1.woff2",
        "https://design-vault.pages.dev/designs/unit-economics-ltv-cac/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/unit-economics-ltv-cac",
    "en": "https://design-vault.pages.dev/en/designs/unit-economics-ltv-cac",
    "json": "https://design-vault.pages.dev/ai/assets/unit-economics-ltv-cac.json",
    "designJson": "https://design-vault.pages.dev/ai/designs/unit-economics-ltv-cac.json"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「事業計画・資金調達」の\n1 枚で、架空の会社「ミナト経理」のシリーズ A のピッチとして描いてある。会社・人物・数値はすべて架空。\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 ten pitch slides, drawn as the\nSeries A deck of a fictional company; every company, person and figure on it is invented.\n\n### Techniques\n\n- カードの上端に 6px の罫、結論のカードだけ強調色\n- 数字は 96px、単位は 36px で下端を揃える\n- 比の帯は墨の面に地の色で抜く\n\n### Apply to\n\n- ピッチの採算の 1 枚\n- 事業計画の前提を示す（式の数字を計画値に替える）",
  "slug": "unit-economics-ltv-cac",
  "kind": "artboard",
  "catalogVersion": 1,
  "designSchemaVersion": 2,
  "capabilities": [
    "view-artboard",
    "read-spec",
    "copy-prompt",
    "get-code"
  ],
  "reusePolicy": "construction-reuse"
}