{
  "id": "step-chart-inventory-level-events",
  "schemaVersion": 2,
  "title": {
    "ja": "在庫水準の階段推移 — 6月21日に37個まで低下",
    "en": "Inventory Step Chart — Stock Falls to 37 Units on June 21"
  },
  "summary": {
    "ja": "入荷・出庫のイベント間は値を一定に保持し、更新時だけ垂直に移るstep chartで在庫水準と維持期間を示す",
    "en": "A step chart holds stock levels constant between receipt and issue events, showing inventory state and duration until change."
  },
  "capturedAt": "2026-09-25",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "minimal"
  ],
  "useCases": [
    "status",
    "comparison"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "axis",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 100,
      "right": 140,
      "bottom": 100,
      "left": 140
    }
  },
  "type": {
    "title": {
      "size": 46,
      "weight": 700,
      "tracking": "0.01em"
    },
    "subtitle": {
      "size": 22,
      "weight": 500
    },
    "axisTitle": {
      "size": 22,
      "weight": 700
    },
    "tick": {
      "size": 20,
      "weight": 500
    },
    "label": {
      "size": 20,
      "weight": 500
    },
    "value": {
      "size": 26,
      "weight": 700
    },
    "legend": {
      "size": 20,
      "weight": 500
    },
    "takeaway": {
      "size": 28,
      "weight": 500
    },
    "note": {
      "size": 20,
      "weight": 400
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": [
      "#1C8C79",
      "#A85A2E"
    ]
  },
  "rules": [
    {
      "ja": "6月1日から30日までの日次在庫数を同一SKUで記録する",
      "en": "Record daily stock for one SKU from June 1 through June 30."
    },
    {
      "ja": "水平線が維持中の在庫数、垂直線が入荷・出庫後の値の更新を表す",
      "en": "Horizontal segments encode held stock; vertical transitions encode inventory updates after receipts or issues."
    },
    {
      "ja": "イベント間は値を補間せず、最後に観測された水準が次のイベントまで続く",
      "en": "Do not interpolate between events; the last observed level persists until the next event."
    },
    {
      "ja": "架空データ。対象SKU・日付の集計定義を揃え、実在在庫の判断には用いない",
      "en": "Fictional data. Align SKU and daily aggregation definitions; do not use as real inventory evidence."
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.DBkAyazH.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": []
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "axis",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 100,
          "right": 140,
          "bottom": 100,
          "left": 140
        }
      },
      "type": {
        "title": {
          "size": 46,
          "weight": 700,
          "tracking": "0.01em"
        },
        "subtitle": {
          "size": 22,
          "weight": 500
        },
        "axisTitle": {
          "size": 22,
          "weight": 700
        },
        "tick": {
          "size": 20,
          "weight": 500
        },
        "label": {
          "size": 20,
          "weight": 500
        },
        "value": {
          "size": 26,
          "weight": 700
        },
        "legend": {
          "size": 20,
          "weight": 500
        },
        "takeaway": {
          "size": 28,
          "weight": 500
        },
        "note": {
          "size": 20,
          "weight": 400
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9",
        "series": [
          "#1C8C79",
          "#A85A2E"
        ]
      },
      "rules": [
        "Record daily stock for one SKU from June 1 through June 30.",
        "Horizontal segments encode held stock; vertical transitions encode inventory updates after receipts or issues.",
        "Do not interpolate between events; the last observed level persists until the next event.",
        "Fictional data. Align SKU and daily aggregation definitions; do not use as real inventory evidence."
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 140 下 100 左 140\n\n## 文字（版面 1920px に対する px）\ntitle  46px / 700 / 字間 0.01em\nsubtitle  22px / 500\naxisTitle  22px / 700\ntick  20px / 500\nlabel  20px / 500\nvalue  26px / 700\nlegend  20px / 500\ntakeaway  28px / 500\nnote  20px / 400\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1C8C79 / #A85A2E\n\n## 外すと崩れる点\n- 6月1日から30日までの日次在庫数を同一SKUで記録する\n- 水平線が維持中の在庫数、垂直線が入荷・出庫後の値の更新を表す\n- イベント間は値を補間せず、最後に観測された水準が次のイベントまで続く\n- 架空データ。対象SKU・日付の集計定義を揃え、実在在庫の判断には用いない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/step-chart-inventory-level-events/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 140 bottom 100 left 140\n\n## Type (px against a 1920px canvas)\ntitle  46px / 700 / tracking 0.01em\nsubtitle  22px / 500\naxisTitle  22px / 700\ntick  20px / 500\nlabel  20px / 500\nvalue  26px / 700\nlegend  20px / 500\ntakeaway  28px / 500\nnote  20px / 400\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #1C8C79 / #A85A2E\n\n## Constraints — dropping these breaks it\n- Record daily stock for one SKU from June 1 through June 30.\n- Horizontal segments encode held stock; vertical transitions encode inventory updates after receipts or issues.\n- Do not interpolate between events; the last observed level persists until the next event.\n- Fictional data. Align SKU and daily aggregation definitions; do not use as real inventory evidence.\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/step-chart-inventory-level-events/pattern.html."
    },
    "code": {
      "html": "<!doctype html><meta charset=\"utf-8\"><title>在庫水準の階段推移 — 6月21日に37個まで低下</title><meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\"><link rel=\"stylesheet\" href=\"./font.css\"><style>:root{--ground:#FFFFFF;--surface:#F4F6F9;--ink:#131820;--muted:#667183;--accent:#1F5FA8;--rule:#DBE1E9;--series-1:#1C8C79;--series-2:#A85A2E;}*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px}body{font-family:\"Zen Kaku Gothic New\",\"Hiragino Sans\",sans-serif}.artboard{width:1920px;height:1080px;padding:100px 140px;background:var(--ground);color:var(--ink)}.content{width:100%;height:100%;position:relative}.figure{position:absolute;left:-140px;top:-100px;width:1920px;height:1080px}</style><div class=\"artboard\" data-artboard><div class=\"content\" data-content><svg class=\"figure\" width=\"1920\" height=\"1080\" viewBox=\"0 0 1920 1080\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"6月の架空SKUの在庫数を日ごとに階段線で示す。日1は42個から始まり、日12に90個、日21に37個、日27以降は52個を維持。\"><style>.figure{font-family:\"Zen Kaku Gothic New\",\"Hiragino Sans\",sans-serif}.ground{fill:var(--ground)}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.rule{stroke:var(--rule)}.title{font-size:46px;font-weight:700;letter-spacing:.01em}.subtitle{font-size:22px;font-weight:500}.axis-title{font-size:22px;font-weight:700}.tick{font-size:20px;font-weight:500}.label{font-size:20px;font-weight:500}.value{font-size:26px;font-weight:700}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}.legend{font-size:20px;font-weight:500}.step{fill:none;stroke:var(--accent);stroke-width:6;stroke-linejoin:round;stroke-linecap:square}.event{fill:var(--series-1);stroke:var(--ground);stroke-width:4}</style><rect class=\"ground\" width=\"1920\" height=\"1080\"/><text class=\"ink title\" data-type=\"title\" x=\"140\" y=\"153\">在庫水準の階段推移 — 6月21日に37個まで低下</text><text class=\"muted subtitle\" data-type=\"subtitle\" x=\"140\" y=\"201\">SKU-A / 日次在庫数（個） / 架空データ</text><line class=\"rule\" x1=\"140\" y1=\"238\" x2=\"1780\" y2=\"238\" stroke-width=\"2\"/><text class=\"ink axis-title\" data-type=\"axisTitle\" x=\"960\" y=\"294\" text-anchor=\"middle\">補充・出庫がある日だけ更新し、間の日は在庫水準を保持する</text><line class=\"rule\" x1=\"500\" y1=\"820\" x2=\"1480\" y2=\"820\" stroke-width=\"1\"/><line class=\"rule\" x1=\"500\" y1=\"734\" x2=\"1480\" y2=\"734\" stroke-width=\"1\"/><line class=\"rule\" x1=\"500\" y1=\"648\" x2=\"1480\" y2=\"648\" stroke-width=\"1\"/><line class=\"rule\" x1=\"500\" y1=\"562\" x2=\"1480\" y2=\"562\" stroke-width=\"1\"/><line class=\"rule\" x1=\"500\" y1=\"476\" x2=\"1480\" y2=\"476\" stroke-width=\"1\"/><line class=\"rule\" x1=\"500\" y1=\"390\" x2=\"1480\" y2=\"390\" stroke-width=\"1\"/><line class=\"rule\" x1=\"500\" y1=\"390\" x2=\"500\" y2=\"820\" stroke-width=\"1\"/><line class=\"rule\" x1=\"635.1724137931035\" y1=\"390\" x2=\"635.1724137931035\" y2=\"820\" stroke-width=\"1\"/><line class=\"rule\" x1=\"770.344827586207\" y1=\"390\" x2=\"770.344827586207\" y2=\"820\" stroke-width=\"1\"/><line class=\"rule\" x1=\"905.5172413793103\" y1=\"390\" x2=\"905.5172413793103\" y2=\"820\" stroke-width=\"1\"/><line class=\"rule\" x1=\"1040.689655172414\" y1=\"390\" x2=\"1040.689655172414\" y2=\"820\" stroke-width=\"1\"/><line class=\"rule\" x1=\"1175.8620689655172\" y1=\"390\" x2=\"1175.8620689655172\" y2=\"820\" stroke-width=\"1\"/><line class=\"rule\" x1=\"1311.0344827586207\" y1=\"390\" x2=\"1311.0344827586207\" y2=\"820\" stroke-width=\"1\"/><line class=\"rule\" x1=\"1446.2068965517242\" y1=\"390\" x2=\"1446.2068965517242\" y2=\"820\" stroke-width=\"1\"/><path class=\"step\" d=\"M 500 639.4 H 601.3793103448276 V 510.40000000000003 H 736.551724137931 V 605 H 871.7241379310344 V 433 H 1006.8965517241379 V 540.5 H 1175.8620689655172 V 660.9 H 1277.2413793103449 V 510.40000000000003 H 1378.6206896551726 V 596.4 H 1480\"/><circle class=\"event\" cx=\"601.4\" cy=\"510.4\" r=\"9\"/><circle class=\"event\" cx=\"736.6\" cy=\"605.0\" r=\"9\"/><circle class=\"event\" cx=\"871.7\" cy=\"433.0\" r=\"9\"/><circle class=\"event\" cx=\"1006.9\" cy=\"540.5\" r=\"9\"/><circle class=\"event\" cx=\"1175.9\" cy=\"660.9\" r=\"9\"/><circle class=\"event\" cx=\"1277.2\" cy=\"510.4\" r=\"9\"/><circle class=\"event\" cx=\"1378.6\" cy=\"596.4\" r=\"9\"/><text class=\"muted tick\" data-type=\"tick\" x=\"465\" y=\"820\" text-anchor=\"end\" dominant-baseline=\"central\">0</text><text class=\"muted tick\" data-type=\"tick\" x=\"465\" y=\"734\" text-anchor=\"end\" dominant-baseline=\"central\">20</text><text class=\"muted tick\" data-type=\"tick\" x=\"465\" y=\"648\" text-anchor=\"end\" dominant-baseline=\"central\">40</text><text class=\"muted tick\" data-type=\"tick\" x=\"465\" y=\"562\" text-anchor=\"end\" dominant-baseline=\"central\">60</text><text class=\"muted tick\" data-type=\"tick\" x=\"465\" y=\"476\" text-anchor=\"end\" dominant-baseline=\"central\">80</text><text class=\"muted tick\" data-type=\"tick\" x=\"465\" y=\"390\" text-anchor=\"end\" dominant-baseline=\"central\">100</text><text class=\"muted tick\" x=\"500\" y=\"852\" text-anchor=\"middle\">1日</text><text class=\"muted tick\" x=\"635.1724137931035\" y=\"852\" text-anchor=\"middle\">5日</text><text class=\"muted tick\" x=\"770.344827586207\" y=\"852\" text-anchor=\"middle\">9日</text><text class=\"muted tick\" x=\"905.5172413793103\" y=\"852\" text-anchor=\"middle\">13日</text><text class=\"muted tick\" x=\"1040.689655172414\" y=\"852\" text-anchor=\"middle\">17日</text><text class=\"muted tick\" x=\"1175.8620689655172\" y=\"852\" text-anchor=\"middle\">21日</text><text class=\"muted tick\" x=\"1311.0344827586207\" y=\"852\" text-anchor=\"middle\">25日</text><text class=\"muted tick\" x=\"1446.2068965517242\" y=\"852\" text-anchor=\"middle\">29日</text><line class=\"rule\" x1=\"500\" y1=\"820\" x2=\"1480\" y2=\"820\" stroke-width=\"1.5\"/><text class=\"muted tick\" x=\"1000\" y=\"883\" text-anchor=\"middle\">6月の日付</text><text class=\"muted tick\" x=\"165\" y=\"600\" text-anchor=\"middle\" transform=\"rotate(-90 165 600)\">在庫数（個）</text><rect x=\"1540\" y=\"425\" width=\"240\" height=\"230\" rx=\"18\" fill=\"var(--surface)\"/><text class=\"muted label\" x=\"1570\" y=\"470\">期間内ピーク</text><text class=\"ink value\" x=\"1570\" y=\"514\">90個</text><text class=\"muted label\" x=\"1570\" y=\"548\">6月12日</text><line class=\"rule\" x1=\"1570\" y1=\"570\" x2=\"1750\" y2=\"570\"/><text class=\"muted label\" x=\"1570\" y=\"608\">最低 37個・6月21日</text><g class=\"legend\" dominant-baseline=\"central\"><line class=\"step\" x1=\"530\" y1=\"929\" x2=\"610\" y2=\"929\"/><text class=\"ink\" data-type=\"legend\" x=\"630\" y=\"929\">水平＝同水準を維持</text><line class=\"step\" x1=\"975\" y1=\"929\" x2=\"1055\" y2=\"929\"/><text class=\"ink\" x=\"1075\" y=\"929\">垂直＝入荷・出庫で更新</text></g><text class=\"ink takeaway\" data-type=\"takeaway\" x=\"960\" y=\"970\" text-anchor=\"middle\">日21に最低37個 — 次のイベントまでその水準が続く</text><line class=\"rule\" x1=\"140\" y1=\"987\" x2=\"1780\" y2=\"987\" stroke-width=\"1\"/><text class=\"muted note\" data-type=\"note\" x=\"140\" y=\"1022\">段差の間を直線補間しない。架空例のため発注判断や実在SKUの在庫根拠には使えない。</text></svg></div></div>",
      "url": "https://design-vault.pages.dev/designs/step-chart-inventory-level-events/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/step-chart-inventory-level-events/font.css",
        "https://design-vault.pages.dev/designs/step-chart-inventory-level-events/font-0.woff2",
        "https://design-vault.pages.dev/designs/step-chart-inventory-level-events/font-1.woff2",
        "https://design-vault.pages.dev/designs/step-chart-inventory-level-events/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/step-chart-inventory-level-events",
    "en": "https://design-vault.pages.dev/en/designs/step-chart-inventory-level-events"
  },
  "notesMarkdown": "### 視覚的な問い\n\n入荷・出庫後に在庫はどの水準へ移り、次の更新までどれだけ維持されたか。\n\n### 構造\n\n横軸は日付、縦軸は在庫数。水平線で水準の維持期間を、垂直線でイベントによる更新を示す。段差間の空白は変化を補間する区間ではなく、同じ在庫水準が継続した期間である。\n\n架空のSKU-Aは6月1日に42個から始まり、6月12日に90個まで増え、6月21日に37個まで減少した。折れ線グラフが観測点の間を連続的に結ぶのに対し、step chartは在庫の離散的な更新時点だけを変化として扱う。数値は架空で、実在の発注判断を示さない。"
}