CTAを目立たせるカラーとは? クリックされるボタンの色選びを解説

どれだけ魅力的なコピーを書いても、「今すぐ購入」ボタンが周囲に埋もれていては、ユーザーは行動してくれません。CTAボタンの色は、コンバージョンを左右する重要な要素です。

この記事では、CTAボタンを目立たせるための色選びの考え方を、初心者向けに解説します。

基本の理解

まずはCTAの意味を簡単に押さえたうえで、CTAを目立たせる色選びの考え方に進みましょう。

そもそもCTAとは何か

CTAとは、Call To Action(コール・トゥ・アクション、行動喚起)の略で、「今すぐ購入する」「無料で資料請求」のように、ページを見ているユーザーに次に取ってほしい行動を促す要素のことです。

Webサイトではボタンの形で置かれることが多く、これを「CTAボタン」と呼びます。

また、CTAボタンが押されて購入や申し込みといったページのゴールにつながることを「コンバージョン」と呼びます。

CTAの意味や、文言・配置・大きさを含めたCTAボタン全体の作り方は、CTAボタンとは?意味とクリックされるボタンの作り方を初心者向けに解説で詳しく解説しています。

この記事では、その中でも「色」に絞って解説します。

CTAを目立たせるカラーとは何か

CTAを目立たせるカラーとは、「今すぐ購入」「詳細を見る」といったCTAボタンを、周囲の要素よりも確実に目に留まるようにするための色選びの考え方のことです。

ユーザーが「次に何をすればいいか」を色によって直感的に理解できるようになり、ボタンが押される割合(クリック率)やコンバージョンの向上が期待できます。

なぜCTAの色を意識する必要があるのか

どれだけ良いコピーや構成でも、CTAボタンが周囲に埋もれていると、ユーザーの行動につながりません。

サイトやバナーのメインカラー(デザインの印象を決める主役の色)と同系色のボタンでは、周囲に溶け込んでしまい目立たないという問題が起こりやすくなります。

CTAボタンの色の選び方

CTAボタンを目立たせる色は、「コントラスト」と「補色」という2つの考え方で選ぶと迷いにくくなります。

背景とのコントラストを最優先にする

コントラストとは、隣り合う色同士の明るさや色みの差の大きさのことです。

暗い部屋で懐中電灯をつけるとすごく目立つように、背景とボタンの明るさ・色みをできるだけ逆にすると、ボタンははっきり目立ちます。

白っぽい背景なら濃い色のボタン、紺色など暗い背景なら明るい色のボタン、というのが基本です。

申し込む

NG:淡い背景に淡いボタン
(コントラストが弱く埋もれる)

申し込む

OK:白っぽい背景に
濃いオレンジのボタン

申し込む

OK:紺色の背景に
鮮やかな黄色のボタン

ボタンの文字色とボタン自体の色のコントラストもあわせて確認し、文字が読みにくくならないようにすることも大切です。

コントラストを数値で確認する方法は、コントラスト比とは?で解説しています。

メインカラーの補色を選ぶ

もう1つの方法が、サイトのメインカラーの「補色」をボタンに使うことです。

補色とは、色相環(赤・橙・黄・緑・青・紫と色を順番に並べて輪にした図)の上で真反対に位置する、お互いを最も引き立て合う色のペアのことです。

サイトのメインカラー	ボタンに使いやすい補色の例
青系	オレンジ系
緑系	赤〜ピンク系
紫系	黄色系

自分のサイトの色の補色が分からないときは、Adobe Colorなどの無料の配色ツールで、メインカラーを選んで「補色」を表示させると簡単に調べられます。

補色の仕組みや調べ方は、補色とは?、補色配色とは?で詳しく解説しています。

なお、赤はWebサイトではエラー表示にもよく使われるため、申し込みボタンには赤そのものより、オレンジ寄りの色を選ぶと誤解を招きにくくなります。

実践のポイント

CTAの色を決める際に陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

「目立つ色だから」という理由だけで、サイトのブランドカラー(企業やサービスを象徴する色として、ロゴやサイト全体で一貫して使われる色)とまったく無関係な色を使ってしまい、浮いた印象になることがあります。
ブランドの世界観と大きく矛盾しない範囲で目立つ色を選びましょう。
CTAボタンの色に絶対の正解はなく、サイトや商材によって効果が異なります。
感覚だけで判断せず、実際の効果(クリック率など)も確認するとよいでしょう(確かめ方は下のよくある質問を参照)。

よくある質問

Q. CTAボタンには何色が一番効果的?
A. 特定の色に絶対的な正解はありません。
重要なのは色そのものよりも、周囲とのコントラストです。
サイト全体の配色の中で最も目立つ色を選ぶ、という考え方で決めましょう。
Q. ブランドの雰囲気を壊さずにボタンを目立たせるには?
A. ブランドカラーと無関係な色を持ち込むのではなく、ブランドカラーの補色を少し落ち着かせた色や、ブランドカラーをぐっと濃く(または明るく)した色を使う方法があります。
ボタン以外の部分を落ち着いた色でまとめておけば、ボタンが際立つ色でも全体の雰囲気から浮きにくくなります。
Q. 1ページにCTAボタンが複数ある場合はどうすればいい?
A. 優先順位に応じて、色の使い方に差をつけましょう。
たとえば次のように3段階に分けると分かりやすくなります。
・一番押してほしいボタン(購入・無料体験など):目を引く色で塗りつぶす
・2番目のボタン(資料請求・詳細を見るなど):枠線だけに色をつけ、中は白抜きにする(「ゴーストボタン」とも呼ばれます)
・補足のリンク(利用規約など):ボタンにせず、文字だけのリンクにする
見た目の例はCTAボタンとは?で紹介しています。
Q. 色を変えた効果はどうやって確かめればいい?
A. 「クリック率」を見るのが基本です。
クリック率(CTR:Click Through Rate)とは、ボタンを見た人のうち、何%の人がボタンを押したかという割合のことです。
Googleアナリティクスなどのアクセス解析ツールで、ボタンのクリックを計測する設定をしておけば、色を変える前と後でこの割合が上がったかを比べられます。
より正確に比べたい場合は、2つの色のボタンを訪問者に半分ずつ見せて比べる「A/Bテスト」という方法もあります(詳しくはCTAボタンとは?のよくある質問で紹介しています)。