実践
コレクションページにランキングレコメンドを置く実践プレイブック
Shopify のコレクションページに「ランキング」レコメンドを配置する具体的な手順と、コレクション文脈を崩さないためのコツをまとめたプレイブックです。今日からすぐ試せる形で整理しています。
結論：ランキングは「同じコレクションの中」で見せ切る。場所は下部かサイドに限定する
コレクションページのランキングは、「今ユーザーが見ているカテゴリの中で、売れている or 評価の高い商品」を見せるのが基本です。これをコレクション下部かサイドに配置すると、カテゴリの文脈を崩さずに、回遊とカートイン率を上げやすくなります。
この記事では、Shopify の標準機能とテーマカスタマイズ、そして最後に RecoBoost を使ったケースという順番で、「今日からできる」手順に落とし込みます。
前提整理：どのコレクションで、どんなランキングを出すか
- 対象コレクションを決める：まずは売上規模が大きい、もしくはアクセス数が多いコレクションから始めます。例：新作 コレクション、レディーストップス コレクションなど。
- ランキングの軸を1つに絞る：基本は 売上数が多い順 か レビュー評価が高い順 のどちらかにします。軸を混ぜると、ユーザーにとって「なぜこれが上位なのか」が分かりづらくなります。
- ランキングの範囲を決める：そのコレクション内だけで完結させます。他コレクションの商品を混ぜるとカテゴリ文脈が崩れ、「探していたものと違う」印象になりやすいです。
- 表示する点数を決める：スマホ中心なら 3〜5 点、PCのサイドバーなら 5〜10 点 程度が目安です。長すぎるランキングは「読み切れないリスト」になりやすいです。
この前提を決めてから、実際の配置作業に進みます。
手順：コレクションページにランキングを置く（今日できる範囲）
ここでは、テーマ編集での簡易的なランキング表現と、アプリでのレコメンドを前提にした一般的な流れを分けて整理します。テーマやアプリによって細部は変わりますが、どの構成でも共通する「やること」を押さえます。
- Shopify管理画面 → コレクション で対象を決める：Shopify管理画面 → 商品 → コレクション を開き、ランキングを表示したいコレクション（例：夏のワンピース）を選びます。URL かハンドル名を控えておくと、テーマ側で条件指定するときに便利です。
- Shopify管理画面 → テーマ → カスタマイズ を開く：オンラインストア → テーマ の対象テーマで カスタマイズ をクリックし、テンプレート から コレクション ページを選択します。プレビューで、ランキングを置きたい位置（商品グリッドの下 / サイド）をイメージします。
- セクション追加でランキング用ブロックを作る：右側のセクション一覧で セクションを追加 をクリックし、利用テーマにある おすすめ商品 や カスタムリキッド / カスタムHTML などを選びます。ランキング専用のタイトルとして 「このカテゴリで人気の商品」 など、コレクション文脈が分かる名前を付けます。
- ランキング対象を「現在のコレクション」に限定する：セクション設定で、商品ソースを選べる場合は 「このコレクション」 / 「現在のコレクション」 に限定します。もしスマートコレクションを使ってランキングを作る場合は、並び順 を ベストセラー にして、そのコレクションをランキング枠に読み込む形にします。
- 表示件数を絞る：セクション側で 表示商品数 の指定があれば、スマホ中心なら 4件前後 に設定します。「もっと見る」リンクを付けるより、「厳選された上位だけを見せる」イメージにするとクリック率が安定しやすいです。
- PCではサイドバー候補も検討する：テーマに サイドバー や 補足セクション がある場合、PCビューでサイドにランキングを入れて、スマホでは商品グリッド下部だけに表示する構成も検討します。テーマの 表示デバイス設定 で、PC / モバイルの表示・非表示を分けられるか確認します。
- 文言を「ランキング前提」に書き換える：セクションの見出しを 「売れ筋ランキング（このコレクション）」 のようにし、説明文を置けるテーマなら 「このカテゴリの中で人気の順に並べています」 と一言添えます。なぜこの順番なのかを明示することで、クリックされやすくなります。
- プレビューでスマホ・PC両方を確認する：テーマエディタ右上のデバイス切り替えで、スマホ・タブレット・PCをそれぞれ確認します。ランキングがスクロールのどの位置に来るか、商品のカードが小さくなりすぎていないかをチェックします。
- 公開前に対象コレクションだけに適用されているか確認する：テンプレートを複製している場合は、テンプレート → コレクション で、「ランキング付きテンプレート」が本当に対象コレクションだけに紐づいているかを確認します。他カテゴリで不自然なランキングが出ていないかも、プレビューでざっと見ておきます。
配置のコツ：下部かサイドか、文脈を崩さない見せ方
- スマホは「商品グリッド直下」が基本：コレクションの商品一覧を見終わった後に、「どれが人気か」をランキングで提示する流れが自然です。フッターの手前 くらいを目安に配置すると、スクロール負荷も抑えられます。
- PCは「右サイド＋下部」の二段構えを検討：商品グリッドの右側に サイドランキング（上位3〜5件） を置き、ページ下部に もう少し詳しいランキング を置くと、閲覧途中でも「人気商品」が目に入ります。ただし、サイドに置きすぎて横幅が窮屈にならないように注意します。
- タイトルでカテゴリ文脈を必ず明示する：単に 「ランキング」 と書くのではなく、「このコレクションの人気順」 や 「〇〇カテゴリの売れ筋」 など、今見ているページとのつながりをタイトルで示します。
- 価格帯やテイストがバラバラになりすぎないようにする：ランキングが偏って、「高額品だけが並ぶ」「セール品だけが並ぶ」といった状況になると、コレクションの世界観とズレが出てきます。必要に応じて、「このコレクションの中で、一定価格帯での売れ筋」など、フィルタ条件を調整します。
- 「カートボタン」はランキング枠にも必ず入れる：ランキングを単なる情報ではなく「その場で選べる選択肢」として機能させるため、ランキング枠のカードにも カートに追加 や 詳細を見る ボタンを置きます。クリック先が別ページに飛ぶだけだと、離脱ポイントが増えます。
- ランキングは「1コレクション1枠」までに抑える：同じページに複数のランキングを置くと、ユーザーが「どれを参考にすれば良いか」迷いやすいです。例えば「売れ筋」と「レビュー高評価」の両方を見せたい場合も、基本はどちらかに絞るか、切り替えタブ形式のUIで1枠に収めます。
よくある失敗と、その回避策
- 失敗1：全コレクション共通のランキングを出してしまう
- 問題：どのコレクションでも同じ「ショップ全体の売れ筋ランキング」が出ると、カテゴリ文脈が崩れ、「いま探しているジャンルとは違う商品」が混じります。
- 回避策：ランキングの対象を 「現在のコレクション」 に限定するか、どうしても全体ランキングを出したい場合は、トップページ専用 にとどめます。 - 失敗2：ランキングの商品の更新頻度が低く、固定化してしまう
- 問題：数か月同じ並びのままだと、リピーターには新鮮味がなくなり、「どうせいつも同じ」と認識されがちです。
- 回避策：ベストセラー順 や 最近よく売れている 条件を使い、自動更新される仕組みにします。手動ランキングの場合は、月1回など更新ルールを決めて運営側のタスクに組み込みます。 - 失敗3：ランキング枠がファーストビューを奪ってしまう
- 問題：コレクションの一番上がランキングになっていると、ユーザーがカテゴリ全体を見渡しづらくなります。意図せず「コレクションの意味」が薄くなります。
- 回避策：ランキングは 商品グリッドより下、もしくは 右サイド のみに配置します。ファーストビューはカテゴリの世界観と新着・主要商品を優先します。 - 失敗4：スマホでランキングが長すぎて、フッターにたどり着けない
- 問題：スマホで10件以上のランキングを並べると、ページが長くなりすぎてストレスになります。フッターリンク（ガイドや特定商取引法など）にも到達しづらくなります。
- 回避策：スマホでは 3〜5件 に絞り、それ以上を見せたい場合は、ランキング専用のコレクションページを別途作成し、「もっと見る」 リンク先として利用します。 - 失敗5：画像比率やカードデザインが本体グリッドとバラバラ
- 問題：ランキング枠だけ画像比率が違ったり、テキスト情報の出し方が異なりすぎると、ブランド全体の統一感が損なわれます。
- 回避策：テーマの カードデザイン設定 を再利用し、可能な限り商品グリッドと同じカードスタイルを適用します。最低でも、画像比率とフォントサイズは揃えることを意識します。
RecoBoostでの次の一歩：コレクション文脈を保ったAIランキングに切り替える
手動やテーマ標準のベストセラー並びから一歩進めたい場合は、RecoBoost のランキングロジックを使うと、コレクション文脈を維持しつつ自動更新できます。導入後、最低限ここまで設定しておくと運用が安定します。
- Shopify管理画面 → アプリ → RecoBoost を開く：Shopify管理画面 → アプリ → RecoBoost をクリックしてアプリ管理画面を開きます。
- レコメンド設定でランキング系ロジックを選ぶ：レコメンド設定 から新規ウィジェットを追加し、ロジックで ランキング や 人気商品（名称はアプリ設定により異なります）を選択します。ここで、「コレクション内ランキング」を選べる場合はそれを有効にします。
- 表示位置を「コレクションページ下部 / サイド」に指定する：表示位置 の設定で コレクションページ を選び、商品一覧の下 もしくは サイドバー を選択します。テーマ連携が必要な場合は、ガイドに沿って テーマ → カスタマイズ で RecoBoost セクションを追加します。
- ターゲットコレクションと件数を設定する：RecoBoost 側で 対象コレクション を指定し、表示件数をスマホ基準で 3〜5件 に設定します。必要に応じて、売上・閲覧・カートインなど、ランキングの指標となるシグナルの優先度を調整します。
- ABテストやクリック率を確認して、タイトル・件数を微調整する：RecoBoostのレポートでクリック率や売上貢献を見ながら、ランキング枠のタイトルや表示件数を調整します。「売れ筋ランキング」より「このカテゴリで人気の商品」の方が合う場合もあるため、文言も含めて数週間単位で検証します。