{
  "id": "funnel-four-stage-dropoff",
  "schemaVersion": 2,
  "title": {
    "ja": "ファネル 4 段 — 落ちる場所を 1 つだけ指す",
    "en": "Four-Stage Funnel — One Place Where It Leaks"
  },
  "summary": {
    "ja": "帯の長さが残存数。段ごとに色を変えず、詰まっている 1 段だけを塗る",
    "en": "Bar length is what remains; only the stage that clogs takes a fill"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "bold"
  ],
  "useCases": [
    "kpi",
    "process"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "funnel",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 104,
      "right": 136,
      "bottom": 104,
      "left": 136
    },
    "emphasis": {
      "row": 3,
      "via": [
        "fill"
      ]
    }
  },
  "type": {
    "title": {
      "size": 44,
      "weight": 700,
      "tracking": "0.02em"
    },
    "lede": {
      "size": 19,
      "weight": 400,
      "leading": 1.8
    },
    "name": {
      "size": 26,
      "weight": 500
    },
    "count": {
      "size": 34,
      "weight": 700,
      "tracking": "-0.01em",
      "numeric": "tabular"
    },
    "rate": {
      "size": 30,
      "weight": 700,
      "numeric": "tabular"
    },
    "why": {
      "size": 16,
      "weight": 400
    },
    "note": {
      "size": 17,
      "weight": 400,
      "leading": 1.8
    },
    "span": {
      "size": 15,
      "weight": 400,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#0F1418",
    "surface": "#1A2128",
    "ink": "#EEF2F5",
    "muted": "#8894A0",
    "accent": "#F2884B",
    "rule": "#28313A",
    "series": []
  },
  "rules": [
    {
      "ja": "段ごとに色を変えない。4 段すべてが色を持つと、どこが問題か図が答えない",
      "en": "One colour per stage answers nothing — the chart must name the leak"
    },
    {
      "ja": "右の数字は「1 つ前からの残存率」。全体比と混ぜない",
      "en": "The right-hand rate is survival from the previous stage, never share of the whole"
    },
    {
      "ja": "塗った帯の上では地が文字の色になる。リテラルではなく役割で書く",
      "en": "On a filled bar the ground becomes the text colour — written as a role, not a literal"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.OUtsdaP-.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "process-flow-five-step",
      "kpi-hero-single-figure",
      "waterfall-variance-bridge"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "funnel",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 104,
          "right": 136,
          "bottom": 104,
          "left": 136
        },
        "emphasis": {
          "row": 3,
          "via": [
            "fill"
          ]
        }
      },
      "type": {
        "title": {
          "size": 44,
          "weight": 700,
          "tracking": "0.02em"
        },
        "lede": {
          "size": 19,
          "weight": 400,
          "leading": 1.8
        },
        "name": {
          "size": 26,
          "weight": 500
        },
        "count": {
          "size": 34,
          "weight": 700,
          "tracking": "-0.01em",
          "numeric": "tabular"
        },
        "rate": {
          "size": 30,
          "weight": 700,
          "numeric": "tabular"
        },
        "why": {
          "size": 16,
          "weight": 400
        },
        "note": {
          "size": 17,
          "weight": 400,
          "leading": 1.8
        },
        "span": {
          "size": 15,
          "weight": 400,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#0F1418",
        "surface": "#1A2128",
        "ink": "#EEF2F5",
        "muted": "#8894A0",
        "accent": "#F2884B",
        "rule": "#28313A"
      },
      "rules": [
        "One colour per stage answers nothing — the chart must name the leak",
        "The right-hand rate is survival from the previous stage, never share of the whole",
        "On a filled bar the ground becomes the text colour — written as a role, not a literal"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 104 右 136 下 104 左 136\n\n## 強調\n3 行目のみ。手段は 塗り だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  44px / 700 / 字間 0.02em\nlede  19px / 400 / 行送り 1.8\nname  26px / 500\ncount  34px / 700 / 字間 -0.01em / 等幅数字\nrate  30px / 700 / 等幅数字\nwhy  16px / 400\nnote  17px / 400 / 行送り 1.8\nspan  15px / 400 / 等幅数字\n\n## 配色\n地 #0F1418 / 面 #1A2128 / 文字 #EEF2F5 / 補助 #8894A0 / 強調 #F2884B / 罫 #28313A\n\n## 外すと崩れる点\n- 段ごとに色を変えない。4 段すべてが色を持つと、どこが問題か図が答えない\n- 右の数字は「1 つ前からの残存率」。全体比と混ぜない\n- 塗った帯の上では地が文字の色になる。リテラルではなく役割で書く\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/funnel-four-stage-dropoff/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 104 right 136 bottom 104 left 136\n\n## Emphasis\nrow 3 only, by fill and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  44px / 700 / tracking 0.02em\nlede  19px / 400 / leading 1.8\nname  26px / 500\ncount  34px / 700 / tracking -0.01em / tabular numerals\nrate  30px / 700 / tabular numerals\nwhy  16px / 400\nnote  17px / 400 / leading 1.8\nspan  15px / 400 / tabular numerals\n\n## Colour\nGround #0F1418 / Surface #1A2128 / Ink #EEF2F5 / Muted #8894A0 / Accent #F2884B / Rule #28313A\n\n## Constraints — dropping these breaks it\n- One colour per stage answers nothing — the chart must name the leak\n- The right-hand rate is survival from the previous stage, never share of the whole\n- On a filled bar the ground becomes the text colour — written as a role, not a literal\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/funnel-four-stage-dropoff/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>ファネル 4 段 — 落ちる場所を 1 つだけ指す</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 {\n    --ground: #0F1418;\n    --surface: #1A2128;\n    --ink: #EEF2F5;\n    --muted: #8894A0;\n    --accent: #F2884B;\n    --rule: #28313A;\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: 104px 136px;\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 48px; }\n\n  .head { display: grid; gap: 14px; }\n  .title { font-size: 44px; font-weight: 700; letter-spacing: .02em; }\n  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }\n\n  .stages { display: grid; grid-template-rows: repeat(4, 1fr); gap: 20px; align-content: stretch; }\n  .stage { display: grid; grid-template-columns: 300px 1fr 260px; align-items: center; gap: 40px; }\n  .name { font-size: 26px; font-weight: 500; }\n  .track { position: relative; height: 100%; display: flex; align-items: center; }\n  /* 幅が残存率そのもの。段ごとに色を変えず、1 段だけを塗る ——\n     4 段すべてが色を持つと、どこが問題なのか図が答えなくなる。 */\n  .band { height: 78px; background: var(--surface); display: flex; align-items: center; padding-left: 36px; }\n  .count { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }\n  .stage[data-emphasis] .band { background: var(--accent); }\n  .stage[data-emphasis] .count { color: var(--ground); }\n  .drop { text-align: right; display: grid; gap: 6px; }\n  .rate { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }\n  .stage[data-emphasis] .rate { color: var(--accent); }\n  .why { font-size: 16px; font-weight: 400; color: var(--muted); }\n\n  .foot { border-top: 1px solid var(--rule); padding-top: 26px;\n          display: flex; justify-content: space-between; gap: 48px; }\n  .note { font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--muted); max-width: 1240px; }\n  .span { font-size: 15px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }\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\">申込までの 4 段 —— 詰まっているのは 1 か所</h1>\n      <p class=\"lede\" data-type=\"lede\">帯の長さは残った人数。右の数字は 1 つ前の段からの残存率です。</p>\n    </div>\n\n    <div class=\"stages\">\n      <div class=\"stage\" data-row=\"1\">\n        <p class=\"name\" data-type=\"name\">資料請求</p>\n        <div class=\"track\"><div class=\"band\" style=\"width:100%\"><span class=\"count\" data-type=\"count\">8,420</span></div></div>\n        <div class=\"drop\"><p class=\"rate\" data-type=\"rate\">—</p><p class=\"why\" data-type=\"why\">起点</p></div>\n      </div>\n      <div class=\"stage\" data-row=\"2\">\n        <p class=\"name\">初回の面談</p>\n        <div class=\"track\"><div class=\"band\" style=\"width:71%\"><span class=\"count\">5,980</span></div></div>\n        <div class=\"drop\"><p class=\"rate\">71 %</p><p class=\"why\">想定どおり</p></div>\n      </div>\n      <div class=\"stage\" data-row=\"3\" data-emphasis=\"fill\">\n        <p class=\"name\">見積の提示</p>\n        <div class=\"track\"><div class=\"band\" style=\"width:26%\"><span class=\"count\">2,190</span></div></div>\n        <div class=\"drop\"><p class=\"rate\">37 %</p><p class=\"why\">提示まで平均 11 日</p></div>\n      </div>\n      <div class=\"stage\" data-row=\"4\">\n        <p class=\"name\">申込</p>\n        <div class=\"track\"><div class=\"band\" style=\"width:21%\"><span class=\"count\">1,770</span></div></div>\n        <div class=\"drop\"><p class=\"rate\">81 %</p><p class=\"why\">見積後は落ちない</p></div>\n      </div>\n    </div>\n\n    <div class=\"foot\">\n      <p class=\"note\" data-type=\"note\">見積を出しさえすれば 8 割が申込に至ります。改善の余地は「出すまでの 11 日」だけで、面談の質でも申込画面でもありません。</p>\n      <p class=\"span\" data-type=\"span\">2026 年 4 – 8 月 / 全拠点</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/funnel-four-stage-dropoff/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/funnel-four-stage-dropoff/font.css",
        "https://design-vault.pages.dev/designs/funnel-four-stage-dropoff/font-0.woff2",
        "https://design-vault.pages.dev/designs/funnel-four-stage-dropoff/font-1.woff2",
        "https://design-vault.pages.dev/designs/funnel-four-stage-dropoff/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/funnel-four-stage-dropoff",
    "en": "https://design-vault.pages.dev/en/designs/funnel-four-stage-dropoff"
  },
  "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 行添える。率だけでは打ち手が決まらない\n- 起点の段は率を「—」にする。0% でも 100% でもないことを明示する\n- 4 段を版面の高さで等分し、帯の高さは固定する（長さだけが情報）\n\n### Apply to\n\n- 受注プロセスの詰まりを示す\n- 採用や申込の歩留まり報告"
}