← プレイブック一覧へ

実践

商品詳細ページにAI類似商品レコメンドを置く実践手順

Shopifyの商品詳細ページに「AI類似商品」レコメンドを置く理由と、テーマアプリ拡張での実装手順、除外ルールの設計、成果の見方までをステップで整理します。RecoBoostのロジック名もそのまま使える手順です。

商品詳細ページとその下に並ぶ類似商品をイメージした抽象イラスト
AI generated (gpt-image-1)

なぜ商品詳細に「類似商品」を置くのか

商品詳細ページ(PDP)は「買うか・戻るか」が決まりやすい地点です。ここに 類似商品 レコメンドを置くと、

- 検討中の商品が刺さらなかったときの「第2候補」をすぐ提示できる
- バリエーションが多いブランドでは、サイズ・色・価格帯が近い代替を見せやすい
- 検索・カテゴリに戻さず PDP 内で回遊を完結させやすい

といったメリットがあります。

特に AI ベースの similar_products(類似商品) は、閲覧履歴が少ない新規ユーザーでも「この商品が好きならこれも」というレコメンドが出しやすく、Shopify 標準の閲覧行動ベースより安定して機能しやすいのが特徴です。

前提:この手順で想定する環境

  • Shopify 管理画面 でテーマが オンラインストアテーマ に公開されていること
  • オンラインストア 2.0 対応テーマ(セクション・アプリブロック対応)を利用していること
  • Shopify App Store からレコメンドアプリ(ここでは RecoBoost)をインストール済みであること
  • RecoBoost 側で テーマアプリ拡張 に対応したレコメンドブロックが用意されていること

ここからは RecoBoost を例に、商品詳細に AI 類似商品レコメンドを置くところまでを一気通貫で設定する手順を書きます。別のアプリでも、画面名称が多少違うだけで流れはほぼ同じです。

手順:PDP に AI 類似商品レコメンドを設置する

  • Shopify 管理画面 → アプリ → RecoBoost を開く
    - Shopify 管理画面 左メニューから アプリ を開き、一覧から RecoBoost をクリックします。
  • RecoBoost でレコメンドロジックを作成する
    - RecoBoost 内の レコメンド設定 または レコメンドブロック 画面を開きます。
    - 新規作成ボタン(例:レコメンドを作成)をクリックし、ロジックで AI類似商品 を選びます。
    - ブロック名(例:PDP-AI類似商品)をわかりやすく付けて保存します。
  • 商品単位の表示条件を設定する
    - 同じ画面で、表示対象を 商品ページのみ表示 に設定します(「コレクションページで非表示」にあたるチェックがあれば有効化)。
    - 必要に応じて、コレクションフィルタータグフィルター があれば「表示したい商品グループ」にしぼります。
  • 除外ルール(店舗全体)をRecoBoostで設定する
    - RecoBoost の 除外設定 または ルール 画面を開きます。
    - 「レコメンドから除外する商品」で、ギフトカード在庫ゼロ商品 を除外したい場合、対象の 商品タイプタグ に基づいてルールを追加します。
    - セール対象を除外したい場合は、価格比較(compare_at_price)タグ を条件にした除外ルールがあれば活用します。
  • Shopify テーマの編集画面を開く
    - Shopify 管理画面 左メニューから オンラインストアテーマ を開きます。
    - 公開テーマの カスタマイズ ボタンをクリックして、テーマエディタを開きます。
  • テーマエディタで商品ページを選択する
    - テーマエディタ上部のプルダウンから 商品 を選択し、さらに デフォルト商品 など、編集したいテンプレートを選びます。
  • テーマアプリ拡張ブロックを追加する
    - 画面左のツリーから 商品情報 セクション(例:メイン商品商品テンプレート)を選択します。
    - セクションを追加 または ブロックを追加 をクリックし、一覧から アプリブロック を選択します。
    - RecoBoost のアプリブロック(例:RecoBoost レコメンド)を選びます。
  • アプリブロックでロジックを「AI類似商品」に紐づける
    - 追加したアプリブロックをクリックし、右側の設定パネルを開きます。
    - レコメンドタイプ のプルダウンから AI類似商品 もしくは先ほど作成した PDP-AI類似商品 を選びます。
    - タイトル を「この商品に似たアイテム」「あなたにおすすめの類似商品」など、ストアのトーンに合わせて設定します。
  • 表示位置をドラッグして調整する
    - 追加した RecoBoost ブロックを、左側ツリー内でドラッグ&ドロップします。
    - 基本的には 商品説明の下 または レビューセクションの直前/直後 に置くのがおすすめです。
  • プレビューでスマホ表示を確認し、保存する
    - テーマエディタ右上のデバイス切り替えで モバイル を選び、AI 類似商品ブロックが縦長になりすぎていないか確認します。
    - 問題なければ 保存 ボタンをクリックして反映します。

配置のコツ:どこに・いくつ・何カラムで出すか

  • 商品説明の直下に置き、比較検討の「次の一手」にする
    - ユーザーは説明を読んだあとに「自分に合うか?」を判断します。そのタイミングで 類似商品 を出すと、「ちょっと違うかも」と思った瞬間に他の選択肢を用意できます。
  • レビューの前後でテストする
    - レビューが強い商材(コスメ・家電など)は レビュー前 に類似商品を置くと、比較検討の幅を出せます。
    - レビューが少ない商材では、レビューの後 に置いて、ページ下部の離脱を防ぐ回遊フックとして使うパターンもあります。
  • 表示点数は4〜8点程度から始める
    - Shopify テーマのカラム数を 2〜4カラム にし、横スクロール(スライダー)形式にするのがおすすめです。
    - 初期は 4〜8 点程度に絞り、スクロール量が増えすぎないようにします。成果を見てから点数調整します。
  • 「この商品と一緒に購入」系との重複を避ける
    - 同じ PDP に AI類似商品 と「一緒に購入される商品」「最近見た商品」をすべて置くと、ユーザーの視線が分散します。
    - 類似商品ブロックは 1 ページ 1 種類 にし、他のレコメンドとは場所とタイトルを明確に分けると分かりやすくなります。

除外ルールと検証:やっておきたい最低ライン

  • 除外ルール:出したくない商品を明確にする
    - ギフトカード・ノベルティ:類似商品として出すと購入体験を混乱させやすいため、RecoBoost の 除外設定 で商品タイプやタグを条件に外します。
    - 在庫切れ・販売終了商品:Shopify 管理側で非表示にするか、RecoBoost に在庫判定オプションがあれば「在庫あり商品のみ表示」を有効にします。
    - ブランドやラインの混在:ブランドをまたがせたくない場合は、RecoBoost の条件で 同一コレクション同一ベンダー のみに絞ります。
  • まず見るべき指標:クリック率とカート投入率
    - RecoBoost の レポート 画面がある場合、AI 類似商品ブロックごとの クリック率(CTR)カート追加率 を見ます。
    - 両方とも低い場合は「位置が悪くて見られていない」か「似ていない商品が出ている」可能性を疑います。
  • Shopify 側でもセッション単位で傾向を見る
    - Shopify 管理画面分析レポート から、商品詳細ページのパフォーマンスと、セッションあたりの商品閲覧数を確認します。
    - AI 類似商品設置前後で「1 セッションあたりの商品閲覧数」が増えていれば、回遊強化の効果が出ているサインです。
  • A/B 的に位置を変えて2週間ずつ比較する
    - テーマエディタで AI類似商品ブロックの位置 を、
    - パターンA:商品説明のすぐ下
    - パターンB:レビューの直後
    のように変え、2 週間単位で CTR とカート追加率を比較します。
    - どちらが良いか明確になったら、その位置を暫定の標準とし、他の商品テンプレートにも展開します。

RecoBoost での次の一歩

PDP に AI類似商品 ブロックを置けたら、RecoBoost では次の 2 点を進めると成果が見えやすくなります。

  • RecoBoost → レコメンド設定 で「AI類似商品」と他ロジックを分けて管理する
    - PDP-AI類似商品(商品詳細用)と、カート追加前後のおすすめ など、用途ごとにレコメンドを分けて作成します。
    - それぞれのブロックごとにレポートを見て、「どの位置・どのロジックが効いているか」を切り分けて判断できます。
  • RecoBoost → レポート でブロック単位の成果を確認する
    - RecoBoost の レポート 画面から、AI類似商品 ブロックの表示回数・クリック数・売上貢献を確認します。
    - 結果が良い商品テンプレート(例:アパレル、バッグなど)があれば、そのカテゴリの商品詳細ページに優先的に同じパターンを展開します。