「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テストの始め方｜やるべき条件と、できない場合の代替手段を参照してください。
よくある失敗
失敗1：「効く色」を探す
効いているのは色ではなく周囲との差です。サイトで使っていない色を選んでください。
失敗2：ブランドカラーをそのままCVボタンに使う
サイト全体で使われている色は、特別なものに見えません。
失敗3：アクセントカラーを他の箇所にも使う
同じ色が複数箇所にあると、どれも目立ちません。
失敗4：到達率を確認せずに色を変える
ボタンまで届いていなければ、色を変えても数字は動きません。
失敗5：複数のボタンを同じ強さで並べる
選べずに離脱されます。主となる行動を1つ決めてください。
よくある質問
Q. 結局、何色にすればよいですか？
サイトで使っていない色の中から、ブランドの印象と大きく乖離しないものを選んでください。ブランドカラーが青なら暖色系、暖色系ならブランドカラー以外の寒色系、というのが出発点になります。
Q. 赤は危険を連想させるので避けるべきですか？
文脈によります。削除や中止のボタンには使うべきでありませんが、CVボタンとして使えないわけではありません。判断の基準は、周囲との差と、ブランドの印象との整合性です。
Q. ボタンの色は全ページで統一すべきですか？
統一してください。ページごとに色が変わると、「押せるもの」の認識が定まりません。ただし、主・副の使い分けは維持してください。
Q. グラデーションや影は効果がありますか？
「押せそうに見える」効果はあります。ただし、色の差が確保されていることが前提です。装飾で差の不足を補うことはできません。
Q. 他社の成功事例の色を真似てよいですか？
背景色や写真が違えば再現しません。参考にするなら色そのものではなく、「サイト全体で使っていない色を選んでいる」という考え方のほうです。
まとめ
CVボタンの色に、それ自体の正解はありません。効いているのは色ではなく、周囲との差です。「オレンジが効く」ではなく「サイトで使っていない色が効く」と考えてください。
決め方は、使用済みの色を洗い出し、残った色から選び、CVボタン以外に使わない——この3ステップです。特にブランドカラーとCVボタンの色は分けてください。
ただし、色より影響の大きい要素があります。ボタンまで到達しているか、文言が「送信」になっていないか、直前に不安を消す一文があるか。色を変える前に、この3つを確認してください。
確認方法は、ページ全体を縮小して目を細めて見ることです。最初に目に入るのがCVボタンでなければ、目立っていません。
当社ではデザイン制作およびホームページ制作において、配色を単体ではなく成果導線の中で設計しています。資料では改善の進め方をまとめていますので、自社サイトを見直したい方はぜひダウンロードしてご活用ください。
