BtoC ECサイト

PC・スマホどちらでも完結する購買体験

ヒーロー画像・カテゴリフィルタ・商品グリッドを整えたトップページ。スマートフォンでもハンバーガーメニューで操作でき、購入フローが途切れない設計です。

Desktop — ヒーロー + 商品一覧 + カテゴリ絞り込み

Mobile — ハンバーガーメニュー対応

商品詳細 — 画像・在庫・カート追加

商品画像・価格・在庫状況を表示し、カートへの追加ボタンを配置。在庫連動で購入可否をリアルタイムに反映します。

商品詳細 — 画像・価格・在庫表示・カートに追加

カート — 送料計算・購入手続きへの導線

追加した商品の数量変更・削除が可能。5,000円以上で送料無料の自動計算と、Stripe Checkout への明確な導線を設けています。

カート — 小計・送料・合計の表示、購入手続きボタン

管理画面 — 商品・注文・顧客を一元管理

管理者専用のダッシュボード。登録商品数・総注文数・売上概算をサマリー表示し、商品管理・注文管理・顧客管理の各画面へアクセスできます。

管理ダッシュボード — 商品・注文・顧客管理メニュー

実装範囲と機能

Stripe Webhook の冪等性対応・在庫更新時のトランザクション制御・注文ステータスの一貫性管理まで実装しました。将来的な機能追加（クーポン、レビュー、配送連携）にも対応しやすい構成です。