Phase Schedule — Length Is Duration, Overlap Is Hand-off

140 100

1920 × 1080 Seen as a design

About this one

Six bars over a twelve-month grid — client work outlined, ours filled, and only the current phase in accent

Reach for it when

Roadmap Process

Source

Saved: 2026.09.15
License: Original

Similar structure

Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 100 right 140 bottom 100 left 140 ## Emphasis row 2 only, by fill and nothing else ## Type (px against a 1920px canvas) title 46px / 700 / tracking 0.01em / leading 1.3 basis 16px / 400 / tabular numerals m 14px / 500 / tabular numerals effort 17px / 500 / tabular numerals pname 21px / 700 / leading 1.4 powner 14px / 400 foot 16px / 400 / leading 1.8 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 ## Constraints — dropping these breaks it - 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 Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/wbs-gantt-six-phases/pattern.html.

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

{ "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" ] }

<!doctype html> <meta charset="utf-8"> <title>工程表 — 帯の長さを期間に、重なりを引き継ぎに使う</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;500;700"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #FFFFFF; --surface: #F4F6F9; --ink: #131820; --muted: #667183; --accent: #1F5FA8; --rule: #DBE1E9; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 100px 140px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; } .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; } .title { font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; } .basis { font-size: 16px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; } .chart { align-self: center; display: grid; gap: 0; } /* 左に工程名と担当、右に 12 か月分の格子。月の境界は罫で引き、帯は格子の上に置く。目盛りの無いガントは「だいたい」にしか読めない。 */ .line { display: grid; grid-template-columns: 300px 1fr 152px; align-items: center; gap: 28px; } .months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); } .m { font-size: 14px; font-weight: 500; color: var(--muted); text-align: center; padding-bottom: 14px; border-left: 1px solid var(--rule); font-variant-numeric: tabular-nums; } .m:last-child { border-right: 1px solid var(--rule); } .row { padding: 15px 0; border-bottom: 1px solid var(--rule); } .row:first-of-type { border-top: 1px solid var(--rule); } .pname { font-size: 21px; font-weight: 700; line-height: 1.4; } .powner { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 6px; } .track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; height: 44px; } .cell { height: 100%; border-left: 1px solid var(--rule); } .cell:last-child { border-right: 1px solid var(--rule); } .bar { grid-row: 1; height: 26px; background: var(--muted); align-self: center; margin: 0 3px; } /* 現在地の工程だけ accent。塗り分けを増やすと、どれが今かを色で言えなくなる。 */ .bar[data-now] { background: var(--accent); } /* 御社側の作業は地に罫。弊社の帯と同じ塗りにすると、負荷の偏りが見えない。 */ .bar[data-client] { background: var(--surface); border: 1px solid var(--muted); } .effort { font-size: 17px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; } .foot { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 24px; } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div class="head"> <h1 class="title" data-type="title">工程表（第 1 期）</h1> <p class="basis" data-type="basis">2026.10 〜 2027.09 ／稼働は 2027.11 を想定</p> </div> <div class="chart"> <div class="line"> <div></div> <div class="months"> <p class="m" data-type="m">10</p><p class="m">11</p><p class="m">12</p> <p class="m">01</p><p class="m">02</p><p class="m">03</p> <p class="m">04</p><p class="m">05</p><p class="m">06</p> <p class="m">07</p><p class="m">08</p><p class="m">09</p> </div> <p class="effort" data-type="effort">人月</p> </div> <div class="line row" data-row="1"> <div><p class="pname" data-type="pname">要件定義</p><p class="powner" data-type="powner">合同／御社主管</p></div> <div class="track"> <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div> <div class="bar" data-client style="grid-column: 1 / 4"></div> </div> <p class="effort">14</p> </div> <div class="line row" data-row="2" data-emphasis="fill"> <div><p class="pname">基本設計</p><p class="powner">弊社／御社レビュー</p></div> <div class="track"> <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div> <div class="bar" data-now style="grid-column: 3 / 7"></div> </div> <p class="effort">22</p> </div> <div class="line row" data-row="3"> <div><p class="pname">詳細設計・実装</p><p class="powner">弊社</p></div> <div class="track"> <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div> <div class="bar" style="grid-column: 6 / 11"></div> </div> <p class="effort">58</p> </div> <div class="line row" data-row="4"> <div><p class="pname">結合・総合テスト</p><p class="powner">弊社／御社立会</p></div> <div class="track"> <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div> <div class="bar" style="grid-column: 9 / 12"></div> </div> <p class="effort">26</p> </div> <div class="line row" data-row="5"> <div><p class="pname">受入テスト</p><p class="powner">御社</p></div> <div class="track"> <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div> <div class="bar" data-client style="grid-column: 11 / 13"></div> </div> <p class="effort">8</p> </div> <div class="line row" data-row="6"> <div><p class="pname">移行・切替準備</p><p class="powner">合同</p></div> <div class="track"> <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div> <div class="bar" style="grid-column: 10 / 13"></div> </div> <p class="effort">12</p> </div> </div> <p class="foot" data-type="foot">帯の重なりは引き継ぎ期間です。設計と実装、テストと移行準備はそれぞれ 1 か月重ねています。重なりを削ると、後工程の立ち上がりがその分だけ遅れます。</p> </div> </div>

/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit. * font Zen Kaku Gothic New 400;500;700 * chars 105 (98a0ee819e450ad1) * * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。 */ @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: block; src: url(./font-0.woff2) format('woff2'); unicode-range: U+2e, U+30-39, U+2014, U+3001-3002, U+301c, U+3044, U+3046, U+304b-304e, U+3051-3052, U+3055-3056, U+3059-305a, U+305d-3062, U+3066-306b, U+306d-3070, U+307e, U+308a-308c, U+3092, U+3094, U+3099, U+30b9-30ba, U+30c6-30c9, U+30d2-30d3, U+30e5, U+30ec, U+30fb-30fc, U+4e0a, U+4e3b, U+4eba, U+4ef6, U+4f1a, U+4f7f, U+5099, U+50cd, U+5165, U+5206-5207, U+524a, U+53d7, U+5408, U+540c, U+57fa, U+5b9a, U+5b9f, U+5de5, U+5e2f, U+5f0a, U+5f15, U+5f8c, U+5fa1, U+60f3, U+66ff, U+6708, U+671f, U+672c, U+6e96, U+793e, U+79fb, U+7a0b, U+7a3c, U+7acb, U+7b2c, U+7ba1, U+7d30, U+7d50, U+7d99, U+7dcf, U+7fa9, U+884c, U+8868, U+88c5, U+8981, U+8a08, U+8a2d, U+8a73, U+9045, U+91cd, U+9577, U+9593, U+ff08-ff09, U+ff0f; } @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 500; font-display: block; src: url(./font-1.woff2) format('woff2'); unicode-range: U+2e, U+30-39, U+2014, U+3001-3002, U+301c, U+3044, U+3046, U+304b-304e, U+3051-3052, U+3055-3056, U+3059-305a, U+305d-3062, U+3066-306b, U+306d-3070, U+307e, U+308a-308c, U+3092, U+3094, U+3099, U+30b9-30ba, U+30c6-30c9, U+30d2-30d3, U+30e5, U+30ec, U+30fb-30fc, U+4e0a, U+4e3b, U+4eba, U+4ef6, U+4f1a, U+4f7f, U+5099, U+50cd, U+5165, U+5206-5207, U+524a, U+53d7, U+5408, U+540c, U+57fa, U+5b9a, U+5b9f, U+5de5, U+5e2f, U+5f0a, U+5f15, U+5f8c, U+5fa1, U+60f3, U+66ff, U+6708, U+671f, U+672c, U+6e96, U+793e, U+79fb, U+7a0b, U+7a3c, U+7acb, U+7b2c, U+7ba1, U+7d30, U+7d50, U+7d99, U+7dcf, U+7fa9, U+884c, U+8868, U+88c5, U+8981, U+8a08, U+8a2d, U+8a73, U+9045, U+91cd, U+9577, U+9593, U+ff08-ff09, U+ff0f; } @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 700; font-display: block; src: url(./font-2.woff2) format('woff2'); unicode-range: U+2e, U+30-39, U+2014, U+3001-3002, U+301c, U+3044, U+3046, U+304b-304e, U+3051-3052, U+3055-3056, U+3059-305a, U+305d-3062, U+3066-306b, U+306d-3070, U+307e, U+308a-308c, U+3092, U+3094, U+3099, U+30b9-30ba, U+30c6-30c9, U+30d2-30d3, U+30e5, U+30ec, U+30fb-30fc, U+4e0a, U+4e3b, U+4eba, U+4ef6, U+4f1a, U+4f7f, U+5099, U+50cd, U+5165, U+5206-5207, U+524a, U+53d7, U+5408, U+540c, U+57fa, U+5b9a, U+5b9f, U+5de5, U+5e2f, U+5f0a, U+5f15, U+5f8c, U+5fa1, U+60f3, U+66ff, U+6708, U+671f, U+672c, U+6e96, U+793e, U+79fb, U+7a0b, U+7a3c, U+7acb, U+7b2c, U+7ba1, U+7d30, U+7d50, U+7d99, U+7dcf, U+7fa9, U+884c, U+8868, U+88c5, U+8981, U+8a08, U+8a2d, U+8a73, U+9045, U+91cd, U+9577, U+9593, U+ff08-ff09, U+ff0f; }

Notes

この構成について / About this pattern

第 1 期の工程を 12 か月の格子に載せた版。pattern.html が版そのもので、cover.png と frontmatter の寸法はどちらもそこから機械的に出している。編集するのは pattern.html だけ。

The schedule slide for one phase of a project. pattern.html is the artboard itself; both cover.png and the measurements come from it, so the three cannot drift apart.

Techniques

帯は 12 列グリッドの grid-column で置く。位置を % で書くと月境界と 1px ずれ、目盛りが嘘になる
工程名の下に主管を小さく添えると、凡例を別に置かずに「誰が動く月か」が読める
行の区切りは罫 1 本。行を塗り分けると、帯の塗りと衝突して現在地が消える

Apply to

提案・計画の工程説明、月次報告での実績反映
複数フェーズの全体計画（月を四半期に読み替える）

Phase Schedule — Length Is Duration, Overlap Is Hand-off

Take it with you

Everything

Prompt

Spec

Files

pattern.html

font.css

Notes

この構成について / About this pattern

Techniques

Apply to