小売・ECのコールドテスト — POS・棚卸・レジ締め・返品・入荷・メンバーズ

なぜ小売・EC UIは難しいのか

小売は「同じレジ画面」のように見えて、売る・数える・締める・巻き戻す・受け入れるで作法が全く別です。POS は税率別内訳と現金不足のブロック、棚卸は理論在庫との差異検出、レジ締めは金種別実査と過不足、返品は逆取引と払戻テンダーの整合、入荷検品はバーコードスキャンと発注照合。どれも「タブレットや端末の前で立ち作業をする人」の手触りに耐える必要があります。後半の toC ロイヤリティ（航空マイル・鉄道ポイントに続く3つ目）では、残高/ランクの主役ブロックの手組みが3回目に到達し、LoyaltySummaryCard がコンポーネント化しました。

ここで群青に加わったコンポーネント

小売7枚で実装に到達したコンポーネントと、後段の医療や物流に効いた汎化シードです。

• ScanInput#46

  バックヤード入荷検品で形になったバーコードスキャン入力。後の医療3点認証（ScanGate）の祖型でもある。

• LoyaltySummaryCard#118

  残高・ランク・特典を主役ブロックに圧縮できる消費者向けカード。航空マイル（#116）・鉄道IC（#117）に続いて #118 で 3回確認を満たし実装。

• POS pattern#42

  税率別内訳・現金不足ブロック・タブレット375px のカードレイアウトという POS 固有の作法を群青のキャンバスで組み立てた最初の証拠。

• EditableDataTable#43

  実地棚卸の理論在庫×実数の差異検出。会計のインライン編集グリッドが棚卸でもそのまま効いた。

ScanInput はこの後、物流の picking / put-away / shipping、医療の与薬3点認証まで、業界の壁を越えて再利用され続けています。LoyaltySummaryCard は鉄道IC・航空マイル・タクシー会員でも自宅扱いのコンポーネントになりました。

小売・EC の全ラウンド

小売・EC カテゴリの 7 画面を、ラウンド順に並べています。各カードから cold AI が組んだソース、解説記事、デスクトップ／モバイルのプレビューに飛べます。

#31スコア 4/5

AI に EC 商品詳細ページを作らせてみた — 「足りないかも」と思ったトーストが、逆に絶賛された（やってみた #31）

/product

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。EC（物販）は #1〜#30 で一度も触っていない、まったく新しい画面の種類です。

#42スコア 4.5/5

AI に POS レジ会計を作らせてみた — 金額系のコンポーネントが、また別業界（小売）でゼロ摩擦だった（やってみた #42）

/pos

`tsc`/`build` 緑・console 0・375px（タブレットレジ想定）でカードレイアウト・税率別内訳が正確・現金不足で会計ブロック・h1 1個。

#43スコア 4.5/5

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

/stocktake

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

#44スコア 4/5

AI にレジ締めを作らせてみた — 「過不足」を3回見たので、ついにコンポーネントを作る（やってみた #44）

/register-close

「1業界は最低3〜5枚・可能な限り違う内容・業界特有UIを最優先」という方針。#42 レジ会計（売る）、#43 実地棚卸（数える）に続いて、今回は **締める**——一日の終わり、ドロワーを数えて理論残高と突き合わせ、レジを締める作法。売上を立てる画面でも、在庫を数える画面でもない、**現金照合の画面**。

#45スコア 4.5/5

AI に返品処理を作らせてみた — 前回作ったコンポーネントを、次の予備知識ゼロの AI が自分で見つけて全面採用した（やってみた #45）

/returns

「1業界は最低3〜5枚・可能な限り違う内容・業界特有UIを最優先」という方針。#42 売る・#43 数える・#44 締める に続いて、今回は **巻き戻す**——売った取引を逆にたどる、取引の取り消し。同じ小売でも、レジ会計とも棚卸とも締めとも違う作法。

#46スコア 4.5/5

AI に入荷検品を作らせてみた — 3回見たスキャンをコンポーネントに、前回の2つも複利で返ってきた（やってみた #46）

/receiving

「1業界は最低3〜5枚・可能な限り違う内容・業界特有UIを最優先」という方針。#42 売る・#43 数える・#44 締める・#45 巻き戻す に続いて、今回は **受け入れる**——納品をバックヤードで検品して在庫に計上する、入荷の物流。小売5枚目で、ようやく業界の判断が立体的に見えてきました。

#118スコア 2.5/5

AI に小売のポイントアプリを作らせてみた — 3回手作りされた「会員情報の主役カード」が、ついにコンポーネントになった（やってみた #118）

/retail-rewards

航空マイル #116・鉄道ポイント #117 に続く、小売ポイント。今回の見どころは——**残高やランクを見せる「主役ブロック」が、3回目の手作りになるか**です。

この業界が gunjo に残したもの

小売は、「スキャン×照合」を扱うすべての画面のキャンバスと、消費者向けロイヤリティの主役ブロックを群青に残しました。ScanInput は元はバックヤードの入荷検品から来たコンポーネントが、医療の患者リストバンド3点認証まで滑らかに使い回されています。LoyaltySummaryCard は残高 / ランク / 特典を一つの主役ブロックに圧縮できる消費者向けのキャンバス。「業界専用」と思った形が、たいてい業界を越える──それを最初に強く示した業界です。