商品一覧ページの直帰率を下げる｜ランキング表示と商品カードの改善

商品一覧ページまでユーザーはアクセスしているものの、そこから個別の商品ページへの遷移率が低く、原因を特定できずに悩むことは少なくありません。
この記事を読めば、自社サイトの「商品一覧ページ」における使い勝手の悪さや情報不足を解消し、商品詳細ページへの遷移率（CTR）およびサイト全体の購入率（CVR）を向上させるための具体的な修正項目を特定できます。
ネットショップの作り方や優れたデザインのヒントを得て、効果的な改善サイクルを始めましょう。

商品一覧ページはどんな役割を持つ？

商品一覧ページは、ユーザーが 複数の商品を比較・検討し、興味を持った商品の詳細ページへスムーズに移動するための重要な役割を担っています。最終的な購入決定は商品詳細ページの役割ですが、一覧ページも購入意欲を高める上で不可欠です。

商品一覧ページでは、商品の画像、商品名、価格といった基本情報に加えて、ユーザーが求める商品を効率的に見つけられるよう、絞り込み機能、ランキング、カテゴリー説明文、イメージ画像などを表示することが推奨されます。これらの要素は、ユーザーが商品を素早く見つけ、比較検討を容易にするために重要です。

詳細な説明や使用方法については商品ページで伝えるべき情報ですが、一覧ページにおいても、ユーザーの選択を助けるための適切な情報を提供する必要があります。 情報を詰め込みすぎると、かえって比較検討がしにくくなる可能性もありますが、必要な情報を適切に配置することで、ユーザーは効率的に商品を見つけられます。

このページは、ユーザーが商品を俯瞰しながら興味のある一点を見つけてもらうための「中間地点」として位置づけ、情報の取捨選択を行う必要があります。一覧ページでの体験は、次の商品ページへの期待値を左右する重要な要素となります。

商品一覧ページの直帰率が高い原因は？

商品一覧ページの直帰率が高いときは、並んだ商品の中から目的の商品を見つけられず、比べる手がかりもないまま他のサイトへ移られている可能性を疑う必要があります。 目的の商品が見つからないと、47.9%が『他のECサイトを使う』と回答しました（シナブル調べ, n=1,030, 2025年12月）。
商品一覧ページは、顧客が「どれにするか」を決める場所です。商品数が多いのに絞り込みにくい、並び順の基準が分からない、商品カードの情報だけでは違いが判断できない、といった状態では、顧客は自社サイトで比べるのをやめてしまいます。直帰率を下げるには、デザインを一新する前に「絞り込み・並び順」「ランキング」「商品カードの情報」の3点で、比べて選べる状態になっているかを確認することが出発点になります。
ECサイトの導線設計については「商品が見つからない状況を避けるECサイトの導線設計」で詳しく紹介しています。

商品一覧ページはどこから改善すればよい？

商品一覧ページからの離脱を防ぎ、クリック率を向上させるためには、UI/UXの観点から現状のページを評価し、課題点を洗い出すことが不可欠です。
ここでは、レイアウト、商品カード、ランキング、絞り込みと並び替え、表示方法の順に、具体的な改善点を紹介します。
この作り方に沿って自社のデザインや商品ページ構成を見直すことで、改善の糸口が見つかります。

PCとスマホで一覧ページのレイアウトはどう変えるべき？

PCとスマートフォンそれぞれのデバイス特性に合わせた最適なレイアウトを設計します。
PCでは、一度に多くの情報を表示できるグリッドレイアウトを基本とし、画面の左側に絞り込みメニューを配置するのが一般的です。
一方、スマートフォンでは、指によるタップ操作と縦スクロールが中心となるため、列数を絞ったレイアウトで商品を見やすく表示させます。

特にスマホでは、タップ領域のサイズを十分に確保し、画面下部など親指が届きやすい範囲に主要な操作ボタンを配置するなどの配慮が求められます。
レスポンシブデザインを採用している場合でも、各デバイスで表示崩れがなく、直感的に操作できるかを確認する作り方が重要です。

商品カードに何を載せるべき？

商品カードには、画像・商品名・価格に加えて、 一覧の段階で比べられる判断材料を載せるべきであり、その代表がレビューです。

ECサイト利用者を対象とした調査では、『レビュー・満足度が見られる』ことや『お気に入りの値下げ通知』が、顧客にとって便利な機能として認識されていることが示唆されています。

一覧で評価が分からないと、顧客は商品詳細ページを1つずつ開いて比べるしかなく、その手間が離脱につながります。また、お気に入りボタンを商品カードに置けば、今すぐ買わない顧客とも関係を残せます。
EC Intelligenceでは、 お気に入り商品の値下げ・再入荷・在庫僅少を検知して、メールやLINEで自動通知する施策が組めます。

カードに載せる項目や配置は、DOM要素の変更で修正でき、HTML/CSS/JavaScriptを直接記述することもできます。A/Bテストと効果の自動計測にも対応しているため、情報を増やしすぎていないかも含めて検証しながら決められます。

カテゴリページにランキングを置く効果は？

カテゴリページにランキングを置く効果は、商品が多いカテゴリでも「まずどれを見ればよいか」という比較の起点を示し、回遊を促せることです。ECサイトで便利だと思うこととして 『人気商品比較が簡単』を挙げた人は、20代32.7%・60代45.4%でした（シナブル調べ, n=1,015, 2024年8月／20代・60代対象）。
公開事例では、総合レンタルのダーリングコーポレーションが、検索・レコメンドに加えてランキングや関連商品の表示に取り組み、サイト回遊率が向上しています。
レコメンドとは、顧客の閲覧・購買データにもとづいて、その人に合った商品を自動でおすすめする機能のことです。
具体的な施策としては、カテゴリページのファーストビューに、そのカテゴリのランキングやおすすめを表示する方法があります（対象：カテゴリページの訪問者／タイミング：カテゴリページの表示時）。EC Intelligenceのレコメンドはランキング表示にも対応し、表示数（インプレッション）課金がないため、複数のカテゴリページに設置してもコストは増えません。
ECサイトの商品ランキングについては「ECサイトの商品ランキング表示活用ガイド」で詳しく紹介しています。

絞り込みと並び替えで探しやすさはどう上がる？

ユーザーが膨大な商品の中から目的のアイテムへ素早くたどり着けるよう、絞り込みとソートの機能を充実させます。
絞り込み項目には、カテゴリ、価格帯、ブランド、色、サイズといった、商材の特性に応じた選択肢を用意します。
選択した条件が分かりやすく表示され、リセットも容易に行えるデザインが理想的です。

ソート機能では、「新着順」「価格が安い順」「人気順」といった基本的な並び替えを提供し、ユーザーが自身の基準で商品を整理できるようにします。
こうしたナビゲーションの作り方が、 ユーザーの「見つけたい」というニーズに応え、サイトの使いやすさを大きく向上させます。
ECサイトの検索エンジンについては「EC検索エンジンを強化するとCVRが上がる理由」で詳しく紹介しています。

並び替えの「おすすめ順」は何を基準にすべき？

並び替えの「おすすめ順」は、店舗側が売りたい順ではなく、顧客の閲覧・購買データにもとづいた順にするのが基本です。顧客は「おすすめ」という言葉に、自分にとって選ぶ価値のある順番を期待しています。 在庫を動かしたい商品や利益率の高い商品ばかりが上位に並ぶと、期待とのずれが生まれ、並び替えそのものが使われなくなります。
売りたい商品を見せたい場合は、おすすめ順に混ぜ込むのではなく、特集やバナーなど別の枠で見せるほうが、顧客の信頼を損ないにくくなります。
EC Intelligenceのレコメンドは、テキストマイニングと協調フィルタリングを組み合わせたハイブリッド方式で、閲覧・購買データにもとづいて顧客に合った商品を選び出します。一覧ページの上部などにレコメンド枠を設け、並び替えとは別の入口として「あなたへのおすすめ」を示す方法も検討できます。

無限スクロールとページ送りはどう使い分ける？

サイトの特性やユーザーの閲覧行動を考慮し、商品の表示方法として無限スクロールとページネーションを適切に使い分けます。
無限スクロールは、SNSのタイムラインのように次々と商品を表示させるため、偶発的な商品との出会いを促したい場合に有効です。
特にビジュアルが重視されるアパレルや雑貨などの商材に向いています。

一方、ページネーションは、特定の商品を探しているユーザーが目的のアイテムを見つけやすく、自分が今どの位置にいるかを把握しやすい利点があります。
型番商品が多いサイトや、じっくり比較検討したいユーザーが多い場合に適しており、フッター情報へのアクセスを妨げない点もメリットです。

顧客ごとに商品一覧の見せ方を出し分けるべき？

購買の傾向が異なる会員が多いECサイトでは、顧客ごとに一覧ページやランキングの見せ方を出し分けることで、全員に同じ内容を見せるよりも、自分に関係のある商品に早くたどり着いてもらえます。
パーソナライズとは、顧客一人ひとりの興味や履歴に合わせて、表示内容や配信内容を最適化することです。
具体的な施策としては、会員の購買カテゴリに応じて、表示するランキングのカテゴリを出し分ける方法があります（対象：購買履歴のある会員／タイミング：ランキングの表示時）。たとえば、過去にメンズ商品を購入している会員にはメンズのランキングを優先して見せる、といった形です。
EC Intelligenceは、 WEB接客とレコメンドを同じ顧客データ基盤で動かしているため、購買履歴を条件にした表示の出し分けを組み合わせられます。全体の人気と個人の関心のどちらを優先するかはサイトごとに異なるため、共通の表示と出し分けた表示を比べながら決めていくのが確実です。

パーソナライズされた商品提案については「ECサイトにおけるMA・CRO機能」で詳しく紹介しています。

商品一覧ページの改善はどう進めればよい？

商品一覧ページの改善を成功させるためには、担当者の勘や感覚に頼るのではなく、データに基づいた客観的なアプローチが不可欠です。
現状分析によって課題を正しく特定し、ABテストを通じて仮説を検証するというサイクルを回すことで、施策の効果を最大化できます。
この分析と検証のステップを踏む作り方が、着実な成果につながります。
ECサイトのABテストについては「ECサイトのABテスト完全ガイド」で詳しく紹介しています。

一覧ページの課題はどう特定すればよい？

アクセス解析ツールやヒートマップツールを用いて、商品一覧ページの現状をデータで把握し、具体的な課題を特定します。
アクセス解析では、ページごとの離脱率や商品詳細ページへの遷移率、各商品のクリック数などを確認し、どこにボトルネックがあるのかを探ります。
あわせて、一覧から遷移した先の商品ページの滞在時間も見ておくと、一覧で見た印象と詳細の内容がずれていないかを確かめる手がかりになります。
ヒートマップを使えば、 ユーザーがページのどこをよく見ていて、どこでスクロールをやめてしまうのか、どの絞り込み条件が頻繁に使われているのかなどを視覚的に把握できます。

これらのデータから「なぜこのエリアで離脱が多いのか」「なぜこの商品はクリックされないのか」といった仮説を立てることが、改善の第一歩となります。

ABテストで改善効果はどう確かめる？

データ分析から立てた仮説を検証し、改善効果を定量的に測定するためにABテストを実施します。
まず、「サムネイル画像に動画を追加すればクリック率が向上するのではないか」といった具体的な仮説を設定します。
次に、現行のデザイン（Aパターン）と改善案（Bパターン）の2種類を用意し、ツールを使ってユーザーにランダムに表示させます。

この際、 一度のテストで変更する要素は一つに絞るのが原則です。
一定期間データを収集した後、クリック率やコンバージョン率といった指標を比較し、どちらのデザインが優れているかを統計的に判断します。
このサイクルを継続的に回す作り方が、ページのパフォーマンスを最大化させます。

商品一覧ページの改善でよくある質問は？

商品一覧ページの改善に取り組む上で、多くの担当者が共通して抱く疑問点について解説します。

商品一覧ページに情報を詰め込みすぎると、かえって改善の妨げになりますか？

はい、妨げになります。
情報が多すぎるとユーザーは比較検討しづらくなり、選択疲れから離脱する原因となります。

一覧ページの役割はあくまで「比較・選別」です。
ユーザーが商品ページを開くかどうかを判断するための最低限の情報（画像、商品名、価格、レビュー評価、送料無料の有無など）に絞り込むことが推奨されます。

商品一覧ページの表示形式は、無限スクロールとページ送り（ページネーション）のどちらが良いですか？

どちらが良いかは、扱う商材やユーザーのサイト内での行動によって異なります。
アパレルなど偶発的な発見を促したい場合は無限スクロール、型番商品など目的買いが多い場合はページ送りが適している傾向があります。
自社サイトのユーザーにとってどちらが最適か、ABテストで判断するのが確実です。

商品一覧ページの直帰率を下げるために次に何をすべき？

商品一覧ページの改善は、ECサイトの売上向上に直結する重要な施策です。
まず、このページの役割が「購入」ではなく「比較・選別」であることを理解し、ユーザーが目的の商品を「見つけやすい」状態を作ることが離脱防止の鍵となります。
レイアウト、商品カード、ランキング、絞り込みと並び替えといったUI/UXの各要素を、データ分析とABテストに基づいて継続的に最適化していくプロセスが求められます。
ランキングやレコメンドの表示から、サイト内検索・WEB接客との連携までを1つの基盤で進めたい場合は、EC Intelligenceの資料で具体的な機能と活用例をご確認ください。