AI にバスの路線収支ダッシュボードを作らせてみた — チャートの土台がバス財務に完全に業種を越えて再利用、Leaderboard が2回目（やってみた #154）
/bus-revenue375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にバスの路線収支ダッシュボードを作らせてみた — チャートの土台がバス財務に完全に業種を越えて再利用、Leaderboard が2回目（やってみた #154）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。バスの事業者向けを厚く（運行#136・配車#137・計画#153 に追加）——営収・路線収支ダッシュボード（系統別収支・営業係数・乗車人員・補助金・費用内訳）。経営企画/営業所長向けの情報密度ダッシュボード。
結果 — 4/5、チャートの土台がバス財務に完全に業種を越えて再利用
tsc 緑・デスクトップ情報密度・可変データ駆動のチャート。予備知識ゼロの AI（群青を一度も触っていない設定）：
このライブラリは明らかに日本の財務/運用コンソール向けに作られている。 ソース自体の語彙が証拠——
Deltaの既定ラベルは増加/減少、formatCurrencyは JPY/ja-JP 既定、AmountBreakdownの例は 請求/見積/査定/精算、ActionQueueは 重大/警告/情報/通常。戦うのでなく組み立てるだけだった。
観測の核1 — チャートの土台がバス財務に完全に業種を越えて再利用（静的化ゼロ）
路線バスの財務は独特だ：多くの系統が赤字（営業係数 >100）で補助金頼み、系統ごとの黒字赤字こそが全て。その情報密度の高いダッシュボードが、ほぼ全部ライブラリのコンポーネントで組めた：
- StatGroup（KPI 行）＝営収/営業係数/乗車人員/補助金/経常損益・
hint第3行が有用＝最良適合。 - LineChart（area）＝損益推移・
referenceValueで平均費用線・可変な月次データ駆動で SVG 手組みゼロ。 - LabeledDonutCard＝費用内訳（人件費/燃料費/車両費）＝donut+中心合計+セグメント別 callout が1コンポーネント。
- DataTable + Delta + Meter＝系統別収支・損益 Delta・営業係数の Meter をセル内に埋め込み。
- ActionQueue＝要対応（営業係数悪化・補助金頼み・乗車減）＝深刻度ソート。
予備知識ゼロの AI「チャート/分析の層はライブラリの本拠地。LineChart/LabeledDonutCard/StatGroup/Delta/ActionQueue/DataTable が全て 摩擦ゼロ・可変なデータ配列で駆動・静的や装飾での描画を強いる物はゼロ。」#153 で運行図表(Stringline)、#154 で財務のチャート土台——バスの事業者向けを厚くするほど、既存の土台が業種を越えることが確認されていく。
観測の核2 — Leaderboard が2回目（タクシー→バス で 2/3）
収支の順位（上位/下位の系統）——Leaderboard を当てたい。だが：
予備知識ゼロの AI「順位/番付のコンポーネントが無い。
ParetoChart(ABC 累積%)は上位vs下位の番付ではない。順位ピル+営業係数+損益 の<ol>を Card 内に手組みした。構造のある UI を唯一ゼロから書いた所。追加価値が最も高いのは順位/番付のコンポーネント。」
→ Leaderboard は今 2/3（タクシー #143 売上ランキング → バス #154 系統別収支ランキング）＝#395。索引が能動的に誤誘導する点も再確認：ParetoChart を「Rankings」に挙げるが Pareto≠上位/下位＝採用者は無理に当てて詰まる。あと1回の目撃で作る。
観測の核3 — 「低いほど良い」指標にコンポーネントの意味づけが無い
営業係数は低いほど良い・>100 で赤字という反転指標。だが：
予備知識ゼロの AI「
Statisticは trend から tone を推論(up=positive)＝営業係数では逆・手で trend/tone を上書き。Meterは higher-is-worse/better はあるが『低いほど良い＋絶対閾値100』モードが無く、閾値マーカーも max に対する比率で絶対値でない・100−(k−100) と値を反転させて bar を『良い方向』に充填した＝その計算はコンポーネントでなく自分のもの。」
→ #412 を課題に記録：Statistic に goodWhen:"lower"／Meter に絶対 threshold。コスト率・不良率・離脱率・遅延率・CPA——低いほど良い指標は財務/運用に頻出。DataTable rowTone（赤字行を色付けできない＝getRowState で data-state="loss" は付くが table が data-[state=selected] しか装飾せず）も #412 に併記。
学び — 「業種越えの確認」はモードを厚くするほど増える
#153 で「このテストには欠落の2つの閉じ方（①その場で作る ②過去に作ったものの検証）がある」と書いた。バスの事業者向けを厚くする作業は、ほぼ②の連続だ：
- #153＝Stringline（運行図表）の別業種での確認。
- #154＝チャートの土台（LineChart/Donut/StatGroup/Delta/ActionQueue/DataTable）の別業種での確認。
新モードの事業者向けを厚くするのは「新しい欠落を掘る」より「既に作った土台が、この業種でも本当に嵌まるか確かめる」意味が大きい。そして稀に、その業種特有の残った欠落が出る（#154 なら Leaderboard 2/3・反転指標・rowTone）。土台が成熟するほど、新画面は②検証が主・①その場で作るのは業種特有の薄い欠落だけ——連載の定常状態だ。
今回 src の新規コンポーネントなし（4/5・チャート土台の別業種での確認・Leaderboard 2/3・反転指標/rowTone を課題に記録）。
📊 コンポーネント化スコアボード（作成済 15個 + Gantt 日中モード）
…Stringline / StatusBoard / ExpiryBadge / BottomActionBar / Gantt(日中モード) 進行中：Leaderboard(2/3)・SegmentedControl(3回超)・ReferralCard・ComparisonTable・反転指標
📋 モード進捗 — バスの事業者向け 厚く（事業者向け4）
- ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス：事業者向け4（運行#136/配車#137/計画#153/営収#154）+利用者向け3
- 🚚 トラック：未着手
次回予告（やってみた #155）
- バスの事業者向けをさらに（車両管理・車検／苦情・事故・安全 等）で鉄道航空タクシー(5-6)へ対称、or トラック新モード。※次回までに決める。
試す
- gunjo.jp ／ 折れ線 LineChart ／ ドーナツ LabeledDonutCard ／ KPI StatGroup ／ 差分 Delta ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#153 - GunjoUI by UIXHERO
チャートの土台がバス財務に完全に業種を越えて再利用された——モードを厚くするのは新しい欠落を掘るより、作った土台がこの業種でも嵌まるか確かめること。Leaderboard はあと1回で作る。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。