{
  "id": "timeline-vertical-milestones",
  "schemaVersion": 2,
  "title": {
    "ja": "縦の年表 — 節目だけを軸に打つ",
    "en": "Vertical Timeline — Only the Milestones Land on the Axis"
  },
  "summary": {
    "ja": "経緯を 5 つの節目に畳み、右端に「その時点で確定したこと」を並べる",
    "en": "The history folded into five milestones, each with what it fixed for good"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "roadmap"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "timeline",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 100,
      "right": 160,
      "bottom": 100,
      "left": 160
    },
    "emphasis": {
      "row": 4,
      "via": [
        "fill"
      ]
    }
  },
  "type": {
    "title": {
      "size": 42,
      "weight": 700,
      "tracking": "0.02em"
    },
    "legend": {
      "size": 17,
      "weight": 400
    },
    "date": {
      "size": 26,
      "weight": 700,
      "tracking": "-0.01em",
      "numeric": "tabular"
    },
    "ago": {
      "size": 15,
      "weight": 400
    },
    "event": {
      "size": 30,
      "weight": 500,
      "leading": 1.4
    },
    "detail": {
      "size": 17,
      "weight": 400,
      "leading": 1.75
    },
    "fixedLabel": {
      "size": 14,
      "weight": 500,
      "tracking": "0.14em"
    },
    "fixedValue": {
      "size": 19,
      "weight": 500,
      "leading": 1.55
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F7",
    "ink": "#121715",
    "muted": "#6F7975",
    "accent": "#12705C",
    "rule": "#D5DCDA",
    "series": []
  },
  "rules": [
    {
      "ja": "軸の位置は固定する。日付列の幅で軸が動くと、間隔が文字数で決まる",
      "en": "Pin the axis — if the date column sets it, spacing is decided by character count"
    },
    {
      "ja": "過去も未来も同じ描き方にして、違いは「いま」の一点だけに絞る",
      "en": "Past and future are drawn alike; only \"now\" is marked"
    },
    {
      "ja": "出来事だけを並べない。各節目で何が確定したかを併記する",
      "en": "Events alone never say what is settled — record the decision beside each"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.cUEJ_jil.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "roadmap-4phase-band",
      "gantt-quarter-bands",
      "org-tree-three-tiers"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "timeline",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 100,
          "right": 160,
          "bottom": 100,
          "left": 160
        },
        "emphasis": {
          "row": 4,
          "via": [
            "fill"
          ]
        }
      },
      "type": {
        "title": {
          "size": 42,
          "weight": 700,
          "tracking": "0.02em"
        },
        "legend": {
          "size": 17,
          "weight": 400
        },
        "date": {
          "size": 26,
          "weight": 700,
          "tracking": "-0.01em",
          "numeric": "tabular"
        },
        "ago": {
          "size": 15,
          "weight": 400
        },
        "event": {
          "size": 30,
          "weight": 500,
          "leading": 1.4
        },
        "detail": {
          "size": 17,
          "weight": 400,
          "leading": 1.75
        },
        "fixedLabel": {
          "size": 14,
          "weight": 500,
          "tracking": "0.14em"
        },
        "fixedValue": {
          "size": 19,
          "weight": 500,
          "leading": 1.55
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F7",
        "ink": "#121715",
        "muted": "#6F7975",
        "accent": "#12705C",
        "rule": "#D5DCDA"
      },
      "rules": [
        "Pin the axis — if the date column sets it, spacing is decided by character count",
        "Past and future are drawn alike; only \"now\" is marked",
        "Events alone never say what is settled — record the decision beside each"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 160 下 100 左 160\n\n## 強調\n4 行目のみ。手段は 塗り だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  42px / 700 / 字間 0.02em\nlegend  17px / 400\ndate  26px / 700 / 字間 -0.01em / 等幅数字\nago  15px / 400\nevent  30px / 500 / 行送り 1.4\ndetail  17px / 400 / 行送り 1.75\nfixedLabel  14px / 500 / 字間 0.14em\nfixedValue  19px / 500 / 行送り 1.55\n\n## 配色\n地 #FFFFFF / 面 #F4F6F7 / 文字 #121715 / 補助 #6F7975 / 強調 #12705C / 罫 #D5DCDA\n\n## 外すと崩れる点\n- 軸の位置は固定する。日付列の幅で軸が動くと、間隔が文字数で決まる\n- 過去も未来も同じ描き方にして、違いは「いま」の一点だけに絞る\n- 出来事だけを並べない。各節目で何が確定したかを併記する\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/timeline-vertical-milestones/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 160 bottom 100 left 160\n\n## Emphasis\nrow 4 only, by fill and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  42px / 700 / tracking 0.02em\nlegend  17px / 400\ndate  26px / 700 / tracking -0.01em / tabular numerals\nago  15px / 400\nevent  30px / 500 / leading 1.4\ndetail  17px / 400 / leading 1.75\nfixedLabel  14px / 500 / tracking 0.14em\nfixedValue  19px / 500 / leading 1.55\n\n## Colour\nGround #FFFFFF / Surface #F4F6F7 / Ink #121715 / Muted #6F7975 / Accent #12705C / Rule #D5DCDA\n\n## Constraints — dropping these breaks it\n- Pin the axis — if the date column sets it, spacing is decided by character count\n- Past and future are drawn alike; only \"now\" is marked\n- Events alone never say what is settled — record the decision beside each\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/timeline-vertical-milestones/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>縦の年表 — 節目だけを軸に打つ</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  :root {\n    --ground: #FFFFFF;\n    --surface: #F4F6F7;\n    --ink: #121715;\n    --muted: #6F7975;\n    --accent: #12705C;\n    --rule: #D5DCDA;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"Zen Kaku Gothic New\", \"IPAGothic\", sans-serif; }\n\n  .artboard {\n    width: 1920px; height: 1080px;\n    background: var(--ground); color: var(--ink);\n    padding: 100px 160px;\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 48px; }\n\n  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 64px;\n          border-bottom: 1px solid var(--rule); padding-bottom: 26px; }\n  .title { font-size: 42px; font-weight: 700; letter-spacing: .02em; }\n  .legend { font-size: 17px; font-weight: 400; color: var(--muted); }\n\n  /* 軸は 1 本、左から 240px の位置に固定する。日付列の幅で軸が動くと、\n     節目の間隔が「文字数」で決まってしまい、年表として読めなくなる。 */\n  .rail { position: relative; display: grid; grid-template-rows: repeat(5, 1fr); }\n  .rail::before { content: \"\"; position: absolute; left: 240px; top: 0; bottom: 0;\n                  width: 1px; background: var(--rule); }\n\n  .mile { position: relative; display: grid; grid-template-columns: 240px 1fr 400px; align-items: center; gap: 72px; }\n  .when { text-align: right; padding-right: 40px; display: grid; gap: 6px; }\n  .date { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }\n  .ago { font-size: 15px; font-weight: 400; color: var(--muted); }\n  /* 節目の丸は軸の上に置く。線の脇に置くと、どの高さの出来事か読み取れない。 */\n  .pin { position: absolute; left: 240px; top: 50%; transform: translate(-50%, -50%);\n         width: 15px; height: 15px; border-radius: 50%;\n         background: var(--ground); border: 2px solid var(--muted); }\n  .what { display: grid; gap: 10px; }\n  .event { font-size: 30px; font-weight: 500; line-height: 1.4; }\n  .detail { font-size: 17px; font-weight: 400; line-height: 1.75; color: var(--muted); max-width: 900px; }\n\n  /* 右端は「その節目で何が確定したか」。出来事だけを並べると、\n     年表は読めても「いま何が決まっているのか」が分からない。 */\n  .fixed { border-left: 1px solid var(--rule); padding-left: 36px; display: grid; gap: 6px; }\n  .fixedLabel { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }\n  .fixedValue { font-size: 19px; font-weight: 500; line-height: 1.55; }\n  .mile[data-emphasis] .fixedValue { color: var(--accent); }\n\n  /* 現在地だけを塗る。過去も未来も同じ描き方にして、違いは「いま」の一点に絞る。 */\n  .mile[data-emphasis] .pin { background: var(--accent); border-color: var(--accent); width: 21px; height: 21px; }\n  .mile[data-emphasis] .date { color: var(--accent); }\n  .mile[data-emphasis] .event { font-weight: 700; }\n  .now { font-size: 14px; font-weight: 700; letter-spacing: .18em; color: var(--accent); }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div class=\"head\">\n      <h1 class=\"title\" data-type=\"title\">この案件の経緯 —— 5 つの節目</h1>\n      <p class=\"legend\" data-type=\"legend\">塗った丸が現在地。日付は合意した日であって、着手した日ではありません</p>\n    </div>\n\n    <div class=\"rail\">\n      <div class=\"mile\" data-row=\"1\">\n        <div class=\"when\"><p class=\"date\" data-type=\"date\">2025.04</p><p class=\"ago\" data-type=\"ago\">17 か月前</p></div>\n        <div class=\"pin\"></div>\n        <div class=\"what\">\n          <p class=\"event\" data-type=\"event\">現行システムの延長保守が終了と通知</p>\n          <p class=\"detail\" data-type=\"detail\">保守元から 2027 年 3 月での打ち切りを受領。ここが全体の期限になりました。</p>\n        </div>\n        <div class=\"fixed\"><p class=\"fixedLabel\" data-type=\"fixedLabel\">期限</p><p class=\"fixedValue\" data-type=\"fixedValue\">2027 年 3 月 31 日</p></div>\n      </div>\n      <div class=\"mile\" data-row=\"2\">\n        <div class=\"when\"><p class=\"date\">2025.11</p><p class=\"ago\">10 か月前</p></div>\n        <div class=\"pin\"></div>\n        <div class=\"what\">\n          <p class=\"event\">社内の現状調査を完了</p>\n          <p class=\"detail\">台帳に無い連携が 23 本見つかり、うち 9 本が現在も日次で動いていました。</p>\n        </div>\n        <div class=\"fixed\"><p class=\"fixedLabel\">対象</p><p class=\"fixedValue\">連携 23 本 / 帳票 41 種</p></div>\n      </div>\n      <div class=\"mile\" data-row=\"3\">\n        <div class=\"when\"><p class=\"date\">2026.05</p><p class=\"ago\">4 か月前</p></div>\n        <div class=\"pin\"></div>\n        <div class=\"what\">\n          <p class=\"event\">3 社による比較検討を開始</p>\n          <p class=\"detail\">評価軸は「止めずに移せるか」の 1 点。価格は同水準だったため決め手になりませんでした。</p>\n        </div>\n        <div class=\"fixed\"><p class=\"fixedLabel\">評価軸</p><p class=\"fixedValue\">止めずに移せるか の 1 点</p></div>\n      </div>\n      <div class=\"mile\" data-row=\"4\" data-emphasis=\"fill\">\n        <div class=\"when\"><p class=\"date\">2026.09</p><p class=\"now\">本日</p></div>\n        <div class=\"pin\"></div>\n        <div class=\"what\">\n          <p class=\"event\">移行方式のご判断をいただく</p>\n          <p class=\"detail\">本日決めていただくのは方式のみです。体制と日程は方式が決まってから引きます。</p>\n        </div>\n        <div class=\"fixed\"><p class=\"fixedLabel\">本日決めるもの</p><p class=\"fixedValue\">移行方式のみ</p></div>\n      </div>\n      <div class=\"mile\" data-row=\"5\">\n        <div class=\"when\"><p class=\"date\">2027.03</p><p class=\"ago\">6 か月後</p></div>\n        <div class=\"pin\"></div>\n        <div class=\"what\">\n          <p class=\"event\">旧環境の停止（動かせない期限）</p>\n          <p class=\"detail\">保守切れの当日。ここから逆算すると、着手は 11 月が最後の機会になります。</p>\n        </div>\n        <div class=\"fixed\"><p class=\"fixedLabel\">着手の最終期限</p><p class=\"fixedValue\">2026 年 11 月</p></div>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/timeline-vertical-milestones/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/timeline-vertical-milestones/font.css",
        "https://design-vault.pages.dev/designs/timeline-vertical-milestones/font-0.woff2",
        "https://design-vault.pages.dev/designs/timeline-vertical-milestones/font-1.woff2",
        "https://design-vault.pages.dev/designs/timeline-vertical-milestones/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/timeline-vertical-milestones",
    "en": "https://design-vault.pages.dev/en/designs/timeline-vertical-milestones"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。編集するのは `pattern.html`\nだけで、寸法を手で書き直すことはない。\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- 現在地の丸だけ直径を 15px → 21px にする。色と大きさは同じ 1 つの意味に使う\n- 相対日付（17 か月前）を絶対日付の下に添え、距離感を数えさせない\n\n### Apply to\n\n- 案件の経緯を新しい関係者に説明する\n- 意思決定の履歴を残す"
}