{
  "id": "process-flow-five-step",
  "schemaVersion": 2,
  "title": {
    "ja": "業務フロー 5 工程 — 待ち時間を工程と同じ幅で書く",
    "en": "Five-Step Flow — Waiting Drawn as Wide as Working"
  },
  "summary": {
    "ja": "工程を等幅の箱で並べ、滞留している 1 工程だけを罫で立てる",
    "en": "Equal-width steps with a single rule marking the one where the work piles up"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "data-viz"
  ],
  "useCases": [
    "process"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "flow",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 104,
      "right": 128,
      "bottom": 104,
      "left": 128
    },
    "columns": {
      "count": 5,
      "gap": 56
    },
    "emphasis": {
      "column": 3,
      "via": [
        "rule"
      ]
    }
  },
  "type": {
    "title": {
      "size": 42,
      "weight": 700,
      "tracking": "0.02em"
    },
    "lede": {
      "size": 19,
      "weight": 400,
      "leading": 1.8
    },
    "no": {
      "size": 15,
      "weight": 500,
      "tracking": "0.18em"
    },
    "name": {
      "size": 30,
      "weight": 700,
      "leading": 1.35
    },
    "outs": {
      "size": 16,
      "weight": 400,
      "leading": 1.6
    },
    "owner": {
      "size": 17,
      "weight": 400,
      "leading": 1.7
    },
    "days": {
      "size": 30,
      "weight": 700,
      "tracking": "-0.01em",
      "numeric": "tabular"
    },
    "daysUnit": {
      "size": 15,
      "weight": 400
    },
    "note": {
      "size": 17,
      "weight": 400,
      "leading": 1.8
    },
    "total": {
      "size": 17,
      "weight": 500,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#FBFAF8",
    "surface": "#FFFFFF",
    "ink": "#191712",
    "muted": "#756F64",
    "accent": "#9A3B2E",
    "rule": "#DFDACF",
    "series": []
  },
  "rules": [
    {
      "ja": "滞留は塗りではなく罫で示す。塗ると「重要な工程」に見える",
      "en": "Mark the bottleneck with a rule, not a fill — a fill reads as importance"
    },
    {
      "ja": "矢印は箱の外に置く。箱＝仕事、隙間＝待ちという読み分けを保つ",
      "en": "Arrows go between the boxes so box means work and gap means wait"
    },
    {
      "ja": "工程には必ず「出るもの」を書く。名前と日数だけでは次へ進む条件が分からない",
      "en": "Every step names what it produces — a name and a duration never say when it is done"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.F_v_fpXR.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "funnel-four-stage-dropoff",
      "schedule-table-weekly",
      "gantt-quarter-bands"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "flow",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 104,
          "right": 128,
          "bottom": 104,
          "left": 128
        },
        "columns": {
          "count": 5,
          "gap": 56
        },
        "emphasis": {
          "column": 3,
          "via": [
            "rule"
          ]
        }
      },
      "type": {
        "title": {
          "size": 42,
          "weight": 700,
          "tracking": "0.02em"
        },
        "lede": {
          "size": 19,
          "weight": 400,
          "leading": 1.8
        },
        "no": {
          "size": 15,
          "weight": 500,
          "tracking": "0.18em"
        },
        "name": {
          "size": 30,
          "weight": 700,
          "leading": 1.35
        },
        "outs": {
          "size": 16,
          "weight": 400,
          "leading": 1.6
        },
        "owner": {
          "size": 17,
          "weight": 400,
          "leading": 1.7
        },
        "days": {
          "size": 30,
          "weight": 700,
          "tracking": "-0.01em",
          "numeric": "tabular"
        },
        "daysUnit": {
          "size": 15,
          "weight": 400
        },
        "note": {
          "size": 17,
          "weight": 400,
          "leading": 1.8
        },
        "total": {
          "size": 17,
          "weight": 500,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#FBFAF8",
        "surface": "#FFFFFF",
        "ink": "#191712",
        "muted": "#756F64",
        "accent": "#9A3B2E",
        "rule": "#DFDACF"
      },
      "rules": [
        "Mark the bottleneck with a rule, not a fill — a fill reads as importance",
        "Arrows go between the boxes so box means work and gap means wait",
        "Every step names what it produces — a name and a duration never say when it is done"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 104 右 128 下 104 左 128\n- 5 カラム（等分）、間隔 56\n\n## 強調\n3 列目のみ。手段は 罫 だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  42px / 700 / 字間 0.02em\nlede  19px / 400 / 行送り 1.8\nno  15px / 500 / 字間 0.18em\nname  30px / 700 / 行送り 1.35\nouts  16px / 400 / 行送り 1.6\nowner  17px / 400 / 行送り 1.7\ndays  30px / 700 / 字間 -0.01em / 等幅数字\ndaysUnit  15px / 400\nnote  17px / 400 / 行送り 1.8\ntotal  17px / 500 / 等幅数字\n\n## 配色\n地 #FBFAF8 / 面 #FFFFFF / 文字 #191712 / 補助 #756F64 / 強調 #9A3B2E / 罫 #DFDACF\n\n## 外すと崩れる点\n- 滞留は塗りではなく罫で示す。塗ると「重要な工程」に見える\n- 矢印は箱の外に置く。箱＝仕事、隙間＝待ちという読み分けを保つ\n- 工程には必ず「出るもの」を書く。名前と日数だけでは次へ進む条件が分からない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/process-flow-five-step/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 104 right 128 bottom 104 left 128\n- 5 equal columns, gap 56\n\n## Emphasis\ncolumn 3 only, by rule and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  42px / 700 / tracking 0.02em\nlede  19px / 400 / leading 1.8\nno  15px / 500 / tracking 0.18em\nname  30px / 700 / leading 1.35\nouts  16px / 400 / leading 1.6\nowner  17px / 400 / leading 1.7\ndays  30px / 700 / tracking -0.01em / tabular numerals\ndaysUnit  15px / 400\nnote  17px / 400 / leading 1.8\ntotal  17px / 500 / tabular numerals\n\n## Colour\nGround #FBFAF8 / Surface #FFFFFF / Ink #191712 / Muted #756F64 / Accent #9A3B2E / Rule #DFDACF\n\n## Constraints — dropping these breaks it\n- Mark the bottleneck with a rule, not a fill — a fill reads as importance\n- Arrows go between the boxes so box means work and gap means wait\n- Every step names what it produces — a name and a duration never say when it is done\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/process-flow-five-step/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>業務フロー 5 工程 — 待ち時間を工程と同じ幅で書く</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: #FBFAF8;\n    --surface: #FFFFFF;\n    --ink: #191712;\n    --muted: #756F64;\n    --accent: #9A3B2E;\n    --rule: #DFDACF;\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: 104px 128px;\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 44px; }\n\n  .head { display: grid; gap: 14px; }\n  .title { font-size: 42px; font-weight: 700; letter-spacing: .02em; }\n  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }\n\n  .flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 56px; align-items: stretch; }\n  .step { position: relative; display: grid; grid-template-rows: auto auto 1fr auto auto;\n          background: var(--surface); border: 1px solid var(--rule); padding: 36px 32px 32px; }\n  /* 工程の間の矢印は罫 1 本と三角。箱の外に出すことで、\n     「箱＝仕事、隙間＝待ち」という読み分けが成り立つ。 */\n  .step::after {\n    content: \"\"; position: absolute; right: -40px; top: 50%;\n    width: 0; height: 0; transform: translateY(-50%);\n    border-left: 13px solid var(--rule);\n    border-top: 9px solid transparent; border-bottom: 9px solid transparent;\n  }\n  .step:last-child::after { display: none; }\n  /* 滞留している 1 工程だけを罫で立てる。塗ると「重要な工程」に見えてしまう。 */\n  .step[data-emphasis] { border-color: var(--accent); border-top-width: 4px; }\n\n  .no { font-size: 15px; font-weight: 500; letter-spacing: .18em; color: var(--muted); }\n  .name { font-size: 30px; font-weight: 700; line-height: 1.35; margin-top: 18px; }\n  /* 工程が何を出すかを書く。箱に名前と日数しか無いと、\n     読み手は「何が終われば次へ行けるのか」を自分で補うことになる。 */\n  .outs { margin-top: 26px; padding: 0; list-style: none; display: grid; gap: 12px; align-content: start; }\n  .outs li { font-size: 16px; font-weight: 400; line-height: 1.6; }\n  .outs li::before { content: \"\"; display: inline-block; width: 10px; height: 1px;\n                     background: var(--rule); vertical-align: middle; margin-right: 10px; }\n  .owner { margin-top: 24px; font-size: 17px; font-weight: 400; color: var(--muted); line-height: 1.7; }\n  .lead { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule);\n          display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }\n  .days { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }\n  .step[data-emphasis] .days { color: var(--accent); }\n  .daysUnit { font-size: 15px; font-weight: 400; color: var(--muted); }\n\n  .foot { display: flex; justify-content: space-between; gap: 48px;\n          border-top: 1px solid var(--rule); padding-top: 26px; }\n  .note { font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--muted); max-width: 1240px; }\n  .total { font-size: 17px; font-weight: 500; 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\">受注から出荷まで —— 実測 19.4 日</h1>\n      <p class=\"lede\" data-type=\"lede\">各工程の数字は着手から完了までの実測日数（中央値）。合計の 6 割が 1 工程に溜まっています。</p>\n    </div>\n\n    <div class=\"flow\">\n      <section class=\"step\" data-col=\"1\">\n        <p class=\"no\" data-type=\"no\">STEP 1</p>\n        <p class=\"name\" data-type=\"name\">受注の登録</p>\n        <ul class=\"outs\"><li data-type=\"outs\">受注番号の採番</li><li>与信の依頼票</li></ul>\n        <p class=\"owner\" data-type=\"owner\">営業事務<br>基幹へ手入力</p>\n        <p class=\"lead\"><span class=\"days\" data-type=\"days\">1.2</span><span class=\"daysUnit\" data-type=\"daysUnit\">日</span></p>\n      </section>\n      <section class=\"step\" data-col=\"2\">\n        <p class=\"no\">STEP 2</p>\n        <p class=\"name\">与信の確認</p>\n        <ul class=\"outs\"><li>与信枠の確定</li><li>条件付きの可否</li></ul>\n        <p class=\"owner\">管理部<br>限度額の照合</p>\n        <p class=\"lead\"><span class=\"days\">2.1</span><span class=\"daysUnit\">日</span></p>\n      </section>\n      <section class=\"step\" data-col=\"3\" data-emphasis=\"rule\">\n        <p class=\"no\">STEP 3</p>\n        <p class=\"name\">設計の確定</p>\n        <ul class=\"outs\"><li>確定図面（第 3 版）</li><li>部品表の確定</li></ul>\n        <p class=\"owner\">技術部<br>仕様の往復が平均 3 回</p>\n        <p class=\"lead\"><span class=\"days\">11.6</span><span class=\"daysUnit\">日</span></p>\n      </section>\n      <section class=\"step\" data-col=\"4\">\n        <p class=\"no\">STEP 4</p>\n        <p class=\"name\">部材の手配</p>\n        <ul class=\"outs\"><li>発注書の発行</li><li>入荷予定日</li></ul>\n        <p class=\"owner\">購買部<br>在庫引当と発注</p>\n        <p class=\"lead\"><span class=\"days\">3.4</span><span class=\"daysUnit\">日</span></p>\n      </section>\n      <section class=\"step\" data-col=\"5\">\n        <p class=\"no\">STEP 5</p>\n        <p class=\"name\">出荷の指示</p>\n        <ul class=\"outs\"><li>出荷指示書</li><li>積付の割付</li></ul>\n        <p class=\"owner\">物流センター<br>伝票と積付</p>\n        <p class=\"lead\"><span class=\"days\">1.1</span><span class=\"daysUnit\">日</span></p>\n      </section>\n    </div>\n\n    <div class=\"foot\">\n      <p class=\"note\" data-type=\"note\">短縮の対象は設計の確定 1 工程に絞ります。往復 3 回のうち 2 回は「図面の版が古い」ことが原因で、仕様書の所在を 1 つにすれば消えます。</p>\n      <p class=\"total\" data-type=\"total\">合計 19.4 日 / うち STEP 3 が 11.6 日</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/process-flow-five-step/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/process-flow-five-step/font.css",
        "https://design-vault.pages.dev/designs/process-flow-five-step/font-0.woff2",
        "https://design-vault.pages.dev/designs/process-flow-five-step/font-1.woff2",
        "https://design-vault.pages.dev/designs/process-flow-five-step/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/process-flow-five-step",
    "en": "https://design-vault.pages.dev/en/designs/process-flow-five-step"
  },
  "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- 日数は実測の中央値。平均は長い 1 件に引っ張られる\n- 担当部署を工程名の下に置き、「誰の手にあるか」を必ず言う\n- 合計と、その内訳の最大値を下端に併記する\n\n### Apply to\n\n- リードタイム短縮の提案\n- 業務の引き継ぎ説明"
}