商品ページの「関連商品」ブロックを設計する5つの実務原則

商品ページに「関連商品」ブロックを置いているのに、クリックが少ない、売上に効いているか分からないという相談はよくあります。結論として、関連商品は「なんとなく設置」ではほとんど成果が出ませんが、5つの原則を押さえて設計すれば、カート単価アップに直結する強力なブロックになります。この記事では、Shopify 商品ページにおける関連商品ブロックの位置・点数・ルール・ラベル・検証方法を、実務でそのまま使えるレベルまで分解します。明日から運用中のストアで試せるよう、できるだけ具体的な基準と失敗パターンも添えて解説します。

原則1：関連商品は「下すぎず、上すぎず」に置く

関連商品ブロックは、配置場所で成果が大きく変わります。商品説明よりかなり下に置いてしまうと、スクロールされずクリック率が著しく下がりがちです。一方で、商品画像直下に置くと、メイン商品の情報を読む前に視線が分散してしまい、肝心の「カートに追加」率を下げるリスクがあります。関連商品はあくまで補助の役割なので、主役である商品情報の邪魔をしない位置が重要です。

実務的なおすすめ位置は「商品説明＋サイズ・素材などの必須情報の直後」です。スマホで見たとき、1〜2スクロールで必ず目に入るあたりを目安にします。逆に、レビューのさらに下や、フッター直前などに置くと、ページの閲覧数のわりに関連商品の表示回数が伸びません。ある店舗では、関連商品をページ最下部から商品説明直後に移動しただけで、関連商品のクリック率が約2倍になり、そこ経由の売上も目に見えて増えました。

また、PCとスマホではレイアウトの見え方が大きく違います。PCでは「右カラム」に縦長で表示したくなるケースもありますが、スマホでの折り返し・順番も必ず確認してください。スマホ表示で「関連商品がレビューより前に出てしまう」「説明が分断される」といった状態はよく起こる失敗例です。テーマのカスタマイズ画面やプレビューを使い、必ずモバイル優先で位置を決めましょう。

原則2：1ブロックの表示点数は「4〜8点」に絞る

関連商品は「たくさん出した方が売れそう」と思いがちですが、点数を増やし過ぎると、むしろ1商品あたりのクリック率は下がります。選択肢が多いと人は選べなくなるためです。10点以上を一度に並べてしまうと、ユーザーはざっと眺めるだけでスルーしやすくなります。

実務上は、1つの関連商品ブロックにつき「PCで4〜8点、スマホでは2〜4点が一画面に収まる」設計がおすすめです。横スクロールのスライダー型にする場合でも、最初に見える商品数を4点前後に抑え、それ以上はスワイプで見せるくらいがちょうど良いバランスです。実際、多くのストアで「4点表示」と「8点表示」を比較すると、クリック率の差はそれほど大きくなく、むしろ8点以上に増やしたときにクリック率が頭打ちになるパターンがよく見られます。

注意したいのは、「似たような商品を詰め込みすぎない」ことです。たとえば、同じ色違いTシャツがほとんどを占める8点よりも、「似たテイストのトップス＋合わせられるボトムス＋小物」といった構成の4〜6点の方が、1点あたりのクリック率とカート追加率が高くなるケースが多くあります。関連商品はカタログの一覧ではなく、「今のユーザーに候補をしぼってあげるリスト」と割り切ると点数を絞りやすくなります。

原則3：ロジックは「興味の延長」と「ついで買い」を分けて設計する

関連商品ブロックの中身は、「なんとなく同じコレクションの商品を出す」だけだと成果が頭打ちになります。関連商品の役割は大きく分けて2つ、「興味の延長（代替・比較）」と「ついで買い（セット・アクセサリー）」です。この2つを混ぜるのではなく、どちらを狙うブロックなのかをはっきり決めてロジックを設計した方が、ユーザーの行動と合いやすくなります。

興味の延長を狙う場合は、「同じカテゴリ・似た価格帯・似たスタイル」の商品を出すのが基本です。例として、黒いスニーカーの商品ページであれば、同じブランドや同じカテゴリ（スニーカー）で、価格も大きく離れていない商品を優先します。このとき、在庫がない商品やサイズ欠けが多い商品を含めてしまうと、クリックされても買えないリストになってしまうので、在庫状態を必ず条件に入れてください。

ついで買いを狙う場合は、「一緒に使うと便利な商品」をルールベースで決めます。たとえば、カメラならメモリーカード・ストラップ・レンズフィルター、ワンピースならベルトやカーディガン・アクセサリーなどです。「一緒によく購入されている商品」のデータが取れているならそれを優先し、データが十分でないカテゴリは、まずはハンドピックの手動設定から始める方が現実的です。よくある失敗は、「興味の延長」と「ついで買い」を1ブロックに混ぜてしまい、ユーザーが何を見せられているのか分からなくなるパターンです。狙いが違う2種類のレコメンドは、ブロックを分けて設置した方が機能します。

原則4：ラベル文言とUIで「何のリストか」を伝える

同じレコメンドでも、「何の意図で出ているのか」が分かるかどうかでクリック率は変わります。単に「おすすめ商品」とだけ書かれていると、「本当に自分に関係あるのか？」と感じられやすく、無視されがちです。原則3で決めたロジックに合わせて、ラベル文言も狙いをはっきり伝えるものに変えましょう。

例えば、比較用であれば「こちらもチェックされています」「この商品を見ている人に人気」など、他のユーザー行動を示す文言が有効です。セット購入を促したい場合は、「一緒に購入されている商品」「この商品と相性の良いアイテム」など、今見ている商品との関係が分かる表現にします。ラベルを変えるだけでも、クリック率が数パーセント単位で変わるケースは珍しくありません。

UI面では、価格・商品名・サムネイルに加えて、「バリエーションや在庫があること」を短く伝えられるとベターです。バリエーション数が多い商品ばかりを並べると、ユーザーが「選ぶのが大変そう」と感じて離脱する場合もあるので、シンプルに選べる商品を混ぜる工夫も有効です。また、PCではホバー時に「クイックビュー」や「カートに追加」ボタンを出せるテーマもありますが、モバイルではタップ操作が増えすぎないよう、商品詳細ページへの遷移を基本にした方がストレスが少なくなります。

原則5：効果を「クリック率」と「経由売上」で評価する

関連商品ブロックは、設置して終わりではなく、必ず数字で評価しながら改善していく必要があります。ここでのポイントは、「表示回数」だけを見ないことです。表示はされていても、クリックされていなければ売上にはつながりません。最低限見るべき指標は「クリック率」と「関連商品経由売上（あるいは関連商品経由カート追加数）」の2つです。

クリック率は、「関連商品ブロックの表示回数に対する、関連商品へのクリック数」で計算できます。例えば、ある1週間で関連商品が1,000回表示され、80回クリックされたなら、クリック率は8％です。配置やラベル、表示点数を変えたときに、この数字がどう変化するかを見ていきます。クリック率が明らかに下がる変更は、一度戻して別案を試す判断がしやすくなります。

関連商品経由売上は、可能であれば「関連商品ブロックからクリックされた商品が、そのセッション内で購入につながった金額」を見ます。ここまで細かくトラッキングできない場合は、「関連商品からのクリック数」と「そこからのカート追加数」の比率だけでも構いません。例えば、クリック100件のうちカート追加が5件なら追加率5％です。この数字を、別のレコメンドロジックと比較することで、「興味の延長」と「ついで買い」のどちらが自分のストアでは効きやすいかが見えてきます。数字を見ながら、3〜4週間ごとに小さな改善を繰り返す運用が理想です。

まとめると、関連商品ブロックで成果を出すには「位置」「点数」「ロジック」「ラベル」「評価」の5つをセットで設計することが重要です。配置を商品説明直後にし、1ブロック4〜8点に絞り、「興味の延長」と「ついで買い」を分けてロジックとラベルを決める。そのうえで、クリック率と経由売上を定期的にチェックし、数字を見ながら調整していくことで、自分のストアに合った最適な関連商品ブロックが見えてきます。なんとなくの「おすすめ」を卒業し、意図をもったレコメンドに変えていくことが、商品ページの収益性を一段引き上げる近道です。

RecoBoostならこう活かす

RecoBoostでは、Shopifyの商品ページに「興味の延長」と「ついで買い」を分けた関連商品ウィジェットを配置できます。ブロックごとに表示位置や表示点数、ラベル文言を管理できるため、この記事で触れた5つの原則をそのまま設定に落とし込めます。また、各ウィジェット単位で「表示回数・クリック数・売上」などの指標を確認できるので、「ラベルを変えた場合」「点数を4点から8点に増やした場合」などのテスト結果を数字で比較しやすくなります。既存テーマに大きな改修を入れずに、少しずつ配置やロジックを変えながら最適な関連商品ブロックを探りたいときに、運用担当者が自分で試行錯誤しやすい設計になっています。