トップページに「閲覧履歴レコメンド」を置く実践プレイブック

このプレイブックで実現すること

トップページに「あなたの閲覧履歴からのおすすめ」を出すと、ユーザーごとにパーソナライズされた導線が作れます。一度見た商品にすぐ戻れるので、カート投入・購入の再検討を促せるのがメリットです。

ここでは、Shopifyストアのトップページに閲覧履歴レコメンドを設置するために、

- どこに配置するか
- プライバシーにどう配慮するか
- 閲覧履歴がないユーザー向けのフォールバックをどう設計するか

を、今日から試せる手順としてまとめます。

前提：閲覧履歴レコメンドの基本と注意点

• 「閲覧履歴レコメンド」とは何か：ユーザーが過去に閲覧した商品をもとに、同じ商品や類似商品を表示するレコメンド枠です。「最近チェックした商品」「あなたが見たアイテム」などのラベルで見せることが多いです。
• どのユーザーが対象になるか：多くのアプリでは、ブラウザのクッキーやローカルストレージ、セッション情報を使って「同じブラウザ内の過去閲覧」を判定します。ログインしていないユーザーでも、同じブラウザであれば一定期間は履歴が使われるケースが一般的です。
• パーソナライズとプライバシーのバランス：閲覧履歴は個人の興味が強く表れる情報です。ストアのジャンル（医療・ヘルスケア・アダルトなど）によっては、あからさまな文言や大きすぎる表示は避ける配慮が必要です。ラベルや表示位置を慎重に決めましょう。
• 技術的な前提：この記事では、テーマのカスタマイズができることと、レコメンドアプリ側で 閲覧履歴 ロジックを有効化できることを前提とします。コード編集が難しい場合は、まずアプリのウィジェット機能（ドラッグ＆ドロップで追加できるブロック）があるかを確認してください。

手順：トップページに閲覧履歴レコメンドを設置する

• Shopify管理画面でテーマエディタを開く：管理画面の オンラインストア → テーマ から、使用中テーマの カスタマイズ をクリックします。
• トップページのセクション構成を確認する：テーマエディタ上部のページ選択で ホームページ を開き、左側のセクション一覧で既存の構成（メインビジュアル、コレクション一覧、レビューなど）を確認します。ここで「閲覧履歴を差し込みたい位置」をイメージしておきます。
• 閲覧履歴用のセクション（またはブロック）を追加する：左側のセクション一覧で セクションを追加 または既存セクション内の ブロックを追加 をクリックし、レコメンドアプリが提供する 閲覧履歴 または 最近見た商品 用のウィジェットを選びます。アプリ名がセクション名になっている場合は、該当アプリを展開してロジックを選択します。
• ラベル（見出し）を設定する：追加したセクションの設定パネルで、タイトルに「最近チェックした商品」「あなたが見た商品」など、ユーザーに伝わりやすいラベルを入力します。プライバシー配慮が必要なジャンルの場合は、「チェックした商品」のように「あなた」や「履歴」を強調しないラベルにするのも有効です。
• 表示位置を調整する：セクション一覧で、閲覧履歴セクションをドラッグして位置を移動します。多くのストアでは「メインビジュアル（ヒーロー）＋注力コレクション」の直下か、人気商品リストの直下に置くのが定番です。一番上にしすぎると新規ユーザーには意味がないため、ファーストビュー直後〜ページ中盤あたりに置くのがおすすめです。
• 表示点数とレイアウトを設定する：セクション設定で 表示商品数 や スライダー/グリッド表示 を選べる場合、PCでは 8〜12 商品、スマホでは 4〜8 商品が目安です。まずはスライダー形式にして、横スクロールで多くの商品を見せられるようにすると邪魔になりにくくなります。
• 閲覧履歴がないときのフォールバック設定を行う：アプリ側に 閲覧履歴がない時は○○を表示 といった設定がある場合、後述の「空状態のフォールバック設計」の方針に従って、新着商品 や 人気商品、または おすすめコレクション を選びます。テーマ側で非表示／表示制御する場合は、「商品が0件のときはセクションを隠す」オプションがあるかも確認してください。
• プレビューで挙動を確認する：別タブでストアフロントを開き、いくつかの商品詳細ページを閲覧したあと、トップページを再読み込みして閲覧履歴枠が期待どおりに動作するか確認します。シークレットウィンドウ（閲覧履歴なし）と通常ウィンドウ（閲覧履歴あり）の両方で動作を比べるのがポイントです。
• 公開前にモバイル表示と速度をチェックする：テーマエディタ右上のデバイス切替で モバイル を選び、スクロール量や表示崩れがないか確認します。表示が重く感じる場合は、表示商品数を減らす・セクション位置を少し下げるなどで調整します。

配置のコツ：パーソナライズを効かせる見せ方

• 新規ユーザーとリピーターの両方を想定して位置を決める：閲覧履歴は、2回目以降の訪問や、複数ページを回遊したユーザーに特に効きます。一方、初回訪問では空になることも多いので、トップのヒーローエリアより少し下に置き、上部にはブランド訴求・主力コレクションを優先する構成が現実的です。
• タイトルと説明文で「何のリストか」を明確にする：単に商品カードだけ並べるのではなく、「最近チェックした商品」といったタイトルに加え、「さっき見たアイテムにすぐ戻れます」のような短いサブテキストを入れると、ユーザーが機能を理解しやすくなります。
• モバイルでは1〜2行目のカードがすぐ見える位置に：スマホでのスクロール量を意識し、ファーストビューを抜けて1〜2スワイプ内に閲覧履歴が現れる位置に置くと、再訪ユーザーがすぐに気づいて活用しやすくなります。
• 他のパーソナライズ枠と競合させない：トップページに「閲覧履歴」「AI類似商品」「人気ランキング」など複数のレコメンド枠がある場合、ラベルの役割が被らないように並べます。例：上から「人気商品」「おすすめカテゴリ」「閲覧履歴」の順にして、汎用 → 興味ベース → 個別パーソナライズの流れにする、など。
• カテゴリー的にセンシティブな商品は除外ルールも検討する：ジャンルによっては、閲覧履歴に直接出したくない商品があるかもしれません。レコメンドアプリ側で 特定コレクション／タグを除外 できる場合、まずはそこを設定しておくと安心です。

空状態のフォールバック設計とプライバシー配慮

閲覧履歴レコメンドは、ユーザーによって「履歴あり」「履歴なし」の両方が発生します。どちらのケースでも違和感のない体験にするために、フォールバック（代替表示）と文言設計が重要です。

• 履歴なしのとき：人気 or 新着でフォールバック：閲覧履歴がない場合、単に「履歴がありません」とだけ表示すると空白が目立ちます。多くのストアでは 売れ筋商品 や 新着アイテム を代わりに表示する設計が自然です。ラベルも「人気商品」「新着商品」に切り替えるか、「おすすめの商品」に統一しておくと、ユーザーに違和感を与えにくくなります。
• 短期訪問でも「閲覧中の商品」を含める：ユーザーが1〜2商品しか見ていない場合でも、今まさに閲覧している商品や直前に見ていた商品をリストに含めると、「自分向けのリスト」であることが伝わりやすくなります。アプリ側の設定で「現在閲覧中の商品を含める／含めない」が選べる場合は、まずは含める方向で試してみてください。
• プライバシーに配慮した文言にする：とくにプライバシー感度が高い商材では、「あなたの閲覧履歴」のような直接的な表現を避け、「最近チェックした商品」「チェック済みの商品」のようにトーンを和らげた表現を選びます。ラベルから「あなた」「履歴」「行動」などを外すだけでも印象は大きく変わります。
• 履歴の保存期間を長くしすぎない：アプリ側で履歴保存期間を調整できる場合、ストアの性質にあわせて設定します。消耗品やファッションなど回転の早い商材なら短め、耐久財や高額商品ならやや長めといったイメージで調整し、「いつまでも過去が追いかけてくる」印象は避けるのが無難です。
• ログインユーザーには「マイページ連動」も検討：会員制ストアの場合、将来的には「マイページの閲覧履歴」とトップページのレコメンドを揃える設計も選択肢になります。その際も、マイページ内に簡単な説明文（例：最近チェックした商品を表示しています）を添えて、ユーザーが仕組みを理解できるようにしておくと安心です。

よくある失敗と避けるためのチェックポイント

• ファーストビューを閲覧履歴だけで埋めてしまう：新規ユーザーには何も出ない可能性があるため、ヒーローバナーや主要コレクションより上に出すのは避けたほうが無難です。少なくとも1ブロック分はブランドや注力商品の訴求を置き、その下に閲覧履歴を配置します。
• ラベルが抽象的すぎて意味が伝わらない：「おすすめ」だけでは、なぜその商品が並んでいるのかが分かりません。「最近チェックした商品」「あなたに合わせたおすすめ」など、理由が分かるラベルにすることでクリック率が変わります。
• 空状態の見え方をテストしていない：自分のブラウザでは履歴が溜まっているために、履歴なしのパターンを見ないまま本番公開してしまうケースがあります。シークレットウィンドウや別ブラウザで必ず「初回訪問時の見え方」を確認しましょう。
• ページ下部に埋もれて機能していない：トップページ最下部に置くと、そもそもユーザーがそこまで到達せず、閲覧履歴が活かされません。スクロール解析ツールなどがある場合は「どこまで見られているか」を確認し、その範囲内に閲覧履歴枠を収めるようにします。
• 速度低下やレイアウト崩れを放置してしまう：複数のレコメンド枠や画像の多いカードを並べると、モバイルでの表示速度が落ちることがあります。PageSpeed Insights などで定期的に計測し、必要であれば表示数の削減・画像サイズの見直しを行ってください。

RecoBoostでの次の一歩

RecoBoost をお使いの場合、トップページの閲覧履歴レコメンドは次のようなステップで強化できます。

• Shopify管理画面のアプリから RecoBoost を開く：アプリ → RecoBoost をクリックします。
• レコメンド設定で閲覧履歴ロジックを有効化する：RecoBoost 内の レコメンド設定 を開き、ロジック一覧から 閲覧履歴 または 最近チェックした商品 を有効にします（名称はインストール時のバージョンにより異なる場合があります）。
• ウィジェットをトップページに追加する：RecoBoost の ウィジェット管理 で新規ウィジェットを作成し、表示ロジックに 閲覧履歴 を選択します。その後、Shopify のテーマエディタで アプリブロックを追加 から該当ウィジェットをホームページに配置します。
• フォールバックと除外ルールを設定する：RecoBoost 側のウィジェット設定で、閲覧履歴がない場合のフォールバック（人気商品 や 新着商品 など）と、表示したくないコレクションやタグの除外条件を設定します。
• ABテストで配置やラベルを検証する：RecoBoost の分析画面からクリック率・コンバージョンを確認しつつ、タイトル文言やセクション位置を少しずつ変えてテストしていくと、自ストアに最適なパターンが見つかりやすくなります。