{
  "id": "change-request-flow-gates",
  "schemaVersion": 2,
  "title": {
    "ja": "変更管理 — 各段に営業日を与え、否認の行き先まで描く",
    "en": "Change Control — Business Days on Every Step, and Where a Refusal Goes"
  },
  "summary": {
    "ja": "受付から反映まで 5 段の流れ。止まる段（判定）だけを塗り、否認したものの行き先を枝として同じ面に描く",
    "en": "Five steps from intake to change, with the one step that stops filled and the refusal branch drawn on the same page"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "change-control",
    "process"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "flow",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 92,
      "right": 140,
      "bottom": 92,
      "left": 140
    },
    "columns": {
      "count": 5,
      "gap": 34
    },
    "emphasis": {
      "column": 3,
      "via": [
        "fill",
        "rule"
      ]
    }
  },
  "type": {
    "title": {
      "size": 46,
      "weight": 700,
      "tracking": "0.01em",
      "leading": 1.3
    },
    "lede": {
      "size": 19,
      "weight": 400,
      "leading": 1.8
    },
    "days": {
      "size": 14,
      "weight": 500,
      "tracking": "0.14em",
      "numeric": "tabular"
    },
    "sname": {
      "size": 28,
      "weight": 700,
      "leading": 1.4
    },
    "who": {
      "size": 15,
      "weight": 500
    },
    "out": {
      "size": 15,
      "weight": 400,
      "leading": 1.7
    },
    "rname": {
      "size": 20,
      "weight": 700
    },
    "rtext": {
      "size": 16,
      "weight": 400,
      "leading": 1.75
    },
    "fkey": {
      "size": 14,
      "weight": 500,
      "tracking": "0.14em"
    },
    "fval": {
      "size": 17,
      "weight": 500,
      "leading": 1.65,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": []
  },
  "rules": [
    {
      "ja": "各段に営業日を書く。日数の無いフローは「いつ決まるか」を答えないので、現場は待たずに先に作り始める",
      "en": "Put business days on every step — a flow with no clock never answers \"when\", so the team starts building before the answer arrives"
    },
    {
      "ja": "否認の行き先を描く。行き先の無い否認は、同じ要求が翌月また受付に戻ってくる",
      "en": "Draw where a refusal goes; with nowhere to go, the same request comes back through intake next month"
    },
    {
      "ja": "判定者を金額や規模で分ける。1 つの会議体に全部持ち込むと、小さな変更が月 1 回の決裁を待つことになる",
      "en": "Split the judge by size — send everything to one forum and a two-day change waits for a monthly meeting"
    },
    {
      "ja": "「計画の改訂」を独立した段にする。ここが段になっていないから、小さな変更が工程表に反映されないまま積み上がる",
      "en": "Make replanning its own step; when it is not a step, small changes accumulate without ever reaching the schedule"
    },
    {
      "ja": "塗るのは止まる段 1 つだけ。他は作業の段なので、塗ると「どこで待つのか」が読めなくなる",
      "en": "Fill the one step that stops. The others are work; filling them hides where the waiting happens"
    },
    {
      "ja": "枝は判定の段の左端から L 字で落とす。渡り線の途中に落とすと、その左に置いた見出しが分岐の出どころに見える",
      "en": "Drop the branch from the judging step's left edge — landing mid-rule makes the heading to its left look like the source"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.B1hRNZh7.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "scope-in-out-two-fields",
      "requirements-response-table",
      "estimate-breakdown-by-phase"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "flow",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 92,
          "right": 140,
          "bottom": 92,
          "left": 140
        },
        "columns": {
          "count": 5,
          "gap": 34
        },
        "emphasis": {
          "column": 3,
          "via": [
            "fill",
            "rule"
          ]
        }
      },
      "type": {
        "title": {
          "size": 46,
          "weight": 700,
          "tracking": "0.01em",
          "leading": 1.3
        },
        "lede": {
          "size": 19,
          "weight": 400,
          "leading": 1.8
        },
        "days": {
          "size": 14,
          "weight": 500,
          "tracking": "0.14em",
          "numeric": "tabular"
        },
        "sname": {
          "size": 28,
          "weight": 700,
          "leading": 1.4
        },
        "who": {
          "size": 15,
          "weight": 500
        },
        "out": {
          "size": 15,
          "weight": 400,
          "leading": 1.7
        },
        "rname": {
          "size": 20,
          "weight": 700
        },
        "rtext": {
          "size": 16,
          "weight": 400,
          "leading": 1.75
        },
        "fkey": {
          "size": 14,
          "weight": 500,
          "tracking": "0.14em"
        },
        "fval": {
          "size": 17,
          "weight": 500,
          "leading": 1.65,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9"
      },
      "rules": [
        "Put business days on every step — a flow with no clock never answers \"when\", so the team starts building before the answer arrives",
        "Draw where a refusal goes; with nowhere to go, the same request comes back through intake next month",
        "Split the judge by size — send everything to one forum and a two-day change waits for a monthly meeting",
        "Make replanning its own step; when it is not a step, small changes accumulate without ever reaching the schedule",
        "Fill the one step that stops. The others are work; filling them hides where the waiting happens",
        "Drop the branch from the judging step's left edge — landing mid-rule makes the heading to its left look like the source"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 92 右 140 下 92 左 140\n- 5 カラム（等分）、間隔 34\n\n## 強調\n3 列目のみ。手段は 塗り + 罫 だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  46px / 700 / 字間 0.01em / 行送り 1.3\nlede  19px / 400 / 行送り 1.8\ndays  14px / 500 / 字間 0.14em / 等幅数字\nsname  28px / 700 / 行送り 1.4\nwho  15px / 500\nout  15px / 400 / 行送り 1.7\nrname  20px / 700\nrtext  16px / 400 / 行送り 1.75\nfkey  14px / 500 / 字間 0.14em\nfval  17px / 500 / 行送り 1.65 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 各段に営業日を書く。日数の無いフローは「いつ決まるか」を答えないので、現場は待たずに先に作り始める\n- 否認の行き先を描く。行き先の無い否認は、同じ要求が翌月また受付に戻ってくる\n- 判定者を金額や規模で分ける。1 つの会議体に全部持ち込むと、小さな変更が月 1 回の決裁を待つことになる\n- 「計画の改訂」を独立した段にする。ここが段になっていないから、小さな変更が工程表に反映されないまま積み上がる\n- 塗るのは止まる段 1 つだけ。他は作業の段なので、塗ると「どこで待つのか」が読めなくなる\n- 枝は判定の段の左端から L 字で落とす。渡り線の途中に落とすと、その左に置いた見出しが分岐の出どころに見える\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/change-request-flow-gates/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 92 right 140 bottom 92 left 140\n- 5 equal columns, gap 34\n\n## Emphasis\ncolumn 3 only, by fill + rule and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  46px / 700 / tracking 0.01em / leading 1.3\nlede  19px / 400 / leading 1.8\ndays  14px / 500 / tracking 0.14em / tabular numerals\nsname  28px / 700 / leading 1.4\nwho  15px / 500\nout  15px / 400 / leading 1.7\nrname  20px / 700\nrtext  16px / 400 / leading 1.75\nfkey  14px / 500 / tracking 0.14em\nfval  17px / 500 / leading 1.65 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Put business days on every step — a flow with no clock never answers \"when\", so the team starts building before the answer arrives\n- Draw where a refusal goes; with nowhere to go, the same request comes back through intake next month\n- Split the judge by size — send everything to one forum and a two-day change waits for a monthly meeting\n- Make replanning its own step; when it is not a step, small changes accumulate without ever reaching the schedule\n- Fill the one step that stops. The others are work; filling them hides where the waiting happens\n- Drop the branch from the judging step's left edge — landing mid-rule makes the heading to its left look like the source\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/change-request-flow-gates/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: #FFFFFF;\n    --surface: #F4F6F9;\n    --ink: #131820;\n    --muted: #667183;\n    --accent: #1F5FA8;\n    --rule: #DBE1E9;\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: 92px 140px;                  /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }\n\n  .head { display: grid; gap: 16px; }\n  .title { font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }\n  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }\n\n  .flow { align-self: center; display: grid; gap: 0; }\n\n  /* 5 段を等幅で並べ、間に山形を挟む。段を大小に振ると、\n     どの段で時間を使うかが幅の話になってしまう。 */\n  .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; }\n  .step { border: 1px solid var(--rule); padding: 34px 28px 38px; background: var(--ground); }\n  /* 判定の段だけを塗る。ここが唯一「止まる」段で、他は作業の段だから。 */\n  .step[data-emphasis] { background: var(--surface); border-color: var(--accent); }\n\n  .days { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }\n  .step[data-emphasis] .days { color: var(--accent); }\n  .sname { font-size: 28px; font-weight: 700; line-height: 1.4; margin-top: 14px; }\n  .step[data-emphasis] .sname { color: var(--accent); }\n  .who { font-size: 15px; font-weight: 500; color: var(--muted); margin-top: 14px; }\n  .out { font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 10px; }\n\n  /* 山形は段と段の隙間に描く。矢印を線で引くと、線の意味を説明する時間が要る。 */\n  .chev { width: 0; height: 0; align-self: center; justify-self: center;\n          border-top: 11px solid transparent; border-bottom: 11px solid transparent;\n          border-left: 13px solid var(--rule); }\n  .steps { grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr; }\n\n  /* 否認の行き先。描かない否認は、同じ要求が翌月また受付に戻ってくる。 */\n  .branch { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr; }\n  /* 枝は判定の段の左端から L 字で落とす。渡り線の途中に落とすと、\n     その左に置いた見出しのほうが分岐の出どころに見える。 */\n  .drop { grid-column: 5; justify-self: start; width: 1px; height: 44px; background: var(--rule); }\n  .reject { grid-column: 5 / 10; border-top: 1px solid var(--rule); padding-top: 26px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: baseline; }\n  .rname { font-size: 20px; font-weight: 700; }\n  .rtext { font-size: 16px; font-weight: 400; line-height: 1.75; color: var(--muted); }\n\n  .foot { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 56px; border-top: 1px solid var(--rule); padding-top: 24px; }\n  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }\n  .fval { font-size: 17px; font-weight: 500; line-height: 1.65; 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=\"lede\" data-type=\"lede\">受付から反映まで、各段に営業日を置いています。合計 10 営業日で結論が出ない要求は、そのまま第 2 期の候補に送ります。</p>\n    </div>\n\n    <div class=\"flow\">\n      <div class=\"steps\">\n        <section class=\"step\" data-col=\"1\">\n          <p class=\"days\" data-type=\"days\">1 営業日</p>\n          <p class=\"sname\" data-type=\"sname\">受付</p>\n          <p class=\"who\" data-type=\"who\">合同 PMO</p>\n          <p class=\"out\" data-type=\"out\">要求票に採番し、台帳へ記載</p>\n        </section>\n        <div class=\"chev\"></div>\n        <section class=\"step\" data-col=\"2\">\n          <p class=\"days\">4 営業日</p>\n          <p class=\"sname\">影響評価</p>\n          <p class=\"who\">開発チーム・基盤チーム</p>\n          <p class=\"out\">工数・工程・他機能への影響を算定</p>\n        </section>\n        <div class=\"chev\"></div>\n        <section class=\"step\" data-col=\"3\" data-emphasis=\"fill rule\">\n          <p class=\"days\">3 営業日</p>\n          <p class=\"sname\">判定</p>\n          <p class=\"who\">合同 PMO（20 人日以上はステアリングコミッティ）</p>\n          <p class=\"out\">承認・否認・保留のいずれかを記録</p>\n        </section>\n        <div class=\"chev\"></div>\n        <section class=\"step\" data-col=\"4\">\n          <p class=\"days\">2 営業日</p>\n          <p class=\"sname\">計画の改訂</p>\n          <p class=\"who\">合同 PMO</p>\n          <p class=\"out\">工程表と見積を改訂。版数を上げる</p>\n        </section>\n        <div class=\"chev\"></div>\n        <section class=\"step\" data-col=\"5\">\n          <p class=\"days\">工程に依存</p>\n          <p class=\"sname\">反映</p>\n          <p class=\"who\">担当チーム</p>\n          <p class=\"out\">設計書の改訂から実装・試験まで</p>\n        </section>\n      </div>\n\n      <div class=\"branch\">\n        <div class=\"drop\"></div>\n        <div class=\"reject\">\n          <p class=\"rname\" data-type=\"rname\">否認・保留のとき</p>\n          <p class=\"rtext\" data-type=\"rtext\">第 2 期の候補一覧へ、判定日と理由を付けて移します。差し戻しはしません —— 行き先の無い否認は、同じ要求が翌月また受付に戻ってくるためです。</p>\n        </div>\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 件 ／ 評価中 2 件 ／ 判定待ち 1 件</p>\n      </div>\n      <div>\n        <p class=\"fkey\">承認済みの累計</p>\n        <p class=\"fval\">7 件 ／ 工期 +3 週・費用 +8,400 千円</p>\n      </div>\n      <div>\n        <p class=\"fkey\">この手順を通さない変更</p>\n        <p class=\"fval\">ありません。文言の修正も台帳に載せます</p>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/change-request-flow-gates/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/change-request-flow-gates/font.css",
        "https://design-vault.pages.dev/designs/change-request-flow-gates/font-0.woff2",
        "https://design-vault.pages.dev/designs/change-request-flow-gates/font-1.woff2",
        "https://design-vault.pages.dev/designs/change-request-flow-gates/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/change-request-flow-gates",
    "en": "https://design-vault.pages.dev/en/designs/change-request-flow-gates"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\nスコープを合意した次に必ず要る、変更要求の扱いを取り決める版。**`pattern.html` が版そのもの**で、\n`cover.png` と frontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nThe page that always follows a scope agreement: how change requests get handled. `pattern.html` is\nthe artboard itself; both `cover.png` and the measurements come from it, so the three cannot drift apart.\n\n### Techniques\n\n- 5 段を等幅にする。段を大小に振ると、どの段で時間を使うかが幅の話になり、書いた営業日と矛盾する\n- 段の間は 34px の空きトラックにして、そこへ山形を置く。矢印を線で引くと、線の意味を説明する時間が要る\n- 下端に「現在の受付状況」を固定で置く。取り決めだけの紙は運用されず、件数が載ると台帳が更新される\n\n### Apply to\n\n- 要件定義の冒頭で交わす変更管理の取り決め、キックオフ資料\n- 障害対応のエスカレーション手順（段を「受付・切り分け・判断・復旧・報告」に読み替える）"
}