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

カート画面で追加提案が効く理由と、押し付けにならない見せ方の設計

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

はじめに

カート画面は、お客様がすでに「買う」と決めた状態で立っている場所です。
このタイミングでの一言の提案が、客単価をじわりと押し上げてくれるんです。

とはいえ、やり方を間違えると「しつこい」「邪魔」と感じさせてしまい、離脱の原因にもなります。この記事では、アパレル・ギア系のECで実装したカートのクロスセル枠を題材に、なぜカートで提案が効くのか、そして押し付けにならない見せ方をお話しします。

なぜカート画面で提案が効くのか

購入意思が固まっている

商品ページを見ている段階のお客様は、まだ「買うかどうか」を迷っています。一方、カートに商品を入れた人は、財布を開く準備がすでにできている状態です。この心理的なハードルの低さが、カートでの追加提案が効く一番の理由なんです。

同じ提案でも、迷っている人に出すのと、買うと決めた人に出すのとでは、反応がまるで違います。カートは「あと一押し」が最も届きやすい場所だと考えています。

「あと少し」を埋めたくなる心理

送料無料まであと数百円、というときに、多くの人は「せっかくだから何か足そう」と考えます。この心理をうまく使うと、無理なく1点追加してもらえます。

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

お客様は購入をほぼ決めている状態

カートの中身を判定

入っている商品や合計金額に応じて提案を選ぶ

関連する小物・消耗品を提案

送料無料まであと少しを埋める商品などを表示

ワンステップで追加

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

カートの中身に応じた出し分け

提案は固定ではなく、カートの中身に応じて変えるのがポイントです。ジャケットが入っていればインナーや補修パーツを、ヘルメットが入っていればシールドやクリーナーを、といった具合です。管理画面(cart-crosssell)で「この商品が入っていたら、これを勧める」というルールを設定しておきます。

中身と無関係な商品を並べても響きません。文脈に沿った提案だからこそ、「たしかに要るな」と思ってもらえるんです。

何を提案するかの設計

単価の低い「足しやすい」商品

カートでの提案に向くのは、意思決定に時間がかからない商品です。すでに数万円のギアを買おうとしている人に、また高額な商品を並べても迷わせるだけです。クリーナー、替えパーツ、靴下といった単価が低く、あって困らないものが足しやすい。

金額のハードルが低いほど「じゃあ、ついでに」となりやすく、結果として1回あたりの買い物点数が増えていきます。

消耗品・補修パーツの相性

ギア系のECでは、消耗品や補修パーツがクロスセルと特に相性が良いと感じました。本体を買うタイミングで一緒に揃えておきたいニーズが自然にあるからです。

提案の数を絞る

「たくさん見せれば売れる」というのは誤解です。選択肢が多すぎると人は選べなくなり、かえって何も追加しません。カート枠では提案を2〜4点程度に絞り、迷わせないようにしました。厳選された少数のほうが、一つひとつが「自分向け」に見えるんです。

押し付けにならない見せ方

主役は「買おうとしている商品」

カート画面の主役は、あくまでお客様がこれから買う商品です。クロスセル枠がそれより目立ってしまうと、購入手続きの邪魔になります。提案枠は購入ボタンの下や横にさりげなく置き、「参考までに」というトーンで見せることを意識しました。

追加を1ステップで完結させる

提案に気持ちが動いても、追加のために別ページへ飛ばされると、それだけで面倒になって離脱します。そこで、提案枠の中でサイズなどを選び、そのままカートに入れられるようにしました。カート画面から一歩も動かず完結するのが理想です。

追加後もカゴを崩さない

提案から商品を追加したとき、元のカートの中身がリセットされたり、ページが大きく動いたりすると不安を与えます。追加はカートの状態を保ったまま反映し、「増えた」ことだけがすっと分かる見せ方にしました。安心感が、次の一押しにもつながります。

まとめ

カートのクロスセルは、テクニックで無理に売るものではなく、買うと決めたお客様の「ついで」を、そっと後押しする設計です。今回のポイントは次の通りでした。

  • カートは購入意思が固まった、提案が最も届きやすい場所
  • カートの中身に応じて、単価の低い消耗品や補修パーツを文脈に沿って出す
  • 主役を邪魔せず、1ステップで完結する「押し付けない」見せ方にする

提案商品を人が選ぶ運用の仕組みは管理UIとCSV一括運用で、追加時のバリアント選択についてはバリアント選択付きクロスセルのUXで詳しく解説しています。全体像はクロスセル運用のハブ記事をご覧ください。