【完結】農業向け出荷管理システム、デモ版公開しました

2025年10月21日2025年10月31日

約4ヶ月にわたって開発を続けてきた農業向け出荷管理システムのデモ版が、公開できる状態になりました。

本記事では、デモサイトの紹介と、開発を振り返っての感想をまとめます。

デモサイトについて

誰でも無料で触れるデモ版を用意しました。実際の業務フローを体験できます。

デモサイトはこちらから

デモアカウント

以下のアカウントでログインできます：

流通業者アカウント（おすすめ）

Email: demo-trader@example.com
Password: demo123

生産者アカウント

Email: demo-farmer@example.com
Password: demo123

流通業者アカウントでは、出荷先マスタの管理、出荷予定の登録、出荷実績の承認など、すべての機能を試せます。

生産者アカウントでは、出荷予定の確認、OCRを使った出荷実績の登録、承認済み実績の確認ができます。

システム概要

このシステムは、農業現場での「手書き伝票管理」の課題を解決するために開発しました。

解決する課題

手書き伝票の管理が大変
出荷予定と実績の照合に時間がかかる
データ分析ができない
承認フローが曖昧

主な機能

1. OCRによる伝票自動読み取り

スマホで伝票を撮影するだけで、出荷先・個数・追跡番号を自動抽出します。手入力の手間を大幅に削減できます。

2. 出荷予定と実績の比較

流通業者が登録した出荷予定と、生産者が登録した出荷実績を自動で照合。差異があればすぐに確認できます。

3. 承認フロー機能

生産者が登録した出荷実績を、流通業者が確認・承認するフローを実装。差し戻し機能もあるため、誤登録にも対応できます。

4. 出荷先マスタ管理

出荷先をグループ分けして管理。市場・農協・小売店など、業態ごとに整理できます。

5. PWA対応

PC・スマホ両方に対応。モバイルでもストレスなく操作できるよう、UIを最適化しています。

技術スタック

フロントエンド: Next.js 14 (App Router) / TypeScript / Tailwind CSS
バックエンド: Supabase (PostgreSQL / Authentication / Storage)
OCR: Google Vision API（デモ版はモック機能）
ホスティング: Vercel
ドメイン管理: エックスサーバー

Next.js 14のApp Routerを採用し、Server ComponentsとClient Componentsを適切に使い分けています。

Supabaseでは、Row Level Security（RLS）を活用して、ユーザーロールに応じたデータアクセス制御を実装しました。

開発を振り返って

最も苦労したポイント

1. OCR精度の向上

当初、出荷先名の抽出精度は70%程度でしたが、「様」付き行を優先抽出するロジックを実装することで、90%以上まで向上しました。

ただし、数量（個数）の抽出精度はまだ課題が残っています。佐川急便の伝票では、印刷された「1」が読み取れないケースがありました。

今後は配送業者ごとに座標指定でOCRを実行する機能を実装し、精度をさらに向上させる予定です。

2. RLS（Row Level Security）の設計

Supabaseでユーザーロール別の権限制御を実装する際、RLSポリシーの設計に苦戦しました。

特に、生産者は「自分が作成した出荷実績のみ」を閲覧でき、流通業者は「すべてのデータ」を管理できるという権限設計を、安全かつシンプルに実装するのが難しかったです。

何度もポリシーを書き直し、テストを繰り返して、ようやく安定した設計にたどり着きました。

3. デモ版と本番版の切り分け

デモ版では、Google Vision APIの代わりにモック機能を使用しています。これにより、運用コストを完全に0円に抑えることができました。

環境変数で動作を切り替える設計にしたため、本番版へのアップグレードもスムーズに行えます。

学んだこと

Next.js 14の実践的な活用

App Routerの使い方、Server ComponentsとClient Componentsの使い分け、Parallel RoutesとIntercepting Routesなど、Next.js 14の新機能を実践的に学べました。

Supabaseの深い理解

RLSの設計、Storageの活用、リアルタイムサブスクリプションなど、Supabaseの機能を深く理解できました。特にRLSは、セキュリティとパフォーマンスのバランスを考える良い機会になりました。

モバイル対応の重要性

農業現場ではスマホでの操作が多いため、モバイルファーストで設計しました。タッチ操作への最適化、画面サイズへの対応など、レスポンシブデザインの重要性を実感しました。

段階的な機能実装の重要性

最初から完璧を目指すのではなく、MVP（Minimum Viable Product）を作り、フィードバックを得ながら改善するアプローチが効果的でした。

主要機能の使い方

デモサイトでは、以下の業務フローを体験できます。

Step 1: 流通業者が出荷先マスタを登録

まず、出荷先マスタ管理画面で、出荷先を登録します。出荷先はグループ分けできるため、市場・農協・小売店などに整理できます。

Step 2: 流通業者が出荷予定を登録

出荷予定登録画面で、翌日の出荷予定を登録します。出荷先・個数・担当する生産者を指定します。

Step 3: 生産者が本日の出荷予定を確認

生産者アカウントでログインすると、自分に割り当てられた出荷予定が表示されます。

Step 4: 生産者がOCRで出荷実績を登録

出荷実績登録画面で、伝票の写真を撮影します。OCRが自動で出荷先・個数・追跡番号を抽出するため、確認して登録ボタンを押すだけです。

デモ版では、ランダムなサンプルデータが返却されます。

Step 5: 流通業者が出荷比較・承認

流通業者は出荷比較画面で、出荷予定と出荷実績を並べて確認できます。問題なければ承認、誤りがあれば差し戻しを行います。

Step 6: 過去の出荷実績を確認

承認済みの出荷実績は、出荷一覧画面で確認できます。期間やステータスでフィルタリングでき、CSV出力も可能です。

デモ版の特徴

完全無料で運用

デモ版は、以下のすべてを無料プランで運用しています：

Supabase（Freeプラン）
Vercel（Freeプラン）
エックスサーバー（既存契約）
Google Vision API（モック使用のため0円）

月間1000人が訪問しても、コストは0円です。

実データに近いサンプルデータ

デモ版には、実際の業務を想定したサンプルデータが用意されています：

出荷先グループ: 4件（農協・市場・小売店・加工業者）
出荷先: 8件（東京中央市場、大阪中央市場、山田商店など）
出荷予定・出荷実績: 複数件

リアルな業務フローを体験できます。

本番版への移行も容易

環境変数を変更するだけで、本番版に切り替えられる設計になっています。デモ版で検証した後、スムーズに本番環境を構築できます。

今後の展望

デモ版の公開はゴールではなく、スタート地点です。今後は以下の機能を実装していく予定です。

最優先: 複数配送業者対応

佐川急便・ヤマト運輸など、配送業者ごとに伝票フォーマットが異なります。座標指定でOCRを実行することで、数量抽出の精度を60%から85%以上に向上させる計画です。

実装見積もり: 4時間

高優先度: 複数画像対応

現在は1つの出荷実績に1枚の画像しか添付できませんが、複数枚の伝票を添付できるようにします。

実装見積もり: 3-4時間

中優先度: 分析ダッシュボード

出荷統計をグラフやチャートで可視化し、期間別の比較や傾向分析ができる機能を追加します。

長期的な計画

企業別カスタマイズ機能
API公開と外部システム連携
AI活用の拡大（需要予測、異常検知など）

さいごに

4ヶ月間、試行錯誤しながら開発を続けてきた農業向け出荷管理システムのデモ版を、ついに公開できました。

まだまだ改善の余地はありますが、実用レベルのシステムとして完成させることができたと思います。

ぜひデモサイトを触ってみてください。フィードバックや質問があれば、お気軽にコメントやお問い合わせフォームからご連絡ください。