AI にバスのモバイルIC画面を作らせてみた — バスが完走、4モード目（やってみた #158）
/bus-ic375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にバスのモバイルIC画面を作らせてみた — バスが完走、4モード目（やってみた #158）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。バスの利用者向け 最後の1枚（接近#138・高速予約#139・経路#140・乗車券#156・運行情報#157 に続く6枚目）——モバイルIC・残高チャージ・利用履歴（残高の大きな見出し・チャージ・オートチャージ・利用履歴・バス特典）。これで 事業者向け5+利用者向け6 対称＝バス完走。
まず — バスが完走（航空・鉄道・タクシーに並ぶ4モード目）
バスの事業者向け（運行#136/配車#137/計画#153/営収#154/安全#155）+ 利用者向け（接近#138/高速予約#139/経路#140/乗車券#156/運行情報#157/IC#158）が 事業者向け5+利用者向け6 で対称に。航空（事業者向け5+利用者向け6）・鉄道（事業者向け5+利用者向け6）・タクシー（事業者向け6+利用者向け6）に並ぶ4モード完成。残るは🚚トラックのみ。
結果 — 4/5、ウォレットには最適な領域
tsc 緑・375px mobile-first。予備知識ゼロの AI（群青を一度も触っていない設定）：
これは渡され得る中で最高に相性の良い領域だった。 交通系IC ウォレットは、まさにこれらのコンポーネントが作られた用途。LoyaltySummaryCard の JSDoc は文字通り「鉄道 IC/ポイント」「IC残高」を名指しする。欠落は1か所——日付でグループ化した取引履歴。
観測の核1 — IC残高の大きな見出しと SegmentedControl 再検証
-
LoyaltySummaryCard（#118 で作った）＝IC残高の大きな見出しに、これのために作られた・予備知識ゼロの AI「doc が IC残高 を名指し・balance＋meta(カード名/下4桁)＋tier(定期一体)＋secondary(定期区間/最終利用)＋progress(バス特典)＋alert・全ての残高見出しのニーズに名前付きの差込口があった・ゼロ摩擦」。 -
SegmentedControl（#156 で作った）＝2回連続の自力発見の検証・設定（オートチャージのしきい値/金額）で使用。ただしチャージ金額の5択には RadioCard に正しく切替＝予備知識ゼロの AI「SegmentedControl の docstring が『2-4 が適量』と言う・375px で5等幅セグメントは ¥10,000 を潰す・RadioCard の2列グリッドが正解」＝docstring の 2-4 の指針が効いて誤用を防いだ（コンポーネントが自分の境界を採用者に正しく伝えた）。
観測の核2 — TransactionList/Ledger（台帳）が2回目
日付でグループ化した利用履歴——これが唯一の手組みだった：
予備知識ゼロの AI「日付グループ/SectionList/取引リストのコンポーネントが無い。index を見たが List/ListCard/Timeline/MetadataList/DataTable どれも『日でグループ化し sticky な日付ヘッダ』をしない。索引は Transaction History を DataTable か ListCard に誘導するが、どちらもグルーピングを丸投げする。Map<date,Txn[]> を手組みした。しかも符号付き金額＋取引後残高 が ListCard の差込口に合わず、符号付き金額を status に押し込んだ（用途外・sr-only で入金/利用 を付与し符号が色だけに依存しないように）。日付グループ＋符号付き金額＋残高推移 を持つ TransactionList/LedgerList が、ウォレット画面でライブラリに欠けている最重要のコンポーネント。」
SectionList/GroupedList は タクシー#149（月別乗車履歴）でも手組み済＝2/3（#404）。#158 は仕様を鋭くした：グループ化した行+小計だけでなく、ウォレット/IC/銀行/経費 のリストは符号付きの入出金（色だけに非依存）＋残高推移が要る。索引も誤誘導（Transaction History→DataTable/ListCard でグループ化しない）。あと1回で作る。
学び — 「完走」は4回繰り返すと型になる
航空・鉄道・タクシー・バスと4モード完走して、完走の型が固まった：
- 事業者向けを業種の事務方として 5-6 枚（指令/運行・乗務員・車両・営収・安全・計画…）。
- 利用者向けを消費者フローとして 5-6 枚（案内・予約・履歴・サポート・会員・IC…）。
- 事業者向けと利用者向けを対称に（弱い側 利用者向けを必ず事業者向けと同じだけ掘る）。
そして4モード目（バス）の完走で、新しいコンポーネントはもうほとんど出ない——出たのは TransactionList(2/3)・ValidityTimer(1/3) など「あと一押し」のストックだけ。#155-157 で Leaderboard/SegmentedControl/LineChip を放出し切ったので、4モード目の終盤はほぼ②検証（LoyaltySummaryCard/SegmentedControl の自力発見）になった。これは土台が成熟した証拠＝新モードを完走しても欠落がほぼ出ない＝コンポーネント化が一巡した。残るトラックは「本当に新しい欠落が出るか／既存土台で足りるか」の最終テストになる。
拾った点
- 🟡 TransactionList/LedgerList（日付グループ＋符号付き金額＋残高推移）＝#404 2/3。
- 🟡 LoyaltySummaryCard の
alertを中立な脚注に流用（脚注の差込口が欲しい）・Toast API がshowToast(message,type)でtoast({title,description})を期待した採用者を驚かせた＝#404 に併記。 - ✅ LoyaltySummaryCard/SegmentedControl/RadioCard/AmountBreakdown/Switch/StatGroup/BottomActionBar 全て これのために作られた か ゼロ摩擦。
今回 src の新規コンポーネントなし（4/5・バス完走・LoyaltySummaryCard/SegmentedControl 検証・SectionList 2/3）。
📊 コンポーネント化スコアボード（作成済 18個）
…Gantt(日中モード) / Leaderboard / SegmentedControl / LineChip 進行中：SectionList/TransactionList(2/3)・ValidityTimer(1/3)・ComparisonTable・Statistic tone/icon
📋 モード進捗 — 4モード完走
- ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス ✅（事業者向け5+利用者向け6 完走）
- 🚚 トラック：未着手（5モード目・最後）
次回予告（やってみた #159）
- トラック配送（新モード・最後） を 事業者向け→利用者向け で、or 既存モードの深掘り。※次回までに決める。
試す
- gunjo.jp ／ ロイヤリティ LoyaltySummaryCard ／ セグメント切替 SegmentedControl ／ 金額内訳 AmountBreakdown ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#157 - GunjoUI by UIXHERO
バスが完走して4モード目——「完走」は4回繰り返すと型になる。事業者向けを 5-6 枚、利用者向けを 5-6 枚、対称に。そして4モード目の完走では、新しい欠落はもうほとんど出ない。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。