AI に在庫引当を作らせてみた — 画面まるごと「別業界で作ったコンポーネント」で組み上がった（やってみた #69）
/shipping-allocation375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に在庫引当を作らせてみた — 画面まるごと「別業界で作ったコンポーネント」で組み上がった（やってみた #69）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。製造6枚目・製造シリーズ最終——出荷 / 在庫引当（受注vs在庫引当 × 欠品 × 安全在庫 × ピッキング/出荷指示）。
製造の6枚目（最終）は出荷の在庫引当。受注に在庫を割り付け、欠品を見つけ、出荷を切る画面。製造シリーズ最高点 4.5/5——そしてプロジェクトの主題が完全に実証された回だった。
結果 — 4.5/5（製造6枚で最高）
tsc/build 緑・console 0・375px・受注一覧（引当状況 ○◐●▲＝色非依存）・受注vs在庫vs安全在庫・引当 Sheet（ライブ再計算）・欠品サマリ・scan-to-release。
今回の主題 — 画面まるごと「別業界で育てたコンポーネント」で組み上がった
予備知識ゼロの AI が在庫引当を組むのに使ったコンポーネントは、ほぼ全部 他業界のために作ったものだった:
-
Meter(倉庫充填) → 受注vs在庫。target=安全在庫ライン＋incoming=引当プレビューで「引当後どうなるか（80個+120個→71%）」を自前の差分ロジックゼロで。「いちばんの見どころ、本当によく考えられた API」。-
ReferenceValue(医療ラボの H/L 判定) → 引当可能在庫 vs 安全在庫 vs 在庫切れ。flagValue(value,{low,criticalLow})＋labels上書きで「まるで在庫のために作られたよう」。閾値の方向が素のまま。-
Delta(金融の過不足) → 欠品数量。ScanInput(POS/棚卸) → scan-to-release。SafetyBanner → 欠品アラート。
倉庫/医療/金融/POS のために作ったコンポーネントが、製造の出荷引当で骨格そのまま効いた。Meter は #65/#66/#67/#68/#69 と5回連続、別業界で実戦採用。これがこの連載の狙い——「作法の骨格を捉えたコンポーネントは業界を越える」の最終証明。
課題に記録だけ（軽微・3回ルール）
- 🟡 Meter に「満たすほど良い」方向が無い（#286・1回目）。引当カバー率（value=引当/max=受注）は満杯=good だが、既定
higher-is-worseは満杯を warning に、higher-is-betterは target 必須。direction="fill-is-good"（target 不要で満杯=success）が欲しい＝方向モデルの完成（悪い方向 / 目標つきで良い方向 / 満たすほど良い）。回避:target={max}or 明示tone。 - 🟡 同じ issue で 3分割の引当/残/欠品 の照合バー（Meter は2分割、DistributionBar は target 無）。
- 🟡 Badge が色のみ、が2回目（#276・引当状況に ○◐●▲ を手で追加）。
- 🟢 DataTable の絞り込みが単一列のテキストのみ（派生ステータスの絞り込みは自前で事前に絞る）。
学び — 製造6枚で「ライブラリは成熟した」と確かめた
製造を MES工程進捗(#64)→QC検査(#65)→OEE保全(#66)→トレーサビリティ(#67)→生産計画(#68)→出荷引当(#69) の6枚で踏破した。得点は 4.5/4/4/4/3.5/4.5。直近3枚(#67/#68/#69)は src 修正ゼロ——だが全部高得点。これが意味するのは：
小〜中のコンポーネント（Meter/ReferenceValue/Delta/ScanInput/SafetyBanner/DataTable/Timeline…）はもう揃った。
実業界の画面は、それらの組み合わせでほぼ賄える。
残る欠落は「系譜グラフ(#281)」「ガント/スケジューラ(#142)」のような大型の分野特化レイアウトコンポーネントだけ。
#69 でそれを最も鮮やかに見た——画面まるごとが「過去に別業界のために作ったコンポーネント」で組み上がり、新規 src はゼロ。デザインシステムが「作り切った」段階に入ったことの、6業界13コンポーネント横断による実証。残る大型コンポーネントは急がず、3回ルールで再出現を待って腰を据えて作る。
製造シリーズ総括（#64〜#69）
| # | 画面 | 点 | 主役の業界越え |
|---|---|---|---|
| 64 | 工程進捗 | 4.5 | RouteStops(配送)→工程ルート |
| 65 | QC検査 | 4 | ReferenceValue(臨床)→公差判定・Meter「値が大きいほど良い」を作る |
| 66 | OEE保全 | 4 | Meter を翌回AIが自力16回使用・ParetoChart を作る |
| 67 | トレーサビリティ | 4 | SafetyBanner(臨床)→リコール・初の大きな欠落=DAG |
| 68 | 生産計画 | 3.5 | Meter incoming→再計画プレビュー |
| 69 | 出荷引当 | 4.5 | 画面まるごと別業界のコンポーネントで完成 |
次回予告（やってみた #70）
- 別業界へ——教育/公共/メディアなど、製造とは全く違う領域へ。系譜#281・ガント#142 の3回目も観測。旅行は後で腰を据えて作り込む枠。
試す
まだ alpha。在庫引当の画面がまるごと別業界のコンポーネントで組み上がり、製造6枚で「ライブラリは作り切った」を確かめた回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。