カート画面でのおすすめ商品設計：売上と体験を両立する実装ガイド

カート画面のおすすめ商品は「入れれば売上が増える」ものではありません。出し方を間違えると、カート離脱が増えて売上が落ちることもあります。結論として、カートレコメンドは「買う気になった人の背中をそっと押す設計」にするのがポイントです。関連度の高い商品を、邪魔しない位置と点数で、シンプルな文言と一緒に出すことが重要です。この記事では、Shopify ストアのカート画面で実務的に実装できるレコメンド設計を、具体的なパターンと注意点、失敗例を交えて整理します。明日からデザイナーや開発担当とそのまま相談に使えるレベルの粒度でまとめています。

カートレコメンドの目的を「ついで買い」に絞る

カート画面でのおすすめ商品の役割は「検討中の人に別の商品を見せて回遊させる」ことではなく、「購入を決めた人のついで買いを増やす」ことに絞るべきです。カートは購入プロセスの終盤にあり、ここでやるべきことは意思決定を早く・迷わせず・気持ちよく終わらせることだからです。

たとえば、平均客単価 5,000 円のストアで、カートの 10％ の注文に 1,000 円のついで買いが付くだけで、理論上の売上は約 2％ 上がります。一方で、カートレコメンドが原因でコンバージョン率が 0.5 ポイント落ちると、ベースの売上減の方が大きくなるケースもあります。つまり「売上アップのために入れたのに、全体ではマイナス」になり得るのがカートレコメンドです。

そのため、カートレコメンドは「売上を伸ばす機能」であると同時に「購入完了を邪魔しない機能」である必要があります。具体的には、関連性の高い商品だけを最小限の点数で見せ、視線をチェックアウトボタンからそらし過ぎない UI にすることが重要です。ここを外すと、どれだけ高度なレコメンドロジックを使っても成果につながりません。

どこに・何点出すか：UI 配置の基本パターン

カート画面でのおすすめ商品の配置は「カート内の商品リストの直下に、2〜4 商品を横並びで表示」が最も扱いやすいパターンです。理由は、購入予定の商品を確認した直後に視線が流れやすく、かつチェックアウトボタンを下方向にスクロールすればすぐ見つけられるためです。

点数については、スマホ表示を前提に「2〜3 点」を起点に考えるのがおすすめです。5〜6 点以上並べると、スクロールが長くなりチェックアウトボタンが下に押しやられます。あるアパレル店舗では、カートレコメンドを 8 商品表示にしたところ、平均ページ滞在時間は伸びた一方で、チェックアウト移動率が目に見えて下がり、すぐに 3 商品表示に戻したというケースもあります。

NG なのは、ポップアップで画面の中央に大きく表示するパターンや、チェックアウトボタンより上に長くレコメンドを並べてボタンを下に追いやるパターンです。これらはユーザーに「買わせようとしてくる」印象を与えやすく、特にリピーターほどストレスを感じやすくなります。どうしてもポップアップを使う場合でも、カート追加直後の 1 回だけ、かつ閉じやすい設計にとどめるなど慎重な運用が必要です。

何をすすめるか：カートに合わせた 3 つの定番パターン

カートレコメンドで成果を出すためには、「どの商品を出すか」のルールを明確にすることが欠かせません。やみくもに売れ筋商品を並べるよりも、「今カートに入っている商品」との関連性を軸に設計した方が、購入率・ユーザー体験ともに安定します。ここでは、実務で使いやすい 3 つの基本パターンを紹介します。

• アクセサリー・消耗品などの「セット購入されやすい商品」を出す（例：スキンケア商品のカートにコットンやトラベルケースを表示）
• 同カテゴリの価格帯が近い商品を出す（例：Tシャツのカートに、同ブランドの別カラーや類似デザインを表示）
• 頻繁に一緒に買われている商品を出す（顧客の購入履歴から「よく一緒に購入されている組み合わせ」を元に提案）

特に成果が出やすいのは 1 つ目の「セット購入されやすい商品」です。たとえば、コーヒー豆を扱うストアで「コーヒー豆＋フィルター」「コーヒー豆＋缶」の組み合わせを出すだけでも、少額のついで買いが積み上がりやすくなります。原価率が低いアクセサリーや消耗品を中心に設計すると、利益率の面でも効果が出やすくなります。

失敗しやすいのは「在庫処分品や売れ残りをとにかく押し込む」パターンです。関連性の低い値引き商品を大量に並べると、ブランドイメージを損ねたり、「この商品はそんなに売れていないのか」という不安を与えたりします。カートレコメンドは「いま選んだ商品が正解だ」という確信を強める方向で設計するのが安全です。

文言と価格表示：押しつけ感を出さない見せ方

同じ商品を提案する場合でも、文言や価格の見せ方によって受け取られ方は大きく変わります。カート画面では「今の選択を肯定しながら、必要なものをさりげなく提案する」トーンが有効です。逆に、今の選択を否定したり、購入を急かしたりするコピーはカート離脱の原因になりやすいです。

おすすめエリアの見出しとしては、次のようなシンプルな表現が扱いやすいです。

• 「一緒に購入されている商品」
• 「こちらもいかがですか？」
• 「この商品を使う方におすすめ」

価格表示では、カート内の商品との合計金額がイメージしやすいように、「元の価格＋割引後価格＋割引率」をすべて並べるよりも、通常価格をシンプルに見せた方が良いケースも多いです。数字情報が多すぎると、カート画面で「計算をさせてしまう」状態になり、購入完了までの心理的負荷が上がります。一方で、送料無料ラインがある場合は「あと◯◯円で送料無料」といった案内をカート上部に出し、そのすぐ下におすすめ商品を置くと「送料無料まであと少しだから何か追加しよう」という行動につなげやすくなります。

注意したいのは、割引や限定性を強調しすぎることです。「今だけ 50％ OFF」「あと 2 時間で終了」などの強い訴求は、一時的には反応が上がることがありますが、リピーターほど「毎回急かされている」と感じてしまいます。カート画面では、定常的に機能するコピーを優先し、キャンペーン的な強い表現はトップページや特集ページに任せる方が長期的には安定します。

Shopify カートレコメンドの実装アプローチ

Shopify でカートレコメンドを実装する方法は、大きく「テーマ側での実装」と「アプリの利用」に分かれます。どちらを選ぶにしても、前述した「目的」「配置」「出し方」の方針を先に決めておくことで、開発や設定のやり直しを減らせます。

テーマ側の実装では、テーマがカートレコメンドのセクションやブロックを持っているかどうかを確認します。Online Store 2.0 対応テーマであれば、カートページやドロワーカートに「おすすめ商品」や「関連商品」ブロックを追加できる場合があります。その上で、特定の商品やコレクションを手動で指定したり、コレクションの条件を工夫したりして「カート向けのついで買い商品セット」を作っておくと運用しやすくなります。

一方、アプリを使う場合は、レコメンドロジック（閲覧履歴・購入履歴・AI 推薦など）の違いよりも、「カート画面にどう埋め込めるか」「スマホ表示で邪魔にならないか」「表示点数を柔軟に変えられるか」といった UI 周りの設定自由度を重視するのがおすすめです。高度なアルゴリズムでも、カート画面での見せ方を細かく調整できないと、前述したような「売上は増えたがコンバージョンが落ちた」といった事態になりかねません。

RecoBoost ならこう活かす

RecoBoost を使う場合は、まず「カート用のレコメンド枠」を 1 箇所に絞り、2〜3 商品表示でスタートする設計がおすすめです。そのうえで、購入履歴にもとづく「よく一緒に買われる商品」や、利益率の高いアクセサリー類を優先して出すルールを設定し、PC・スマホそれぞれでカート画面の表示位置を確認します。一定期間（例：2〜4 週間）ごとに「カートからチェックアウトへの遷移率」「1 注文あたりの点数・売上」を比較しながら、表示点数や商品グループを少しずつ調整すると、ストアごとの最適なパターンが見つかりやすくなります。

カート画面のおすすめ商品は、「とりあえず導入する機能」ではなく「購入完了の邪魔をせずについで買いを増やす設計」です。目的をついで買いに絞り、配置・点数・商品ルール・文言の 4 点を押さえたうえで、Shopify テーマやアプリで実装と検証を繰り返すことが、売上と顧客体験を両立させる近道になります。