自社通販サイトのカート追加ボタンは何色がおすすめか解説【成約率向上】

自社の通販サイトを運営していて、ふとこんな疑問を感じたことはありませんか。

「カートに入れるボタンって、何色にすればいいんだろう」
「Amazonみたいに黄色がいいの？　それとも緑？」
「色を変えるだけで売上って本当に変わるの？」

私のところにも、Shopifyでネットショップを立ち上げた中小企業の経営者やWeb担当の方から、この手の相談がよく届きます。

先に結論をお伝えすると、「この色にすれば売れる」という万能の正解色は存在しません。

ただし、色の選び方には明確な判断基準があります。そして、選んではいけない色もはっきりしています。

この記事は、ECサイトのカート追加ボタンの色選びに迷っている方に向けて書きました。
読み終えたあとには、以下のことができるようになります。

• ボタン色が売上に影響する仕組みと、その影響度の「現実的な期待値」が分かる
• 海外の実験データをもとに、色ごとの成約率の違いを把握できる
• 自社サイトに合ったボタン色を選ぶための3つの判断基準が身につく
• ShopifyのDawnテーマ・Warehouseテーマで、ボタンの色・形・テキストを実際に変更できる
• 避けるべき色や、変更後に見落としがちな確認ポイントが分かる

弊社では、マイクロコピーという考え方に基づいて、多くの人が見慣れているAmazonのボタン色と形を再現する方法を推奨しています。カラーピッカーで実際のAmazonボタンの色を抽出し、忠実に再現するところまで踏み込んだ内容です。
ShopifyのDawnやWarehouseでの操作画面も載せていますので、ぜひ参考にしてください。

カート追加ボタンの色で売上は本当に変わるのか

「ボタンの色を変えたら売上が30%上がった」。
こうした話をマーケティング系の記事で目にしたことがある方も多いのではないでしょうか。

結論から言うと、ボタンの色がカート追加率(CVR)に影響を与えること自体は、複数の実験で確認されている事実です。
ただし、その影響の「正体」と「大きさ」については、誤解されていることが少なくありません。

色が影響する理由は「心理効果」よりも「視認性」にある

「赤は購買意欲を高める」「緑は安心感を与える」といった色彩心理学の話は、ネット上に溢れています。
しかし、ECサイトのボタン色に限って言えば、心理的な色の意味よりも「そのボタンが背景から目立っているかどうか」のほうがはるかに大きく影響します。

Nielsen Norman Groupの眼球追跡研究では、背景と十分なコントラスト(明度差)を持つボタンは、ユーザーの視線を自然に集め、クリック率が高くなることが報告されています。
逆に、背景に溶け込んでしまうボタンは、そもそもユーザーに「見つけてもらえない」わけです。

期待値の現実。ボタン色の影響は売上全体の2〜5%程度

ここで、もうひとつ大切な話をしておきます。

ボタンの色を変えただけで、売上が劇的に跳ね上がることはまずありません。

CRO(コンバージョン率最適化)の専門機関であるCXL InstituteやBaymard Instituteなどの知見をもとに整理すると、ECサイトのコンバージョン率に影響する要因の大きさは、おおむね以下の順と考えられています。なお、以下の数値はあくまで目安であり、業種やサイトの状況によって変動します。

CVRに影響する要素の優先度

要因	推定影響度	具体例
ページの価値提案・メッセージング	40〜50%	「なぜこの商品を買うべきか」が伝わっているか
信頼シグナル	20〜30%	レビュー、返品保証、セキュリティバッジ
ボタンのサイズ・位置	10〜15%	ファーストビュー内にあるか、タップしやすいか
ボタンのテキスト(マイクロコピー)	5〜10%	「カートに入れる」vs「今すぐ購入」
ボタンの色	2〜5%	背景とのコントラスト、ブランド整合性

ボタンの色は確かに軽視できない要素ですが、売上を左右する要素全体の中では「最後の仕上げ」に近い位置づけです。
ページの内容や信頼性が整っていない状態でボタン色だけ変えても、目に見えた効果はまず出ません。

とはいえ、「だからボタン色は気にしなくていい」という話ではありません。
他の要素を整えた上で、最後にボタン色を最適化することで、積み上げた成果をさらに数%押し上げる効果が期待できます。

私自身、ShopifyでのEC構築を支援した案件では、ページ構成やメッセージングを先に整えてから、最後にボタン色とテキストの調整を行うという順番を徹底しています。この順番を間違えると、効果が見えにくくなるからです。

海外A/Bテストに見るボタン色別の成約率データ

では、実際にどの色がどのくらいの成約率を出しているのか。
海外のCRO専門企業が公開しているA/Bテスト結果のうち、サンプルサイズや条件が明記されている比較的信頼度の高いものをまとめました。

赤 vs 緑、オレンジ vs 緑、青 vs オレンジの実験結果

主要なA/Bテスト結果の比較

実験	比較した色	サンプル数	結果
DMix.ca	赤 vs 緑	600名	赤が+34%
HubSpot	赤 vs 緑	2,000名	赤が+21%
VWO	オレンジ vs 緑	非公開	オレンジが+5%
某EC企業	青 vs オレンジ	数百名(推定)	青が+9%

この結果を見ると、暖色系(赤・オレンジ)が寒色系(緑)に対して優位に立つ傾向が読み取れます。
ただし、最後の例のように青がオレンジに勝つケースもあり、「暖色なら間違いない」とまでは言い切れません。

特に注目したいのは、同じ「赤 vs 緑」でも、テストごとに結果の幅が+21%〜+34%と大きく開いている点です。
この差は、背景色やページデザイン、商品カテゴリ、ユーザー層の違いから生まれていると考えられます。

テスト結果を自社に当てはめてはいけない理由

正直なところ、私自身も最初はこうしたA/Bテストの数字を見て「じゃあ赤にしよう」と思ったことがあります。
しかし実務を重ねるうちに、他社のテスト結果をそのまま自社に適用するのは危険だと実感するようになりました。

理由は大きく3つあります。

• 業種・商品カテゴリが違う：ファッションECで赤が効いても、医療用品ECでは「警告」に見えてしまうかもしれない
• 背景色やデザインが違う：「赤が+34%」という結果は「元のデザインで赤が目立った」だけの話かもしれない。別のデザインでは逆転する可能性がある
• 統計的な信頼性が不十分な場合がある：サンプル数が600名程度のテストは、ランダム変動の影響を受けやすい。最低でも各グループ1,000名以上、2週間以上のテスト期間が望ましいとされている

通販サイトのカート追加ボタンで避けるべき色

「どの色がいいか」を考える前に、まず避けるべき色を押さえておくほうが失敗を防げます。
おすすめの色は業種やブランドによって変わりますが、避けるべき色はほぼ共通しています。

グレーは「使えないボタン」に見える

カート追加ボタンにグレーを使うのは、基本的に避けたほうがよいでしょう。

理由はシンプルで、グレーはWebの世界で「無効化されたボタン」を意味する色だからです。
WindowsでもMacでもスマホアプリでも、操作できない状態のボタンはグレーで表示されます。この慣習はユーザーの間に広く浸透しています。

グレーのボタンを見た瞬間、「あ、これは今押せないんだな」と判断してしまうユーザーは少なくないでしょう。
実際にはクリックできる状態であっても、です。

背景と同系色のボタンは存在しないのと同じ

白い背景にクリーム色のボタン、黒い背景に濃いグレーのボタン。
こうした背景と同系色の組み合わせは、ユーザーにとって「ボタンが存在しない」のと同じです。

特にスマートフォンの小さな画面では、コントラストが不足しているボタンは背景に完全に溶け込んでしまいます。高齢のユーザーや、屋外の明るい環境でスマホを使っている人にとっては、なおさら見えにくくなるでしょう。

コントラスト不足の具体例

背景色	ボタン色	コントラスト比	判定
白(#FFFFFF)	薄いグレー(#E0E0E0)	1.19:1	✗ 不合格
白(#FFFFFF)	淡いピンク(#FFB3D9)	1.88:1	✗ 不合格
白(#FFFFFF)	深緑(#27AE60)	5.88:1	✓ 合格
白(#FFFFFF)	オレンジ(#FF8C00)	5.52:1	✓ 合格
白(#FFFFFF)	深青(#0066CC)	8.59:1	✓ 合格

WCAG(Webコンテンツアクセシビリティガイドライン)では、ボタン上のテキストと背景色のコントラスト比は最低でも4.5:1以上を確保することが推奨されています(2026年4月時点の基準)。
上の表は代表的な測定ツールで算出した参考値です。薄い色はこの基準を大きく下回ります。

「WebAIM Contrast Checker」などの無料ツールで簡単に測定できますので、御社のサイトのボタン色が基準を満たしているか、一度チェックしてみてください。

赤は条件次第。エラーと混同されるリスク

「赤はA/Bテストで強い結果が出ている」と先ほど紹介しましたが、赤には”もう一つの顔”があります。

Webの世界では、赤は「エラー」「警告」「削除」「キャンセル」を意味する色として長年使われてきました。
フォームの入力ミスは赤文字で表示され、削除ボタンも赤。この慣習のおかげで、ユーザーの無意識には「赤いボタン＝何か悪いことが起きるかもしれない」という反応が刷り込まれています。

だからといって、「赤は絶対NG」というわけでもありません。

赤が適切な場合と避けるべき場合

状況	赤の適否	理由
タイムセール・期間限定セール	✓ 適切	「今すぐ行動」の緊急性と赤の心理が一致する
日本の正月セールや季節キャンペーン	✓ 適切	日本では赤は「吉祥・幸運」の象徴でもある
ページ内に赤いエラー表示がある	✗ 避ける	エラーとカートボタンの区別がつかなくなる
高級感・信頼感を重視するブランド	✗ 避ける	赤の「興奮・攻撃性」がブランドイメージと矛盾する
色覚異常のユーザーが多い層(男性向け商品等)	✗ 要注意	男性の約8%に見られる色覚異常の多くが赤緑型で、赤と緑の区別がつきにくい

私の判断としては、通常の商品ページでは赤以外の色(オレンジ、深緑、深青、黄色系)を選ぶほうが無難です。
赤を使いたい場合は、ページ内に他の赤い要素(エラー表示やキャンセルボタン)がないことを確認した上で、A/Bテストで検証するのが安全だと考えています。

おすすめの色を決める3つの判断基準

避けるべき色が分かったところで、次は「では何色を選べばいいのか」という話に進みます。
ここでは、実務で使える3つの判断基準を優先度の高い順に紹介します。

コントラスト比4.5:1をまず確保する

最初に確認すべきは、ボタン上のテキストと背景色のコントラスト比が4.5:1以上あるかどうかです。
これはWCAG(Webコンテンツアクセシビリティガイドライン)でボタン上のテキストに対して推奨されている基準値であり、どんなに心理的に「売れる色」であっても、背景に溶け込んで見えなければ意味がありません。

コントラスト比の確認は、「WebAIM Contrast Checker」という無料ツールで30秒もあれば完了します。ボタンの色コードと背景の色コードを入力するだけで、「Pass(合格)」か「Fail(不合格)」が表示されます。

EC事業者の方から「パステルカラーのブランドなので、ボタンも淡い色にしたい」という相談を受けることがあります。
気持ちは分かるのですが、淡い色のボタンは白背景に対してコントラスト比が不足するケースが大半です。
ブランドカラーが淡い場合は、その色の「濃い版」をボタンに使うことで、ブランドの統一感を保ちつつ視認性も確保できます。

ブランドカラーとの整合性を優先する

コントラストが確保できたら、次に考えるべきはブランドカラーとの整合性です。

以前、こんな相談がありました。「A/Bテストで緑が強いらしいから、うちもボタンを緑にした」と。
ところがブランドカラーを無視した結果、サイト全体の統一感が崩れて「このサイト本当に大丈夫？」とユーザーに不信感を与えてしまったというケースでした。こうした失敗は決して珍しくありません。

ブランドカラーは、ユーザーがサイトを訪問したときに「ここはあのブランドだ」と瞬時に認識するための視覚シグナルです。
短期的なCVR向上のためにブランドカラーを捨てると、長期的にはリピート率やブランドへの信頼度が下がるおそれがあります。

ネットショップのロゴやデザインの作り方の記事でも触れていますが、ECサイトのデザインにおいて「ブランドの世界観と実用性のバランス」は常に悩ましいテーマです。ボタン色もその一部として捉えてください。

Amazonのボタン色を参考にする「マイクロコピー」の考え方

ここで紹介したいのが、弊社がクライアントによく提案している方法です。

普段多くの人が見慣れているAmazonのボタン色と形を、忠実に再現する。

これは「マイクロコピー」という概念に基づいた考え方です。
マイクロコピーとは、ボタンのテキストや色・形状など、UIの細部が持つ「小さなメッセージ」のこと。
ユーザーは無意識のうちに、普段使い慣れているサービスのUI(ボタンの色、形、テキスト)を記憶しており、似た見た目のボタンに対して「これはカートに入れるボタンだ」と瞬時に認識します。

日本でネットショッピングをする人の多くはAmazonを利用した経験があるはずです。
Amazonの「カートに入れる」ボタンは黄色系(HEXコード: #FDAF17前後)の角丸ボタンで、このデザインは何百万人ものユーザーの記憶に刷り込まれています。

弊社では、カラーピッカーツールを使ってAmazonのボタン色を実際に抽出し、クライアントのShopifyストアで再現しています。以下の画像が実際の仕上がりです。

Amazon側のデザインアップデートでボタンの配色が変わる場合もあるため、定期的にAmazonの現行デザインを確認することをおすすめします。2026年5月時点では黄色系(#FDAF17前後)が使われています。

もしブランドカラーが黄色系と相性が悪い場合は、無理にAmazon風にする必要はありません。
前述の「コントラスト比」と「ブランド整合性」を優先し、その上で可能ならAmazon風の色を選択肢に入れる、という順番で考えてください。

ShopifyのDawnとWarehouseでカート追加ボタンの色・形・テキストを変える手順

判断基準が分かったところで、実際にボタンの色や形、テキストを変更する方法を解説します。
ここでは、Shopifyで特に利用者が多いDawnテーマとWarehouseテーマに絞って、操作画面の画像付きで説明します。

なお、Shopifyのテーマ選びのコツについてはこちらの記事で詳しく解説していますので、テーマ選定の段階で迷っている方はあわせてご覧ください。

Dawnテーマでボタンの色と角丸を変更する

Dawnテーマでは、テーマエディタの設定画面からノーコードでボタン色と形状を変更できます。
CSSの知識は不要です。以下の手順で進めてください。

• Shopify管理画面 →「オンラインストア」→「テーマ」→ Dawnテーマの「テーマを編集する(カスタマイズ)」をクリック
• テーマエディタが開いたら、左下の歯車アイコン(テーマ設定)をクリック
• 「色」セクションを開き、「カラースキーム」を選択
• 「ソリッドボタンの背景」の色を変更 → ここにHEXコードを入力(例: Amazonに寄せるなら #FDAF17)
• 「ソリッドボタンのラベル」でボタンのテキスト色を変更(黄色背景なら黒 #000000 がおすすめ)
• 「ボタン」セクションを開き、「角の半径」を調整 → 40pxにすると、Amazon風の角丸ボタンになる
• 右上の「保存」をクリック

以下の画像が、実際にDawnテーマでボタンの角丸を40pxに設定した状態です。

Dawnテーマでボタンのテキストを変更する

ボタン上の文言(「カートに入れる」「カートに追加する」など)を変更するには、テーマエディタではなく「デフォルトテーマのコンテンツを編集する」画面を使います。

まず、Shopify管理画面の「オンラインストア」→「テーマ」で、Dawnテーマの「テーマを編集する」ボタンの左にある「…」(三点メニュー)をクリックします。

メニューの中から「デフォルトテーマのコンテンツを編集する」を選択します。

編集画面が開いたら、検索欄に「カートに入れる」と入力してください。
「Products > Product > Add to cart」という項目が見つかりますので、そのテキスト欄を書き換えます。

変更が終わったら、右上の「保存」を忘れずにクリックしてください。保存を忘れると変更が反映されません。

Warehouseテーマでボタンのテキストを変更する

Warehouseテーマの場合は、テーマのコードエディタからja.jsonファイルを直接編集する方法が確実です。

• Shopify管理画面 →「オンラインストア」→「テーマ」→ Warehouseの「…」→「コードを編集」
• 左側のファイルツリーから「locales」フォルダ内の「ja.json」を選択
• ファイル内で「add_to_cart」を検索(Ctrl+FまたはCmd+F)
• 「”add_to_cart”: “カートに入れる”」のダブルクォーテーション内のテキストのみを変更
• 右上の「Save(保存)」をクリック

以下の画像が、Warehouseテーマ(バージョン7.0.1)での実際の編集画面です。

テーマ更新でカスタマイズが戻る問題への対処

Shopifyでテーマを運用していると、テーマの自動更新でカスタマイズしたボタン色が元に戻ってしまうことがあります。
これは、テーマの更新時にコアファイル(theme.cssなど)が上書きされるために起きる現象です。

経験上、この問題で慌てる方は少なくありません。対処法は以下の通りです。

• テーマエディタの「色スキーム」で設定した色は、テーマ更新後も保持されるケースが多い。まずはこの方法で設定するのが最も安全
• CSSで色を変更する場合は、テーマのコアファイル(theme.css)ではなく、テーマエディタ内の「カスタムCSS」欄に記述する。カスタムCSS欄の内容は、テーマ更新時にも上書きされにくい
• テーマを更新する前には、テーマを複製してバックアップしておく(管理画面 →「テーマ」→「…」→「複製」)
• テーマ更新後は、商品ページのボタン色が正しく表示されているか目視で確認する

ボタンの色を変えた後に確認すべきチェックリスト

色を変更して保存したら、「よし、完了」とはなりません。
ここからが実は大事なステップです。見落としやすいポイントを3つに絞って解説します。

デスクトップ・モバイル・複数ブラウザでの表示確認

パソコンで「いい感じの色だな」と思っても、スマートフォンで見たら全く印象が違うことは珍しくありません。

これは単に画面サイズの問題ではなく、ディスプレイ技術の違いが原因です。
パソコンのIPS液晶とスマートフォンのOLEDでは色の表現がわずかに異なりますし、屋外の明るい場所でスマホを見ると、コントラスト比が低いボタンはさらに見えにくくなります。

• 実機確認：iPhone、Androidの両方で商品ページを開き、ボタンが見えるか確認する
• ブラウザ確認：Chrome、Safari、Firefoxの少なくとも3つで表示を確認する(特にSafariは色表現が異なりやすい)
• 輝度確認：スマホの画面輝度を「暗い→標準→明るい」の3段階で切り替えて、各レベルでボタンが視認できるか確認する
• ボタンサイズ：スマホ表示でタップしやすいサイズになっているか確認する。Appleは44pt以上、Androidは48dp以上を推奨しており、実務的には48px以上を目安にするとよいでしょう

パソコンのブラウザ開発者ツール(デバイスシミュレーション)だけで確認を済ませがちですが、実機のディスプレイ特性はシミュレーションでは完全に再現できません。面倒でも、実際のスマートフォンで確認することを強くおすすめします。

チェックアウトページのボタン色はテーマとは別管理

ここは見落とす方が本当に多いので、少し強調して書きます。

Shopifyでは、商品ページのボタン色とチェックアウトページのボタン色が、別の管理画面で管理されています。

商品ページのボタンをオレンジに変えたのに、チェックアウトページに進んだらボタンだけ元の青色のまま。
ユーザーから見ると、ページ遷移した瞬間にデザインの統一感が崩れ、「このサイト、大丈夫かな」という不安につながりかねません。

ボタン色を変更する際は、「商品ページのテーマエディタ」と「チェックアウト設定」の2箇所をセットで変更するという手順をチェックリストに入れておいてください。片方だけ変えて満足してしまう方が本当に多いです。

ボタン色だけでなくサイズ・位置・周辺テキストも見直す

この記事はボタン色がテーマですが、正直に言うと、色だけ変えても効果が出ないケースのほうが多いと感じています。

ボタン色を最適化しても成果につながらないとき、たいてい別の問題が隠れています。

• ボタンがファーストビュー内にあるか：スマホ表示で、スクロールしないとボタンが見えない場合は、位置の見直しが必要
• ボタンのテキストは適切か：「カートに入れる」は比較的ハードルが低い表現。「購入する」はハードルが上がる。商品特性に合わせて選ぶ
• ボタン周辺に安心要素があるか：「送料無料」「30日返品保証」「最短翌日配送」などのテキストがボタンの近くにあると、クリック率が上がりやすい
• ページ内で最も目立つ要素になっているか：メルマガ登録ボタンや別のバナーと同じ色・同じ大きさだと、どちらが重要か分からなくなる

先ほどの表で示したとおり、CVRに対する影響度は「ページのメッセージング(40〜50%)」「信頼シグナル(20〜30%)」のほうがボタン色(2〜5%)よりもはるかに大きいと考えられています（いずれも目安の数値です）。
色の最適化は「他の改善を積み上げた後の、最後の仕上げ」として取り組むのがおすすめです。

サイト全体の設計やデザインの見直しも含めて検討されている方は、Shopifyと他のネットショップを比較した記事も参考になるかと思います。

カート追加ボタンの色に関するよくある質問

通販サイトのカート追加ボタンの色選びとは、コントラスト比の確保・ブランドカラーとの整合性・ページ内での目立ち度の3基準をもとに、自社サイトに最適なボタン色を判断するプロセスです。

最後に、カート追加ボタンの色選びでよくいただく質問をまとめました。