在庫水準の階段推移 — 6月21日に37個まで低下

140 100

1920 × 1080 作品として見る

この 1 枚について

入荷・出庫のイベント間は値を一定に保持し、更新時だけ垂直に移るstep chartで在庫水準と維持期間を示す

使いどころ

進捗・状況報告比較・選定

出典

保存: 2026.09.25
ライセンス: Original

以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白上 100 右 140 下 100 左 140 ## 文字（版面 1920px に対する px） title 46px / 700 / 字間 0.01em subtitle 22px / 500 axisTitle 22px / 700 tick 20px / 500 label 20px / 500 value 26px / 700 legend 20px / 500 takeaway 28px / 500 note 20px / 400 ## 配色地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1C8C79 / #A85A2E ## 外すと崩れる点 - 6月1日から30日までの日次在庫数を同一SKUで記録する - 水平線が維持中の在庫数、垂直線が入荷・出庫後の値の更新を表す - イベント間は値を補間せず、最後に観測された水準が次のイベントまで続く - 架空データ。対象SKU・日付の集計定義を揃え、実在在庫の判断には用いない内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/step-chart-inventory-level-events/pattern.html

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: - 6月1日から30日までの日次在庫数を同一SKUで記録する - 水平線が維持中の在庫数、垂直線が入荷・出庫後の値の更新を表す - イベント間は値を補間せず、最後に観測された水準が次のイベントまで続く - 架空データ。対象SKU・日付の集計定義を揃え、実在在庫の判断には用いない

{ "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": [ "6月1日から30日までの日次在庫数を同一SKUで記録する", "水平線が維持中の在庫数、垂直線が入荷・出庫後の値の更新を表す", "イベント間は値を補間せず、最後に観測された水準が次のイベントまで続く", "架空データ。対象SKU・日付の集計定義を揃え、実在在庫の判断には用いない" ] }

<!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>

/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit. * font Zen Kaku Gothic New 400;500;700 * chars 101 (33510dd32708240c) * * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。 */ @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: block; src: url(./font-0.woff2) format('woff2'); unicode-range: U+2d, U+2f-39, U+41, U+4b, U+53, U+55, U+2014, U+3001-3002, U+3042, U+3044, U+3048, U+304b-304c, U+304f-3052, U+3057-305a, U+305d-3060, U+3066-3067, U+306a-306b, U+306e-3071, U+307e, U+3081, U+3084, U+308b, U+3092, U+3099-309a, U+30a4, U+30af-30b0, U+30bf-30c0, U+30c6-30c9, U+30d2-30d4, U+30d8-30da, U+30f3, U+30fb-30fc, U+4e0b, U+4ed8, U+4f4e, U+4f7f, U+4f8b, U+4fdd, U+500b, U+5145, U+5165, U+5185, U+51fa, U+5224, U+540c, U+5728, U+5782, U+5b9f, U+5dee, U+5e73, U+5eab, U+62e0, U+6301, U+63a8, U+6570, U+65ad, U+65b0, U+65e5, U+66f4, U+6700, U+6708, U+671f, U+67b6, U+6839, U+6b21, U+6bb5, U+6c34, U+6ce8, U+6e96, U+767a, U+76f4, U+79fb, U+7a7a, U+7d9a, U+7dad, U+7dda, U+8377, U+88dc, U+9593, U+968e, U+ff08-ff09, U+ff1d; } @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 500; font-display: block; src: url(./font-1.woff2) format('woff2'); unicode-range: U+2d, U+2f-39, U+41, U+4b, U+53, U+55, U+2014, U+3001-3002, U+3042, U+3044, U+3048, U+304b-304c, U+304f-3052, U+3057-305a, U+305d-3060, U+3066-3067, U+306a-306b, U+306e-3071, U+307e, U+3081, U+3084, U+308b, U+3092, U+3099-309a, U+30a4, U+30af-30b0, U+30bf-30c0, U+30c6-30c9, U+30d2-30d4, U+30d8-30da, U+30f3, U+30fb-30fc, U+4e0b, U+4ed8, U+4f4e, U+4f7f, U+4f8b, U+4fdd, U+500b, U+5145, U+5165, U+5185, U+51fa, U+5224, U+540c, U+5728, U+5782, U+5b9f, U+5dee, U+5e73, U+5eab, U+62e0, U+6301, U+63a8, U+6570, U+65ad, U+65b0, U+65e5, U+66f4, U+6700, U+6708, U+671f, U+67b6, U+6839, U+6b21, U+6bb5, U+6c34, U+6ce8, U+6e96, U+767a, U+76f4, U+79fb, U+7a7a, U+7d9a, U+7dad, U+7dda, U+8377, U+88dc, U+9593, U+968e, U+ff08-ff09, U+ff1d; } @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 700; font-display: block; src: url(./font-2.woff2) format('woff2'); unicode-range: U+2d, U+2f-39, U+41, U+4b, U+53, U+55, U+2014, U+3001-3002, U+3042, U+3044, U+3048, U+304b-304c, U+304f-3052, U+3057-305a, U+305d-3060, U+3066-3067, U+306a-306b, U+306e-3071, U+307e, U+3081, U+3084, U+308b, U+3092, U+3099-309a, U+30a4, U+30af-30b0, U+30bf-30c0, U+30c6-30c9, U+30d2-30d4, U+30d8-30da, U+30f3, U+30fb-30fc, U+4e0b, U+4ed8, U+4f4e, U+4f7f, U+4f8b, U+4fdd, U+500b, U+5145, U+5165, U+5185, U+51fa, U+5224, U+540c, U+5728, U+5782, U+5b9f, U+5dee, U+5e73, U+5eab, U+62e0, U+6301, U+63a8, U+6570, U+65ad, U+65b0, U+65e5, U+66f4, U+6700, U+6708, U+671f, U+67b6, U+6839, U+6b21, U+6bb5, U+6c34, U+6ce8, U+6e96, U+767a, U+76f4, U+79fb, U+7a7a, U+7d9a, U+7dad, U+7dda, U+8377, U+88dc, U+9593, U+968e, U+ff08-ff09, U+ff1d; }

ノート

視覚的な問い

入荷・出庫後に在庫はどの水準へ移り、次の更新までどれだけ維持されたか。

構造

横軸は日付、縦軸は在庫数。水平線で水準の維持期間を、垂直線でイベントによる更新を示す。段差間の空白は変化を補間する区間ではなく、同じ在庫水準が継続した期間である。

架空のSKU-Aは6月1日に42個から始まり、6月12日に90個まで増え、6月21日に37個まで減少した。折れ線グラフが観測点の間を連続的に結ぶのに対し、step chartは在庫の離散的な更新時点だけを変化として扱う。数値は架空で、実在の発注判断を示さない。

在庫水準の階段推移 — 6月21日に37個まで低下

持ち帰る

全部入り

依頼文

仕様

ファイル

pattern.html

font.css

ノート

視覚的な問い

構造