Next.js TypeScript Tailwind CSS Cloudflare Pages
消耗品価格比較アプリ
Amazon・モノタロウ・ASKUL・カウネットの4サイトを一括検索し、単価で比較できるWebアプリ。採用した商品の価格を記録・管理。
背景
消耗品の発注先を決めるとき、毎回4つのECサイトを個別に開いて価格を比較していた。入数や単価が異なるため、どれが本当に安いか判断しづらかった。
1回の検索で4サイトの結果を並べて単価比較できるツールを作り、発注判断を効率化した。
概要
Amazon・モノタロウ・ASKUL・カウネットの4サイトを同時検索し、単価ランキングで比較できるWebアプリです。採用した商品はローカルに保存して管理できます。
主な機能
- 一括検索: キーワードで4サイトを同時検索、単価順ランキング表示
- 採用・保存: 検索結果から「採用」→ 価格・入数・URLを自動入力して保存
- 価格比較: 最安サイトをハイライト、単価自動計算
- CSV入出力: 商品データのエクスポート/インポート
- カテゴリ管理: オフィス用品/清掃・衛生用品/その他
技術スタック
| 項目 | 技術 |
|---|---|
| フレームワーク | Next.js (App Router) |
| 言語 | TypeScript |
| スタイリング | Tailwind CSS v4 |
| データ永続化 | localStorage（DB不要） |
| ホスティング | Cloudflare Pages |
担当範囲
社内業務効率化ツールとして企画・設計・実装を担当。