{
  "id": "cutover-runbook-timeline",
  "schemaVersion": 2,
  "title": {
    "ja": "切替当日の手順 — 戻す判断の時刻を手順の中に置く",
    "en": "Cutover Runbook — The Rollback Call Has a Clock Time"
  },
  "summary": {
    "ja": "濃地に時刻・作業・担当・備考の 4 列。切戻し判断の 1 行だけを塗り、当日いちばん重い決定を示す",
    "en": "Time, task, owner, note on a dark ground — with a fill on the one row where the rollback call is made"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "migration",
    "process"
  ],
  "format": "slide-16x9",
  "density": "high",
  "layout": {
    "kind": "timeline",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 140,
      "bottom": 96,
      "left": 140
    },
    "emphasis": {
      "row": 5,
      "via": [
        "fill",
        "rule"
      ]
    }
  },
  "type": {
    "title": {
      "size": 44,
      "weight": 700,
      "tracking": "0.01em",
      "leading": 1.3
    },
    "window": {
      "size": 17,
      "weight": 500,
      "numeric": "tabular"
    },
    "time": {
      "size": 24,
      "weight": 700,
      "numeric": "tabular"
    },
    "task": {
      "size": 22,
      "weight": 500,
      "leading": 1.5
    },
    "owner": {
      "size": 16,
      "weight": 400
    },
    "note": {
      "size": 16,
      "weight": 400,
      "leading": 1.7
    },
    "fkey": {
      "size": 14,
      "weight": 500,
      "tracking": "0.14em"
    },
    "fval": {
      "size": 18,
      "weight": 500,
      "leading": 1.6,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#111722",
    "surface": "#1A2231",
    "ink": "#E9EDF4",
    "muted": "#8894A6",
    "accent": "#5AA2E8",
    "rule": "#2B3445",
    "series": []
  },
  "rules": [
    {
      "ja": "戻す判断に時刻を与え、手順の 1 行として並びの中に置く。別枠に書いた切戻し基準は、当日その紙が開かれない",
      "en": "Give the rollback call a clock time and a row of its own in the sequence — a rollback policy kept on a separate page is not opened on the night"
    },
    {
      "ja": "各行に担当を書く。当日は連絡がつかない前提で組むので、名前ではなくチームで書く",
      "en": "Name the team, not the person, on every row — plan for the night when the person you had in mind cannot be reached"
    },
    {
      "ja": "所要時間は備考に書き、時刻から引き算させない。深夜に暗算をさせる手順書は読み間違えられる",
      "en": "Put durations in the note instead of making the reader subtract clock times at three in the morning"
    },
    {
      "ja": "業務停止の時間幅を見出しの隣に置く。手順の総和ではなく、止まる長さのほうが合意の対象になる",
      "en": "State the outage window beside the title — what gets agreed is how long business stops, not the sum of the steps"
    },
    {
      "ja": "予備日を必ず載せる。当日に切戻した場合の次の日程が決まっていないと、判断そのものが先送りされる",
      "en": "Always show the fallback date; without one, the rollback decision itself gets postponed"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.CuI6S2MM.png",
  "assets": [],
  "shortlist": true,
  "status": "published",
  "relations": {
    "similar": [
      "wbs-gantt-six-phases",
      "phase-divider-step-rail",
      "status-report-rag-rows"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "high",
      "layout": {
        "kind": "timeline",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 140,
          "bottom": 96,
          "left": 140
        },
        "emphasis": {
          "row": 5,
          "via": [
            "fill",
            "rule"
          ]
        }
      },
      "type": {
        "title": {
          "size": 44,
          "weight": 700,
          "tracking": "0.01em",
          "leading": 1.3
        },
        "window": {
          "size": 17,
          "weight": 500,
          "numeric": "tabular"
        },
        "time": {
          "size": 24,
          "weight": 700,
          "numeric": "tabular"
        },
        "task": {
          "size": 22,
          "weight": 500,
          "leading": 1.5
        },
        "owner": {
          "size": 16,
          "weight": 400
        },
        "note": {
          "size": 16,
          "weight": 400,
          "leading": 1.7
        },
        "fkey": {
          "size": 14,
          "weight": 500,
          "tracking": "0.14em"
        },
        "fval": {
          "size": 18,
          "weight": 500,
          "leading": 1.6,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#111722",
        "surface": "#1A2231",
        "ink": "#E9EDF4",
        "muted": "#8894A6",
        "accent": "#5AA2E8",
        "rule": "#2B3445"
      },
      "rules": [
        "Give the rollback call a clock time and a row of its own in the sequence — a rollback policy kept on a separate page is not opened on the night",
        "Name the team, not the person, on every row — plan for the night when the person you had in mind cannot be reached",
        "Put durations in the note instead of making the reader subtract clock times at three in the morning",
        "State the outage window beside the title — what gets agreed is how long business stops, not the sum of the steps",
        "Always show the fallback date; without one, the rollback decision itself gets postponed"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 96 左 140\n\n## 強調\n5 行目のみ。手段は 塗り + 罫 だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  44px / 700 / 字間 0.01em / 行送り 1.3\nwindow  17px / 500 / 等幅数字\ntime  24px / 700 / 等幅数字\ntask  22px / 500 / 行送り 1.5\nowner  16px / 400\nnote  16px / 400 / 行送り 1.7\nfkey  14px / 500 / 字間 0.14em\nfval  18px / 500 / 行送り 1.6 / 等幅数字\n\n## 配色\n地 #111722 / 面 #1A2231 / 文字 #E9EDF4 / 補助 #8894A6 / 強調 #5AA2E8 / 罫 #2B3445\n\n## 外すと崩れる点\n- 戻す判断に時刻を与え、手順の 1 行として並びの中に置く。別枠に書いた切戻し基準は、当日その紙が開かれない\n- 各行に担当を書く。当日は連絡がつかない前提で組むので、名前ではなくチームで書く\n- 所要時間は備考に書き、時刻から引き算させない。深夜に暗算をさせる手順書は読み間違えられる\n- 業務停止の時間幅を見出しの隣に置く。手順の総和ではなく、止まる長さのほうが合意の対象になる\n- 予備日を必ず載せる。当日に切戻した場合の次の日程が決まっていないと、判断そのものが先送りされる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/cutover-runbook-timeline/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 96 left 140\n\n## Emphasis\nrow 5 only, by fill + rule and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  44px / 700 / tracking 0.01em / leading 1.3\nwindow  17px / 500 / tabular numerals\ntime  24px / 700 / tabular numerals\ntask  22px / 500 / leading 1.5\nowner  16px / 400\nnote  16px / 400 / leading 1.7\nfkey  14px / 500 / tracking 0.14em\nfval  18px / 500 / leading 1.6 / tabular numerals\n\n## Colour\nGround #111722 / Surface #1A2231 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445\n\n## Constraints — dropping these breaks it\n- Give the rollback call a clock time and a row of its own in the sequence — a rollback policy kept on a separate page is not opened on the night\n- Name the team, not the person, on every row — plan for the night when the person you had in mind cannot be reached\n- Put durations in the note instead of making the reader subtract clock times at three in the morning\n- State the outage window beside the title — what gets agreed is how long business stops, not the sum of the steps\n- Always show the fallback date; without one, the rollback decision itself gets postponed\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/cutover-runbook-timeline/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  /* この版そのもの。index.md の layout / type / colors は、この HTML を\n     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */\n  :root {\n    --ground: #111722;\n    --surface: #1A2231;\n    --ink: #E9EDF4;\n    --muted: #8894A6;\n    --accent: #5AA2E8;\n    --rule: #2B3445;\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: 96px 140px;                  /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }\n\n  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }\n  .title { font-size: 44px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }\n  .window { font-size: 17px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }\n\n  .runbook { align-self: center; display: grid; }\n  /* 時刻・工程・担当・判断の 4 列。時刻列を固定幅にして、\n     左端を縦に読めば当日の時系列だけを追えるようにする。 */\n  .step { display: grid; grid-template-columns: 190px 1fr 260px 300px; align-items: baseline; gap: 34px; padding: 22px 24px; border-left: 2px solid var(--rule); }\n  .time { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }\n  .task { font-size: 22px; font-weight: 500; line-height: 1.5; }\n  .owner { font-size: 16px; font-weight: 400; color: var(--muted); }\n  .note { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--muted); }\n\n  /* 戻す判断の時刻だけを塗る。当日いちばん重い意思決定がどこかを、\n     手順の並びの中で 1 回だけ言う。 */\n  .step[data-emphasis] { background: var(--surface); border-left-color: var(--accent); }\n  .step[data-emphasis] .time,\n  .step[data-emphasis] .task { color: var(--accent); }\n  .step[data-emphasis] .note { color: var(--ink); }\n  /* 業務停止中の工程は時刻を太字のまま、担当と備考を沈める。 */\n  .step[data-quiet] .task { color: var(--muted); }\n\n  .foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border-top: 1px solid var(--rule); padding-top: 26px; }\n  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }\n  .fval { font-size: 18px; font-weight: 500; line-height: 1.6; margin-top: 10px; font-variant-numeric: tabular-nums; }\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\">切替当日の手順</h1>\n      <p class=\"window\" data-type=\"window\">2027.11.13（土）18:00 - 11.14（日）08:00 ／ 業務停止 14 時間</p>\n    </div>\n\n    <div class=\"runbook\">\n      <div class=\"step\" data-row=\"1\">\n        <p class=\"time\" data-type=\"time\">18:00</p>\n        <p class=\"task\" data-type=\"task\">現行システムの受付停止</p>\n        <p class=\"owner\" data-type=\"owner\">御社 情報システム部</p>\n        <p class=\"note\" data-type=\"note\">停止のお知らせは 11.06 に掲示</p>\n      </div>\n      <div class=\"step\" data-row=\"2\" data-quiet>\n        <p class=\"time\">18:30</p>\n        <p class=\"task\">最終バックアップの取得</p>\n        <p class=\"owner\">弊社 基盤チーム</p>\n        <p class=\"note\">所要 90 分。ここまでは戻せる</p>\n      </div>\n      <div class=\"step\" data-row=\"3\" data-quiet>\n        <p class=\"time\">20:00</p>\n        <p class=\"task\">データ移行の実行</p>\n        <p class=\"owner\">弊社 基盤チーム</p>\n        <p class=\"note\">所要 5 時間。件数照合まで含む</p>\n      </div>\n      <div class=\"step\" data-row=\"4\" data-quiet>\n        <p class=\"time\">01:00</p>\n        <p class=\"task\">移行結果の照合・確認</p>\n        <p class=\"owner\">合同</p>\n        <p class=\"note\">差分 0 件を確認して次へ</p>\n      </div>\n      <div class=\"step\" data-row=\"5\" data-emphasis=\"fill rule\">\n        <p class=\"time\">03:00</p>\n        <p class=\"task\">続行か切戻しかの判断</p>\n        <p class=\"owner\">合同 PMO ／ 御社責任者</p>\n        <p class=\"note\">この時刻を過ぎると切戻しが翌営業日に間に合いません</p>\n      </div>\n      <div class=\"step\" data-row=\"6\">\n        <p class=\"time\">03:30</p>\n        <p class=\"task\">新システムの公開・疎通確認</p>\n        <p class=\"owner\">弊社 基盤チーム</p>\n        <p class=\"note\">連携先 4 系統の疎通まで</p>\n      </div>\n      <div class=\"step\" data-row=\"7\">\n        <p class=\"time\">06:00</p>\n        <p class=\"task\">業務確認（御社 6 名）</p>\n        <p class=\"owner\">御社 営業推進部</p>\n        <p class=\"note\">受注登録・照会・帳票の 3 経路</p>\n      </div>\n      <div class=\"step\" data-row=\"8\">\n        <p class=\"time\">08:00</p>\n        <p class=\"task\">受付再開</p>\n        <p class=\"owner\">御社 情報システム部</p>\n        <p class=\"note\">以後 2 週間は合同で監視</p>\n      </div>\n    </div>\n\n    <div class=\"foot\">\n      <div>\n        <p class=\"fkey\" data-type=\"fkey\">切戻しの所要</p>\n        <p class=\"fval\" data-type=\"fval\">3 時間（03:00 判断なら 06:00 復旧）</p>\n      </div>\n      <div>\n        <p class=\"fkey\">当日の連絡手段</p>\n        <p class=\"fval\">合同 PMO の常設回線</p>\n      </div>\n      <div>\n        <p class=\"fkey\">予備日</p>\n        <p class=\"fval\">2027.11.20（土）同時刻</p>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/cutover-runbook-timeline/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/cutover-runbook-timeline/font.css",
        "https://design-vault.pages.dev/designs/cutover-runbook-timeline/font-0.woff2",
        "https://design-vault.pages.dev/designs/cutover-runbook-timeline/font-1.woff2",
        "https://design-vault.pages.dev/designs/cutover-runbook-timeline/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/cutover-runbook-timeline",
    "en": "https://design-vault.pages.dev/en/designs/cutover-runbook-timeline"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n本番切替の当日手順を 1 枚にした版。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nThe cutover runbook, on one page. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements come from it, so the three cannot drift apart.\n\n### Techniques\n\n- 時刻列を 190px に固定すると、左端を縦に読むだけで当日の時系列が追える\n- 業務停止中の行は作業名を `--muted` に落とす。止まっている時間帯が塊として見える\n- 濃地を使うのは深夜作業だからではなく、投影せず手元で読む紙になるため。印刷時は地を白に差し替えて使う\n\n### Apply to\n\n- 移行計画のご説明、当日の作業手順書の 1 枚目\n- 障害時の復旧手順（判断の行を「エスカレーション」に読み替える）"
}