暗室製品の案件〜出荷一元管理システム

クライアント

大手化学メーカー樹脂・化成品を中心に製造販売する化学メーカー。受注生産品として撮影・検査用の暗室製品も手がける。

業界

化学

対応時期

2026年

開発期間

1か月～3か月

担当範囲

企画/提案/制作

対応環境

Web

• 案件の登録と、ステータスの自動判定
• 見積の作成・再見積・比較見積と番号の自動採番
• 受注・製作・出荷の各タブでの進捗管理
• 製品・部品・オプションなどのマスタ管理
• 部品展開による原価・重量の算出と在庫見通し
• 見積書・写真などの添付とスマホからの撮影登録
• 代理店・OEM向けの案件確認画面

対応環境

• Web

開発言語

• TypeScript

フロントエンド

• Next.js 16
• React 19
• Tailwind CSS 4

データベース

• ブラウザ保存（localStorage / IndexedDB）

インフラ・実行環境

• Cloudflare Workers (OpenNext)

主なライブラリ

• Storybook 10
• OpenNext (Cloudflare)
• exceljs
• pptxgenjs

外部連携

• Webフォーム通知の取込

システム構成Next.js（App Router）をOpenNextでCloudflare Workersに配置し、データはブラウザのlocalStorage、添付ファイルはIndexedDBに保存するフロントエンドのみのモック構成。Storybookも同じサイトで公開する。

1. 1日付の入力状況から『受付→見積中→受注→製作中→出荷済』を判定する純粋関数を用意し、手入力のステータス管理をなくした
2. 2製品を構成品・部品まで展開して原価や重量を集計し、見積と出荷時の送料の差を比較できるようにした
3. 3画面・業務部品・共通部品をStorybookに整理して公開サイトに同梱し、発注者が画面を個別に確認できるようにした
4. 4サーバーを持たずブラウザ内に保存する構成で、Cloudflare Workers上に低コストでモックを公開