{
  "id": "estimate-breakdown-table",
  "schemaVersion": 2,
  "title": {
    "ja": "見積の内訳 — 合計行だけを立てる",
    "en": "Estimate Breakdown — Only the Total Stands Up"
  },
  "summary": {
    "ja": "6 項目の内訳と合計。金額列は右揃えの等幅で、読み手が足し算を検算できる",
    "en": "Six line items and a total, the amounts right-aligned and tabular so the sum can be checked"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "data-viz"
  ],
  "useCases": [
    "pricing"
  ],
  "format": "slide-16x9",
  "density": "high",
  "layout": {
    "kind": "table",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 140,
      "bottom": 96,
      "left": 140
    }
  },
  "type": {
    "title": {
      "size": 42,
      "weight": 700,
      "tracking": "0.02em"
    },
    "basis": {
      "size": 17,
      "weight": 400
    },
    "th": {
      "size": 16,
      "weight": 500,
      "tracking": "0.1em"
    },
    "no": {
      "size": 17,
      "weight": 400,
      "numeric": "tabular"
    },
    "item": {
      "size": 21,
      "weight": 500
    },
    "itemNote": {
      "size": 15,
      "weight": 400,
      "leading": 1.6
    },
    "qty": {
      "size": 18,
      "weight": 400
    },
    "rate": {
      "size": 18,
      "weight": 400
    },
    "amount": {
      "size": 24,
      "weight": 500,
      "numeric": "tabular"
    },
    "totalLabel": {
      "size": 22,
      "weight": 500
    },
    "totalValue": {
      "size": 44,
      "weight": 700,
      "tracking": "-0.01em",
      "numeric": "tabular"
    },
    "subLabel": {
      "size": 16,
      "weight": 400
    },
    "subValue": {
      "size": 16,
      "weight": 400,
      "numeric": "tabular"
    },
    "note": {
      "size": 17,
      "weight": 400,
      "leading": 1.8
    },
    "valid": {
      "size": 15,
      "weight": 500,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F2F4F7",
    "ink": "#121519",
    "muted": "#6F767F",
    "accent": "#14425E",
    "rule": "#D5DAE1",
    "series": []
  },
  "rules": [
    {
      "ja": "金額列は右揃えの等幅。桁が揃っていないと、内訳を出した意味が消える",
      "en": "Amounts right-aligned and tabular — misaligned digits defeat the point of a breakdown"
    },
    {
      "ja": "行の罫は tr に引く。td ごとに引くと column-gap のぶん罫が切れる",
      "en": "Rule the row, not the cell — per-cell rules break at every column gap"
    },
    {
      "ja": "強調は合計行 1 つ。項目に色を置くと「推したい項目」に読まれる",
      "en": "Emphasize the total alone — a coloured line item reads as the one being pushed"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.ItW9ljcJ.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "pricing-3col-center-emphasis",
      "offering-grid-six-cards"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "high",
      "layout": {
        "kind": "table",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 140,
          "bottom": 96,
          "left": 140
        }
      },
      "type": {
        "title": {
          "size": 42,
          "weight": 700,
          "tracking": "0.02em"
        },
        "basis": {
          "size": 17,
          "weight": 400
        },
        "th": {
          "size": 16,
          "weight": 500,
          "tracking": "0.1em"
        },
        "no": {
          "size": 17,
          "weight": 400,
          "numeric": "tabular"
        },
        "item": {
          "size": 21,
          "weight": 500
        },
        "itemNote": {
          "size": 15,
          "weight": 400,
          "leading": 1.6
        },
        "qty": {
          "size": 18,
          "weight": 400
        },
        "rate": {
          "size": 18,
          "weight": 400
        },
        "amount": {
          "size": 24,
          "weight": 500,
          "numeric": "tabular"
        },
        "totalLabel": {
          "size": 22,
          "weight": 500
        },
        "totalValue": {
          "size": 44,
          "weight": 700,
          "tracking": "-0.01em",
          "numeric": "tabular"
        },
        "subLabel": {
          "size": 16,
          "weight": 400
        },
        "subValue": {
          "size": 16,
          "weight": 400,
          "numeric": "tabular"
        },
        "note": {
          "size": 17,
          "weight": 400,
          "leading": 1.8
        },
        "valid": {
          "size": 15,
          "weight": 500,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F2F4F7",
        "ink": "#121519",
        "muted": "#6F767F",
        "accent": "#14425E",
        "rule": "#D5DAE1"
      },
      "rules": [
        "Amounts right-aligned and tabular — misaligned digits defeat the point of a breakdown",
        "Rule the row, not the cell — per-cell rules break at every column gap",
        "Emphasize the total alone — a coloured line item reads as the one being pushed"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 96 左 140\n\n## 文字（版面 1920px に対する px）\ntitle  42px / 700 / 字間 0.02em\nbasis  17px / 400\nth  16px / 500 / 字間 0.1em\nno  17px / 400 / 等幅数字\nitem  21px / 500\nitemNote  15px / 400 / 行送り 1.6\nqty  18px / 400\nrate  18px / 400\namount  24px / 500 / 等幅数字\ntotalLabel  22px / 500\ntotalValue  44px / 700 / 字間 -0.01em / 等幅数字\nsubLabel  16px / 400\nsubValue  16px / 400 / 等幅数字\nnote  17px / 400 / 行送り 1.8\nvalid  15px / 500 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F7 / 文字 #121519 / 補助 #6F767F / 強調 #14425E / 罫 #D5DAE1\n\n## 外すと崩れる点\n- 金額列は右揃えの等幅。桁が揃っていないと、内訳を出した意味が消える\n- 行の罫は tr に引く。td ごとに引くと column-gap のぶん罫が切れる\n- 強調は合計行 1 つ。項目に色を置くと「推したい項目」に読まれる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/estimate-breakdown-table/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  42px / 700 / tracking 0.02em\nbasis  17px / 400\nth  16px / 500 / tracking 0.1em\nno  17px / 400 / tabular numerals\nitem  21px / 500\nitemNote  15px / 400 / leading 1.6\nqty  18px / 400\nrate  18px / 400\namount  24px / 500 / tabular numerals\ntotalLabel  22px / 500\ntotalValue  44px / 700 / tracking -0.01em / tabular numerals\nsubLabel  16px / 400\nsubValue  16px / 400 / tabular numerals\nnote  17px / 400 / leading 1.8\nvalid  15px / 500 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F2F4F7 / Ink #121519 / Muted #6F767F / Accent #14425E / Rule #D5DAE1\n\n## Constraints — dropping these breaks it\n- Amounts right-aligned and tabular — misaligned digits defeat the point of a breakdown\n- Rule the row, not the cell — per-cell rules break at every column gap\n- Emphasize the total alone — a coloured line item reads as the one being pushed\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/estimate-breakdown-table/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: #F2F4F7;\n    --ink: #121519;\n    --muted: #6F767F;\n    --accent: #14425E;\n    --rule: #D5DAE1;\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: 96px 140px;\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 32px; }\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  .basis { font-size: 17px; font-weight: 400; color: var(--muted); }\n\n  .table { display: grid; grid-template-rows: auto repeat(6, 1fr) auto; }\n  /* 金額列は右揃えの等幅。桁が揃っていないと、合計が正しいかを\n     読み手が確かめられず、内訳を出した意味が消える。 */\n  .tr { display: grid; grid-template-columns: 90px 1fr 200px 130px 260px; align-items: center; column-gap: 32px; }\n  /* 行の罫は tr に引く。td ごとに引くと column-gap のぶん罫が切れ、\n     揃っているはずの表が破線で組まれたように見える。 */\n  .tr { border-bottom: 1px solid var(--rule); }\n  .tr:first-child { border-bottom-width: 2px; }\n  .th { padding-bottom: 14px; font-size: 16px; font-weight: 500; letter-spacing: .1em; color: var(--muted); }\n  .th[data-num], .num { text-align: right; font-variant-numeric: tabular-nums; }\n  .td { padding: 14px 0; }\n  .no { font-size: 17px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }\n  .item { font-size: 21px; font-weight: 500; }\n  .itemNote { margin-top: 5px; font-size: 15px; font-weight: 400; color: var(--muted); line-height: 1.6; }\n  .qty { font-size: 18px; font-weight: 400; color: var(--muted); }\n  .rate { font-size: 18px; font-weight: 400; color: var(--muted); }\n  .amount { font-size: 24px; font-weight: 500; }\n\n  .total { display: grid; grid-template-columns: 1fr 260px; column-gap: 32px; align-items: baseline;\n           background: var(--surface); padding: 24px 32px; margin-top: 6px; }\n  .totalLabel { font-size: 22px; font-weight: 500; text-align: right; }\n  .totalValue { font-size: 44px; font-weight: 700; text-align: right; color: var(--accent);\n                font-variant-numeric: tabular-nums; letter-spacing: -.01em; }\n  .sub { display: grid; grid-template-columns: 1fr 260px; column-gap: 32px; padding: 14px 32px 0; }\n  .subLabel { font-size: 16px; font-weight: 400; color: var(--muted); text-align: right; }\n  .subValue { font-size: 16px; font-weight: 400; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }\n\n  .foot { border-top: 1px solid var(--rule); padding-top: 22px; 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  .valid { font-size: 15px; font-weight: 500; 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\">お見積の内訳（初年度）</h1>\n      <p class=\"basis\" data-type=\"basis\">単位: 万円 / 消費税は別</p>\n    </div>\n\n    <div class=\"table\">\n      <div class=\"tr\">\n        <p class=\"th\" data-type=\"th\">No.</p>\n        <p class=\"th\">項目</p>\n        <p class=\"th\">数量</p>\n        <p class=\"th\">単価</p>\n        <p class=\"th\" data-num>金額</p>\n      </div>\n\n      <div class=\"tr\">\n        <p class=\"td no\" data-type=\"no\">01</p>\n        <div class=\"td\"><p class=\"item\" data-type=\"item\">現状調査</p><p class=\"itemNote\" data-type=\"itemNote\">連携・帳票・権限の棚卸し</p></div>\n        <p class=\"td qty\" data-type=\"qty\">2.0 人月</p>\n        <p class=\"td rate\" data-type=\"rate\">160</p>\n        <p class=\"td amount num\" data-type=\"amount\">320</p>\n      </div>\n      <div class=\"tr\">\n        <p class=\"td no\">02</p>\n        <div class=\"td\"><p class=\"item\">業務設計</p><p class=\"itemNote\">移行後の手順と受入基準の文書化</p></div>\n        <p class=\"td qty\">6.0 人月</p>\n        <p class=\"td rate\">160</p>\n        <p class=\"td amount num\">960</p>\n      </div>\n      <div class=\"tr\">\n        <p class=\"td no\">03</p>\n        <div class=\"td\"><p class=\"item\">データ移行</p><p class=\"itemNote\">連携 23 本の切替と得意先コード統合</p></div>\n        <p class=\"td qty\">14.0 人月</p>\n        <p class=\"td rate\">150</p>\n        <p class=\"td amount num\">2,100</p>\n      </div>\n      <div class=\"tr\">\n        <p class=\"td no\">04</p>\n        <div class=\"td\"><p class=\"item\">拠点展開</p><p class=\"itemNote\">並行稼働 2 拠点 + 展開 7 拠点</p></div>\n        <p class=\"td qty\">9.0 人月</p>\n        <p class=\"td rate\">140</p>\n        <p class=\"td amount num\">1,260</p>\n      </div>\n      <div class=\"tr\">\n        <p class=\"td no\">05</p>\n        <div class=\"td\"><p class=\"item\">ライセンス</p><p class=\"itemNote\">年額。2 年目以降も同額</p></div>\n        <p class=\"td qty\">340 名</p>\n        <p class=\"td rate\">2.4</p>\n        <p class=\"td amount num\">816</p>\n      </div>\n      <div class=\"tr\">\n        <p class=\"td no\">06</p>\n        <div class=\"td\"><p class=\"item\">移行期間中の並行保守</p><p class=\"itemNote\">旧環境の監視を 4 か月延長</p></div>\n        <p class=\"td qty\">4.0 か月</p>\n        <p class=\"td rate\">36</p>\n        <p class=\"td amount num\">144</p>\n      </div>\n\n      <div>\n        <div class=\"total\">\n          <p class=\"totalLabel\" data-type=\"totalLabel\">初年度 合計</p>\n          <p class=\"totalValue\" data-type=\"totalValue\">5,600</p>\n        </div>\n        <div class=\"sub\">\n          <p class=\"subLabel\" data-type=\"subLabel\">うち今期の支出（2026 年度内）</p>\n          <p class=\"subValue\" data-type=\"subValue\">2,380</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"foot\">\n      <p class=\"note\" data-type=\"note\">2 年目以降は 05 のライセンスのみ（年額 816 万円）に戻ります。現行の保守費 4,100 万円と比べるのはこの額です。</p>\n      <p class=\"valid\" data-type=\"valid\">見積有効期限 2026 年 12 月 31 日</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/estimate-breakdown-table/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/estimate-breakdown-table/font.css",
        "https://design-vault.pages.dev/designs/estimate-breakdown-table/font-0.woff2",
        "https://design-vault.pages.dev/designs/estimate-breakdown-table/font-1.woff2",
        "https://design-vault.pages.dev/designs/estimate-breakdown-table/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/estimate-breakdown-table",
    "en": "https://design-vault.pages.dev/en/designs/estimate-breakdown-table"
  },
  "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- 2 年目以降の姿を注記に書く。初年度だけの比較は誤解を招く\n\n### Apply to\n\n- 提案書の見積ページ\n- 稟議に添える費用の内訳"
}