食品ECサイトの商品一覧設計

食品ECサイトの商品一覧として、写真、価格、容量、配送条件を比較しやすいカードUIを設計しました。カテゴリ、用途、価格帯から絞り込み、目的の商品へ早く到達できる構成です。

冷蔵、冷凍、常温など配送区分が異なる場合は、商品カードとカート内で分かりやすく表示します。在庫切れの商品も再入荷通知へつなげ、単に購入できない状態で終わらせません。

Next.jsで商品データを取得し、検索条件をURLへ反映する想定です。商品画像は複数サイズを配信し、一覧で必要以上に大きな画像を読み込まないようにします。