AI にタクシー需要予測を作らせてみた — 誤誘導先だった HeatmapChart が、遂に「本来の居場所」で輝いた（やってみた #146）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠タクシーの事業者向けをもう1枚⁠（配車・乗務員・営収・車両・苦情に続く6枚目）——⁠需要予測・配車最適化⁠（エリア×時間帯需要ヒートマップ・需給バランス地図・需要予測・最適化提案）。

結果 — 4/5、予測/最適化の分析系統も土台に乗った

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

⁠このライブラリの分析側が、明らかにこの画面のために作られている。⁠ 二枚看板の HeatmapChart・ChoroplethMap がほぼ無加工で乗った——消費者/取引の画面ならお荷物だった2コンポーネントが、ここで本領。

観測の核 — HeatmapChart が「誤誘導先」から「本来の居場所」へ

HeatmapChart は連載で⁠索引の誤誘導先⁠だった：#138（バス混雑）・#141（配車盤）で 予備知識ゼロの AI が「混雑/状態盤→HeatmapChart」と誘導され、私は索引を是正した（#389/#393：混雑ピルは Badge・状態盤は StatusBoard・⁠HeatmapChart はそれじゃない⁠）。

そして #146 で——予備知識ゼロの AI が HeatmapChart を⁠正しい用途⁠で使った：

「⁠HeatmapChart＝遂に完璧な居場所。data {x,y,value}＋xLabels/yLabels が エリア(行)×時間帯(列)に1:1。色の強度は自動・onCellSelect でセルの詳細・セルが <button> で aria-label/aria-pressed・docstring の『曜日×時間帯の強度』そのもの（曜日→エリアに替えただけ）。⁠」

⁠索引の是正の答え合わせ⁠：HeatmapChart を「混雑ピル/状態盤」から⁠遠ざけた⁠のは正しく、かつ HeatmapChart は「⁠値を色で塗るマトリクス⁠（エリア×時間帯の強度）」という本来の用途で完璧に効く。⁠誤誘導を直すことは、正しい用途を否定しない。⁠ コンポーネントの守備範囲を「ここではない」と「ここだ」の両側から確定して、初めて索引は正確になる。ChoroplethMap（需給の地図＋ランキング）も「意外な当たり」で適合。

拾った点 — 信頼区間の帯だけ置き場所が無い

予備知識ゼロの AI「⁠唯一 居場所が無いのは信頼区間の帯。LineChart は2系列の『間』を塗る概念が無い（複数系列＋水平の referenceValue 線はあるが帯は無い）。上限/下限を muted な系列2本で擬似的に作ったが本物の帯でない（間が塗られず4系列は雑然）。area の variant は各系列をベースラインまで塗るだけで系列の間ではない。⁠」

→ #400 を課題に記録：⁠LineChart の帯モード or AreaRangeChart⁠（{label,value,lower,upper}→線＋下限上限の帯）。⁠予測±信頼区間/実績のレンジ/最小-最大の帯⁠ という予測系の頻出の形で、唯一 置き場所が無い。ヒートマップ/地図の⁠色スケールの凡例⁠（薄い→濃いキーを毎回手組み）も併記。

⁠今回 src の新規コンポーネントなし⁠（4/5・HeatmapChart が本来の居場所で実証・ChoroplethMap 適合・信頼区間の帯を課題に記録）。

学び — 「守備範囲は『ここでない』と『ここだ』の両側から確定する」

HeatmapChart の旅は、コンポーネントの守備範囲を確定する完全な事例：

• #138/#141：⁠誤誘導⁠（混雑/状態盤に当てられる）→ 索引で「ここでない」と否定。
• #146：⁠正しい用途⁠（エリア×時間帯の強度）→ ここで「ここだ」と肯定。

⁠欠落を直す（StatusLevel/StatusBoard を作る）ことと、既存コンポーネントの正しい用途を見つけることは、同じ守備範囲の確定の両面。⁠ HeatmapChart は1つも変えていないが、その「居場所」は #138→#146 の3画面で完全に地図化された——どこでないか（混雑/盤）、どこか（強度のマトリクス）。⁠コンポーネントを作らなくても、守備範囲を両側から確定させることはコンポーネント化の一種。⁠

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

…Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge 進行中：AreaRange/信頼区間の帯・DesktopPageHeader 4回目・CaseTable/Leaderboard(DataTable ひな形)・BottomActionBar 3/3

📋 タクシー進捗

• 🚕 ⁠タクシー：事業者向け 6枚（配車/乗務員/営収/車両/苦情/需要予測）⁠ ／ 利用者向け 0枚

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

• タクシーを締めるなら残りは ⁠利用者向け（配車アプリ）⁠。or 事業者向けはこれで十分なら次へ。⁠※どれに進むかは、次回までに決める。⁠

試す

• ⁠gunjo.jp⁠ ／ ⁠ヒートマップ HeatmapChart⁠ ／ ⁠コロプレス地図 ChoroplethMap⁠ ／ ⁠デルタ Delta⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#145
• ⁠GunjoUI by UIXHERO⁠

誤誘導先だった HeatmapChart が、エリア×時間帯の強度という本来の居場所で輝いた——守備範囲は「ここでない」と「ここだ」の両側から確定して初めて正確になる。