Design Vault Search use case, structure, colour, notes /
Index Categories Tags 日本語
Back to index

Inventory Step Chart — Stock Falls to 37 Units on June 21

Axis
Inventory Step Chart — Stock Falls to 37 Units on June 21
140 100

1920 × 1080 Seen as a design

Take it with you

Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.

Everything

step-chart-inventory-level-events-everything.md

Everything in this panel, including the contents behind each URL, in one Markdown file

Prompt

1.1 KB 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 100 right 140 bottom 100 left 140

## Type (px against a 1920px canvas)
title  46px / 700 / tracking 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

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #1C8C79 / #A85A2E

## Constraints — dropping these breaks it
- 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.

Replace the content with [your content]. Keep the measurements and colours as given.
For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/step-chart-inventory-level-events/pattern.html.

Spec

1.4 KB

/ai/designs/step-chart-inventory-level-events.json 

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.

Files

pattern.html

6.8 KB

/designs/step-chart-inventory-level-events/pattern.html — The artboard itself, font subset included — open it and this picture draws.

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

font.css

3.1 KB

/designs/step-chart-inventory-level-events/font.css — Not in Everything

Show contents 
/* 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;
}

Notes

視覚的な問い

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

構造

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

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