はじめに
商品ページまで来たユーザーが「悪くないけれど、他の選択肢も見てから決めたい」と思ったとき、比べる相手がその場に見つからなければ、検索サイトに戻って他店の商品と比較を始めてしまいます。サイト内で比較を完結してもらえるかどうかは、売上に直結する分かれ目です。
この記事では、モーターサイクル用品を扱うECサイトで実装した関連商品表示について、どんな条件で商品を選び、どんな順番で並べ、どうやって表示速度を保っているのかを解説します。
関連商品表示とは何か
「似た商品」を並べて比較検討を助ける機能
関連商品表示は、いま見ている商品と同じカテゴリの別商品を提案する機能です。ジャケットを見ているユーザーに、別のデザインや色違い、近い価格帯のジャケットを並べて見せます。目的は買い足しではなく、納得して選んでもらうこと。選択肢を目の前に並べることで、「他も見てから決めたい」という気持ちにサイト内で応えます。
コーディネート提案とは役割がまったく違う
同じレコメンドでも、組み合わせて使える商品を提案する「コーディネート提案」とは選び方が正反対です。あちらはカテゴリを外して組み合わせを作り、こちらはカテゴリを合わせて比較の土俵を作ります。
表のとおり、2つのレコメンドは「カテゴリを変えるか、そろえるか」で役割を分けています。この2つを商品ページに併設することで、「合わせて買う」と「比べて選ぶ」の両方をカバーできる形です。
表示する商品の選び方
そろえる条件と外す条件
候補に入れるのは、**同じカテゴリ・同じ性別・同じシーズン（または通年）**の商品です。メンズの秋冬ジャケットの比較相手として、レディースや夏物を出しても検討の材料にはならないためです。あわせて、いま見ている商品そのものは候補から除外します。当たり前のようですが、この除外を忘れると「同じ商品が関連商品に出てくる」という間の抜けた表示になってしまうので、条件として明示しておくのが大切です。
候補が多いときの優先順位
条件に合う商品が数十件あるとき、どれを先に見せるかで提案の質が変わります。今回は次の3つを優先する形にしました。
- 価格帯が近い商品: 5万円のジャケットの比較相手は、同じ5万円前後を優先
- 在庫がある商品: 在庫切れより、いま購入できる商品を優先
- 新着商品: 同条件なら、新しく追加された商品を優先
ユーザーが実際に比較する場面を想像して、「候補として自然な順」に並べる。この優先順位も、担当者の感覚ではなくルールとして固定しています。
見せ方と速さの工夫
件数を絞り、画像で比較できるようにする
関連商品は多く出せばいいわけではなく、並べすぎるとかえって選びにくくなります。そこで表示は数件程度に絞り、商品画像を主役に、価格と商品名だけを簡潔に添える形にしました。比較検討の入り口は「パッと見て違いが分かること」なので、文字情報は商品ページ本体に任せています。スマートフォンでは横スクロール、PCでは複数列のグリッドと、画面幅に応じてレイアウトも切り替えています。
商品情報と一緒に取得して通信を減らす
関連商品のデータは、商品ページを表示するタイミングでメインの商品情報とまとめて取得します。別々に問い合わせるより通信の回数が減り、表示の待ち時間を抑えられます。さらに、一度取得した結果は一定時間キャッシュ（結果の一時的な作り置き）として使い回すので、同じ商品ページにアクセスが続いても、裏側のShopify（商品データを預けているECの基盤サービス）への負荷は増えません。
構成図
流れを一言でまとめると、いま見ている商品と同じカテゴリの商品を集め、比較しやすい順に並べ替えて数件だけ見せる、という処理です。
まとめ
関連商品表示は、「同じカテゴリでそろえて、現在の商品を外し、比較しやすい順に絞って見せる」というルールの積み重ねでした。派手な仕組みではありませんが、ユーザーの離脱先だった「他を探しに戻る」動きをサイト内に引き留められる、費用対効果の高い機能です。コーディネート提案と組み合わせることで、商品ページが「1商品の説明の場」から「買い物の相談相手」に近づきます。