カートボタンはどこに置く？色・位置・追従表示で成果はどう変わる？

ECサイトで商品が見られているのに、なかなかカート投入率が上がらないという課題はありませんか。
この記事を読めば、自社ECサイトの商材やユーザー層に合わせ、最もクリックされやすいカートボタンの配置、サイズ、色、文言を特定し、実際にデザイン変更や実装ができるようになります。

先に結論をお伝えすると、最初に手を付けるべきは色ではありません。 ボタンが常に見えている状態を作るほうが、実測では大きな効果が出ています。

なぜカートボタンのデザインが売上を左右するのか？

購入を決めた瞬間にボタンが見つからないと、その熱量がそのまま冷めるからです。
カートボタンは、ユーザーが商品を「欲しい」と感じてから「購入する」という最終的な行動を起こすための重要な接点です。
どれだけ魅力的な商品やコンテンツを用意しても、ユーザーがカートボタンをすぐに見つけられなかったり、押しにくかったりすると、購入意欲は一瞬で削がれてしまいます。

支援の現場で挙がるのは「ボタンがどこにあるか分からない」「押す気にならない」という声です。前者は視認性の問題、後者は判断材料の不足で、打ち手が変わります。
このわずかなストレスが離脱、つまり「カゴ落ち」につながり、売上の機会損失に直結します。
ECサイトのCVR改善については「ECサイトのCVR改善は何から始めるべきか？」で詳しく紹介しています。

カートボタンでよくある失敗は何か？

よくある失敗は4つです。画面外に消える、背景に溶け込む、周囲の情報に埋もれる、小さくて押しにくい。
ユーザーの視点に立って客観的に見直すことで、改善のヒントが見つかります。

スクロールするとボタンが画面外に消えていないか？

特にスマートフォンで閲覧する場合、商品説明やレビューが長くなることで、カートボタンが画面の外にはみ出してしまうケースがよく見られます。
ユーザーが商品情報を見て購入を決意した瞬間にボタンが見えないと、わざわざスクロールして探さなければなりません。

この一手間が面倒に感じられ、購入をやめてしまう原因となります。

ボタンが背景に溶け込んでいないか？

ECサイトのデザインにおいてブランドイメージの統一は重要ですが、それを意識しすぎるあまり、カートボタンの色が背景やサイト全体のテーマカラーに埋もれてしまうことがあります。
ボタンが他の要素と見分けにくく、クリックできる要素として認識されなければ、ユーザーはアクションを起こせません。

ボタンの視認性の低さは、クリック率の低下に直結する大きな問題です。

ボタンの周りに情報を詰め込みすぎていないか？

ボタンの周辺に、関連商品へのリンク、ポイント情報、SNSシェアボタンなど、多くの情報を詰め込みすぎると、最も重要な「カートに入れる」アクションが阻害されます。
ユーザーは瞬時にどこをクリックすれば購入に進めるのかを判断できず、混乱してしまいます。
その結果、購入プロセスに進むことなくページを離れてしまうリスクが高まります。

ボタンが小さすぎたり、他の要素と近すぎたりしていないか？

ボタンのサイズが小さすぎると、特に指で操作するスマートフォンでは非常に押しにくくなります。
また、「お気に入りに追加」や「ほしい物リスト」といった他のボタンと近接していると、誤ってタップしてしまうことも少なくありません。
こうした操作ミスはユーザーに強いストレスを与え、購入体験そのものを損なう原因となります。

カートボタンはどこに置くべき？

価格や数量を選択する欄の直下です。
ユーザーは通常、商品の価格や仕様、画像などを確認した上で購入を決定するため、これらの情報より先にボタンがあってもクリックされにくいからです。

あるECサイトでは、LPの改善として CVボタンを価格の近くに配置したところ、CV率改善率60%を記録しました。価格を確認して「買おう」と判断した直後に、ボタンが目に入る状態を作ったことが効いています。
この事例はLPでの検証ですが、商品詳細ページでも考え方は同じです。判断が終わった場所に、次の行動の入口を置きます。

ファーストビューへの配置は必須？

必須ではありません。
ただし、ファーストビューにボタンが入ることで効果が出る場合もあります。あるECサイトでは、商品詳細ページでカートボタンがファーストビューに表示されるようレイアウトを調整したところ、 CV率がA（調整なし）5.77%からB（調整あり）5.88%に改善しました（効果+0.97%）。

数値としては小さい変化ですが、プラス方向に動いています。注目すべきは、この程度の差であれば、レイアウトを大きく変えるより、後述する追従表示のほうが効率的だということです。

ボタンのサイズと余白はどう決める？

ユーザーがストレスなく確実に押せる大きさを確保します。
特にスマートフォンでは、指の腹でタップすることを想定し、十分なタップ領域を確保することが求められます。
また、ボタンの周囲に適切な余白（ホワイトスペース）を設けることも重要です。

余白はボタンの存在を際立たせ、他の要素との混同を防ぎ、誤タップのリスクを低減させる効果があります。

追従ボタンにはどんな効果がある？

スクロールでボタンが見えなくなっても、いつでも戻れる状態を作れます。
あるECサイトでは、スクロールによってカートボタンが見えなくなった際に、ボタン設置エリアへ戻れるアンカーリンクを常時表示したところ、 クリック数で効果+40.12%を記録しました。

この数値は、先ほどのファーストビュー調整（+0.97%）と比べて大きく上回っています。つまり、 ボタンを最初の画面に入れることより、いつでもボタンに戻れる状態を作ることのほうが、効果が出やすいということです。
また別のECサイトでは、スマートフォン向け商品詳細ページにカートボタン設置エリアへのショートカットリンクを設置し、CV率改善率3.7%を記録しています。

追従表示とショートカットリンク、どちらを使う？

ページの長さと、画面を占有してよいかで決まります。
追従ボタンは常に画面に表示されるため、購入を決意した瞬間の熱量を逃しません。一方で、画面の一部を占有し続けるため、コンテンツの閲覧を妨げる可能性があります。
ショートカットリンクは、ボタン本体の位置へ移動させる方式です。画面の占有は小さく済みますが、1タップ分の操作が増えます。

どちらが適しているかは商材とページの長さによって変わるため、両方を試して比較するのが確実です。

スマホとPCで分けるべき？

分けたほうが操作性が上がります。
PCサイトはスマートフォンに比べて画面領域が広いため、追従ボタンが常に表示されていると、かえって邪魔に感じられることがあります。
ユーザーの操作性を考慮すると、PCでは追従させず、スマートフォンで閲覧した場合にのみ表示させるといった、デバイスごとの表示切り替えが効果的です。

EC Intelligenceでは、デバイスの条件でコンテンツの表示を出し分けられます。商品ページの「カートに入れる」ボタンを常に表示する施策を、全訪問者に対して設定することも可能です。

カートボタンの色で成果は変わる？

変わります。ただし正解の色は決まっておらず、自社で比べて決めます。
あるECサイトでは、「カートに入れる」ボタンの色を赤と緑で出し分けるA/Bテストを実施し、 CV率改善率10.53%を記録しました。どちらが選ばれやすいかは、サイトの背景色や他の要素との関係で変わります。

ここで押さえておきたいのは、この10.53%という数値が、先に紹介した追従表示の+40.12%を下回っていることです。 色の変更は手を付けやすい施策ですが、効果の大きさで言えば、見えている状態を作るほうが先に来ます。

背景色とのコントラストはなぜ重要？

背景に埋もれた色では、ボタンの存在に気づかれないからです。
カートボタンの色を選ぶ際に最も優先すべきは、特定の色ではなく、背景色とのコントラスト（対比）です。
白や淡い色の背景が多いECサイトでは、暖色系や彩度の高い色が目立ちやすい傾向にありますが、重要なのは「他の要素よりも際立っているか」という視点です。

ブランドカラーをボタンに使っていい？

使えますが、サイトの基調色と同じ場合は注意が必要です。
ブランドカラーがサイト全体の基調色と同じ場合、ボタンの視認性が低下する可能性があります。
その場合は、ブランドカラーの補色や、同系色でもより彩度や明度が高い色をアクセントカラーとして使用することで、「押せる要素」であることをユーザーに効果的に伝えられます。

赤やオレンジは本当に効果的？

絶対的なルールではありません。
これらの色が効果を発揮しやすいのは、多くのWebサイトで背景色として使われる白や青系の色に対して目立ちやすいからです。
サイトのデザインによっては、緑や青の方が効果的な場合もあります。

大切なのは、思い込みで色を決めるのではなく、自社サイトのデザインの中で最も視認性が高く、行動を喚起する色をテストで見つけ出すことです。

ボタンの近くには何を置く？

購入の判断に必要な情報です。
ユーザーがボタンをクリックする直前には、「本当にこのまま購入して大丈夫か」というわずかな不安や迷いが生じます。
ボタンの文言やその周辺に添える情報を工夫することで、その迷いを解消できます。

「送料無料」「最短翌日お届け」「あんしん決済」といった文言は、購入に対する心理的なハードルを下げます。これらをカートボタンのすぐ近くにアイコンなどを用いて配置することで、クリックを後押しできます。
在庫状況やキャンペーンの残り期間も、判断材料になります。ただし、 実際の在庫やキャンペーン内容と一致していることが前提です。在庫表示については別の記事で詳しく解説しています。
ECサイトの価格・送料表示については「ECサイトの価格・送料表示を見直すには？」で詳しく紹介しています。

「レジに進む」ボタンも見直すべき？

見直すべきです。カートページでも「ボタンがどこにあるか分からない」という状態は起きます。
商品をカートに入れた人は、購入意欲が最も高い状態です。それでもカートページで止まっているなら、次に進む導線が見えていない可能性があります。

確認する方法は、カートページの表示回数に対する「レジに進む」ボタンのクリック率を見ることです。カート到達率は悪くないのに購入まで進まれていない場合、このクリック率が低いことがあります。
商品詳細ページと同じ考え方で、ボタンの視認性、周辺情報の整理、スマートフォンでのタップ領域を確認します。商品点数が多いカートでは、ボタンが商品リストの下に隠れていないかもあわせて見ます。

カートボタンの改善は、どこから手を付ける？

手を付ける順番は3つです。実測の効果が大きい順に並べています。

ステップ1は、ボタンが常に見えている、または戻れる状態を作ることです。追従表示やアンカーリンクの設置がこれにあたります。前述のとおり、クリック数で+40.12%という効果が確認されています。
ステップ2は、ボタンの置き場所を見直すことです。価格の近くに配置した事例では、CV率改善率60%を記録しています。判断が終わった場所に、次の行動の入口を置きます。
ステップ3が、色の変更です。手を付けやすく、効果も確認されていますが（改善率10.53%）、上の2つを済ませてからのほうが効率的です。

色から手を付けたくなるのは、変更が簡単で、見た目の変化が分かりやすいからです。しかし、 そもそもボタンが見えていない状態で色を変えても、見えていないことは変わりません。

自社サイトのカートボタンはどこを確認する？

確認する箇所は3つです。
ステップ1は、カートボタンのクリック率と、ボタン位置までのスクロール到達率を見ることです。 到達されているのにクリックされていないなら視認性、そもそも到達されていないなら配置の問題です。
ステップ2は、ファーストビュー以降のスクロール量と、ファーストビューでの離脱率を見ることです。商品の内容や価格が伝わる前に離れられていないかを確認します。
ステップ3は、カートページの「レジに進む」ボタンのクリック率を見ることです。

A/Bテストはどう進める？

変更点を1つに絞り、仮説を立ててから始めます。
A/Bテストで陥りがちな失敗は、「一度に複数の要素を変更してしまう」「統計的に意味のあるデータが集まる前に結論を急ぐ」「明確な仮説なしにテストを始める」といった点です。

成功のコツは、変更点を一つに絞り、なぜその変更が成果につながるのかという仮説を立て、十分な期間とサンプル数を確保して検証することです。
そして、結果の数値だけでなく、なぜその差が生まれたのかを考察し、次の改善に活かすサイクルを回すことが重要です。
ECサイトのABテストについては「ECサイトのABテスト完全ガイド」で詳しく紹介しています。

EC Intelligenceではどう実装する？

DOM要素の変更によって、ボタンの色やテキストを直接修正できます。
HTML、CSS、JavaScriptを直接記述して調整することも可能なため、サイト本体を改修せずにテストパターンを作れます。
全接客コンテンツのA/Bテストと効果の自動計測に対応しているため、どちらのパターンが成果につながったかをそのまま確認できます。

タグを1つ入れるだけで導入でき、エンジニアの手を借りずに設定と検証を進められます。

カートボタンについてよくある疑問は？

ここでは、カートボタンのデザインに関して頻繁に寄せられる質問とその回答をまとめました。

カートボタンに最適な色は何色ですか？

特定の最適な色というものは存在しません。
最も重要なのは、サイトの背景色に対して目立ち、ユーザーがボタンだとすぐに認識できる視認性の高い色を選ぶことです。
ブランドイメージとの調和も考慮しつつ、A/Bテストを通じて自社サイトに最適な色を見つけるのが最善の方法です。

ボタンの文言は「カートに入れる」と「カゴに入れる」のどちらが良いですか？

どちらの表現も広く使われており、効果に大きな優劣はありません。
自社のターゲット層やブランドイメージに合わせて統一するのが良いでしょう。
より重要なのは、カートのアイコンを併用したり、「送料無料」などの付加情報を添えたりして、ユーザーが迷わずクリックできるよう工夫することです。

デザインを変更した後、どのように効果を測定すればよいですか？

A/Bテストツールを用いて、変更前のデザイン（A）と変更後のデザイン（B）を一定期間、ユーザーにランダムで表示します。
そして、それぞれのデザインにおけるカート投入率やコンバージョン率を比較します。

これにより、どちらのデザインがより高い成果を出すかを客観的なデータに基づいて判断できます。

追従ボタンはすべての商品ページに入れるべきですか？

ページが縦に長い商品ページから優先します。
商品説明やレビューが長く、スクロールしないとボタンにたどり着けないページほど、効果が出やすくなります。
逆に、ページが短く最初からボタンが見えている商品では、追従表示の必要性は下が