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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青を一度も見たことのない AI に実際の画面で組ませていく連載。今回は⁠小売／EC の利用者向け⁠——⁠会員アプリ⁠（ポイント残高・会員ランク・クーポン・ポイント履歴）。

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

結果 — 2.5/5（連載で最低）。そして「3回確認」が成立

型チェックも通り、スマホ幅で、エラーもゼロ。でも⁠点数は連載で最低の 2.5⁠——そして⁠それが"足りないコンポーネント"の宝庫⁠でした。群青を一度も触っていない AI の感想：

⁠事務方向けのコンポーネントを、消費者向け画面に無理に曲げて使っている⁠。⁠ポイント/ランクの主役ブロック＝完全に手作り。これが一番の"足りないコンポーネント"。⁠ 残高・ポイント・会員ランクをまとめて見せるコンポーネントが一つも無い。「画面の"顔"になる部分が全部その場しのぎの手作り。⁠追加すべき一番大事なもの。⁠」

⁠3回連続⁠——航空マイル #116・鉄道ポイント #117・小売ポイント #118 で、⁠別々の3つの予備知識ゼロの AI が、それぞれ独立に「会員情報の主役ブロック」を手作り⁠しました。「3回確認」成立。⁠作りました。⁠

作った — 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>} />

• 残高の主役表示＋会員ランクのバッジ＋補助の数値＋⁠次のランクまでの進捗⁠（多いほど良い＝残量メーターのように赤くならない）＋失効の警告＋操作ボタン。
• ⁠tone="brand" にすると、群青のグラデーションで塗った華やかな面⁠になります（色を手書きしなくても、主役表示に"華"が出る）。これは「利用者向け画面の温かみを一段上げたい」という狙い（#367）を直接前に進めるもの。"default" は素のカードです。
• #364 クローズ（PR#368・実機スマホ幅で群青グラデーション面＋進捗バーのスクリーンリーダー対応＋両方の見た目＋はみ出し0＋エラー0）。

docs のコンポーネント検索も直した

docs のコンポーネント検索にはポイント/会員ランクの項目が一つも無く、#116/#117/#118 で残高の主役表示を StatGroup/AnalyticsCard に誤って誘導していました。→ 「ポイント/残高/ランクの主役表示 → LoyaltySummaryCard」を追加し、StatGroup（並んだ数値）/AnalyticsCard（推移グラフ）と区別しました。

⁠今回コードで作ったのは LoyaltySummaryCard⁠（「3回確認」成立）。⁠ListCard もクーポン/履歴で、業界を越えて再び使われました⁠（AI 曰く「この画面で唯一、本当にぴったり合ったコンポーネント」）。

学び — 点数の低い利用者向け回が、3つ目の「どの業界でも使えるコンポーネント」を生んだ

事業者向けで StatGroup/AmountBreakdown/ActionQueue/Gantt を、利用者向けで SeatMap/ListCard をコンポーネント化してきました。今回の LoyaltySummaryCard は、⁠航空・鉄道・小売の3業種をまたぐ「ほぼどの利用者向け画面でも使える基本コンポーネント」⁠——#117 で「鉄道もポイントが要る」と読んだ直感が当たり、#118 の小売で3つ目が出て、作るに至りました。

⁠利用者向けを深掘りした6枚（#112〜118）で、SeatMap と LoyaltySummaryCard という2つの大きなコンポーネントを作り、しかも後者は群青のグラデーション面で「温かみ」にも踏み込みました。⁠ 点数が最低の回が、一番大きな"足りないコンポーネント"を埋める——点数の低い利用者向け回は、やはり足りないコンポーネントが見つかる場所でした。

これまでに群青へ加わったコンポーネント（現在）

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

• バス/タクシーの利用者向け（SeatMap が別業界で自力発見されるか）、会員証バーコード表示（TicketStub 2回目）、または利用者向けの温かみ（#367）。

試す

• ⁠gunjo.jp⁠ ／ ⁠LoyaltySummaryCard⁠ ／ ⁠ListCard⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• ⁠GunjoUI by UIXHERO⁠

3回手作りされた「会員情報の主役カード」が、その場でコンポーネントに——しかも群青のグラデーションつきで。連載で最低の点数が、一番大きな"足りないコンポーネント"を埋めた回でした。