{
"id": "phase-divider-step-rail",
"schemaVersion": 2,
"title": {
"ja": "工程の中扉 — 全工程の並びの上に現在地を打つ",
"en": "Phase Divider — The Whole Process, With a Mark on Now"
},
"summary": {
"ja": "濃地の中扉。章番号と章名を中央に置き、下端に全 7 工程を等幅で並べて現在地だけを罫で示す",
"en": "A dark divider: the section at centre, seven equal phases along the foot with only the current one ruled"
},
"capturedAt": "2026-09-15",
"categories": [
"presentation"
],
"tags": [
"minimal",
"typography"
],
"useCases": [
"section-divider",
"roadmap"
],
"format": "slide-16x9",
"density": "low",
"layout": {
"kind": "timeline",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 124,
"right": 140,
"bottom": 124,
"left": 140
},
"columns": {
"count": 7,
"gap": 24
},
"emphasis": {
"column": 4,
"via": [
"rule",
"weight"
]
}
},
"type": {
"chapter": {
"size": 15,
"weight": 500,
"tracking": "0.3em",
"transform": "upper"
},
"of": {
"size": 15,
"weight": 400,
"tracking": "0.12em",
"numeric": "tabular"
},
"num": {
"size": 136,
"weight": 700,
"leading": 1,
"numeric": "tabular"
},
"title": {
"size": 68,
"weight": 700,
"tracking": "0.01em",
"leading": 1.3
},
"lede": {
"size": 20,
"weight": 400,
"leading": 1.9
},
"phase": {
"size": 18,
"weight": 500
},
"when": {
"size": 14,
"weight": 400,
"numeric": "tabular"
}
},
"colors": {
"ground": "#111722",
"ink": "#E9EDF4",
"muted": "#8894A6",
"accent": "#5AA2E8",
"rule": "#2B3445",
"series": []
},
"rules": [
{
"ja": "工程は等幅で並べる。期間の長さを幅で表すと、長い工程が「遅れている」と読まれる",
"en": "Keep the phases equal in width — encoding duration as width reads as slippage"
},
{
"ja": "現在地は罫の色と太字の 2 手段まで。塗りを足すと工程表と見分けがつかなくなり、中扉として働かない",
"en": "Mark the current phase with the rule and the weight, no fill — a filled band makes this read as a schedule rather than a divider"
},
{
"ja": "終わった工程も薄くしない。全工程が同じ濃さで並んでいることが「まだ全部ある」という合図になる",
"en": "Do not dim the finished phases; an unbroken row is what says the whole process is still in view"
},
{
"ja": "章番号と工程は別の軸。番号は資料の章、帯は案件の工程で、たまたま一致していても揃えない",
"en": "The section number and the phase rail are different axes — never renumber one to match the other"
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.DaNPFQIr.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": [
"roadmap-4phase-band",
"deck-cover-project-brief",
"wbs-gantt-six-phases"
]
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "slide-16x9",
"density": "low",
"layout": {
"kind": "timeline",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 124,
"right": 140,
"bottom": 124,
"left": 140
},
"columns": {
"count": 7,
"gap": 24
},
"emphasis": {
"column": 4,
"via": [
"rule",
"weight"
]
}
},
"type": {
"chapter": {
"size": 15,
"weight": 500,
"tracking": "0.3em",
"transform": "upper"
},
"of": {
"size": 15,
"weight": 400,
"tracking": "0.12em",
"numeric": "tabular"
},
"num": {
"size": 136,
"weight": 700,
"leading": 1,
"numeric": "tabular"
},
"title": {
"size": 68,
"weight": 700,
"tracking": "0.01em",
"leading": 1.3
},
"lede": {
"size": 20,
"weight": 400,
"leading": 1.9
},
"phase": {
"size": 18,
"weight": 500
},
"when": {
"size": 14,
"weight": 400,
"numeric": "tabular"
}
},
"colors": {
"ground": "#111722",
"ink": "#E9EDF4",
"muted": "#8894A6",
"accent": "#5AA2E8",
"rule": "#2B3445"
},
"rules": [
"Keep the phases equal in width — encoding duration as width reads as slippage",
"Mark the current phase with the rule and the weight, no fill — a filled band makes this read as a schedule rather than a divider",
"Do not dim the finished phases; an unbroken row is what says the whole process is still in view",
"The section number and the phase rail are different axes — never renumber one to match the other"
]
},
"prompt": {
"ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 124 右 140 下 124 左 140\n- 7 カラム（等分）、間隔 24\n\n## 強調\n4 列目のみ。手段は 罫 + 太さ だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\nchapter 15px / 500 / 字間 0.3em / 大文字\nof 15px / 400 / 字間 0.12em / 等幅数字\nnum 136px / 700 / 行送り 1 / 等幅数字\ntitle 68px / 700 / 字間 0.01em / 行送り 1.3\nlede 20px / 400 / 行送り 1.9\nphase 18px / 500\nwhen 14px / 400 / 等幅数字\n\n## 配色\n地 #111722 / 文字 #E9EDF4 / 補助 #8894A6 / 強調 #5AA2E8 / 罫 #2B3445\n\n## 外すと崩れる点\n- 工程は等幅で並べる。期間の長さを幅で表すと、長い工程が「遅れている」と読まれる\n- 現在地は罫の色と太字の 2 手段まで。塗りを足すと工程表と見分けがつかなくなり、中扉として働かない\n- 終わった工程も薄くしない。全工程が同じ濃さで並んでいることが「まだ全部ある」という合図になる\n- 章番号と工程は別の軸。番号は資料の章、帯は案件の工程で、たまたま一致していても揃えない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/phase-divider-step-rail/pattern.html",
"en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 124 right 140 bottom 124 left 140\n- 7 equal columns, gap 24\n\n## Emphasis\ncolumn 4 only, by rule + weight and nothing else\n\n## Type (px against a 1920px canvas)\nchapter 15px / 500 / tracking 0.3em / uppercase\nof 15px / 400 / tracking 0.12em / tabular numerals\nnum 136px / 700 / leading 1 / tabular numerals\ntitle 68px / 700 / tracking 0.01em / leading 1.3\nlede 20px / 400 / leading 1.9\nphase 18px / 500\nwhen 14px / 400 / tabular numerals\n\n## Colour\nGround #111722 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445\n\n## Constraints — dropping these breaks it\n- Keep the phases equal in width — encoding duration as width reads as slippage\n- Mark the current phase with the rule and the weight, no fill — a filled band makes this read as a schedule rather than a divider\n- Do not dim the finished phases; an unbroken row is what says the whole process is still in view\n- The section number and the phase rail are different axes — never renumber one to match the other\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/phase-divider-step-rail/pattern.html."
},
"code": {
"html": "\n\n工程の中扉 — 全工程の並びの上に現在地を打つ\n\n\n\n\n
\n",
"url": "https://design-vault.pages.dev/designs/phase-divider-step-rail/pattern.html",
"fonts": [
"https://design-vault.pages.dev/designs/phase-divider-step-rail/font.css",
"https://design-vault.pages.dev/designs/phase-divider-step-rail/font-0.woff2",
"https://design-vault.pages.dev/designs/phase-divider-step-rail/font-1.woff2",
"https://design-vault.pages.dev/designs/phase-divider-step-rail/font-2.woff2"
]
}
},
"urls": {
"ja": "https://design-vault.pages.dev/designs/phase-divider-step-rail",
"en": "https://design-vault.pages.dev/en/designs/phase-divider-step-rail"
},
"notesMarkdown": "## この構成について / About this pattern\n\n長い案件の資料で章が変わるたびに挟む中扉。**`pattern.html` が版そのもの**で、`cover.png` と\nfrontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nThe divider slid between chapters of a long project deck. `pattern.html` is the artboard itself;\nboth `cover.png` and the measurements come from it, so the three cannot drift apart.\n\n### Techniques\n\n- 中扉に工程の帯を載せると、章の切れ目が「資料のどこ」ではなく「案件のどこ」を答えるようになる\n- 面を 1 つも使わず、罫と級数だけで構成する。中扉が重いと本編が軽く見える\n- 章番号を 136px まで上げても、色を accent に振れば見出しの邪魔をしない\n\n### Apply to\n\n- 要件定義・基本設計・総合テストなど、工程をまたいで使い回す資料の章区切り\n- 長期案件の節目報告（現在地の 1 つを動かすだけで最新版になる）"
}