{
  "id": "waterfall-variance-bridge",
  "schemaVersion": 2,
  "title": {
    "ja": "ウォーターフォール — 差分の内訳を段で積む",
    "en": "Waterfall — Stepping Through the Variance"
  },
  "summary": {
    "ja": "前期から今期への増減を 7 段で積む。増減は色 2 値、着地だけが塗り",
    "en": "Seven steps from last period to this, two colours for sign and a fill only at the landing"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz"
  ],
  "useCases": [
    "kpi"
  ],
  "format": "slide-16x9",
  "density": "high",
  "layout": {
    "kind": "waterfall",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 100,
      "right": 132,
      "bottom": 100,
      "left": 132
    },
    "columns": {
      "count": 7,
      "gap": 48
    }
  },
  "type": {
    "title": {
      "size": 42,
      "weight": 700,
      "tracking": "0.02em"
    },
    "unitNote": {
      "size": 17,
      "weight": 400
    },
    "value": {
      "size": 22,
      "weight": 700,
      "numeric": "tabular"
    },
    "stepName": {
      "size": 19,
      "weight": 500,
      "leading": 1.45
    },
    "stepNote": {
      "size": 15,
      "weight": 400,
      "leading": 1.6
    },
    "note": {
      "size": 17,
      "weight": 400,
      "leading": 1.8
    },
    "span": {
      "size": 15,
      "weight": 400,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F5F7",
    "ink": "#14171A",
    "muted": "#767D86",
    "accent": "#1F6F4F",
    "rule": "#D9DEE3",
    "series": [
      "#B4472F"
    ]
  },
  "rules": [
    {
      "ja": "色は増と減の 2 値だけ。3 色目を足すと凡例の要る図になる",
      "en": "Two colours only, up and down — a third demands a legend"
    },
    {
      "ja": "符号は色ではなく「積み上がる向き」で読ませる",
      "en": "The sign is read from the direction of the step, not from its colour"
    },
    {
      "ja": "着地だけが塗り。ここが結論なので、2 つ目の強調は置かない",
      "en": "Only the landing is filled — it is the conclusion, so nothing else is emphasized"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.DTE8CKcM.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "kpi-grid-four-deltas",
      "kpi-hero-single-figure",
      "comparison-before-after"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "high",
      "layout": {
        "kind": "waterfall",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 100,
          "right": 132,
          "bottom": 100,
          "left": 132
        },
        "columns": {
          "count": 7,
          "gap": 48
        }
      },
      "type": {
        "title": {
          "size": 42,
          "weight": 700,
          "tracking": "0.02em"
        },
        "unitNote": {
          "size": 17,
          "weight": 400
        },
        "value": {
          "size": 22,
          "weight": 700,
          "numeric": "tabular"
        },
        "stepName": {
          "size": 19,
          "weight": 500,
          "leading": 1.45
        },
        "stepNote": {
          "size": 15,
          "weight": 400,
          "leading": 1.6
        },
        "note": {
          "size": 17,
          "weight": 400,
          "leading": 1.8
        },
        "span": {
          "size": 15,
          "weight": 400,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F5F7",
        "ink": "#14171A",
        "muted": "#767D86",
        "accent": "#1F6F4F",
        "rule": "#D9DEE3",
        "series": [
          "#B4472F"
        ]
      },
      "rules": [
        "Two colours only, up and down — a third demands a legend",
        "The sign is read from the direction of the step, not from its colour",
        "Only the landing is filled — it is the conclusion, so nothing else is emphasized"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 132 下 100 左 132\n- 7 カラム（等分）、間隔 48\n\n## 文字（版面 1920px に対する px）\ntitle  42px / 700 / 字間 0.02em\nunitNote  17px / 400\nvalue  22px / 700 / 等幅数字\nstepName  19px / 500 / 行送り 1.45\nstepNote  15px / 400 / 行送り 1.6\nnote  17px / 400 / 行送り 1.8\nspan  15px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F4F5F7 / 文字 #14171A / 補助 #767D86 / 強調 #1F6F4F / 罫 #D9DEE3 / #B4472F\n\n## 外すと崩れる点\n- 色は増と減の 2 値だけ。3 色目を足すと凡例の要る図になる\n- 符号は色ではなく「積み上がる向き」で読ませる\n- 着地だけが塗り。ここが結論なので、2 つ目の強調は置かない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/waterfall-variance-bridge/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 132 bottom 100 left 132\n- 7 equal columns, gap 48\n\n## Type (px against a 1920px canvas)\ntitle  42px / 700 / tracking 0.02em\nunitNote  17px / 400\nvalue  22px / 700 / tabular numerals\nstepName  19px / 500 / leading 1.45\nstepNote  15px / 400 / leading 1.6\nnote  17px / 400 / leading 1.8\nspan  15px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F4F5F7 / Ink #14171A / Muted #767D86 / Accent #1F6F4F / Rule #D9DEE3 / #B4472F\n\n## Constraints — dropping these breaks it\n- Two colours only, up and down — a third demands a legend\n- The sign is read from the direction of the step, not from its colour\n- Only the landing is filled — it is the conclusion, so nothing else is emphasized\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/waterfall-variance-bridge/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 {\n    --ground: #FFFFFF;\n    --surface: #F4F5F7;\n    --ink: #14171A;\n    --muted: #767D86;\n    --accent: #1F6F4F;\n    --rule: #D9DEE3;\n    --series-1: #B4472F;\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: 100px 132px;\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 40px; }\n\n  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 64px; }\n  .title { font-size: 42px; font-weight: 700; letter-spacing: .02em; }\n  .unitNote { font-size: 17px; font-weight: 400; color: var(--muted); }\n\n  /* 段は 7 本。増減の符号は色ではなく「積み上がる向き」で読ませ、\n     色は増と減の 2 値だけに使う（3 色目を足すと凡例が要る図になる）。 */\n  .plot { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 48px; align-items: end; }\n  .step { display: grid; grid-template-rows: 1fr auto; height: 100%; }\n  .stack { position: relative; height: 100%; }\n  .bar { position: absolute; left: 0; right: 0; }\n  .bar[data-sign=\"base\"] { background: var(--surface); border-top: 3px solid var(--muted); }\n  .bar[data-sign=\"up\"] { background: color-mix(in srgb, var(--accent) 18%, transparent); border-top: 3px solid var(--accent); }\n  .bar[data-sign=\"down\"] { background: color-mix(in srgb, var(--series-1) 18%, transparent); border-top: 3px solid var(--series-1); }\n  /* 着地だけが塗り。ここが結論なので、2 つ目の強調は置かない。 */\n  .bar[data-sign=\"end\"] { background: var(--accent); }\n\n  .value { position: absolute; left: 0; right: 0; text-align: center;\n           font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }\n  .caption { padding-top: 22px; border-top: 1px solid var(--rule); display: grid; gap: 8px; }\n  .stepName { font-size: 19px; font-weight: 500; line-height: 1.45; }\n  .stepNote { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--muted); }\n\n  .foot { display: flex; justify-content: space-between; gap: 48px;\n          border-top: 1px solid var(--rule); padding-top: 24px; }\n  .note { font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--muted); max-width: 1260px; }\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.2 億円の内訳</h1>\n      <p class=\"unitNote\" data-type=\"unitNote\">単位: 億円 / 連結</p>\n    </div>\n\n    <div class=\"plot\">\n      <div class=\"step\" data-col=\"1\">\n        <div class=\"stack\">\n          <div class=\"bar\" data-sign=\"base\" style=\"bottom:0; height:62%\"></div>\n          <p class=\"value\" style=\"bottom:64%\" data-type=\"value\">25.1</p>\n        </div>\n        <div class=\"caption\"><p class=\"stepName\" data-type=\"stepName\">前期 実績</p><p class=\"stepNote\" data-type=\"stepNote\">2025 年度</p></div>\n      </div>\n      <div class=\"step\" data-col=\"2\">\n        <div class=\"stack\">\n          <div class=\"bar\" data-sign=\"up\" style=\"bottom:62%; height:16.8%\"></div>\n          <p class=\"value\" style=\"bottom:80.8%\">+ 6.8</p>\n        </div>\n        <div class=\"caption\"><p class=\"stepName\">既存の単価改定</p><p class=\"stepNote\">4 月に一律 6 %</p></div>\n      </div>\n      <div class=\"step\" data-col=\"3\">\n        <div class=\"stack\">\n          <div class=\"bar\" data-sign=\"up\" style=\"bottom:78.8%; height:7.9%\"></div>\n          <p class=\"value\" style=\"bottom:88.7%\">+ 3.2</p>\n        </div>\n        <div class=\"caption\"><p class=\"stepName\">新規の獲得</p><p class=\"stepNote\">大口 2 社</p></div>\n      </div>\n      <div class=\"step\" data-col=\"4\">\n        <div class=\"stack\">\n          <div class=\"bar\" data-sign=\"down\" style=\"bottom:57.3%; height:29.4%\"></div>\n          <p class=\"value\" style=\"bottom:49%\">− 11.9</p>\n        </div>\n        <div class=\"caption\"><p class=\"stepName\">原価の上昇</p><p class=\"stepNote\">部材と物流</p></div>\n      </div>\n      <div class=\"step\" data-col=\"5\">\n        <div class=\"stack\">\n          <div class=\"bar\" data-sign=\"down\" style=\"bottom:47.2%; height:10.1%\"></div>\n          <p class=\"value\" style=\"bottom:39%\">− 4.1</p>\n        </div>\n        <div class=\"caption\"><p class=\"stepName\">先行投資</p><p class=\"stepNote\">基幹の刷新</p></div>\n      </div>\n      <div class=\"step\" data-col=\"6\">\n        <div class=\"stack\">\n          <div class=\"bar\" data-sign=\"up\" style=\"bottom:47.2%; height:4.4%\"></div>\n          <p class=\"value\" style=\"bottom:53%\">+ 1.8</p>\n        </div>\n        <div class=\"caption\"><p class=\"stepName\">経費の削減</p><p class=\"stepNote\">拠点の統廃合</p></div>\n      </div>\n      <div class=\"step\" data-col=\"7\">\n        <div class=\"stack\">\n          <div class=\"bar\" data-sign=\"end\" style=\"bottom:0; height:51.6%\"></div>\n          <p class=\"value\" style=\"bottom:53.6%\">20.9</p>\n        </div>\n        <div class=\"caption\"><p class=\"stepName\">今期 着地</p><p class=\"stepNote\">2026 年度 見込</p></div>\n      </div>\n    </div>\n\n    <div class=\"foot\">\n      <p class=\"note\" data-type=\"note\">減の 2 本のうち先行投資は計画済みで、今期限りです。説明を要するのは原価の 11.9 億円 —— 単価改定と新規獲得の合計 10 億円を、これ 1 本で消しています。</p>\n      <p class=\"span\" data-type=\"span\">2026 年 8 月 見込値</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/waterfall-variance-bridge/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/waterfall-variance-bridge/font.css",
        "https://design-vault.pages.dev/designs/waterfall-variance-bridge/font-0.woff2",
        "https://design-vault.pages.dev/designs/waterfall-variance-bridge/font-1.woff2",
        "https://design-vault.pages.dev/designs/waterfall-variance-bridge/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/waterfall-variance-bridge",
    "en": "https://design-vault.pages.dev/en/designs/waterfall-variance-bridge"
  },
  "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- 増の段は値を帯の上、減の段は帯の下に置く。位置だけで符号が読める\n- 各段に 1 行の注記を付け、「何が起きたか」を数字と一緒に持たせる\n\n### Apply to\n\n- 利益の前期比を説明する\n- 予算と実績の差異報告"
}