プロジェクト概要
課題
各区への配送個数をExcelで管理しており、BOX・Mailの種別ごとの配送状況や全体像を瞬時に把握できなかった
解決
地図上でデポ別に色分けされたエリアマップにより、BOX・Mailそれぞれの配送量と各区の個数を一目で可視化、迅速な判断が可能に
技術
Next.js 14 / TypeScript / Leaflet / PostgreSQL / Papa Parse / Tailwind CSS
開発期間
3営業日
背景・課題
東京23区で軽貨物等で当日配送サービスを展開するクライアント企業では、城北・城西・城東・城南の4デポから各区へ荷物を配送している。日々の配送個数は各区で大きく異なり、配送リソースの配分や繁忙エリアの特定が業務上の重要課題となっていた。
また、荷物にはBOX（箱物）とMail（メール便）の2種別があり、種別ごとに必要な配送リソースが異なるため、それぞれの配送量を区別して把握する必要があった。
従来は配送データをスプレッドシートで管理しており、どのエリアに配送が集中しているかを把握するには、数値を一つずつ確認する必要があった。特に繁忙期や突発的な需要増加時に、全体像の素早い把握が困難だった。
このため、配送個数をBOX・Mail種別ごとに地図上で直感的に把握でき、日付ごとのデータを簡単に登録・閲覧できるWebシステムが求められていた。
ソリューション
東京23区の配送データをリアルタイムに地図上で可視化するWebアプリケーションを構築しました。
- デポ別エリアマップ — 東京23区のGeoJSONデータを用い、4つのデポ（城北・城西・城東・城南）の担当エリアを色分け表示。各区にBOX数・Mail数をリアルタイムでラベル表示し、配送量の偏りを瞬時に可視化
- BOX/Mail種別管理 — 荷物をBOX（箱物）とMail（メール便）に分けて管理。サイドバーでは合計・デポ別・区別すべてにおいてBOX/Mailの内訳を表示し、種別ごとのリソース配分を支援
- CSVアップロード — Shift-JIS/UTF-8両対応のCSV取り込み機能により、既存の業務データを一括登録可能。ドラッグ＆ドロップにも対応し、1区1行でBOX・Mailを同時登録できる直感的なフォーマットを採用
- 手動入力フォーム — 区名と種別（BOX/Mail）を選択するだけでデポが自動判定され、個別のデータ追加・修正が容易
- 当日データリセット — 確認ダイアログ付きのワンクリックリセット機能により、誤登録時の一括修正が容易
- 自動データクリーンアップ — 3ヶ月以上前のデータを自動削除し、サーバーのストレージを圧迫しない運用を実現
導入効果
| 項目 | 導入前 | 導入後 |
|---|---|---|
| 配送状況の把握 | スプレッドシートで数値を個別確認（数分〜十数分） | デポ別カラーマップ＋区ラベルで全23区を一目で把握（数秒） |
| データ登録 | 手作業でのExcel入力・転記 | CSVドラッグ＆ドロップで一括登録、手動入力も可 |
| BOX/Mail管理 | 分類なし、または別シートで管理 | 1画面でBOX・Mail別に自動集計・リアルタイム表示 |
| エリア別分析 | 数値の比較・集計が必要 | デポ色＋数値ラベルで配送集中エリアを直感的に識別 |
追加予定システム
- 荷主からの配送依頼データを受け取りと同時に自動でこのシステムに反映（API又はGAS）
- AIに配送データを学習させて、明日以降の荷物個数を予測し必要な人員や車両の確保に反映
- 蓄積データを分析できるページを追加して、荷主や社内での打ち合わせの材料として使用
使用技術
- Next.js 14 (App Router) + TypeScript — フロントエンド・APIルート・サーバーサイドレンダリングを1つのフレームワークで統合し、型安全な開発を実現
- Leaflet + react-leaflet — GeoJSONデータを用いた東京23区のデポ別エリアマップ描画と、区ごとのBOX/Mail配送数のリアルタイムラベル表示を実装
- PostgreSQL — 本番環境での安定稼働に対応したリレーショナルDBで、配送データの永続化とBOX/Mail種別を含む日付・区コードによる効率的なクエリを実現
- Papa Parse — Shift-JIS/UTF-8両対応のCSVパーサーにより、日本語を含む既存業務データのスムーズな取り込みを実現