#64スコア 4.5/5製造

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

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

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

解説記事

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

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。新業界・製造1枚目——生産指示 / 工程進捗（MES）（製造指図 × 工程ルート × 実績入力 × 稼働状況 × 進捗/良品率 × 不良集計）。

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

結果 — 4.5/5

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

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

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

RouteStops → 工程ルート: the standout. Delivery-stop primitive fit a manufacturing process route with near-zero friction: title=工程名・description=設備/作業者・meta=良品/不良チップ・status(待ち/仕掛/完了/故障)・plannedTime/actualTime=開始/完了 with auto signed delay・actions=着手/完了 buttons・aria-current="step" on 現在工程 for free. Best cross-industry signal of the build.

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

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

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

src で直した穴 — NumberInput の label 抜け（入力部品 parity 完全達成）

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

起票だけ / 再確認

  • 🟠 Meter の higher-is-better/target が2回目（#60 入居率＋#64 稼働率/良品率・#256）。さらに #64 で OEE ゲージ形も：GaugeChart は素のアーク1本で zones も target marker も無い。Meter に target＋higherIsBetter、or <Gauge value target zones>。あと1回で build。
  • 🟠 ParetoChart（件数バー＋累計%線＋80%閾値・不良要因分析の定番・#270・1回目）。BarChart に累計%が無く Table＋Meter シェアバーで手組み。
  • 🟡 RouteStops の status アイコンが配送ドメイン固定（statusLabels で文字は上書けるが per-status icon が baked）。

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

物流の配送ルート（ストップ×状態×時刻×現在地） → 製造の工程ルート（工程×状態×開始完了×現在工程）
不動産の入居率メーター → 製造の稼働率メーター（higher-is-better 同じ）
金融の差分 → 製造の計画比

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

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

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

試す

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

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

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

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

AlertAlertDescriptionAlertTitleBadgeBadgePropsButtonCardCardContentCardDescriptionCardHeaderCardTitleChartColorDeltaGaugeChartLabelMetadataListMeterMeterToneNumberInputReferenceValueRouteStopItemRouteStopStatusRouteStopsSelectSeparatorStatisticTableTableBodyTableCellTableHeadTableHeaderTableRowTabsTabsContentTabsListTabsTrigger

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

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