{ "id": "wbs-gantt-six-phases", "schemaVersion": 2, "title": { "ja": "工程表 — 帯の長さを期間に、重なりを引き継ぎに使う", "en": "Phase Schedule — Length Is Duration, Overlap Is Hand-off" }, "summary": { "ja": "12 か月の格子に 6 工程の帯を載せる。御社側の作業は地に罫、弊社は塗り、現在地だけ accent", "en": "Six bars over a twelve-month grid — client work outlined, ours filled, and only the current phase in accent" }, "capturedAt": "2026-09-15", "categories": [ "presentation" ], "tags": [ "minimal", "data-viz" ], "useCases": [ "roadmap", "process" ], "format": "slide-16x9", "density": "high", "layout": { "kind": "gantt", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 100, "right": 140, "bottom": 100, "left": 140 }, "emphasis": { "row": 2, "via": [ "fill" ] } }, "type": { "title": { "size": 46, "weight": 700, "tracking": "0.01em", "leading": 1.3 }, "basis": { "size": 16, "weight": 400, "numeric": "tabular" }, "m": { "size": 14, "weight": 500, "numeric": "tabular" }, "effort": { "size": 17, "weight": 500, "numeric": "tabular" }, "pname": { "size": 21, "weight": 700, "leading": 1.4 }, "powner": { "size": 14, "weight": 400 }, "foot": { "size": 16, "weight": 400, "leading": 1.8 } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F6F9", "ink": "#131820", "muted": "#667183", "accent": "#1F5FA8", "rule": "#DBE1E9", "series": [] }, "rules": [ { "ja": "月の境界を罫で引く。目盛りの無いガントは「だいたい 3 月ごろ」としか読めず、合意の材料にならない", "en": "Rule every month boundary — a gantt without a scale can only be read as \"around March\", which is not something anyone can agree to" }, { "ja": "帯の重なりは引き継ぎ期間として意図的に残す。詰めて描くと、後工程の立ち上がりが読めなくなる", "en": "Keep the overlaps: they are the hand-off. Butted bars hide the time a later phase needs to start moving" }, { "ja": "発注側の作業は塗らずに罫で囲む。同じ塗りにすると、どちらがどれだけ動くのかが図から消える", "en": "Outline the client's own work instead of filling it — one fill for both sides erases who is carrying what" }, { "ja": "accent を置くのは現在地の 1 本だけ。塗り分けを増やすと、色で「今」を言う手段が無くなる", "en": "One accent bar, the current one. Add a second colour meaning and you lose the ability to say \"now\" in colour" }, { "ja": "人月を右端に置く。帯の隣に置くと期間と工数が混ざり、長い帯＝重い工程と誤読される", "en": "Put the effort figure at the far right; beside the bar it merges with duration, and a long bar reads as a heavy one" } ], "cover": "https://design-vault.pages.dev/_astro/cover.h9qe_NBk.png", "assets": [], "shortlist": true, "status": "published", "relations": { "similar": [ "roadmap-4phase-band", "phase-divider-step-rail", "cutover-runbook-timeline" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "high", "layout": { "kind": "gantt", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 100, "right": 140, "bottom": 100, "left": 140 }, "emphasis": { "row": 2, "via": [ "fill" ] } }, "type": { "title": { "size": 46, "weight": 700, "tracking": "0.01em", "leading": 1.3 }, "basis": { "size": 16, "weight": 400, "numeric": "tabular" }, "m": { "size": 14, "weight": 500, "numeric": "tabular" }, "effort": { "size": 17, "weight": 500, "numeric": "tabular" }, "pname": { "size": 21, "weight": 700, "leading": 1.4 }, "powner": { "size": 14, "weight": 400 }, "foot": { "size": 16, "weight": 400, "leading": 1.8 } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F6F9", "ink": "#131820", "muted": "#667183", "accent": "#1F5FA8", "rule": "#DBE1E9" }, "rules": [ "Rule every month boundary — a gantt without a scale can only be read as \"around March\", which is not something anyone can agree to", "Keep the overlaps: they are the hand-off. Butted bars hide the time a later phase needs to start moving", "Outline the client's own work instead of filling it — one fill for both sides erases who is carrying what", "One accent bar, the current one. Add a second colour meaning and you lose the ability to say \"now\" in colour", "Put the effort figure at the far right; beside the bar it merges with duration, and a long bar reads as a heavy one" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 140 下 100 左 140\n\n## 強調\n2 行目のみ。手段は 塗り だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle 46px / 700 / 字間 0.01em / 行送り 1.3\nbasis 16px / 400 / 等幅数字\nm 14px / 500 / 等幅数字\neffort 17px / 500 / 等幅数字\npname 21px / 700 / 行送り 1.4\npowner 14px / 400\nfoot 16px / 400 / 行送り 1.8\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 月の境界を罫で引く。目盛りの無いガントは「だいたい 3 月ごろ」としか読めず、合意の材料にならない\n- 帯の重なりは引き継ぎ期間として意図的に残す。詰めて描くと、後工程の立ち上がりが読めなくなる\n- 発注側の作業は塗らずに罫で囲む。同じ塗りにすると、どちらがどれだけ動くのかが図から消える\n- accent を置くのは現在地の 1 本だけ。塗り分けを増やすと、色で「今」を言う手段が無くなる\n- 人月を右端に置く。帯の隣に置くと期間と工数が混ざり、長い帯＝重い工程と誤読される\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/wbs-gantt-six-phases/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 140 bottom 100 left 140\n\n## Emphasis\nrow 2 only, by fill and nothing else\n\n## Type (px against a 1920px canvas)\ntitle 46px / 700 / tracking 0.01em / leading 1.3\nbasis 16px / 400 / tabular numerals\nm 14px / 500 / tabular numerals\neffort 17px / 500 / tabular numerals\npname 21px / 700 / leading 1.4\npowner 14px / 400\nfoot 16px / 400 / leading 1.8\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Rule every month boundary — a gantt without a scale can only be read as \"around March\", which is not something anyone can agree to\n- Keep the overlaps: they are the hand-off. Butted bars hide the time a later phase needs to start moving\n- Outline the client's own work instead of filling it — one fill for both sides erases who is carrying what\n- One accent bar, the current one. Add a second colour meaning and you lose the ability to say \"now\" in colour\n- Put the effort figure at the far right; beside the bar it merges with duration, and a long bar reads as a heavy one\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/wbs-gantt-six-phases/pattern.html." }, "code": { "html": "\n\n工程表 — 帯の長さを期間に、重なりを引き継ぎに使う\n\n\n\n\n
\n
\n
\n

工程表（第 1 期）

\n

2026.10 〜 2027.09 ／ 稼働は 2027.11 を想定

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

10

11

12

\n

01

02

03

\n

04

05

06

\n

07

08

09

\n
\n

人月

\n
\n\n
\n

要件定義

合同 ／ 御社主管

\n
\n
\n
\n
\n

14

\n
\n\n
\n

基本設計

弊社 ／ 御社レビュー

\n
\n
\n
\n
\n

22

\n
\n\n
\n

詳細設計・実装

弊社

\n
\n
\n
\n
\n

58

\n
\n\n
\n

結合・総合テスト

弊社 ／ 御社立会

\n
\n
\n
\n
\n

26

\n
\n\n
\n

受入テスト

御社

\n
\n
\n
\n
\n

8

\n
\n\n
\n

移行・切替準備

合同

\n
\n
\n
\n
\n

12

\n
\n
\n\n

帯の重なりは引き継ぎ期間です。設計と実装、テストと移行準備はそれぞれ 1 か月重ねています。重なりを削ると、後工程の立ち上がりがその分だけ遅れます。

\n
\n
\n", "url": "https://design-vault.pages.dev/designs/wbs-gantt-six-phases/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/wbs-gantt-six-phases/font.css", "https://design-vault.pages.dev/designs/wbs-gantt-six-phases/font-0.woff2", "https://design-vault.pages.dev/designs/wbs-gantt-six-phases/font-1.woff2", "https://design-vault.pages.dev/designs/wbs-gantt-six-phases/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/wbs-gantt-six-phases", "en": "https://design-vault.pages.dev/en/designs/wbs-gantt-six-phases" }, "notesMarkdown": "## この構成について / About this pattern\n\n第 1 期の工程を 12 か月の格子に載せた版。**`pattern.html` が版そのもの**で、`cover.png` と\nfrontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nThe schedule slide for one phase of a project. `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 列グリッドの `grid-column` で置く。位置を % で書くと月境界と 1px ずれ、目盛りが嘘になる\n- 工程名の下に主管を小さく添えると、凡例を別に置かずに「誰が動く月か」が読める\n- 行の区切りは罫 1 本。行を塗り分けると、帯の塗りと衝突して現在地が消える\n\n### Apply to\n\n- 提案・計画の工程説明、月次報告での実績反映\n- 複数フェーズの全体計画（月を四半期に読み替える）" }