ECアプリの商品一覧UIデザイン：発見から購入へ誘導するレイアウト設計

ECアプリの商品一覧は「ユーザーが欲しいものを見つけ、購入する」プロセスの起点となる重要なUIです。多数の商品から目的の商品を発見しやすくする設計が、購買率（コンバージョン率）に直結します。本記事では、ECアプリの商品一覧UIの設計方法を解説します。

商品一覧UIの基本構造

ページの構成要素：

1. 検索バー（最上部）
2. カテゴリナビゲーション（横スクロールチップス）
3. フィルター・ソートバー
4. 商品グリッド/リスト（メインコンテンツ）
5. ページネーション/無限スクロール

グリッドとリストの切り替え

2カラムグリッド（標準）：

• 商品画像が大きく、ビジュアルで比較しやすい
• ファッション・雑貨など「見た目」が重要な商品に最適
• 1画面に表示できる商品数：6〜8件

1カラムリスト：

• 商品の詳細情報（スペック・レビュー数）が多い場合に適切
• テクニカル商品・比較検討が必要な商品に向いている
• 1画面に表示できる商品数：4〜5件

切り替えUIのデザイン：

右上に「グリッド/リスト」の切り替えアイコンボタンを設置。選択中のモードを強調表示します。

商品カードのUI設計

商品カードの構成要素：

• 商品画像（アスペクト比1:1または4:3が一般的）
• 商品名（最大2行、省略表示）
• 価格（税込・税抜を明記）
• 評価（星+レビュー件数）
• バッジ（SALE・NEW・限定・送料無料など）

商品画像のUI：

• 複数枚の場合は横スワイプでカルーセル（または2枚目が右端から見える）
• 背景は白（統一感）
• 商品のみを切り抜いた「透過背景」スタイルが主流

価格の表示：

• 定価は薄いグレーで打ち消し線付きで表示
• セール価格はブランドカラーまたは赤で大きく表示
• 割引率（20%OFF）のバッジを表示

フィルター・ソートUIのデザイン

ソート（並べ替え）：

• 人気順・おすすめ順
• 価格の安い順・高い順
• 新着順
• レビュー評価順

ドロップダウン選択またはボトムシートのリスト選択が一般的です。

フィルター機能：

フィルターパネルをボトムシートで表示するパターンが主流：

• カテゴリ（複数選択）
• 価格帯（スライダーまたは範囲入力）
• ブランド（検索＋複数選択）
• サイズ（服・靴）
• カラー（カラースウォッチ）
• 在庫あり/なし

適用中フィルターの表示：

フィルターが適用されている場合、フィルターバーの下に「カラー：ブラック ×」のようなチップを表示。タップして個別削除できます。

バッジ・ラベルの設計

効果的なバッジ：

• SALE：赤バッジ
• NEW：緑またはブランドカラー
• 限定：紫またはゴールド
• 残り〇点：オレンジ（希少性・緊急性）
• 送料無料：青または緑

バッジは商品カードの左上または右上に貼り付けるスタイルが標準です。多すぎると視線がばらけるため、1枚に1〜2個が限度です。

まとめ

ECアプリの商品一覧UIは「商品の発見体験と購買への誘導を最適化する」設計が核心です。適切なグリッドレイアウト・情報の整理されたカードデザイン・直感的なフィルター機能・明確なバッジを組み合わせることで、ユーザーが欲しいものを素早く見つけられるショッピング体験を実現できます。