あるShopifyストアのオーナーが昨年、フォーラムで困った経験をシェアしていました。Hotjarの録画を見ていて、顧客が45ドルのキャンドルをカートに入れて、さらに3〜4分間ブラウジングを続けた後、そのまま去ってしまうというパターンが繰り返されていたのです。気が変わったわけではありません。かごに入れたことを忘れていたのです。モバイルではカートアイコンがハンバーガーメニューの中に隠れており、ユーザーがヘッダーをスクロールを超えると、完全に見えなくなっていました。
そのストアがフローティングカートボタンに変更したところ、カートから決済への到達率が38%から51%に3週間で上昇しました。商品は変わっていません。価格も変わっていません。カートが見えるようになっただけです。
- 常設カート表示はほとんどの実装でモバイル放棄を15～20%削減する
- デスクトップとモバイルは異なる戦略が必要—大きな画面で機能するものは小さな画面では邪魔になる
- 最適な固定カートパターンはアイテム数と小計をクリック不要で表示する
- カート表示を過度に複雑にする（自動オープン引き出し、アニメーション、ポップアップ）は避けたい不便さを作り出す
- 配置がデザインより重要：モバイルは右下、デスクトップは右上、常に親指ゾーン内または表示領域内に
カート表示が決済完了につながる理由
カート表示と決済完了の関係は、心理学者が「保有効果」と呼ぶものに帰着します。顧客がアイテムをカートに追加したら、そのアイテムの所有感を感じ始めます。その感覚は時間とともに薄れていきます—特にアイテムが待機中であることを示す視覚的リマインダーがない場合です。
Baymard Instituteの大規模ユーザビリティ調査によると、カートにアイテムを追加した後もブラウジングを続ける顧客の31%は、同じセッション中にカートに戻りません。カートは単に作業記憶から消えてしまうのです。見えるカートインジケーターはこれに対抗し、「これを選んだ」から「決済を完了すべき」という心理的なつながりを保ちます。
しかし微妙なバランスがあります。多くのストアがカートを隠す理由は、積極的なカートリマインダー—自動オープン引き出し、バウンスするアイコン、パルスする通知バッジ—が強引に感じられるからです。ブラウジングを続けたかった顧客は、これらのパターンを「買い物をやめて、今すぐ買え」と解釈します。トリックは、認識を保ちながら圧力を作らないことです。
デスクトップで機能するパターン
デスクトップでは画面領域が豊富で、ページの右上隅は数十年のeコマース慣習により、顧客がカートを探す場所として訓練されています。その配置はユーザビリティの観点からは本質的に無料です。
常設ヘッダーカートアイコン。 最も一般的で最も控えめなパターン。ヘッダーにあるカートアイコンはアイテム数を表示し、スクロール中は固定されたまま、ホバーまたはクリック時にドロップダウンまたは引き出しを開きます。2026年ではこれが標準です—デスクトップヘッダーがスクロール時に消えてカートも一緒に消える場合、それは即座に修正すべき点です。
ホバー時ミニカートプレビュー。 さらに一歩進めて、一部のストアはカートアイコンにホバーしたときに軽量なカート概要を表示します：アイテムサムネイル、数量、小計、「決済へ進む」ボタン。Nordstrom、Allbirds、ほとんどのコンバージョン率が高いShopify Plusストアはこのパターンを使っています。顧客がブラウジングフローを中断することなく、カートの内容を確認できます。
固定サイドバー概要。 平均注文額が高いストア（家具、電子機器、B2B）では、商品ページとコレクションページでカート概要を表示する常設サイドバーが、実行中の合計を見える状態に保ちます。これは機能します—これらの顧客は複雑な注文を構築しており、支出を追跡する必要があるからです。15ドルのTシャツを売るストアではやり過ぎです。
| パターン | 最適な用途 | リスク |
|---|---|---|
| 固定ヘッダーアイコン + 数 | すべてのストア（ベースライン） | なし—これは予想される動作 |
| ホバー時ミニカートプレビュー | 1注文あたり2アイテム以上のストア | 読み込みが遅い場合モタつく可能性 |
| 固定サイドバー概要 | 高AOV、複雑な注文 | かなりの画面領域を占有 |
| アイテム追加時に自動オープン | インパルス購入ストア | ブラウジング流を中断 |
自動オープンカート引き出しは特に注目に値します。多くのShopifyテーマはこれをデフォルトにしています：顧客が「カートに追加」をクリックすると、右からドロワーがスライドインしてカートを表示します。単一商品ストアやインパルス購入では機能します—アクションを確認し、決済ボタンをすぐに表示します。しかし顧客が通常複数のアイテムを追加するストア（ファッション、美容、グロサリー）では、ブラウジングのリズムを中断します。顧客は毎回ドロワーを閉じなければならず、3番目の商品までに便利な機能が不便さに変わります。
モバイル：本当の問題がある場所
モバイルはカート表示がコンバージョン率を左右する場所です。85%以上のモバイル放棄率は単に小さな画面についてではなく—カートをインタラクションレイヤーの後ろに隠すナビゲーションパターンについてです。
フローティングアクションボタン（FAB）。 小さく常設されたボタン—通常は右下—でカートアイコンとアイテム数を表示します。すべてのコンテンツの上に浮き、スクロール中も見える状態です。これはほとんどのモバイルストアが実行できる単一の最高インパクト変更です。ただし実装の詳細が重要です：
- サイズ：48～56ピクセルの直径。小さいと見落とされ、大きいとコンテンツをブロックします。
- 位置：右下、画面端から16～20ピクセル。これは右利きユーザー（モバイルユーザーの約75%）の自然な親指ゾーン内に配置されます。
- バッジ：小さな円形のアイテム数、コントラスト色。数字がトリガー—これがカートに何か待機していることを顧客に思い出させます。
- タップ時の動作：全カートページではなく、スライドアップカート引き出しを開く。現在のページが下に見える状態でいることは、「ショッピング文脈から離れる」感覚を減らします。
ボトムバーカートタブ。 ストアがモバイルボトムナビゲーションバー（タブバーパターン）を使う場合、4～5個のタブのうち1つはカートであるべきです。これはほとんどのネイティブショッピングアプリ—Amazon、Target、ASOS—が使うアプローチです。カート表示を親指レベルに永続的に保ちます。タブはアイテム数バッジを表示し、理想的にはアイテム追加時に微妙なアニメーション（アイコンの短い拡大、バウンドする馬鹿騒ぎではなく）が表示されるべきです。
スティッキー「カートに追加」バー。 特に商品ページで、「カートに追加」ボタンと小さなカートアイコン（アイテム数付き）を持つバーが画面下部に固定されます。これは二重の役割を果たします：カートへの追加を簡単にし（ボタンにスクロールバックする必要がない）、カート表示を維持します。GymsharkとFashion Novaはこのパターンを効果的に使っています。
コミットする前にテストするすべての固定要素がすべてのストアに適合するわけではありません。FABまたはボトムバーを実装する前に、モバイルヒートマップを確認してください。現在のモバイルショッパーが「カートに追加」ボタンを見つけるために長い商品説明をスクロールしているなら、スティッキーボトムバーは役に立つでしょう。ほとんどが「カートに追加」をすぐにタップして、コレクションをブラウズするなら、FABまたはタブバーカートタブへの投資がより良いです。
スティッキーカート表示をうっとうしくするもの
目標が「見える状態だが不便ではない」なので、限界を超えるパターンをカタログ化する価値があります：
ページ読み込みのたびに自動オープン。 いくつかの実装はページを読み込むたびにカート引き出しを自動的に開き、「リマインダー」として機能します。これは積極的で、最初の後は反射的に閉じられ、顧客にこれを完全に無視するよう訓練します。
注目を要求するアニメーション。 バウンス、シェイク、または数秒ごとにパルスするカートアイコンは、ストア内であなたに付きまとう営業マンのデジタル版です。アイテムが追加されたときの単一で短いアニメーションは有用なフィードバックです。継続的なアニメーションはハラスメントです。
コンテンツをカバーする。 重要なコンテンツ—商品画像、「カートに追加」ボタン自体、価格情報—と重なるスティッキーカート要素は、解く以上の摩擦を生成します。実際のデバイスでテストしてください：ページが読み込まれたときFABは重要なものをカバーしていますか？スクロール後はどうですか？
ゼロアイテムで引き出しを表示する。 顧客がカートアイコンをタップして空のカートを見て、悲しい顔絵文字と「カートが空です！買い物を始めましょう！」—これは時間を無駄にする行き止まりです。カートが空の場合、カートアイコンへのタップは何もしない（微妙なツールチップ付き）か、最小限の表示をするべきです。全ページ体験にしないでください。
コードなしの実装
2024年以降のほとんどのShopifyテーマには、テーマカスタマイザーの設定に何らかの形での常設カート表示が含まれています。テーマカスタマイザー > ヘッダー > カートタイプを確認して、「引き出し」対「ページ」などのオプションを探し、スティッキーヘッダーが利用可能ならそれを有効にしてください。
より多くの制御のために—特にモバイルで—メニューとナビゲーションアプリが得意です。たとえばNavi+では、モバイルボトムバーにカートタブを追加したり、フローティングカートボタンを独立して設定したり、ライブアイテム数と引き出しの動作を設定したり、テーマコードに触れることなくできます。使用するツールが何であれ、原則は同じです：カートはストアのどのページからでも、どのデバイスからでも1タップで到達可能であるべきです。
重要な数字
常設カート表示を実装した後、2～4週間の期間で以下の特定のメトリクスを追跡してください：
- カートから決済への率（主要指標）：カート表示のあるセッションが決済に進む割合。これはカート表示変更の北極星です。
- カート再エンゲージメント率：カートに追加した後もブラウジングを続ける顧客がカートに戻る頻度。常設表示はこれを増加させるべきです。
- モバイル対デスクトップ放棄率ギャップ：モバイル特有のカート常設表示を実装した後にギャップが縮小すれば、実際の摩擦点に対処できたことになります。
- 引き出し/FABインタラクション率：顧客が常設カート要素をタップまたはホバーする頻度。低いインタラクションは必ずしも悪くありません—認識は重要です—しかしゼロのインタラクションは配置または表示の問題を示唆します。
一夜にして劇的な変化を期待しないでください。常設カート表示は摩擦削減の施策で、コンバージョン奇跡ではありません。ゲインは繰り返し顧客がカートをチェックする習慣を発展させるにつれて蓄積します—最後に、実際にチェック可能な状態でそこにあるからです。
この記事は、カート放棄対策：ナビゲーションで顧客を戻すの大きなガイドの一部です。