AI に実地棚卸を作らせてみた — 同じ小売でも、レジと真逆の画面で欠落を探す（やってみた #43）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。小売2枚目——⁠実地棚卸⁠（理論在庫 vs 実地カウント vs 差異の照合・ロケーション別・バーコード・差異理由・棚卸資産）。

「1業界は最低3〜5枚・可能な限り違う内容・業界特有UIを最優先」という方針で、#42 レジ会計（売る側）と⁠真逆⁠の画面を選びました——バックヤードの在庫オペレーション。売上でなく、数えて照合する。

結果 — 4.5/5

tsc/build 緑・console 0・375px（ハンディ端末想定）でカード化・差異が符号+矢印+色+sr-only で表現・差異理由が必須で、未入力だと確定ブロック・h1 1個。

この回も — 金額/フォームのコンポーネントが、真逆の画面でも全採用

レジと内容が真逆でも、育てたコンポーネントがそのまま効きました:

• ⁠EditableDataTable(#199) — 無改造で使った。いちばん合う。これがまさに照合グリッドだ。⁠ 理論在庫(読み取り専用)・実地カウント(編集)・差異(自動計算)・差異理由(Select)・getRowError・自動でモバイル card 化。
• ⁠RevealSection(#213) — 無改造で使った。⁠ 差異≠0 のとき、差異理由のリマインダーが role=region＋aria-live で出現、理由を埋めると消える。
• ⁠NumberInput(stepper) — 無改造で使った。⁠ value ?? undefined で「未カウント」と「0」を区別。
• ⁠formatCurrency {signed}(#180) — 11回連続。⁠ 差異金額に符号つきの ±¥（−¥5,880 原価 / −¥10,458 売価）。

src で直した不備 — Progress の読み上げ名

今回のはっきりした不備は1つ:

• 🟡 ⁠Progress に読み上げ名が無い⁠（role=progressbar＋aria-value はあるが、スクリーンリーダーには裸の％だけ・axe が弾く）→ ⁠label（→aria-label）と valueText（→aria-valuetext "完了 42/120"）を追加⁠（#219・⁠ブラウザ実証⁠）。

課題に記録だけした欠落（3回ルール未達）

• 🟠 ⁠バーコード/SKU のスキャン入力⁠（スキャン→照合→+1→読み上げ・小売の核・#220・1回目）。
• 🟠 ⁠インラインの差異/デルタ表示の最小コンポーネント⁠（±N＋矢印＋色・セルに収まる・Statistic はカード型で入らない・損益#33＋差異#43 で#221・2回目）。

学び — "違う内容" を回すと、別の欠落が出る

小売 #42 レジ会計（売る）: 釣銭/レシート/¥%割引 の欠落
小売 #43 実地棚卸（数える）: スキャン入力/差異表示/Progress の名前 の欠落

同じ業界でも⁠内容を真逆にする⁠と、共有のコンポーネント（金額/グリッド/reveal）はそのまま効きつつ、⁠その画面特有の欠落⁠（スキャン・差異表示）が新たに出ます。「1業界3〜5枚・可能な限り違う内容」は、業界の判断を立体的にするための回し方でした。金額系は横断で強い、次は小売の "操作系"（スキャン）が育つ番。

次回予告（やってみた #44）

• ⁠小売をもう1枚⁠（返品処理 or レジ締め）でスキャン・釣銭を3回目確認に近づけるか、別業界へ。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#42
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。同じ業界でも、真逆の画面で別の欠落が出た回。