#66スコア 4/5製造

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

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

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

解説記事

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

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。製造3枚目——設備保全 / OEE ダッシュボード（OEE 可用率×性能×品質 vs 目標 × 設備一覧 × 停止要因パレート × MTBF/MTTR × 予防保全スケジュール）。

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

結果 — 4/5

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

今回の主役 — 前回直した修正が、次の回の AI に「out of the box」で効いた

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

Meter with direction="higher-is-better" + target is the standout. This is the answer to the "value-against-a-target, higher-is-better" requirement, and it worked out of the box, no forcing. Its own JSDoc even names this use case. Pass value, target, direction="higher-is-better" and it auto-derives tone (success at/above target, warning in a 90%-of-target band, destructive below), renders a target marker line, and announces a proper aria-valuetext including the target. I used it 16 times across the page and it never fought me.

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

src で直した穴 — ParetoChart を build（3回目）

  • 🔴→✅ パレート図の primitive が無かった。製造QCの花形チャートなのに、BarChart は単系列・第2軸/折れ線オーバーレイ無で、累積%曲線（パレートの定義そのもの）が描けない。#64 不良要因・#65 不良パレート・#66 停止要因で、cold AI は毎回 ~170行 手組みしていた。3回ルールで build（#270・PR #275）。
    • 既存チャート2パターンを合成: 棒＝HTML/CSS（降順・左軸＝最大バー基準）＋累積線＝SVG polyline 1本（右軸 0–100%・棒が物理的にできない唯一の部分・LineChart と同手法）＋80%「重要な少数」閾値線（可変/非表示可）。
    • a11y: 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 のみで目標マーカーも方向も無い → cold AI は Meter バーに切替（a11y的にはむしろ良い）。GaugeChart に target＋方向があれば符号付き軸(Cpk)の前に共通ケースが解決。
  • 🟡 Badge が色のみ（icon affordance 無し・#276）。ReferenceValue(H/L コード)/Delta(矢印)は色非依存なのに、最頻出の status pill が色だけ＝内部不整合。cold AI は <Badge><Icon/></Badge> を~5箇所手組み。
  • 🟡 Meter の % 読み上げが冗長（78.4% / 100%（78%）・max=100/unit=% のとき・#277）。#256 の作業で出た papercut。

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

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

デザインシステムの価値は「同じ穴を二度と手で埋めない」こと。#256 で直した Meter の higher-is-better は、翌回の cold AI がドキュメントだけを頼りに自力で見つけて使った。SSOT 完結で直す（src＋spec＋メタ＋docs）から、ドキュメントに能力が現れ、次の利用者（人でも AI でも）が発見できる。パレートも3回ルールで build し、製造の花形チャートが primitive になった。製造3枚で、可視化層（メーター/ゲージ/パレート）の穴が順番に埋まっていく。

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

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

試す

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

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

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

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

AlertAlertDescriptionAlertTitleBadgeButtonCardCardContentCardDescriptionCardHeaderCardTitleClusterContainerDataTableDeltaGridHStackIconMeterSelectSeparatorStatisticTimelineTimelineDescriptionTimelineItemTimelineTimeTimelineTitleVStack

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

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