「ついで買い」を設計するカートクロスセル

カート画面の提案枠で客単価を上げる方法。カートの中身に応じた出し分けと、購入手続きを邪魔しない見せ方

カートクロスセルついで買い客単価UX提案設計
読了時間: 9分

はじめに

「客単価をあと少し上げたい」という課題に対して、広告費を増やす以外の手を探している方は多いと思います。すでにサイトに来て、商品をカートに入れてくれている人にもう1点足してもらえれば、集客コストをかけずに売上が伸びる。理屈は分かるものの、どこに何を出せばいいのかが分からない、という段階で止まりがちです。

この記事では、アパレル・ギア系のECサイトで作ったカート画面のクロスセル枠(あわせ買いの提案枠)を題材に、カートで提案が反応を得やすい理由、何を出すと追加されやすいか、そして購入手続きを邪魔しない見せ方までを順番に説明します。読み終わる頃には、自分のサイトのカート画面に何を置くべきかの判断材料が揃うはずです。

カート画面での提案が反応を得やすい理由

「買うかどうか」の判断がすでに終わっている

商品ページを見ている段階のユーザーは、まだ買うかどうかを決めていません。予算と相談していたり、他店と比べていたりする途中です。この状態の人に別の商品を見せると、検討する対象が増えるだけで、判断はかえって遅くなります。

一方、カートに商品を入れた人は、支払いに進むところまで気持ちが固まっています。「買う・買わない」の大きな判断が済んでいるので、数百円から数千円の追加は小さな判断で済む。同じ提案でも、迷っている人に出すのと決めた人に出すのとで反応がまるで違うのは、この差によるものです。

送料無料まであと少し、という状況が後押しになる

もう一つ効くのが、送料の条件です。送料無料のラインまであと数百円、という状況になると、多くの人は「送料を払うくらいなら何か足したほうが得だ」と考えます。この状況で単価の低い商品を並べておくと、無理に売り込まなくても1点増えることがあります。

カートの合計金額を見て提案を切り替えられるようにしておくと、この後押しがさらに効きます。あと少しで無料になる人には低単価の商品を、すでに条件を満たしている人には関連商品を、といった出し分けです。

カートの中身に応じて提案を変える

提案内容を固定にせず、カートに入っている商品に応じて変える。これが枠の反応を左右します。ジャケットが入っていればインナーや補修パーツを、ヘルメットが入っていればシールドやクリーナーを、という具合です。管理画面で「この商品が入っていたら、これを勧める」というルールをあらかじめ設定しておきます。

中身と関係のない商品を並べても、ユーザーの目には広告としてしか映りません。文脈に沿っているからこそ「たしかに要る」と思ってもらえます。

カートで「ついで買い」が生まれるまで
商品をカートに追加

ユーザーは購入をほぼ決めている状態

カートの中身を判定

入っている商品と合計金額から、出す提案を選ぶ

関連する小物・消耗品を表示

送料無料まであと少しを埋められる商品などを並べる

ワンステップで追加

カート画面を離れずにそのまま買い足せる

この流れを一言でまとめると、カートの中身を見て提案を選び、その場で追加できるようにする、という4段階です。

何を提案すると追加されやすいか

単価が低く、判断に時間がかからない商品

カートでの提案に向くのは、考え込まずに決められる商品です。数万円のギアを買おうとしている人に、また数万円の商品を見せても、比較検討が始まって手が止まります。クリーナー、替えパーツ、靴下といった、単価が低くて持っていて困らないものが足しやすい。

金額のハードルが低いほど「ついでに」となりやすく、結果として1回の買い物あたりの点数が増えていきます。実際に枠を運用してみると、追加されるのは想像よりずっと安価な商品に偏りました。

消耗品・補修パーツはカートと相性が良い

ギアを扱うECサイトでは、消耗品や補修パーツがクロスセルと特によく噛み合いました。本体を買うタイミングで一緒に揃えておきたい、というニーズが元々あるからです。後から単体で買うと送料がかかる商品でもあるので、まとめ買いの理由も成り立ちます。

表が示しているのは、本体商品ごとに「一緒に使う前提のもの」を割り当てておくと、提案が自然に見えるということです。

提案は2〜4点に絞る

「たくさん見せれば売れる」という考え方は、カート画面では逆に働きます。選択肢が多いほど比較が始まり、比較が始まると結論が出ず、結局何も追加されないまま決済に進みます。カート枠では提案を2〜4点程度に絞りました。数が少ないほうが、一つひとつが自分向けに選ばれたものに見えるという効果もあります。

購入手続きを邪魔しない見せ方

主役は「これから買う商品」

カート画面で一番目立つべきなのは、ユーザーがこれから買う商品と合計金額、そして購入ボタンです。クロスセル枠がそれより目立つと、購入手続きの導線が分かりにくくなります。提案枠は購入ボタンの下や横に置き、あくまで参考情報という位置づけで見せるようにしました。

追加を1ステップで終わらせる

提案に気持ちが動いても、追加のために別ページへ移動させられると、それだけで面倒になって離脱します。そこで、提案枠の中でサイズなどを選び、そのままカートに入れられるようにしました。カート画面から動かずに完結させるのが理想です。この部分のUI設計は、関連記事で詳しく説明しています。

追加してもカートの中身を崩さない

提案から商品を追加したとき、元のカートの中身がリセットされたり、画面が大きく動いたりすると、ユーザーは何が起きたのか分からず不安になります。追加はカートの状態を保ったまま反映し、点数と合計金額が変わったことだけが分かる見せ方にしました。この安心感があると、2点目の追加にもつながります。

まとめ

カートのクロスセルは、テクニックで無理に売る仕組みではなく、買うと決めた人が「ついでに」と思える状況を整える設計です。今回のポイントは次の3つでした。

  • カートは購入の判断が済んだ場所なので、追加提案の反応が得やすい
  • カートの中身と合計金額に応じて、単価の低い消耗品や補修パーツを出す
  • 購入手続きを邪魔せず、1ステップで追加を終わらせる

提案する商品を誰がどう決めるか、追加時のサイズ選択をどう作るかは、次の記事で解説しています。