「CVボタンは何色が一番押されるのか」。この問いには、色そのものに正解はないという答えになります。
「オレンジが最も効く」「赤がクリック率を上げる」といった説明を見かけますが、これらは特定のサイトでの結果であり、背景色が違えば再現しません。効いているのは色ではなく、周囲との差です。
この記事では、アクセントカラーの決め方を「色の選択」ではなく「配色設計の中での役割」として整理します。
この記事でわかること
・色そのものに正解がない理由
・アクセントカラーを決める3ステップ
・色以外にボタンを目立たせる要素
・色を使い分けるべき場面
・確認方法
効いているのは色ではなく差
同じオレンジのボタンでも、置かれる場所によって見え方が変わります。
| 背景・周囲 | オレンジのボタン | 結果 |
|---|---|---|
| 白基調のサイト | 強く目立つ | 見つけられる |
| オレンジをブランドカラーに使うサイト | 周囲と同化する | 見つけられない |
| 赤・黄が多用されたサイト | 埋もれる | 見つけられない |
| 写真の上 | 写真の色による | 不安定 |
2行目が最も起きやすい状況です。ブランドカラーをオレンジに設定しているサイトで、CVボタンもオレンジにすると、ボタンが「特別なもの」に見えません。
つまり、アクセントカラーは「サイト全体で使っていない色」であることが条件です。これが、色そのものに正解がない理由です。
「オレンジが効く」ではなく「サイトで使っていない色が効く」です。
ブランドカラーとCVボタンの色は、原則として分けてください。
アクセントカラーを決める3ステップ
ステップ1：使用済みの色を洗い出す
- ブランドカラー：ロゴ、見出し、装飾
- 背景色：白、生成り、薄いグレーなど
- 文字色
- リンク色
- 写真に多く含まれる色：料理の暖色、施工写真の外壁色など
- 競合サイトで使われている色
5番目を見落とすと、写真の中でボタンが埋もれます。飲食店で暖色系の料理写真が並ぶサイトに、オレンジのボタンを置いても目立ちません。
ステップ2：残った色から選ぶ
| ブランドカラー | アクセントの候補 | 避ける色 |
|---|---|---|
| 青系 | オレンジ、黄、赤 | 青、水色 |
| 緑系 | オレンジ、赤、マゼンタ | 緑、黄緑 |
| 赤・オレンジ系 | 青、緑 | 赤、オレンジ、ピンク |
| 黒・グレー基調 | どの色でも可 | グレー |
| 茶・ベージュ系 | 青、緑 | 茶、オレンジ |
色相環で反対側に位置する色（補色に近い色）を選ぶと、差が出やすくなります。ただしブランドの印象と極端に合わない色は避けてください。落ち着いた印象のサイトに蛍光色を置くと、そこだけ浮きます。
配色設計の全体像はWebサイトの配色の決め方｜ブランドカラーから展開する方法を参照してください。
ステップ3：使用箇所を限定する
アクセントカラーは、CVボタン以外に使わないでください。
| 使ってよい | 使わない |
|---|---|
| 問い合わせボタン | 見出しの装飾 |
| 資料ダウンロードボタン | 強調したい文字 |
| 電話ボタン | アイコン |
| 申込ボタン | 罫線・区切り線 |
「重要だから」という理由で他の箇所にも使うと、アクセントカラーが機能しなくなります。ページ内に同じ色が5か所あれば、どれも目立ちません。
色以外に効く要素
実際には、色より影響の大きい要素があります。
| 要素 | 影響 | 確認 |
|---|---|---|
| そもそも到達しているか | 最大 | スクロール到達率を見る |
| ボタンの文言 | 大きい | 「送信」になっていないか |
| サイズ | 大きい | 指で押せる大きさか |
| 位置 | 大きい | 1画面に1つ以上あるか |
| 周囲の余白 | 中 | 詰まっていないか |
| 押せると分かる形 | 中 | 角丸、影、矢印など |
| 色 | 中 | 周囲と差があるか |
| 直前の一文 | 大きい | 不安を消す情報があるか |
1番目を確認せずに色を変えるのは、順序が逆です。ボタンまで到達している人が少なければ、色を何度変えても数字は動きません。確認方法はヒートマップ分析のやり方｜何を見て、どこを直すのかを参照してください。
文言と直前の一文についてはマイクロコピーとは？CVRを動かす短い文章の書き方で解説しています。色より先に、この2つを見直してください。
ボタンを複数置く場合
「問い合わせ」と「資料請求」のように、複数のボタンを並べる場面があります。両方を同じ強さにすると、選べなくなります。
| 優先度 | 見せ方 | 例 |
|---|---|---|
| 主 | アクセントカラーの塗り | 無料で見積もりを依頼する |
| 副 | 枠線のみ、または薄い塗り | 資料をダウンロードする |
| 補助 | テキストリンク | よくある質問を見る |
主となる行動を1つ決めてください。どちらも取りたい気持ちは分かりますが、選択肢が同じ強さで並ぶと、決められずに離脱されます。
ページによって主を変える
- 広告のランディングページ：問い合わせ・申込を主に
- ブログ記事：資料ダウンロードを主に（検討段階が浅い）
- 料金ページ：見積依頼を主に
- 事例ページ：相談を主に
検討段階が浅い読者に「今すぐ申し込む」を主として見せても押されません。ページごとに、その読者が次に取れる行動を主にしてください。
色の見え方に関する注意
| 注意点 | 内容 |
|---|---|
| 色だけで意味を伝えない | 色を区別しづらい人には機能しない。文言でも伝える |
| コントラストを確保する | ボタンの色と文字色の差。薄い背景に白文字は読めない |
| 環境による見え方 | 屋外、明るい場所での視認性を実機で確認 |
| 印刷物との差 | 画面の色は印刷では再現されない |
| ダークモード | 対応している場合、色の見え方が変わる |
1番目は実務上も重要です。「オレンジのボタンを押してください」といった案内は、電話サポートなどで機能しません。文言で識別できる状態にしてください。詳細はWebアクセシビリティ対応はどこまでやるべきか｜優先順位の決め方を参照してください。
確認方法
- ページ全体のスクリーンショットを撮る
- 縮小して、目を細めて見る：最初に目に入るものがCVボタンか
- 白黒に変換して見る：色の差がなくても区別できるか
- スマートフォンの実機で見る：屋外でも確認
- 写真の上に置いている場合、写真を差し替えて確認する
2番目が最も簡単で有効です。縮小して目を細めたとき、最初に目に入るのがCVボタンでなければ、目立っていません。
3番目も重要です。白黒でも区別できるなら、色に依存していないということです。色の差だけに頼った設計は、環境や見え方によって機能しなくなります。
色を変えた効果の確認
色の変更は、効果検証が難しい施策です。
| 状況 | 判断 |
|---|---|
| CV数が月に1桁 | 検証できない。他の要素を先に直す |
| CV数が十分ある | ABテストが可能 |
| 複数箇所を同時に変えた | 原因が特定できない |
| 広告の出稿量が変わった | 流入の質が違うため比較にならない |
多くの中小企業サイトでは、1行目に該当します。この場合、色のテストに時間を使うより、到達率・文言・フォーム項目といった影響の大きい要素を直すほうが確実です。検証の条件はABテストの始め方｜やるべき条件と、できない場合の代替手段を参照してください。
CVボタンとは、問い合わせや申込など、成果として数える行動の入口になるボタン
CVボタンは、コンバージョン（CV）につながるボタンのことです。問い合わせ、資料請求、見積もり依頼、購入、予約など、サイトの成果として数える行動を始める入口になります。CTA（行動を促す要素）のうち、成果に直結するものを指して呼ぶことが多い言葉です。
| CTA | CVボタン | |
|---|---|---|
| 指す範囲 | 次の行動を促す要素全般。ボタン、テキストリンク、バナーを含む | 成果として数える行動の入口になるボタン |
| 例 | 「事例を見る」「関連記事を読む」「問い合わせる」 | 「無料で相談する」「資料をダウンロードする」「購入する」 |
| 色の扱い | 主・副・補助で強さを分ける | アクセントカラーを使う。サイトの中で最も目立たせる |
この記事で扱っている色の決め方は、CVボタンを「主」として扱うためのものです。どの行動を主にするか、文言と配置をどうするかはCTAボタンの設計｜文言と配置が、色よりも成果を動かすで扱っています。
ボタンの色は、文字との差と背景との差を数値で確かめ、押したときと押せないときの色も決めておく
周囲との差で色を選んだら、次に、読めるか・押せると分かるかを数値で確かめます。目安になるのは、Webアクセシビリティの国際的な基準であるWCAG 2.1の2つの達成基準です。
| 確かめる差 | 基準（WCAG 2.1・レベルAA） | CVボタンでの確かめ方 |
|---|---|---|
| ボタンの色と、ボタンの文字の色 | 1.4.3：文字は4.5:1以上（大きな文字は3:1以上） | オレンジや黄色に白文字は届かないことが多い。文字を濃い色にするか、ボタンの色を濃くする |
| ボタンの形を示す部分と、周りの背景 | 1.4.11：操作できる部品であることを示す視覚情報は3:1以上 | 塗りの色だけでボタンだと分かる作りなら、塗りと背景の差を測る。文言だけで押せると分かるなら、文字の基準で足りる |
W3Cの解説では、操作できない状態（無効）の部品は、この基準の対象外とされています。ただし対象外なのは基準の上での話で、入力が終わるまでボタンを薄くしておく作りは、読者には「押せない理由が分からないボタン」に見えます。
状態ごとの色を、最初に決めておく
| 状態 | 色の決め方 |
|---|---|
| 通常 | アクセントカラー。この記事の3ステップで決めた色 |
| カーソルを重ねたとき・押したとき | 同じ色相で明るさだけを変える。別の色にすると、別のボタンに見える |
| キーボードで選ばれているとき | ボタンの外側に枠を出す。枠と背景の差も3:1を目安にする |
| 押せないとき | 灰色に寄せる。近くに、押せるようになる条件を文章で書く |
状態の色が決まっていないと、ページを追加するたびに制作の担当者ごとに違う色が使われ、「押せるものの色」がサイトの中でばらつきます。コントラスト比の測り方と道具は配色のコントラスト比の基準｜WCAGの数値と、実務での使い方で扱っています。
CVボタンは、成果として数える行動の入口になるボタン。CTAのうち「主」にあたる。
文字との差は4.5:1、ボタンだと分かる部分と背景の差は3:1を目安に測り、押したとき・押せないときの色も決めておく。
よくある失敗
失敗1：「効く色」を探す
効いているのは色ではなく周囲との差です。サイトで使っていない色を選んでください。
失敗2：ブランドカラーをそのままCVボタンに使う
サイト全体で使われている色は、特別なものに見えません。
失敗3：アクセントカラーを他の箇所にも使う
同じ色が複数箇所にあると、どれも目立ちません。
失敗4：到達率を確認せずに色を変える
ボタンまで届いていなければ、色を変えても数字は動きません。
失敗5：複数のボタンを同じ強さで並べる
選べずに離脱されます。主となる行動を1つ決めてください。
よくある質問
Q. 結局、何色にすればよいですか？
サイトで使っていない色の中から、ブランドの印象と大きく乖離しないものを選んでください。ブランドカラーが青なら暖色系、暖色系ならブランドカラー以外の寒色系、というのが出発点になります。
Q. 赤は危険を連想させるので避けるべきですか？
文脈によります。削除や中止のボタンには使うべきでありませんが、CVボタンとして使えないわけではありません。判断の基準は、周囲との差と、ブランドの印象との整合性です。
Q. ボタンの色は全ページで統一すべきですか？
統一してください。ページごとに色が変わると、「押せるもの」の認識が定まりません。ただし、主・副の使い分けは維持してください。
Q. グラデーションや影は効果がありますか？
「押せそうに見える」効果はあります。ただし、色の差が確保されていることが前提です。装飾で差の不足を補うことはできません。
Q. 他社の成功事例の色を真似てよいですか？
背景色や写真が違えば再現しません。参考にするなら色そのものではなく、「サイト全体で使っていない色を選んでいる」という考え方のほうです。
まとめ
CVボタンの色に、それ自体の正解はありません。効いているのは色ではなく、周囲との差です。「オレンジが効く」ではなく「サイトで使っていない色が効く」と考えてください。
決め方は、使用済みの色を洗い出し、残った色から選び、CVボタン以外に使わない。この3ステップです。特にブランドカラーとCVボタンの色は分けてください。
ただし、色より影響の大きい要素があります。ボタンまで到達しているか、文言が「送信」になっていないか、直前に不安を消す一文があるか。色を変える前に、この3つを確認してください。
確認方法は、ページ全体を縮小して目を細めて見ることです。最初に目に入るのがCVボタンでなければ、目立っていません。
当社ではデザイン制作およびホームページ制作において、配色を単体ではなく成果導線の中で設計しています。資料では改善の進め方をまとめていますので、自社サイトを見直したい方はぜひダウンロードしてご活用ください。
