AI にタクシー営収ダッシュボードを作らせてみた — チャート土台が「最も用途向けに作られている」と評された回（やってみた #143）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠タクシーの事業者向けを厚く⁠（配車・乗務員管理に続く3枚目）——⁠営収・実績ダッシュボード⁠（営業所レベルの営収分析・推移・時間帯・チャネル・乗務員ランキング）。

結果 — 4/5、チャート/アナリティクス土台が交通営収に丸ごと業界越え

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

⁠チャートと指標の 事務方向けダッシュボードとして、@gunjo/ui は、予備知識ゼロで使ってきた汎用 React UI の中で最も『用途向けに作られている』に近い。⁠ KPI の大きな見出し・目標線つき推移・時間帯バー・チャネル donut+分布バー・予算 Meter・12行ランキングを⁠ほぼ全部ライブラリのコンポーネントで⁠組めた。構造的な手組みは実質ゼロ。⁠チャートと一切手こずらなかった。⁠

これまで運輸シリーズは 運用コンソール（キュー/記録/盤）中心だったが、今回は⁠分析側＝チャート土台を初めて運輸で負荷テスト⁠。結果は全て摩擦ゼロ：

業界を越えたチャート/アナリティクス土台

• ⁠KPI の大きな見出し⁠ → AnalyticsCard+Delta（日車営収/総水揚/実車率/稼働率・前日比・稼働率低下で riskIncrease が赤）。Delta は⁠表セル内でも組み込め⁠（前日比の列）、符号ごとのトーン上書きで「予算超過/未達」も表現。「⁠ライブラリで最も設計の良い最小コンポーネント。⁠」
• ⁠営収推移⁠ → LineChart（referenceValue+referenceLabel で⁠予算/目標の破線がタダ⁠＝分析の本命）。formatValue で compact な円。
• ⁠時間帯別⁠ → BarChart vertical（ピーク帯を per-bar color で強調）。
• ⁠獲得チャネル構成比⁠ → LabeledDonutCard（中心に総水揚のカード型 donut）＋DistributionBar（1本バー）＝⁠2つの良い選択肢⁠。
• ⁠予算達成⁠ → Meter direction="fill-is-good"（容量型「満杯=悪」でなく「目標に満ちる=良」モード）。
• ⁠期間フィルタ⁠ → ToggleGroup disallowEmpty（本日/今週/今月）。

予備知識ゼロの AI「⁠汎用のチャートライブラリなら 軸/スケール/凡例/ツールチップ を自分で配線するが、ここは LineChart+referenceValue・BarChart・LabeledDonutCard・DistributionBar・AnalyticsCard・Delta・Meter(fill-is-good) が実際の営収ダッシュボードのウィジェットに1:1。期間トグルが下のデータ配列を差し替えるので、同じチャートが3つのデータセットにその場で再描画＝『データ編集コントロール』の要件も構造的に満たす。⁠」

観測の核 — 唯一の欠落＝Leaderboard/RankingTable

予備知識ゼロの AI「⁠乗務員別ランキングが唯一の本当の欠落。ランキング/リーダーボードのコンポーネントが無い。⁠ DataTable＋手組みの順位バッジ＋PersonCell＋Delta で組んだ。⁠索引すら『ランキング/リーダーボードは DataTable/ListCard』と正直に認める＝専用コンポーネントが無い。⁠ Leaderboard/RankingTable が欲しい：順位の列（メダル/数値・top3 強調）・主指標の列にバー/スパークライン・順位変動の delta・自分/優良の行のハイライト——全部手で再構築した。」

→ #395 を課題に記録。⁠売上担当・運転士・支店・代理店・商品——あらゆる事務方で普遍のランキング⁠＝1回目。ChartColor の型推論の小さな不便（点ごとの color が string に広がり as キャストが要る）も併記。

⁠今回 src の新規コンポーネントなし⁠（4/5・チャート土台の業界越え＋Leaderboard を課題に記録）。

学び — 「分析の土台は、運用の土台とは別系統で既に成熟していた」

運輸シリーズで事業者向けは 運用コンソール（DataTable/ActionQueue/SignedRecord/Meter/盤）を4モード確かめてきた。だが #143 で初めて⁠分析の系統（LineChart/BarChart/DonutCard/DistributionBar/AnalyticsCard/Delta）⁠を運輸で負荷テストし、⁠全て摩擦ゼロ⁠。つまり群青には2つの成熟した事業者向けの系統がある：

• ⁠運用の系統⁠（監視・記録・キュー・盤）＝14業種＋4交通モードで確認済み。
• ⁠分析の系統⁠（チャート・KPI・トレンド・構成比）＝今回 運輸でも確認、汎用のチャートライブラリ以上に「描くだけ」。

残る欠落も系統別：運用側は「データの形（ボード/時間×距離）」「軸（期限）」で埋めてきた。分析側の欠落は ⁠Leaderboard（ランキング）⁠——KPI/トレンド/構成比/分布は揃うが「⁠順位づけ⁠」だけ専用コンポーネントが無い。分析の最後のピースが見えた。

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

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge 進行中：BottomActionBar 3/3接近・⁠Leaderboard 1/3⁠・StatusLevel 2/3・TransitItinerary 2/3・LineChip 2/3

📋 モード進捗

• ✈️🚆 航空/鉄道：各 事業者向け5+利用者向け6 ✅／🚌 バス：事業者向け2+利用者向け3
• 🚕 ⁠タクシー：事業者向け 3枚（配車/乗務員/営収）⁠ ／ 残り 利用者向け（呼出アプリ）

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

• ⁠タクシーの利用者向け 配車アプリ⁠（呼出・到着まで○分・料金見積・乗車・決済）＝モバイル消費者の土台の4モード目の業界越え＋リアルタイム呼出のパターン（BottomActionBar 4回目で作る合図に）。

試す

• ⁠gunjo.jp⁠ ／ ⁠アナリティクスカード AnalyticsCard⁠ ／ ⁠折れ線 LineChart⁠ ／ ⁠デルタ Delta⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#142
• ⁠GunjoUI by UIXHERO⁠

チャート土台が「予備知識ゼロで最も用途向けに作られている」と評され、唯一の欠落はランキング——群青には 運用 と 分析 の2つの成熟した事業者向けの系統があり、最後のピースは Leaderboard。