{ "id": "estimate-breakdown-by-phase", "schemaVersion": 2, "title": { "ja": "見積の内訳 — 総額より先に構成比を読ませる", "en": "Estimate Breakdown — Share of Cost Before the Total" }, "summary": { "ja": "工程別の金額を幅比例の帯で積み、その下に人月・単価・金額・構成比の表。前提と変動要因を同じ面に置く", "en": "Phases stacked in proportion, then a table of effort, rate, amount and share — with the assumptions on the same page" }, "capturedAt": "2026-09-15", "categories": [ "presentation" ], "tags": [ "minimal", "data-viz" ], "useCases": [ "pricing", "summary" ], "format": "slide-16x9", "density": "high", "layout": { "kind": "waterfall", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 92, "right": 140, "bottom": 92, "left": 140 }, "columns": { "count": 5, "gap": 3 }, "emphasis": { "column": 3, "via": [ "fill" ] } }, "type": { "title": { "size": 44, "weight": 700, "tracking": "0.01em", "leading": 1.3 }, "total": { "size": 17, "weight": 500, "numeric": "tabular" }, "segName": { "size": 16, "weight": 500 }, "segPct": { "size": 20, "weight": 700, "numeric": "tabular" }, "col": { "size": 15, "weight": 500, "tracking": "0.12em" }, "pname": { "size": 20, "weight": 700, "leading": 1.4 }, "num": { "size": 19, "weight": 500, "numeric": "tabular" }, "fkey": { "size": 14, "weight": 500, "tracking": "0.14em" }, "fval": { "size": 16, "weight": 400, "leading": 1.75, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F6F9", "ink": "#131820", "muted": "#667183", "accent": "#1F5FA8", "rule": "#DBE1E9", "series": [] }, "rules": [ { "ja": "積み上げの帯を表より上に置く。総額から読ませると「高い／安い」の話になり、どこに費用が乗っているかの話にならない", "en": "Put the proportional bar above the table — read from the total first, the conversation is about the price, not about where the cost sits" }, { "ja": "単価は工程ごとに出す。平均単価 1 つだと、工程を削ったときの再計算が合わず、値引き交渉が算数の話になる", "en": "Give every phase its own rate: with a single blended rate, removing a phase does not recompute, and the negotiation turns into arithmetic" }, { "ja": "発注側の工数は金額に入れず、行としては残す。消すと「こちらは何もしなくてよい」と読まれる", "en": "Keep the client's own effort as a row with no amount — deleted, it reads as \"nothing is asked of us\"" }, { "ja": "前提と変動要因を同じ面に置く。別紙に送ると総額だけが独り歩きし、範囲が変わっても金額は据え置きだと思われる", "en": "Assumptions and swing factors belong on this page; on an annex the total travels alone and is taken as fixed whatever the scope does" }, { "ja": "有効期限を書く。要員の確保が前提の金額なので、期限の無い見積は約束として扱われる", "en": "State the expiry — the figure assumes people are held, and an estimate with no expiry is read as a commitment" }, { "ja": "塗るのはいちばん重い工程 1 つだけ。2 つ塗ると「重い」が意味を失う", "en": "Fill one segment, the heaviest. Fill two and \"heaviest\" stops meaning anything" } ], "cover": "https://design-vault.pages.dev/_astro/cover.FF_VkIjz.png", "assets": [], "shortlist": true, "status": "published", "relations": { "similar": [ "pricing-3col-center-emphasis", "wbs-gantt-six-phases", "scope-in-out-two-fields" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "high", "layout": { "kind": "waterfall", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 92, "right": 140, "bottom": 92, "left": 140 }, "columns": { "count": 5, "gap": 3 }, "emphasis": { "column": 3, "via": [ "fill" ] } }, "type": { "title": { "size": 44, "weight": 700, "tracking": "0.01em", "leading": 1.3 }, "total": { "size": 17, "weight": 500, "numeric": "tabular" }, "segName": { "size": 16, "weight": 500 }, "segPct": { "size": 20, "weight": 700, "numeric": "tabular" }, "col": { "size": 15, "weight": 500, "tracking": "0.12em" }, "pname": { "size": 20, "weight": 700, "leading": 1.4 }, "num": { "size": 19, "weight": 500, "numeric": "tabular" }, "fkey": { "size": 14, "weight": 500, "tracking": "0.14em" }, "fval": { "size": 16, "weight": 400, "leading": 1.75, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F6F9", "ink": "#131820", "muted": "#667183", "accent": "#1F5FA8", "rule": "#DBE1E9" }, "rules": [ "Put the proportional bar above the table — read from the total first, the conversation is about the price, not about where the cost sits", "Give every phase its own rate: with a single blended rate, removing a phase does not recompute, and the negotiation turns into arithmetic", "Keep the client's own effort as a row with no amount — deleted, it reads as \"nothing is asked of us\"", "Assumptions and swing factors belong on this page; on an annex the total travels alone and is taken as fixed whatever the scope does", "State the expiry — the figure assumes people are held, and an estimate with no expiry is read as a commitment", "Fill one segment, the heaviest. Fill two and \"heaviest\" stops meaning anything" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 92 右 140 下 92 左 140\n- 5 カラム（等分）、間隔 3\n\n## 強調\n3 列目のみ。手段は 塗り だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle 44px / 700 / 字間 0.01em / 行送り 1.3\ntotal 17px / 500 / 等幅数字\nsegName 16px / 500\nsegPct 20px / 700 / 等幅数字\ncol 15px / 500 / 字間 0.12em\npname 20px / 700 / 行送り 1.4\nnum 19px / 500 / 等幅数字\nfkey 14px / 500 / 字間 0.14em\nfval 16px / 400 / 行送り 1.75 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 積み上げの帯を表より上に置く。総額から読ませると「高い／安い」の話になり、どこに費用が乗っているかの話にならない\n- 単価は工程ごとに出す。平均単価 1 つだと、工程を削ったときの再計算が合わず、値引き交渉が算数の話になる\n- 発注側の工数は金額に入れず、行としては残す。消すと「こちらは何もしなくてよい」と読まれる\n- 前提と変動要因を同じ面に置く。別紙に送ると総額だけが独り歩きし、範囲が変わっても金額は据え置きだと思われる\n- 有効期限を書く。要員の確保が前提の金額なので、期限の無い見積は約束として扱われる\n- 塗るのはいちばん重い工程 1 つだけ。2 つ塗ると「重い」が意味を失う\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/estimate-breakdown-by-phase/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 92 right 140 bottom 92 left 140\n- 5 equal columns, gap 3\n\n## Emphasis\ncolumn 3 only, by fill and nothing else\n\n## Type (px against a 1920px canvas)\ntitle 44px / 700 / tracking 0.01em / leading 1.3\ntotal 17px / 500 / tabular numerals\nsegName 16px / 500\nsegPct 20px / 700 / tabular numerals\ncol 15px / 500 / tracking 0.12em\npname 20px / 700 / leading 1.4\nnum 19px / 500 / tabular numerals\nfkey 14px / 500 / tracking 0.14em\nfval 16px / 400 / leading 1.75 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Put the proportional bar above the table — read from the total first, the conversation is about the price, not about where the cost sits\n- Give every phase its own rate: with a single blended rate, removing a phase does not recompute, and the negotiation turns into arithmetic\n- Keep the client's own effort as a row with no amount — deleted, it reads as \"nothing is asked of us\"\n- Assumptions and swing factors belong on this page; on an annex the total travels alone and is taken as fixed whatever the scope does\n- State the expiry — the figure assumes people are held, and an estimate with no expiry is read as a commitment\n- Fill one segment, the heaviest. Fill two and \"heaviest\" stops meaning anything\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-by-phase/pattern.html." }, "code": { "html": "\n\n見積の内訳 — 総額より先に構成比を読ませる\n\n\n\n\n
\n
\n
\n

見積の内訳（第 1 期）

\n

弊社分 合計 136,200 千円（税別）／ 132 人月

\n
\n\n
\n
\n
\n

要件定義

\n

12.3%

\n
\n
\n

基本設計

\n

19.4%

\n
\n
\n

詳細設計・実装

\n

40.5%

\n
\n
\n

結合・総合テスト

\n

18.1%

\n
\n
\n

移行・切替

\n

9.7%

\n
\n
\n\n
\n
\n

工程

\n

人月

\n

単価（千円／人月）

\n

金額（千円）

\n

構成比

\n
\n\n
\n

要件定義

\n

14

\n

1,200

\n

16,800

\n

12.3%

\n
\n
\n

基本設計

\n

22

\n

1,200

\n

26,400

\n

19.4%

\n
\n
\n

詳細設計・実装

\n

58

\n

950

\n

55,100

\n

40.5%

\n
\n
\n

結合・総合テスト

\n

26

\n

950

\n

24,700

\n

18.1%

\n
\n
\n

移行・切替

\n

12

\n

1,100

\n

13,200

\n

9.7%

\n
\n
\n

弊社分 合計

\n

132

\n

—

\n

136,200

\n

100.0%

\n
\n
\n

受入テスト（御社ご担当）

\n

8

\n

—

\n

見積外

\n

—

\n
\n
\n
\n\n
\n
\n

前提

\n

対象範囲は 2 章の「第 1 期で作るもの」5 項目。帳票は主要 9 本、連携は在庫・会計の 2 系統。

\n
\n
\n

この金額が動く要因

\n

統合対象 4 帳票を個別に残す判断（＋約 6,800 千円）／ 在庫連携を非同期に変更（△ 約 3,200 千円）。

\n
\n
\n

有効期限

\n

2026.11.30 まで。要員の確保を前提とするため。

\n
\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/estimate-breakdown-by-phase/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/estimate-breakdown-by-phase/font.css", "https://design-vault.pages.dev/designs/estimate-breakdown-by-phase/font-0.woff2", "https://design-vault.pages.dev/designs/estimate-breakdown-by-phase/font-1.woff2", "https://design-vault.pages.dev/designs/estimate-breakdown-by-phase/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/estimate-breakdown-by-phase", "en": "https://design-vault.pages.dev/en/designs/estimate-breakdown-by-phase" }, "notesMarkdown": "## この構成について / About this pattern\n\n「なぜこの金額か」を 1 枚で説明する版。**`pattern.html` が版そのもの**で、`cover.png` と\nfrontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nThe page that explains why the number is the number. `pattern.html` is the artboard itself; both\n`cover.png` and the measurements come from it, so the three cannot drift apart.\n\n### Techniques\n\n- 帯の各区画の幅は `12.33fr 19.38fr 40.46fr 18.14fr 9.69fr`。表の構成比と同じ値を `fr` に\n そのまま置くので、絵と数字がずれようがない\n- 合計行だけ `--surface` を敷き、下端を `--ink` の 2px で締める。塗りと罫の 2 手段を使うのは\n この 1 行だけ\n- 金額は千円単位で右揃え・等幅数字。桁区切りを入れても縦の桁位置が動かない\n\n### Apply to\n\n- 提案書の見積内訳、変更要求に伴う再見積の説明\n- 実績報告（「金額」を「実績」に、「構成比」を「予算比」に読み替える）" }