スマホで売上を落とさないレコメンド配置プレイブック

結論：スマホは「広く浅く」より「狭く深く」見せる配置にする

モバイルのレコメンドは、PCのように大量に並べるとスクロールが長くなり、UXが一気に悪化します。ポイントは次の3つです。

• 1画面に1目的だけ：レコメンドは「このブロックではこれを提案したい」を明確にする
• 押し込み禁止：カートや購入ボタンなど主要CTAをレコメンドで押し下げない
• 操作しやすいUIだけ使う：カルーセル・折りたたみは「見られやすさ」と「タップしやすさ」で選ぶ

この方針を前提に、商品詳細ページ（PDP）、カート、トップの3か所を中心に、今日からできる具体的な見直し手順を整理します。

前提：モバイルUXで押さえるべき4つのチェックポイント

• ファーストビューに何が見えているか：最初の1画面に、タイトル・価格・主要CTA（例：カートに追加）が必ず収まっているか
• 親指で届く範囲にタップ要素があるか：画面下1/3に主要CTAとメインのレコメンドを配置できているか
• スクロールのリズムが一定か：テキストと画像、レコメンドが交互に現れて、同じUIがだらだら続いていないか
• 読み込み速度に影響していないか：カルーセル用の画像数やアプリ数が多すぎて、モバイルの表示が重くなっていないか

この4点を念頭に、ページごとに「どこに・どのUIで・どれくらい」レコメンドを置くかを決めていきます。

手順：今日からできるスマホ向けレコメンド配置の見直し

• 1. スマホ実機で主要ページを確認する：Shopify管理画面の オンラインストア → テーマ → カスタマイズ を開き、右上のデバイス切り替えで モバイル を選びます。そのうえで、スマホ実機でもストアを開き、商品詳細・カート・トップページを1画面ずつスクリーンショットして、どこにレコメンドが見えているかを確認します。
• 2. 商品詳細ページのレコメンドを「2ブロックまで」に整理する：テーマエディタで 商品テンプレート を開き、レコメンドセクションを確認します。
  - 1つ目：商品情報のすぐ下 に「類似商品」や「この商品を見た人は〜」を1ブロック
  - 2つ目：商品説明の下かレビューの下 に「一緒に購入される商品」などアップセル用を1ブロック
  3つ以上ある場合は、目的がかぶっているものを削除・統合します。
• 3. カートで「CTAの直下」にだけレコメンドを置く：カート ページまたは ドロワーカート のテンプレートを開き、購入手続きへ進む ボタンの上下を確認します。
  - CTAの「上」にレコメンドがある場合は削除する
  - CTAの「直下」に、1つだけ「あと1点どうですか？」のレコメンドを置く
  これにより、CTAがレコメンドに押し下げられる状態を防ぎます。
• 4. トップページのレコメンドは「1カルーセル＋1グリッド」に抑える：ホームページ テンプレートで、レコメンドが複数種類ある場合は、次の構成を目安に整理します。
  - ファーストビュー直下：人気商品 の横スクロールカルーセル（最大1ブロック）
  - ページ中ほど：カテゴリー別の「おすすめ」などを2×2や3×2のグリッドで表示
  これ以上レコメンドを増やすと、スクロールが長くなりすぎて離脱につながりやすくなります。
• 5. 折りたたみ（アコーディオン）にする箇所を決める：長い説明やレビューのせいで、レコメンドがかなり下に追いやられている場合は、セクション設定 で「折りたたみ」や「アコーディオン」が使えないかを確認し、次のように整理します。
  - 「素材」「サイズ」「ケア」など詳細情報 → 折りたたみ
  - よくある質問（FAQ） → 折りたたみ
  これにより、説明テキストで画面を占有せず、レコメンドを上の方に引き上げられます。
• 6. カルーセルの表示数と矢印位置をモバイル基準で調整する：レコメンドをカルーセル表示している場合、セクション設定 で「スライドあたりの商品数」「ナビゲーション」などを確認し、モバイルでは次を目安にします。
  - 1画面に商品は 2個まで（小さなサムネイルを並べすぎない）
  - 矢印やドットは、商品画像のすぐ下か横に置き、親指で届く位置に
  こうすることで、「見えている商品が小さすぎてタップしづらい」状態を防ぎます。
• 7. 実機でスクロール量とタップしやすさをテストする：最後に、スマホ実機で商品詳細・カート・トップをそれぞれ開き、
  - 最初の1画面に「タイトル・価格・CTA」が見えるか
  - CTAからレコメンドまでのスクロール量が、2スワイプ以内 に収まっているか
  - レコメンドの商品カードが片手でもタップしやすい大きさか
  をチェックし、だめならセクションの順番やブロック数をさらに削ります。

配置のコツ：折りたたみ・カルーセル・CTAとの距離の考え方

同じレコメンドでも、「どのUIで」「どの距離感で」見せるかで成果とUXが大きく変わります。モバイル前提での考え方を整理します。

• 折りたたみは「本気の人だけ読む情報」に使う：サイズ詳細や素材、FAQなど「知りたい人は開いてくれる」情報を折りたたみ、その下にレコメンドを置くと、スクロール量を抑えつつ、購入検討の流れを邪魔せずに提案できます。
• カルーセルは「一覧でざっと見せたい」ときだけ使う：モバイルで小さなカードを横にたくさん並べると、タップしづらく、何があるのかも分かりづらくなります。アイテム数が少ない場合（3〜5件程度）や、人気商品など「眺めさせたい」用途に絞るのが無難です。
• CTAとの距離は「直上NG・直下OK」が基本：カートに追加 や 購入手続きへ進む の直上にレコメンドを置くと、ユーザーは目的のボタンを探しづらくなります。逆に、CTAの直下に少数のレコメンドを置くと、「買うついでにもう1点」の流れを作りやすくなります。
• セクションごとに目的を1つに絞る：1つのレコメンドセクション内で、「似ている商品」「ランキング」「閲覧履歴から」など目的が混ざると、選びづらくなります。モバイルでは特に、1セクション＝1ロジックに絞り、数も3〜6商品程度に抑えるとスッキリ見えます。

よくある失敗パターンとモバイルでの直し方

• レコメンドでファーストビューが埋まっている：トップページや商品詳細の上部に大きなレコメンドを置きすぎて、タイトルやCTAが見えないケースです。→ レコメンドセクションを1つ下に移動し、テキストやメインビジュアルを優先します。
• カルーセル内の商品が小さすぎてタップしにくい：1画面に3〜4商品を押し込んでいるせいで、画像もボタンも小さくなっているパターンです。→ モバイル用設定で「1スライドあたり2商品」程度に減らし、画像とボタンを大きく確保します。
• カートや決済前にレコメンドを詰め込みすぎる：注文内容確認の途中に、いくつもレコメンドを挟むケースです。→ カートページならCTA直下に1セクションだけ。チェックアウトページには基本的にレコメンドを置かないようにします。
• 折りたたみの中にレコメンドを入れてしまう：FAQなどと一緒にレコメンドを折りたたんでしまい、気づかれない状態です。→ レコメンドは折りたたみ外に出し、「説明のあとすぐ目に入る」位置に置き直します。

RecoBoostでの次の一歩：モバイル前提のレコメンド設計に切り替える

RecoBoost をお使いの場合、ロジック選定とセクション数の調整をモバイル前提で行うと効果が出やすくなります。

• アプリ → RecoBoost → レコメンド設定 を開き、商品詳細ページ向けには AI類似商品、カート向けには 一緒に購入されている商品 をそれぞれ1つずつ有効にし、ロジックの役割を分けます。
• テーマの カスタマイズ から、RecoBoostのレコメンドセクションを 商品テンプレート と カートテンプレート にそれぞれ1〜2ブロックだけ配置し、余分なレコメンドブロックがあれば削除します。
• モバイル実機で、RecoBoostのレコメンドが「CTA直下」や「説明のすぐあと」にあるか、カルーセルの商品数が多すぎないかを確認し、必要に応じて 表示商品数 や 並び順 を調整します。