AI に OEE ダッシュボードを作らせてみた — 前回直した「目標付きメーター」を、AI が自力で見つけて16回使った（やってみた #66）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠製造3枚目⁠——⁠設備保全 / OEE ダッシュボード⁠（OEE 可用率×性能×品質 vs 目標 × 設備一覧 × 停止要因パレート × MTBF/MTTR × 予防保全スケジュール）。

製造の3枚目は保全課の OEE ダッシュボード。今回いちばん大きかったのは、⁠前回(#65)に反映したばかりの修正を、予備知識ゼロの AI が自力で見つけて使った⁠こと。

結果 — 4/5

tsc/build 緑・console 0・375px（現場ハンディ想定）・OEE 内訳（可用率/性能/品質 vs 目標）・設備一覧（稼働/停止/故障/保全中・色だけに頼らない）・停止要因パレート・MTBF/MTTR＋前週前月比・予防保全スケジュール・h1 1個。

今回の主役 — 前回直した修正が、次の回の AI に「そのまま」効いた

#65 で Meter に direction="higher-is-better" ＋ target マーカーを足した（#256・入居率/稼働率/Cpk で3回手当てした欠落）。その⁠翌回⁠、予備知識ゼロの AI が OEE の「目標に対する値」をどう出すか探して、こう書いた:

⁠Meter の direction="higher-is-better" ＋ target がいちばんの見どころ。⁠ これは「目標に対する値・値が大きいほど良い」という要件への答えで、⁠そのまま、こじつけなしで動いた。⁠ 自身の JSDoc がこの用途を名指ししている。value・target・direction="higher-is-better" を渡せば、トーンを自動で導き（目標以上=success・目標の90%帯=warning・それ未満=destructive）、目標マーカー線を描き、目標を含む適切な aria-valuetext を読み上げる。⁠ページ全体で16回使ったが、一度も手こずらせなかった。⁠

⁠「3回手で穴埋めした → 設計を一元管理して直す → 次の回の AI がドキュメント（JSDoc）から自力で発見して16回使う」⁠。予備知識ゼロの AI に作らせるループが回って、修正が次の現場でそのまま効くことを実証できた回。他にも Delta（labels で改善/悪化を読み上げ）・Statistic（tone 上書きで MTTR↓＝good を正しく緑に・trend と tone を分離）・DataTable.renderCard（375px で表→カード崩し）・Timeline marker（期限超過に警告アイコン）が「色だけに頼らない」を最初から満たした。

src で直した不備 — ParetoChart を作る（3回目）

• 🔴→✅ ⁠パレート図のコンポーネントが無かった⁠。製造QCの花形チャートなのに、BarChart は単系列・第2軸/折れ線の重ね描画なしで、⁠累積%曲線（パレートの定義そのもの）が描けない⁠。#64 不良要因・#65 不良パレート・#66 停止要因で、予備知識ゼロの AI は毎回 ~170行 手組みしていた。3回ルールで作る（#270・PR #275）。
  • 既存チャート2パターンを合成: ⁠棒＝HTML/CSS⁠（降順・左軸＝最大バー基準）＋⁠累積線＝SVG polyline 1本⁠（右軸 0–100%・棒が物理的にできない唯一の部分・LineChart と同手法）＋⁠80%「重要な少数」閾値線⁠（可変/非表示可）。
  • アクセシビリティ: role="img"＋カテゴリ別サマリ・棒/累積点が focusable で aria-label——合否が色だけに乗らない。
  • デモは ⁠NumberInput で件数を編集可能⁠にして、棒の再ソートと80%交点の再計算をレビュアーがその場で確認できる（本リポのチャートデモ規約）。ブラウザ実証: 上位3要因が80%を越える（停止時間 38→64→⁠81⁠%）。

課題に記録だけ / 再確認

• 🟠 ⁠GaugeChart に target 無しが2回目⁠（#65 Cpk＋#66 OEE ダイヤル・#274）。OEE は半円ゲージが定番だが value/min/max/color/label のみで目標マーカーも方向も無い → 予備知識ゼロの AI は Meter バーに切替（アクセシビリティ的にはむしろ良い）。GaugeChart に target＋方向があれば、符号付き軸(Cpk)の前に共通ケースが解決。
• 🟡 ⁠Badge が色のみ⁠（アイコンの手がかり無し・#276）。ReferenceValue(H/L コード)/Delta(矢印)は色に頼らないのに、最頻出の status pill が色だけ＝内部で不整合。予備知識ゼロの AI は <Badge><Icon/></Badge> を~5箇所手組み。
• 🟡 ⁠Meter の % 読み上げが冗長⁠（78.4% / 100%（78%）・max=100/unit=% のとき・#277）。#256 の作業で出た小さな不便。

学び — 「直した欠落が、次の現場で勝手に効く」

#65: 入居率/稼働率/Cpk で「目標付きメーター」を3回手当て → Meter に direction+target を反映
#66: 予備知識ゼロの AI が JSDoc から自力発見 → OEE 全部に16回使用・一度も抵抗せず

デザインシステムの価値は「同じ欠落を二度と手で埋めない」こと。#256 で直した Meter の「値が大きいほど良い」は、⁠翌回の予備知識ゼロの AI がドキュメントだけを頼りに自力で見つけて使った⁠。設計を一元管理して直す（src＋spec＋メタ＋docs）から、ドキュメントに能力が現れ、次の利用者（人でも AI でも）が発見できる。パレートも3回ルールで作り、製造の花形チャートがコンポーネントになった。製造3枚で、可視化層（メーター/ゲージ/パレート）の欠落が順番に埋まっていく。

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

• ⁠製造をもう1枚⁠（トレーサビリティ/ロット追跡 or 生産計画/負荷山積み）で4枚目、or 別業界へ移る（教育/公共）。旅行は後で腰を据えて作り込む枠。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#65
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。前回直した「目標付きメーター」を翌回の AI が自力で16回使い、パレート図が3回ルールでコンポーネントになった回。