「商品一覧ページから商品詳細ページに進んでもらえない」——商品一覧ページは、探している商品に辿り着けるかどうかで成果が決まります。 見た目を整えても、絞り込みが見つからなければ離脱します。
本記事では、商品一覧（カテゴリ）ページのCVR改善を4つの設計軸に整理し、公開事例の数値とあわせて解説します。
記事のポイント
- フィルターの表示位置だけでCVRが22.9%向上・左側配置では42%減少
- モバイルはグリッドよりリスト形式が勝った事例
- 一覧から直接カートに入れる機能でトランザクション10%増
- 並び順のデフォルトを何にするかの判断基準
- 検証すべき順番
目次
- 商品一覧ページで見るべき指標
- ①絞り込み（フィルター）の設計
- ②並び順の設計
- ③表示形式の設計
- ④一覧からのカート導線
- 検証する順番
- Dejamで商品一覧ページを検証する
- よくある質問
- まとめ
商品一覧ページで見るべき指標
商品一覧ページのCVRを直接見ても、改善点は分かりません。 次の3つに分解します。
| 指標 | 何が分かるか |
|---|---|
| 商品詳細への遷移率 | 探している商品に辿り着けているか |
| 絞り込み・並び替えの利用率 | 機能が見つかっているか |
| ページ送り（2ページ目以降）の到達率 | 1画面目で判断されているか |
絞り込みの利用率が極端に低い場合、機能がないのではなく「見つかっていない」可能性が高いです。 後述の事例では、フィルターの表示位置を変えただけでCVRが42%変動しています。
EC全体の改善は「ECサイトのCVR改善ガイド」、商品詳細ページ側は「商品詳細ページのCVR改善15施策」を参照してください。
①絞り込み（フィルター）の設計
最も影響が大きい軸です。
公開事例では、オフィス用品ECがフィルターボタンの表示位置・テキスト色・文言を組み合わせてテストしています。
| パターン | 変更内容 | 結果 |
|---|---|---|
| B | 文字色をグレー→青に変更 | CVR +20.5% |
| C | 色＋文言を「結果をフィルタリングする」→「フィルターを表示する」 | CVR +22.9%（勝ち） |
| D | フィルターを左側に配置 | CVR −42% |
信頼度99%、各パターン68,000人、2週間。Officeworks（オーストラリア最大のオフィス用品サプライヤー）による実施です（出典: 【ABテスト事例】検索フィルター機能の効果的な表示位置と表現方法とは？ - DLPO）。
この事例から読めることは3つです。
文字色をリンク色（青）にするだけで20.5%動いています。 フィルターが「押せるもの」として認識されていなかったことを示しています。
文言を「フィルターを表示する」に変えてさらに伸びています。 「結果をフィルタリングする」は、押した後に何が起きるかが伝わりにくい表現です。
左側配置は42%の低下です。 デスクトップECの定石とされる左サイドバー型が、この事例では大きく負けています。定石を自社で検証していないと、42%を失っている可能性があります。
| 検証すべき項目 | 軸 |
|---|---|
| フィルターの配置 | 上部 / 左サイド / モーダル |
| フィルターのラベル | 「絞り込む」「フィルターを表示する」など |
| 押せると分かる見せ方 | リンク色 / ボタン化 / アイコン |
| 適用中の条件の表示 | タグ表示 / 件数表示 |
| 在庫切れを除外するデフォルト | ON / OFF |
「適用中の絞り込み条件」が見えないと、ユーザーは結果を信用しません。 条件をタグで表示し、個別に外せるようにしてください。
②並び順の設計
| 変更の型 | 仮説 |
|---|---|
| デフォルトを「おすすめ」→「人気順」に変える | 社会的証明が働く |
| デフォルトを「新着順」に変える | 回遊性が上がる（リピーター向け） |
| 価格の安い順をデフォルトにする | 価格重視層の離脱が減る |
| 並び替えの選択肢を減らす | 選択のコストが下がる |
価格の安い順をデフォルトにするかは、利益構造で決まります。 安い順にすると到達しやすくなりますが、平均注文単価が下がります。
アンカリングの観点では、高い商品を先に見せると後の価格が割安に見えます。 料金プランの並び順では、高い順にして全体注文数が14.9%増えた一方、安価プランの購入率が10.6%下がった事例があります（信頼度99%/92%、Greenhouse Group / T-Mobile Thuis）。商品一覧でも同じトレードオフが起きます。 考え方は「アンカリング効果とは？価格と選択肢の見せ方でCVRを上げる方法」を参照してください。
判定はCVRではなく「CVR × 平均注文単価」で行ってください。 安い順でCVRが上がっても、売上が下がることがあります。
③表示形式の設計
| 変更の型 | 仮説 |
|---|---|
| グリッド（2列）→ リスト（1行1商品） | 情報量が増えて判断できる |
| リスト → グリッド | 一覧性が上がり比較しやすい |
| 1行の表示件数を変える（2列 / 3列 / 4列） | スクロール量と情報量のバランスが変わる |
| サムネイルを大きくする | 商品の判別がしやすくなる |
| カラーバリエーションを一覧上で見せる | 詳細ページに入らずに選べる |
公開事例では、モバイルの商品一覧で**リスト形式（1行1商品・大きなサムネイル・価格・詳細ボタン・カラー選択つき）とグリッド形式（1行2商品・情報は最小限）**を比較し、リスト形式が勝って訪問者あたりの収益が7%上昇しました（信頼度94%、9万人以上のモバイルユーザー・60日間、Tinuiti / U.S. Polo Assn。出典: 【ABテスト事例】モバイルの商品一覧ページの効果的なフォーマットとは？ - DLPO）。
モバイルは「一覧性」より「1商品あたりの情報量」が効いた事例です。 画面が狭いため、2列にすると各商品の情報が削られます。
信頼度94%は一般的な基準の95%にわずかに届いていません。 自社で追試してください。
モバイル固有の論点は「モバイルLP最適化の方法」も参照してください。
④一覧からのカート導線
| 変更の型 | 仮説 |
|---|---|
| 一覧上でサイズを選んで直接カートに入れられるようにする | 詳細ページを経由せずに買える |
| 一覧にクイックビュー（モーダル）を置く | 一覧を離れずに詳細を確認できる |
| 「お気に入り」ボタンを一覧に置く | 比較検討をサイト内に留められる |
| 在庫切れの組み合わせを一覧上で示す | 詳細ページで落胆させない |
公開事例では、商品一覧ページに**「クイック・セレクター」（サイズを選んで詳細ページを経由せずカートに追加できる機能）**を追加した結果、トランザクションが10%増加しました（平均注文額は大きな違いなし）。信頼度95%、30,000人以上のデスクトップユーザー・4週間、De Nieuwe Zaak / Steps による実施です（出典: 【ABテスト事例】商品一覧ページに「クイック・セレクター」は必要？不要？ - DLPO）。
平均注文額が変わっていない点が重要です。 客単価を落とさずにトランザクションだけが増えています。「詳細ページを見せないと売れない」という前提が成立しない商材があることを示しています。
ただしリピート購入が中心の商材に限られる可能性があります。 初回購入で情報が必要な商材では、詳細ページを飛ばすとCVRが下がります。
検証する順番
| 観測 | 着手する軸 |
|---|---|
| 絞り込みの利用率が低い | ①フィルター（見つかっていない） |
| 絞り込みは使われるが詳細への遷移が少ない | ②並び順（上位に出る商品が合っていない） |
| 1画面目で離脱している | ③表示形式（情報量が足りない） |
| 詳細ページを何度も行き来している | ④カート導線（クイックビュー・直接投入） |
フィルターから着手してください。 前述の事例では、フィルターの見せ方だけでCVRが42%変動しています。影響幅が最大です。
クリックヒートマップで、フィルターが押されているかを先に確認します。 押されていなければ、機能を増やす前に「押せると分かる見せ方」に直します。
Dejamで商品一覧ページを検証する
ヒートマップ
クリックヒートマップで、フィルター・並び替え・ページ送りが押されているかが分かります。 利用率が低い機能は、存在しないのと同じです。離脱ヒートマップでは、1画面目で離脱しているかスクロール後に離脱しているかを区別できます。
ABテスト
フィルターの配置・ラベル・表示形式をノーコードで検証できます。一覧ページはテンプレート単位で全カテゴリに反映されるため、1本の検証の影響範囲が大きい領域です。
自動解析
ゴールデンルート機能でページ遷移の最適パスを特定できます。「一覧 → 詳細 → カート」以外の経路で買われているかが分かります。
よくある質問
Q. フィルターは左サイドバーに置くのが定石ではないのですか？
A. 自社で検証してください。 公開事例では左側配置がCVR42%の低下を記録しています（信頼度99%、各68,000人）。デスクトップECの定石とされる配置が、この事例では大きく負けました。
Q. フィルターの利用率が低いのは機能が足りないからですか？
A. 見つかっていない可能性が高いです。 前述の事例では、文字色をリンク色（青）にするだけでCVRが20.5%向上しています。押せると認識されていなかったことを示しています。
Q. モバイルはグリッド表示が良いですか？
A. リスト形式が勝った事例があります。 1行1商品で大きなサムネイル・価格・カラー選択を出した形式が、1行2商品のグリッドに勝ち、訪問者あたり収益が7%上昇しました（信頼度94%）。モバイルは一覧性より1商品の情報量が効きます。
Q. 並び順のデフォルトは何にすべきですか？
A. CVRではなく「CVR × 平均注文単価」で判定してください。 安い順にするとCVRは上がりますが客単価が下がります。売上で評価しないと誤った判断になります。
Q. 一覧から直接カートに入れられるようにすべきですか？
A. 商材によります。 リピート購入が中心なら有効で、公開事例ではトランザクション10%増・平均注文額は変化なしでした（信頼度95%）。初回購入で情報が必要な商材では、詳細ページを飛ばすとCVRが下がります。
まとめ
商品一覧（カテゴリ）ページのCVR改善について、要点を整理します。
- 見るべき指標は詳細への遷移率・絞り込みの利用率・ページ送り到達率
- フィルターから着手する。 影響幅が最大
- 文字色をリンク色にするだけでCVR20.5%向上した事例がある
- 文言は「結果をフィルタリングする」より**「フィルターを表示する」**が勝った
- 左サイドバー配置はCVR42%低下した事例がある。 定石を検証せずに採用しない
- 適用中の絞り込み条件はタグで表示し個別に外せるようにする
- 並び順は**「CVR × 平均注文単価」で判定する**
- モバイルはグリッドよりリスト形式が勝った（訪問者あたり収益7%上昇・信頼度94%）
- 一覧からの直接カート投入でトランザクション10%増・客単価は変化なし
- ただし初回購入で情報が必要な商材では逆効果になりうる
- 一覧ページはテンプレート単位で全カテゴリに効くため1本の影響が大きい
CVR改善ならDejam！一覧ページの機能が使われているかを先に測る
Dejamは、LP制作・ヒートマップ分析・ABテスト・AI自動解析をオールインワンで提供するCVR改善特化ツールです。「一覧から詳細に進んでもらえない」という段階から、原因を特定して改善するまでを総合支援します。
Dejamが選ばれる理由
- ワンプロダクトで完結: LP制作・ヒートマップ分析・ABテストをすべて単一ツールで実施
- 月額3万円〜利用可能: オプティマイズプラン月額3万円〜 / CMSプラン月額5万円〜 / オールインワン月額12万円〜
- ユーザー課金なし: 何名で使っても追加費用は発生しない
- ISMS認証取得: ISO/IEC 27001:2022 & JIS Q 27001:2023認証取得済み
- 毎週アップデート: 市場トレンドとユーザーリクエストに応じて機能を毎週拡充
- 権威ある実績: 代表がダイレクトアジェンダで2連覇。LPO顕彰制度「LPO AWARD」主催者
Dejamの主要機能
- LP/記事LP制作: ノーコード・コードの切り替えに対応。AIで生成したコードを直接取り込み可能
- ヒートマップ: 5種類（クリック/クリックイベント/熟読/滞在/離脱）。データ保存期間無制限
- ABテスト: デザイン変更テスト・リダイレクトテスト・ポップアップテストの3種類。AIが自然言語でテストコードを自動生成
- 自動解析: どのコンテンツがCVRに貢献しているかAIが自動解析。ゴールデンルート機能でページ遷移の最適パスも特定
- プロジェクト管理: 改善施策の進捗をチームで共有できる
クリックイベント計測でフィルターや並び替えのクリック数が取れます。 「機能はあるが使われていない」状態は、これを測らないと分かりません。
