AI にバスの安全・事故管理コンソールを作らせてみた — Leaderboard が3回目でコンポーネント化、その場で作った（やってみた #155）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠バスの事業者向けを 事業者向け5 へ⁠（運行#136・配車#137・計画#153・営収#154 に追加＝鉄道航空と対称に）——⁠運輸安全マネジメント・事故/苦情管理⁠（事故・インシデント・ヒヤリハット・苦情・有責無責・営業所別安全指標・事故報告承認・再発防止）。安全管理者向けの情報密度コンソール。

結果 — 4.5/5、そして Leaderboard が3回目でコンポーネント化

tsc 緑・デスクトップ情報密度。予備知識ゼロの AI（群青を一度も触っていない設定）：

⁠このライブラリは明らかにこの種の日本の事務方/運用コンソール向けに作られている。⁠ 画面のほとんどが実コンポーネントで、手組みのマークアップではない。半点減らしたのは唯一の本当の欠落——順位/番付のコンポーネントが無い——と細かな使い勝手。

観測の核 — Leaderboard が3回目（3回確認に到達）→ その場で作る

営業所別/系統別の安全指標ランキング（悪い順＝要対応の並び）——Leaderboard を当てたい。だが：

予備知識ゼロの AI「⁠これが本当の欠落。順位/番付のコンポーネントが無い。index を grep しても rank/leaderboard は無い。{rank,label,value,delta,tone}[] を悪い順で並べランクチップ付きの Leaderboard/RankingList があれば ~40行の手組みを置換できた。追加価値が最も高いのは順位/番付のコンポーネント。しかも /docs/by-use-case は『Ranking/Worst Performers』を StatGroup に誘導する＝誤りだ。⁠」

⁠これで Leaderboard は3回目＝3回確認が成立⁠（タクシー #143 売上ランキング → バス #154 系統別収支 → バス #155 営業所別安全指標）。⁠その場で作った⁠：

• ⁠Leaderboard⁠＝あらかじめ並べた行＋ランクチップ＋値バー（max で正規化）＋Delta。⁠並びは呼び出し側が決める⁠（良い順の上位N／悪い順の要対応）＝ランクは配列の位置＝「誰が1位か」は明示的な呼び出し側の判断・コンポーネントは並べ替えない。
• ⁠deltaTones={{positive:"destructive"}}⁠ で「上昇＝悪い」ランキング（事故率/コスト/苦情）の Delta を赤反転。
• BarChart（順位なしチャート）でも StatGroup（順序のない KPI）でもない、明確な「順位付きリスト」のコンポーネント。
• ⁠索引の誤誘導も是正⁠＝by-use-case に Leaderboard 項目を追加し、StatGroup には「順位ではない＝番付は Leaderboard」と明記。

design:verify 緑（構造の食い違い無し）・tsc・ビルド緑・ブラウザでランクチップ・バーの正規化（100%/89.4%/65.97%＝4820/4310/3180÷4820）・データの差込口を確認＝PR#413（#395 クローズ）。⁠コンポーネント化 16個目。⁠

学び — 「能動的な誤誘導」は、作る判断を早める

#150 で「索引が動かないコンポーネントに誘導するのが最悪」と書いた。Leaderboard も似た構造だった：⁠索引が『Ranking/Worst Performers → StatGroup』と誘導⁠＝StatGroup は順序のない KPI 群で番付ではない＝予備知識ゼロの採用者は StatGroup を当てて「順位が出ない」と詰まる。これは「欠落（コンポーネントが無い）」に「能動的な誤誘導（索引が間違った答えを出す）」が重なった形：

• 単なる欠落なら、採用者は手組みに向かう（実際 3回手組みされた）。
• だが索引が誤誘導すると、採用者は⁠間違ったコンポーネントを当てて時間を溶かす⁠。

だから Leaderboard は3回目で⁠コンポーネントの作成と索引の是正をセット⁠にした。⁠「コンポーネントが無い」と「索引が間違った答えを出す」は別の害⁠＝前者は手組みのコスト、後者は誤当てのコスト。両方を同じ PR で塞いだ。

拾った点（全て良好な、別業種での検証）

• ✅ ⁠ApprovalSteps が事故報告→承認→是正フローに完璧適合⁠＝予備知識ゼロの AI「⁠state enum が pending/current/approved/rejected/skipped・日本語の既定ラベル・aria-current・差戻し理由のコメント差込口まで・本物の承認ルートを見た人が作ったと信じさせるコンポーネント⁠」。
• ✅ ⁠SafetyBanner という専用コンポーネント⁠が存在（role=alert・aria-live・actions 差込口）＝安全コンソールにドンピシャ。
• ✅ ActionQueue/StatGroup/DataTable/Delta/Meter(higher-is-worse) 全て 摩擦ゼロ。
• 🟡 ⁠低いほど良い指標(#412)の2回目⁠＝事故率/ヒヤリハット(多いほど良い報告文化)の tone を手で反転＝Statistic の trend/tone 分離は正しいが「ゼロが目標」という一級の概念が無い。

⁠今回 src で作ったもの = Leaderboard（#395→PR#413）⁠。4.5/5・3回確認でコンポーネント化・索引是正。

📊 コンポーネント化スコアボード（作成済 ⁠16個⁠）

…Stringline / StatusBoard / ExpiryBadge / BottomActionBar / Gantt(日中モード) / ⁠Leaderboard⁠ 進行中：SegmentedControl(3回超)・ReferralCard・ComparisonTable・反転指標(2/3)

📋 モード進捗 — バスの事業者向け5 で鉄道航空と対称

• ✈️ 航空：事業者向け5+利用者向け6 ✅／🚆 鉄道：事業者向け5+利用者向け6 ✅／🚕 タクシー：事業者向け6+利用者向け6 ✅
• 🚌 ⁠バス：事業者向け5（運行#136/配車#137/計画#153/営収#154/安全#155）+利用者向け3⁠ ← 事業者向けが対称に・利用者向けが薄い(3)
• 🚚 トラック：未着手

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

• バスの利用者向けを厚く（事業者向け5 に対し利用者向け3＝弱い側）＝乗車券/IC/定期/運行情報 等、or トラック新モード。※次回までに決める。

試す

• ⁠gunjo.jp⁠ ／ ⁠ランキング Leaderboard⁠（新）／ ⁠承認ステップ ApprovalSteps⁠ ／ ⁠差分 Delta⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#154
• ⁠GunjoUI by UIXHERO⁠

Leaderboard が3回目でコンポーネント化した——「コンポーネントが無い」と「索引が間違った答えを出す」は別の害。手組みのコストと誤当てのコスト。両方を同じ PR で塞いだ。