概要
手書き伝票をOCRで読み取り、出荷業務を効率化するWebアプリケーション。農業・流通現場の課題を解決するクラウド型管理システムです。
プロジェクト情報
| 項目 | 内容 |
|---|---|
| 制作期間 | 2024年7月 – 2024年10月（3ヶ月） |
| 担当範囲 | 企画・設計・開発・デプロイ（個人開発） |
| 公開URL | https://shipment-demo.cropgarage.com |
| 種別 | Webアプリケーション / PWA |
主な機能
OCR伝票読み取り
スマホで撮影した出荷伝票から、出荷先・個数・追跡番号を自動抽出（精度90%以上）
✅ 承認ワークフロー
出荷予定と実績を照合し、流通業者が承認・差し戻しを管理
出荷実績管理
過去の出荷データを一覧表示・検索・CSV出力
ロール別権限管理
生産者・流通業者・管理者で適切なアクセス制御を実装
マルチデバイス対応
PC・スマホ・タブレットで快適に操作可能（PWA対応）
技術スタック
フロントエンド
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- React Hooks
バックエンド
- Supabase
- PostgreSQL
- Authentication
- Storage
- Row Level Security (RLS)
インフラ・その他
- Vercel（ホスティング）
- Google Vision API（OCR）
- PWA対応
解決した課題
Before（従来の業務）
- 手書き伝票の手入力に時間がかかる
- 出荷予定と実績の照合作業が煩雑
- 紙ベースでデータ分析ができない
- ❌ 承認プロセスが曖昧で記録が残らない
After（システム導入後）
- ⚡ OCRで自動入力、作業時間を大幅短縮
- 予定と実績を自動比較、差異を即座に確認
- クラウドでデータ管理、CSV出力で分析可能
- ✅ 承認履歴を記録、トレーサビリティを確保
デモアカウント
実際の業務フローを体験できます。
流通業者アカウント（全機能利用可能）
Email: demo-trader@example.com
Password: demo123生産者アカウント（出荷登録体験用）
Email: demo-farmer@example.com
Password: demo123業務フロー
業務フロー
- 出荷先マスタ管理
出荷先をグループ分けして一元管理 - 出荷予定登録
流通業者が翌日の出荷予定を登録 - 出荷予定確認
生産者が自分の担当分を確認 - OCR出荷登録
伝票を撮影して自動入力 - 出荷比較・承認
予定と実績を並べて確認 - 出荷実績一覧
承認済みデータの検索・CSV出力
開発のポイント
OCR精度の向上
「様」付き行を優先抽出するロジックを実装し、出荷先名の抽出精度を90%以上に向上。
Supabase RLSによる権限管理
データベースレベルでのアクセス制御により、セキュアな設計を実現。
モバイルファーストUI
農業現場でのスマホ利用を想定し、タッチ操作に最適化。
コスト最適化
デモ版は完全無料で運用。本番版でも低コストで運用可能な設計。
実績・成果
- 開発ブログ: 14記事執筆（開発プロセスを詳細に記録）
- 抽出精度: 出荷先名90%以上
- 対応デバイス: PC / スマホ / タブレット
今後の展開
- 複数配送業者対応（座標指定OCR）
- 分析ダッシュボード機能
- マルチテナント対応（企業別データ分離）
- 外部システム連携API
お問い合わせ
本システムの導入やカスタマイズをご検討の企業様は、お気軽にお問い合わせください。
対応可能な内容
- 企業専用環境の構築
- 独自機能の追加開発
- 既存システムとの連携
- 運用サポート
開発ブログ
開発プロセスを詳しく知りたい方は、以下のブログシリーズをご覧ください。