{ "id": "roadmap-4phase-band", "schemaVersion": 2, "title": { "ja": "四半期ロードマップ — 4 期を等幅の帯で", "en": "Quarterly Roadmap — Four Equal Bands" }, "summary": { "ja": "4 期を同じ幅の帯で並べ、現在地の 1 本だけを塗る。期の長さではなく順序を見せる", "en": "Four equal-width bands with only the current one filled — sequence, not duration" }, "capturedAt": "2026-09-01", "categories": [ "presentation" ], "tags": [ "minimal", "typography" ], "useCases": [ "roadmap" ], "format": "slide-16x9", "density": "low", "layout": { "kind": "timeline", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 132, "right": 140, "bottom": 132, "left": 140 }, "columns": { "count": 4, "gap": 40 }, "emphasis": { "column": 2, "via": [ "fill" ] } }, "type": { "title": { "size": 52, "weight": 700, "tracking": "0.01em", "leading": 1.3 }, "lede": { "size": 19, "weight": 400, "leading": 1.8 }, "quarter": { "size": 15, "weight": 500, "tracking": "0.16em", "transform": "upper" }, "theme": { "size": 34, "weight": 700, "leading": 1.35 }, "detail": { "size": 17, "weight": 400, "leading": 1.8 } }, "colors": { "ground": "#FFFFFF", "surface": "#F2F4F6", "ink": "#14171A", "muted": "#79808A", "accent": "#0F6B5E", "rule": "#D8DDE2", "series": [] }, "rules": [ { "ja": "4 期は等幅にする。期間の長さを幅で表すと「Q4 だけ長い＝遅れている」と読まれる", "en": "Keep the four bands equal — encoding duration as width reads as slippage" }, { "ja": "現在地は 1 本だけ塗る。軸の丸と帯の塗りを両方強調すると現在地が二重になる", "en": "Fill one band only; marking the axis dot and the band both gives you two 'now's" }, { "ja": "各期の説明は 2 行まで。3 行入ると帯の高さが揃わず、等幅の意味が消える", "en": "Two lines per band — a third breaks the equal heights that carry the point" }, { "ja": "版面を使い切らない。上に見出し、下に時系列を置き、間は空けたままにする", "en": "Do not fill the frame: heading at the top, timeline at the bottom, the middle left empty" } ], "cover": "https://design-vault.pages.dev/_astro/cover.C8peSSjK.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "problem-solution-3step" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "low", "layout": { "kind": "timeline", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 132, "right": 140, "bottom": 132, "left": 140 }, "columns": { "count": 4, "gap": 40 }, "emphasis": { "column": 2, "via": [ "fill" ] } }, "type": { "title": { "size": 52, "weight": 700, "tracking": "0.01em", "leading": 1.3 }, "lede": { "size": 19, "weight": 400, "leading": 1.8 }, "quarter": { "size": 15, "weight": 500, "tracking": "0.16em", "transform": "upper" }, "theme": { "size": 34, "weight": 700, "leading": 1.35 }, "detail": { "size": 17, "weight": 400, "leading": 1.8 } }, "colors": { "ground": "#FFFFFF", "surface": "#F2F4F6", "ink": "#14171A", "muted": "#79808A", "accent": "#0F6B5E", "rule": "#D8DDE2" }, "rules": [ "Keep the four bands equal — encoding duration as width reads as slippage", "Fill one band only; marking the axis dot and the band both gives you two 'now's", "Two lines per band — a third breaks the equal heights that carry the point", "Do not fill the frame: heading at the top, timeline at the bottom, the middle left empty" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白上 132 右 140 下 132 左 140\n- 4 カラム（等分）、間隔 40\n\n## 強調\n2 列目のみ。手段は塗りだけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle 52px / 700 / 字間 0.01em / 行送り 1.3\nlede 19px / 400 / 行送り 1.8\nquarter 15px / 500 / 字間 0.16em / 大文字\ntheme 34px / 700 / 行送り 1.35\ndetail 17px / 400 / 行送り 1.8\n\n## 配色\n地 #FFFFFF / 面 #F2F4F6 / 文字 #14171A / 補助 #79808A / 強調 #0F6B5E / 罫 #D8DDE2\n\n## 外すと崩れる点\n- 4 期は等幅にする。期間の長さを幅で表すと「Q4 だけ長い＝遅れている」と読まれる\n- 現在地は 1 本だけ塗る。軸の丸と帯の塗りを両方強調すると現在地が二重になる\n- 各期の説明は 2 行まで。3 行入ると帯の高さが揃わず、等幅の意味が消える\n- 版面を使い切らない。上に見出し、下に時系列を置き、間は空けたままにする\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/roadmap-4phase-band/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 132 right 140 bottom 132 left 140\n- 4 equal columns, gap 40\n\n## Emphasis\ncolumn 2 only, by fill and nothing else\n\n## Type (px against a 1920px canvas)\ntitle 52px / 700 / tracking 0.01em / leading 1.3\nlede 19px / 400 / leading 1.8\nquarter 15px / 500 / tracking 0.16em / uppercase\ntheme 34px / 700 / leading 1.35\ndetail 17px / 400 / leading 1.8\n\n## Colour\nGround #FFFFFF / Surface #F2F4F6 / Ink #14171A / Muted #79808A / Accent #0F6B5E / Rule #D8DDE2\n\n## Constraints — dropping these breaks it\n- Keep the four bands equal — encoding duration as width reads as slippage\n- Fill one band only; marking the axis dot and the band both gives you two 'now's\n- Two lines per band — a third breaks the equal heights that carry the point\n- Do not fill the frame: heading at the top, timeline at the bottom, the middle left empty\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/roadmap-4phase-band/pattern.html." }, "code": { "html": "\n\n四半期ロードマップ — 4 期を等幅の帯で\n\n\n\n\n

\n

\n

\n

2026 年度ロードマップ

\n

4 期を等幅の帯で並べ、現在地だけを塗る。
期の長さではなく、やることの順序を見せる。

\n

\n

\n

\n

\n \n \n \n \n

\n

\n

\n

Q1

\n

現状把握

\n

棚卸しと課題の特定。
この期は作らない。

\n

\n

\n

Q2

\n

基盤整備

\n

土台を 1 本に統合。
後戻りをここで潰す。

\n

\n

\n

Q3

\n

展開

\n

対象を段階的に広げる。
指標を毎月見る。

\n

\n

\n

Q4

\n

定着

\n

運用に引き渡す。
手離れを確認する。

\n

\n

\n

\n

\n

\n", "url": "https://design-vault.pages.dev/designs/roadmap-4phase-band/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/roadmap-4phase-band/font.css", "https://design-vault.pages.dev/designs/roadmap-4phase-band/font-0.woff2", "https://design-vault.pages.dev/designs/roadmap-4phase-band/font-1.woff2", "https://design-vault.pages.dev/designs/roadmap-4phase-band/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/roadmap-4phase-band", "en": "https://design-vault.pages.dev/en/designs/roadmap-4phase-band" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と\nfrontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\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- 等幅の帯は「順序」を示す。幅を変えた瞬間に「期間」を示してしまい、読み手は遅延を疑う\n- 現在地は塗り 1 手段に絞る。軸上の丸は位置を示すだけで、強調はしない\n- 版面の中央を大きく空けると、密度の低さが「情報が足りない」ではなく「絞った」に見える\n\n### Apply to\n\n- 期初の方針共有、年度計画の 1 枚目\n- 長期プロジェクトの進捗報告（現在地を毎回 1 本ずらす）" }