AI に生産工程管理を作らせてみた — 配送ルートのコンポーネントが、工場の工程フローにそのまま効いた（やってみた #64）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠新業界・製造1枚目⁠——⁠生産指示 / 工程進捗（MES）⁠（製造指図 × 工程ルート × 実績入力 × 稼働状況 × 進捗/良品率 × 不良集計）。

不動産を4枚やり切って、全く別の⁠製造（工場の生産管理）⁠へ。1枚目は MES の工程進捗——作業指示が工程（材料投入→加工→組立→検査→梱包）を流れ、各工程の実績・稼働・不良を追う、製造現場の核心画面。

結果 — 4.5/5

tsc/build 緑・console 0・375px（現場タブレット想定）・工程ルートの進捗・実績入力（良品/不良→完成/仕掛/良品率がライブ集計）・稼働率メーター・ライン状態・不良集計＋閾値警告・h1 1個。

今回の主役 — 配送ルートのコンポーネントが、工場の工程フローにそのまま効いた

物流の配送追跡(#52)用に作った RouteStops を、製造の予備知識ゼロの AI が工程ルートに自力で採用した:

⁠RouteStops → 工程ルート: いちばんの見どころ。⁠ 配送ストップのコンポーネントが、製造の工程ルートにほぼ摩擦ゼロで合った: title=工程名・description=設備/作業者・meta=良品/不良チップ・status(待ち/仕掛/完了/故障)・plannedTime/actualTime=開始/完了（符号付きの遅延を自動計算）・actions=着手/完了ボタン・aria-current="step" が現在工程にタダで付く。⁠この回で最良の、業界をまたいだサイン。⁠

⁠配送の「順序付きストップ＋状態＋担当者＋時刻＋現在地」と、製造の「工程ルート＋状態＋設備＋開始完了＋現在工程」は骨格が同じ⁠だった。配送追跡が工程進捗にそのまま化けた。他にも:

• ⁠Meter → 稼働率/良品率/進捗⁠（「値が大きいほど良い」の tone 上書き＝不動産の入居率と同じ）。
• ⁠Delta → 計画比⁠（実績 vs 計画の先行/遅れ・しかも RouteStops 内の時刻遅延でも自動再利用）。
• ⁠NumberInput → 実績入力⁠（stepper・上下限で制限・下書き・良品/不良→完成/仕掛/不良率のライブ集計）。
• ⁠ReferenceValue → 不良率 vs 閾値⁠（flagValue＋チップで H/HH＋sr-only・色だけに頼らない）。

医療/物流/金融で育てたコンポーネントが、また別業界（製造）で骨格そのまま効いた。

src で直した不備 — NumberInput の label 抜け（入力コンポーネントが全部揃った）

• 🟡 ⁠NumberInput に label/description が無い⁠——実績入力欄を毎回 <Label htmlFor> で手配線。Textarea(#245)/Input(#249)/CurrencyInput(#258) に続く⁠4つ目で最後⁠の同じ抜けを修正（#269・PR #271）。⁠これで主要な入力コンポーネント（Input/Select/Textarea/Checkbox/Switch/RadioGroup/CurrencyInput/NumberInput）の label/description が全部揃った。⁠

課題に記録だけ / 再確認

• 🟠 ⁠Meter の「値が大きいほど良い」/目標線が2回目⁠（#60 入居率＋#64 稼働率/良品率・#256）。さらに #64 で ⁠OEE ゲージ⁠形も：GaugeChart は素のアーク1本で、色帯も目標マーカーも無い。Meter に target＋higherIsBetter、or <Gauge value target zones>。あと1回で作る。
• 🟠 ⁠ParetoChart⁠（件数バー＋累計%線＋80%閾値・不良要因分析の定番・#270・1回目）。BarChart に累計%が無く Table＋Meter のシェアバーで手組み。
• 🟡 RouteStops の status アイコンが配送分野に固定（statusLabels で文字は上書けるが、状態ごとのアイコンが埋め込みで固定）。

学び — 「順序付きの状態フロー」は、配送でも工程でも同じ

物流の配送ルート（ストップ×状態×時刻×現在地） → 製造の工程ルート（工程×状態×開始完了×現在工程）
不動産の入居率メーター → 製造の稼働率メーター（「値が大きいほど良い」で同じ）
金融の差分 → 製造の計画比

RouteStops は配送追跡のために作ったが、その骨格（⁠順序付きの状態フロー⁠）は工場の工程進捗にそのまま効いた。業界（物流/製造）も用途（配送/生産）も違うのに、作法の骨格が同じだから刺さる。これで医療/物流/金融/会計/不動産/製造の6業界で、育てたコンポーネントが横断することを実証した。残った欠落（OEE ゲージ/パレート）は製造特有の可視化で、3回ルールで育てる。

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

• ⁠製造をもう1枚⁠（品質検査/検査成績書 で ReferenceValue が公差判定に・OEE ゲージ#256 を3回目へ・or 設備保全）。1業界3〜5枚で製造の判断を立体化。

試す

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

まだ alpha。配送ルートのコンポーネントが工場の工程フローにそのまま効き、入力コンポーネントの label が揃った回。