パッケージ・自社開発2026年
ブラウザで使える在庫・棚卸管理アプリ
自社開発（デモ）
小規模な事業者や部署が、在庫の確認、入庫・出庫の記録、棚卸をブラウザだけで行える在庫管理アプリのデモ。サーバーを用意せずに試せる構成で、在庫管理の導入イメージを確かめられるようにしています。
実績情報
OVERVIEW- クライアント
- 自社開発（デモ）四葉システム開発が提案・紹介用に開発したデモアプリケーション。
- 業界
- 物流・運送 / 製造
- 対応時期
- 2026年
- 担当範囲
- 企画/制作
- 対応環境
- Web
課題・解決・効果
CASE STUDY課題
CHALLENGE- 在庫数をExcelや紙で管理しており、入出庫の記録と実際の数が合わなくなりやすい
- 複数の拠点の在庫を横断して確認する手段がない
- 本格的なシステムを導入する前に、操作や画面のイメージを確かめたい
解決
SOLUTION- Next.jsで在庫一覧・入出庫記録・拠点管理・使い方の画面を備えた在庫管理アプリを開発
- 在庫数と入出庫履歴を必ず同時に更新し、マイナス在庫を防ぐデータ更新処理を実装
- データをブラウザに保存し、Cloudflare Workers上で手軽に公開できる構成にした
効果
RESULT- インストールや会員登録なしで、在庫管理の流れをすぐに試せるようになった
- 在庫数と履歴が常に一致し、棚卸で差分を記録する運用を体験できるようになった
- スマホからPCまで画面幅に合わせた表示で操作感を確認できるようになった
主な機能
FEATURES- 商品ごと・拠点ごとの在庫一覧と在庫状態の表示
- 入庫・出庫の登録
- 棚卸による差分調整の記録
- 入出庫履歴の一覧と集計
- 拠点（倉庫）の登録と使用状況の表示
- 在庫データのCSV出力
技術スタック
TECHNOLOGY- 対応環境
- Web
- 開発言語
- TypeScript
- フロントエンド
- Next.js 16
- React 19
- Tailwind CSS 4
- データベース
- ブラウザ保存（localStorage）
- インフラ・実行環境
- Cloudflare Workers (OpenNext)
- 主なライブラリ
- OpenNext (Cloudflare)
- 外部連携
- CSV出力
技術的なポイント
ENGINEERINGシステム構成Next.js（App Router）をOpenNextでCloudflare Workersに配置し、データは利用者のブラウザ（localStorage）に保存するサーバーレスなフロントエンド構成。
- 1在庫数・状態・集計の計算を純粋関数にまとめ、画面の処理と分けて扱いやすくした
- 2更新直前に保存データを読み直し、別タブでの変更を上書きしないようにした
- 3履歴は訂正・削除せず棚卸で差分を記録する方式とし、在庫数と履歴の合計を常に一致させた
- 4画面幅ではなく本文エリアの幅で表示を切り替えるコンテナクエリでレイアウトを調整
同様のシステム開発をご検討の方へ
要件が固まっていない段階でも構いません。課題やご予算に合わせて最適な進め方をご提案します。
お問い合わせ・ご相談関連する実績
RELATED WORKS
パッケージ・自社開発2026年
学校向け匿名アンケート・リスク検知システム
自社サービス
教育委員会や学校が、いじめ・生活実態調査を生徒への匿名アンケートとして配信・集計できるWebシステムです。自由記述などからリスクを自動検知し、緊急時のみ監査記録付きで回答者を特定できる「準匿名」の仕組みを備えます。
- TypeScript
- Next.js
- React
- Cloudflare
パッケージ・自社開発2026年
撮影写真を地図とアルバムで管理するパッケージ
自社パッケージ
現場で撮影した写真を位置情報とともに地図上にマッピングし、現場ごとのアルバムで整理・共有するためのパッケージです。地図からもアルバムからも写真にたどり着け、撮影者・撮影日時・座標を確認できます。
- TypeScript
- Next.js
- React
- Cloudflare
- Leaflet
パッケージ・自社開発2026年
QR・メール配信対応のWebアンケート集計基盤
Webサービス企画会社
アンケートの作成から配布（QRコード・メール）、回答、集計・可視化までを一つで行えるWebアンケートサービスの試作。回答者はスマートフォンから回答でき、管理者はグラフで結果を確認できる。
- TypeScript
- Next.js
- React