カラフルすぎる商品ページを前に、購入ボタンがどこにあるのか一瞬わからず迷っているお客さんと、それを見て気づくEC担当者の情景
商品ページ改善約11分編集：（商品ページ改善担当）

商品ページの配色でCVRを上げる｜色で迷わせない設計の基本

セール色の赤、注目させたい黄色、ブランドカラーの青、季節感を出す緑——。よかれと思って足していったら、いつのまにか商品ページが虹色になっていた。心当たり、ありませんか。

写真もきれいに撮った。説明文も丁寧に書いた。なのに、なぜか買ってもらえない。そんなとき、いちど「色の使い方」を疑ってみてください。じつは、色を足せば足すほど、お客さんは「どこを見て、どこを押せばいいのか」が分からなくなります。今日は、商品ページの配色を「色で迷わせない設計」に整えて、買ってもらいやすさ（CVR）を底上げする基本を、いっしょに見ていきましょう。

結論：配色は「きれいに飾ること」ではなく、お客さんの目を、見てほしい順番に案内することです。色数をむやみに増やすと、いちばん押してほしい「カートに入れる」ボタンや価格が、まわりの色に埋もれてしまいます。ポイントは3つ。①基本の色は3色までに絞る（土台の色・文字の色・行動をうながす1色）。②購入ボタンには、そのページで最も目立つ「行動の色」を1色だけ使う。③背景と文字・ボタンの明るさの差（コントラスト）をしっかりつけて、誰でも読める・押せる状態にする。飾る色を減らすほど、買ってほしい場所が目立ちます。

いま何が起きているか｜「色の足し算」で行き先が見えなくなる

まず、なぜ配色がCVR（商品ページの買われやすさ＝ページを見た人のうち、実際に買ってくれた人の割合）に関わるのかを整理します。

人は、ページを開いた瞬間、文章を読む前に色や形で「どこを見ればいいか」を無意識に探します。このとき、目立つ色が1つだけなら、視線は自然にそこへ向かいます。ところが、赤・黄・緑…と強い色があちこちにあると、目は行き先を決められません。全部が目立つページは、結局どこも目立たないのです。

よくある「色の足し算」で起きているのは、こんな状態です。

作っている側は「どこがボタンか」を知っているので気づきにくいのですが、初めて訪れた人には、色の洪水の中からボタンを探す手間がかかっています。その一手間が、ほんの少しの「めんどうくささ」となって、離脱（そのまま帰ってしまうこと）につながります。

色は、増やすほど情報が伝わるわけではありません。むしろ「どの色に意味を持たせるか」を絞るほど、伝わりやすくなる。ここが配色の出発点です。

具体例｜色に「役割」を与えて、3色に絞る

商品ページの配色を土台の色・文字の色・行動をうながす色の3つの役割に絞って整理した図
配色は「土台・文字・行動」の3役に絞る。行動の色（購入ボタン）を1色だけ際立たせるのがコツ。

配色をむずかしく考える必要はありません。色に「役割」を割り当てて、基本は3色までに絞る。これだけで、ページはぐっと見やすくなります。

① 土台の色（背景・全体の7割）

ページの大部分を占める、落ち着いた色です。白やごく薄いグレー、生成りなど、主張しすぎない色を選びます。ここが派手だと、置いたもの全部が読みにくくなります。土台は「静か」でいい、と覚えてください。

② 文字・情報の色（2割）

商品名や説明、価格を伝える色です。多くは濃いグレーや黒。土台とのコントラスト（明るさの差）をしっかりつけるのが絶対条件です。おしゃれに見せようと薄いグレー文字にすると、読めない人が出てきます。

③ 行動の色（1割・でも主役）

「カートに入れる」「今すぐ購入」など、いちばん押してほしいボタンに使う、そのページで最も目立つ1色です。ここだけは、まわりと明確に差がつく強い色を選びます。面積は小さいのに、視線を集める主役。この色を、ほかの飾りに使い回さないのが最大のコツです。セールバナーもレビューの星も同じ色にすると、ボタンの特別感が薄れます。

たとえば、同じ商品ページでもこう変わります。

要素直す前（色の足し算）直した後（役割で3色に整理）
全体の色数強い色が5〜6色ある土台・文字・行動の3色に絞る
購入ボタン背景に近い淡い色で埋もれるページで最も目立つ1色で際立つ
「行動の色」の使い方バナー・星・見出しにも同じ色購入ボタンだけに使い、特別感を守る
価格・説明の文字薄いグレーで読みにくい背景と差をつけた濃い色ではっきり

ここで大事なのは、「きれいに飾る」より「行き先を1つに絞る」という発想です。色は、見てほしい順番を伝える案内係。案内係が何人もいてバラバラの方向を指していたら、お客さんは迷ってしまいます。押してほしい場所へ、まっすぐ視線を導いてあげましょう。

色の明るさの差（コントラスト）は、読みやすさの土台

配色でもう1つ外せないのが、背景と文字・ボタンの「明るさの差」です。差が小さいと、目に不安のある方や、屋外でスマホを見ている人には読めません。読めない・押せないボタンは、存在しないのと同じです。

どのくらい差をつければいいかは、世界共通の目安があります。ウェブのアクセシビリティ（誰にとっても使いやすくすること）の国際的なガイドラインでは、文字と背景の明るさの差について推奨される基準が定められています（W3C WAI｜色のコントラストの解説）。細かい数値まで覚える必要はありません。「薄い背景に薄い文字を重ねない」「ボタンの色は背景から浮き立たせる」——この2つを意識するだけでも、ぐっと読みやすくなります。

※ ここで挙げた「3色」「7割・2割・1割」といった配分は、考え方を示すための一例です。ブランドや商材によって最適な色は変わります。まずは自分のページを開いて、「強い色がいくつあるか」「ボタンが一目で見つかるか」を確かめることから始めてください。

なお、色は「読みやすさ」だけでなく、価格の見せ方にも関わります。値引き前の価格を赤で目立たせるような表現は、根拠のない二重価格だと景品表示法（消費者に誤解を与える表示を禁じる法律）に触れることがあります。色で強調するときも、表示している内容そのものが正しいかを必ず確認してください。価格の見せ方は価格の見せ方｜参考価格・送料込み表示の工夫もあわせてどうぞ。

あなたへの影響｜広告費を増やさず、買いやすさを底上げできる

配色を整えると、地味ですが確かな変化が3つ生まれます。

まず、同じアクセス数のまま、買ってもらいやすさ（CVR）を底上げできます。色を絞って購入ボタンを際立たせるのは、写真の撮り直しや文章の書き直しに比べれば小さな手間です。それでいて、来てくれた全員に効く。広告費を1円も増やさずにできる、費用対効果の高い改善の1つです。せっかく払った広告費を、「ボタンが見つからない」という理由で取りこぼさずに済みます。

次に、誰にとっても使いやすいページになります。明るさの差をしっかりつけた配色は、目に不安のある方にも、明るい屋外でスマホを見ている人にも、ちゃんと届きます。使いやすさへの配慮は、結果的にお店全体の印象や信頼にもつながります。

そして、新しい商品を載せるたびに迷わなくなります。「土台・文字・行動」の3色と、それぞれの役割をお店のルールとして決めておけば、担当者が変わっても同じ品質のページを作れます。色選びのたびに悩む時間が減り、その分を写真や説明の中身に使えるようになります。

一方で、やりすぎには注意です。ブランドの世界観を無視して、どぎつい色のボタンだけを置けばいい、という話ではありません。世界観を保ちながら、その中でいちばん目立つ色を購入ボタンに割り当てる——このバランスが大切です。迷ったら、色を変えたページと元のページを一定期間くらべるA/Bテストで、実際の反応を確かめてから決めると安心です。

明日からやること

  1. 売れ筋の商品ページを開き、強い色を数える。スマホとパソコンの両方で開き、「はっきり目立つ色がいくつあるか」を数える。5色以上あるなら、絞る余地があります。
  2. 色に役割を割り当てる。「土台の色・文字の色・行動の色」の3つを決める。行動の色は、購入ボタンに使う1色だけ。
  3. 購入ボタンを、いちばん目立つ色にする。背景に埋もれていないか、初めて訪れた人の目で確かめる。淡い色なら、まわりと差がつく色に変える。
  4. 「行動の色」の使い回しをやめる。バナー・見出し・星などに購入ボタンと同じ色を使っていたら、別の色に振り分け、ボタンの特別感を守る。
  5. 文字と背景の明るさの差を確かめる。薄い背景に薄い文字が重なっていないか。価格や説明がはっきり読めるか、少し離れて画面を見て確認する。
  6. 変える前と後をくらべる。可能なら、色を整えたページと元のページをA/Bテストで一定期間くらべ、反応の違いを見てから本採用する。

色は、多く使うほど親切なわけではありません。むしろ、押してほしい場所にだけ色を集めてあげることが、いちばんの親切です。まずは今日、あなたのお店で「いちばん売りたい商品ページ」を1つ開いて、購入ボタンが一目で見つかるかを確かめてみませんか。もし色の海に埋もれていたら、そこがきっと、いちばん効く直しどころです。

色を整えたことで購入ボタンがはっきり際立ち、お客さんが迷わず商品を選べるようになった明るい情景

商品ページの配色チェックリスト

関連記事・無料ツール

あなたのお店の商品ページ、購入ボタンは一目で見つかりますか。気になるページを見せていただければ、無料診断で「色を絞って直すべき箇所」を3つお返しします。

参考（公式・一次情報）