#154スコア 4/5運輸：バス

AI にバスの路線収支ダッシュボードを作らせてみた — chart床がバス財務に完全越境、Leaderboard が2回目（やってみた #154）

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

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

解説記事

AI にバスの路線収支ダッシュボードを作らせてみた — chart床がバス財務に完全越境、Leaderboard が2回目（やってみた #154）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。バス toB を厚く（運行#136・配車#137・計画#153 に追加）——営収・路線収支ダッシュボード（系統別収支・営業係数・乗車人員・補助金・費用内訳）。経営企画/営業所長向けの情報密度ダッシュボード。

結果 — 4/5、chart床がバス財務に完全越境

tsc 緑・デスクトップ情報密度・可変データ駆動のチャート。cold AI（群青を一度も触っていない設定）：

このキットは明らかに日本の財務/ops コンソール向けに作られている。 ソース自体の語彙が証拠——Delta の既定ラベルは増加/減少、formatCurrency は JPY/ja-JP 既定、AmountBreakdown の例は 請求/見積/査定/精算、ActionQueue は 重大/警告/情報/通常。戦うのでなく組み立てるだけだった。

観測の核1 — chart床がバス財務に完全越境（static 化ゼロ）

路線バスの財務は独特だ：多くの系統が赤字（営業係数 >100）で補助金頼み、系統ごとの黒字赤字こそが全て。その情報密度の高いダッシュボードが、ほぼ全部キット部品で組めた：

  • StatGroup（KPI 行）＝営収/営業係数/乗車人員/補助金/経常損益・hint 第3行が有用＝最良適合。
  • LineChart（area）＝損益推移・referenceValue で平均費用線・可変な月次データ駆動で SVG 手組みゼロ。
  • LabeledDonutCard＝費用内訳（人件費/燃料費/車両費）＝donut+中心合計+セグメント別 callout が1部品。
  • DataTable + Delta + Meter＝系統別収支・損益 Delta・営業係数 inline Meter をセル内に。
  • ActionQueue＝要対応（営業係数悪化・補助金頼み・乗車減）＝severity ソート。

cold AI「chart/analytics 層はキットの本拠地。LineChart/LabeledDonutCard/StatGroup/Delta/ActionQueue/DataTable が全て zero-friction・可変データ配列駆動・static や装飾レンダリングを強いる物はゼロ。」#153 で運行図表(Stringline)、#154 で財務 chart床——バス toB を厚くするほど、既存床の越境が確認されていく。

観測の核2 — Leaderboard が2回目（taxi→bus で 2/3）

収支ランキング（best/worst 系統）——Leaderboard を当てたい。だが：

cold AI「ranking/leaderboard 部品が無い。ParetoChart(ABC 累積%)は best-vs-worst の番付ではない。rank ピル+営業係数+損益 の <ol> を Card 内に手組みした。構造UIを唯一ゼロから書いた所。追加価値が最も高いのは ranking/leaderboard 部品。」

→ Leaderboard は今 2/3（taxi #143 売上ランキング → bus #154 系統別収支ランキング）＝#395。索引が能動的に誤誘導する点も再確認：ParetoChart を「Rankings」に挙げるが Pareto≠best/worst＝adopter は無理に当てて詰まる。あと1回の目撃で build。

観測の核3 — 「good-when-low」指標に部品の意味論が無い

営業係数は低いほど良い・>100 で赤字という反転指標。だが：

cold 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——good-when-low は財務/ops に頻出。DataTable rowTone（赤字行を tint できない＝getRowState で data-state="loss" は付くが table が data-[state=selected] しか styling せず）も #412 に併記。

学び — 「越境の確認」はモードを厚くするほど増える

#153 で「cold-test には穴の2つの閉じ方（①build ②過去 build の検証）がある」と書いた。バス toB を厚くする作業は、ほぼ②の連続だ：

  • #153＝Stringline（運行図表）の越境確認。
  • #154＝chart床（LineChart/Donut/StatGroup/Delta/ActionQueue/DataTable）の越境確認。

新モードの toB を厚くするのは「新しい穴を掘る」より「既に build した床が、この業種でも本当に嵌まるか確かめる」意味が大きい。そして稀に、その業種特有の残った穴が出る（#154 なら Leaderboard 2/3・inverted-metric・rowTone）。床が成熟するほど、新画面は②検証が主・①build は業種特有の薄い穴だけ——連載の定常状態だ。

今回 src build なし（4/5・chart床越境確認・Leaderboard 2/3・inverted-metric/rowTone 起票）。

📊 結晶化スコアボード（build 済 15個 + Gantt-intraday）

…Stringline / StatusBoard / ExpiryBadge / BottomActionBar / Gantt(intraday) 進行中：Leaderboard(2/3)・SegmentedControl(3回超)・ReferralCard・ComparisonTable・inverted-metric

📋 モード進捗 — バス toB 厚く（toB4）

  • ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス：toB4（運行#136/配車#137/計画#153/営収#154）+toC3
  • 🚚 トラック：未着手

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

  • バス toB をさらに（車両管理・車検／苦情・事故・安全 等）で鉄道航空タクシー(5-6)へ対称、or トラック新モード。※KeEem に確認。

試す

chart床がバス財務に完全越境した——モードを厚くするのは新しい穴を掘るより、build した床がこの業種でも嵌まるか確かめること。Leaderboard はあと1回で build。

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

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

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

ActionItemActionQueueBadgeCardCardContentCardDescriptionCardHeaderCardTitleColumnDefContainerDataTableDeltaLabeledDonutCardLineChartMeterPageHeaderSeparatorStatGroup

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

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