#118スコア 2.5/5小売・EC

AI に小売ポイントアプリを作らせてみた — 3回手組みされた「ロイヤリティの華」が、ついに部品になった（やってみた #118）

ルート: /retail-rewards
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に小売ポイントアプリを作らせてみた — 3回手組みされた「ロイヤリティの華」が、ついに部品になった（やってみた #118）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。小売／EC toC——メンバーズアプリ（ポイント残高・会員ランク・クーポン・ポイント履歴）。

航空マイル #116・鉄道ポイント #117 に続く、小売ポイント。観測の本命——残高/ランクの「ヒーロー」が3回目の手組みになるか。

結果 — 2.5/5（連載最低）、そして 3-confirm 発火

tsc 緑・375px mobile-first・0 console error。だがスコアは連載最低の2.5——そしてそれが穴の宝庫。cold AI（群青を一度も触っていない設定）：

back-office 系の kit を消費者画面に曲げている。ポイント/ランクのヒーロー＝完全手組み。これが頭の穴。 LoyaltySummaryCard/TierCard/BalanceCard/WalletCard — 残高/ポイント/ロイヤリティ/tier の summary は一つも無い。「画面の感情の中心が全部 bespoke。唯一最大の追加。」

3回連続——航空マイル #116・鉄道ポイント #117・小売ポイント #118、別々の3人 cold AI が独立にロイヤリティ ヒーローを手組み。3回ルール発火。build した。

build — LoyaltySummaryCard（ロイヤリティ要約カード）

<LoyaltySummaryCard tone="brand"        // 塗りグラデーションのヒーロー（or "default" カード）
  meta="ハッピーズドラッグ メンバーズ"
  tier={<Badge variant="outline">ゴールド会員</Badge>}
  balanceLabel="ポイント残高" balance="3,480" unit="P"
  secondary={[{ label: "当年購入額", value: "¥86,200" }]}
  progress={{ value: 86200, max: 100000, label: "プラチナ会員まで あと ¥13,800", caption: "¥86,200 / ¥100,000" }}
  alert="200 P が 2026/06/30 に失効予定です"
  action={<Button size="lg" variant="secondary" className="w-full">会員バーコードを表示</Button>} />
  • 残高ヒーロー＋tier バッジ＋副次値＋次ランク進捗（higher-is-better・容量Meterのように赤反転しない）＋失効警告＋アクション。
  • tone="brand" = 塗りつぶしグラデーション面（from-primary→primary/80＝群青ネイビー）＝ヒーローに「華」を、ブランド token を手書きせずに。これは KeEem が望んだ「toC 温かみを一段上げる」を直接果たす（B2C 温かみ #367 の具体的前進）。"default" は素のカード。
  • #364 クローズ（PR#368・実機375pxで brand グラデーション面＋progressbar a11y[valuenow=86200/max=100000/label]＋両トーン＋0 overflow＋0 error）。

索引も直した

索引にはロイヤリティ/ポイントの項目が一つも無く、#116/#117/#118 で残高ヒーローを StatGroup/AnalyticsCard に誤誘導していた。→ 「ポイント/残高/ランクのヒーロー → LoyaltySummaryCard」を追加し、StatGroup（平らなKPI）/AnalyticsCard（トレンド）と区別。

今回 src build = LoyaltySummaryCard（3-confirm）。ListCard がクーポン/履歴で越境再発掘（「kit のこの画面で唯一本当に良いフィット」）。

学び — 弱い toC が、3つ目の universal 床を埋めた

toB で StatGroup/AmountBreakdown/ActionQueue/Gantt-segments を、toC で SeatMap/ListCard を結晶化してきた。今回 LoyaltySummaryCard は 航空・鉄道・小売 という3業種をまたぐ「準-universal な toC 床」——KeEem が #117 で「鉄道もポイント必要」と直感し、#118 の小売で3つ目が出て build に至った。toC を深掘りした6枚（#112-118）で、SeatMap と LoyaltySummaryCard という2つの大型 toC primitive を結晶化し、しかも後者は brand グラデーション面で「温かみ」にも踏み込んだ。 スコア最低の回が、一番大きな床を埋める——弱い toC は、やはり床が出る場所だった。

結晶化スコアボード（現在）

primitive状態
AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCardbuild 済
TicketStub（搭乗券/会員証）/ SegmentedControl / Gantt hour-axis各 1〜2/3

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

  • バス/タクシー toC（SeatMap 越境発掘）、会員証バーコード表示（TicketStub 2回目）、あるいは B2C 温かみ（#367・ブランド token Tailwind 化）。

試す

3回手組みされたロイヤリティの華が、その場で部品に——しかも brand グラデーションつきで。連載最低スコアが、一番大きな床を埋めた。

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AccordionAccordionContentAccordionItemAccordionTriggerBadgeBannerButtonCardCardContentCardDescriptionCardHeaderCardTitleDialogDialogContentDialogDescriptionDialogHeaderDialogTitleEmptyStateListCardMeterSeparatorTabsTabsContentTabsListTabsTriggerTag

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。