「CTAボタンは目立つ色にすれば押される」は本当か——目立たせる“対象”を間違えると、押す理由が消える

2026.10.06

「CTAボタンは目立つ色にすれば押される」は本当か

デジタルマーケティングのセオリーを行動経済学で紐解くシリーズ、2回目です。
前回はLPのフォームをどこに置くかという話でしたが、今回はその隣にある「ボタン」を扱います。

先に結論から言うと、CTAボタンの色を派手にして動かすほど押されるとは限りません。目立たせる対象を間違えると、ボタンの周囲に置いたはずの「押す理由」が読まれなくなる。押されない原因が、目立たせ方そのものにあることがあるんですね。

Web制作の“定石”——ボタンは赤か緑、さらに動かせ

Web制作の現場には、これも半ば常識になっている考えがあります。「CTAボタンは赤や緑などの目立つ色にする」「背景から浮かせて、さらにアニメーションで動かす」。CTAボタンの色をどうするかは、いまだに議論の的ですね。

理屈は分かります。そもそも見つけてもらえなければ、押されるはずがない。背景に溶けたグレーのボタンでは、探す手間そのものが高い壁（行動障壁）になってしまいますから。実際、ボタンの色を赤に変えただけで、クリック率が大きく変わったという実務上の報告は、私も十分に納得できるところです。

目立たせれば、押されるのでしょうか

しかし、ここでひとつ立ち止まってみます。目立たせることは、いったい何のための手段だったのでしょうか。

もともとは「見つけてもらう」ための手段だったはずです。ところが現場で語られるうちに、いつのまにか「派手にすれば押される」という話にすり替わっていく。見つかることと、押したくなることは、別の話です。前回、フォームを上に置くことと相手が埋めたくなることは別だと書きましたが、構図はまったく同じですね。

「実際に色を変えたらクリック率が上がった」という声への先回り

「いや、実際にボタンを赤にしたらクリック率が上がった」とお考えの方も、大勢いらっしゃるでしょう。その通りで、そういうケースは確かにあります。私も否定するつもりはありません。

ただ、そこで何が起きたのかを分けて考えたいのです。上がった理由が「埋もれていたボタンが、ようやく見つかるようになった」ことなら、それは見つけやすさの改善です。押したくなる理由が増えたわけではありません。にもかかわらず、結果だけを見て「派手にすれば押される」と読み替えると、次の一手は「もっと派手に、もっと大きく、もっと動かそう」になります。実は、この延長線上に落とし穴があります。

視線は、意思とは無関係に奪われる

人間の脳には、意図や意志とは無関係に、目立つものに勝手に視線を奪われてしまう特性があります。

先日、あるテレビCMを見ていて、手が止まりました。画面の最後、左で女優さんが動いていて、右に商品が置かれている。何度見ても、動く女優さんにしか目がいかない。商品のほうは、そこに何が書いてあったのかすら思い出せませんでした。
※この「人間の目は動いているものに注目する」という特性については、以前の記事でも詳しく触れました。

これには名前がついていると、相良奈美香さんに教わりました。周囲に比べて際立っているものに注意が自動的に集中してしまう、サリエンス効果です。

派手に明滅したり動いたりするボタンは、このサリエンス効果を強力に起動させ、ユーザーの注意を完全に独占します。しかしそれと引き換えに、ボタンのすぐそばに配置された「押す理由（マイクロコピー）」を視野の外へと追いやってしまうのです。

もちろん、これは「ボタンを一切目立たせるな」という意味ではありません。最低限の発見しやすさを確保した上で、コピーとの適切なバランスを保つことが不可欠です。しかし、過剰に派手にした結果として、肝心の「押す理由」を読ませる機会を自ら潰してしまっているケースが少なくないのです。

また、定食屋の例を思い出してみてください。メニューの全品に「店主おすすめ！」と赤文字で大きく書かれていたら、結局どれを注文すべきか分からなくなりますよね。すべてを目立たせることは、結果として何も目立たなくしているのと同じなのです。これを、行動経済学ではコントラスト効果と呼びます。

実際のWeb制作でも、目立たせたいあまりに、ファーストビューのCTAボタンの隣に「お得なキャンペーンバナー」を並べ、さらに「チャットボット」のポップアップを重ねて動かすような設計をよく見かけます。要素同士が画面上で「主役」を奪い合い、目立ちは相対的であるという原則（コントラスト効果）が崩れて、結果的にユーザーを混乱させてしまうのです。

すでに自発的なニーズを持って訪れている顕在的な層にとっては、目立つボタンをストレートに配置するセオリーがそのまま機能します。つまり、「早く買いたい」「今すぐ申し込みたい」とすでに考えているユーザーにとって、目立つ位置に分かりやすいボタンがあることは、情報の処理をスムーズにし、認知的流暢性（情報の処理がなめらかに進む度合い）を高める親切な設計（最短の出口）になります。

しかし、まだ買うべきか迷っている層や、広告からなんとなく流れてきた「初見層」にとっては事情が異なります。彼らがボタンの前で指を止めてしまうのは、ボタンが「見つからない」からではありません。

目立たせるべきは、ボタンではなく「押す理由」

白状すると、私自身、ボタンの色をあれこれ変え、光らせたり動かしたりしたことがあります。結果は、ほとんど動きませんでした。

ボタンに求められる仕事は、見つかることです。それ以上に目立つ必要はありません。

迷っているユーザーがアクションを躊躇する背景には、行動障壁（行動を起こす際に感じる心理的なハードルや手間）が存在します。そしてそのハードルの正体は、多くの場合、不確実性（先行きが不透明なことへの曖昧さの回避）にあります。

「ボタンを押した後に、しつこい営業電話がかかってくるのではないか」「本当に無料で使えるのか」「簡単には解約できないのではないか」。こうした不確実性（曖昧さ）を抱えたままだと、やはり指は止まります。ボタンの彩度をいくら上げても、光らせても、この不確実性は1ミリも減らないのです。むしろ、ボタンが目立ちすぎて周囲の不安を払拭するマイクロコピーが読まれなくなることで、離脱を招いている可能性すらあります。

では、ボタンの代わりに何を置くべきでしょうか。手がかりになるのが、パワー・オブ・ビコーズです。人は、何かアクションを求められる際、納得できる「理由」を添えられるだけで、それを受け入れられる可能性が上がります。「無料相談はこちら」という言葉だけのボタンと、その手前に「まず現状の課題を整理するために伺います。その場でのご契約はお願いしません」という一文が添えられたボタンでは、同じ色であっても押しやすさが全く変わってくるはずです。本当に必要なのは彩度ではなく、ユーザーが押すための「理由」なんですね。

相良さんとの議論では、こんな整理も教わりました。ボタンの周辺には、押す後押しになる情報——導入実績や利用者の声、無料である旨など——を再掲する。一方、キャンセル規定や必須項目の注意書きといった制約事項は、隠すのではなく、検討の段階で先に読まれる場所にきちんと置いておく。決断の瞬間に初めて制約を突きつけられると、そこで気持ちに引っかかりが生まれて指が止まる。伝えるべきことは伝えた上で、伝える順番を設計する、という話です。

したがって、CTA周りの設計手順は、以下のようにあるべきだと考えています。

まず、ターゲット読者がボタンの前で「何に迷って止まっているのか（不確実性）」を洗い出す。
次に、その迷いを解くための「押す理由」や「不安を払拭する一文（マイクロコピー）」を用意する。
そして、その一文が十分に読まれる、適切な余白と明るさの範囲にボタンを収める。

目立たせるための予算は、ボタンそのものの彩度ではなく、こうした「押す理由」と「不安の払拭」に回した方が、実務上の成果（CVR）の面でも割がいい、と考えています。色は最後の微調整であって、最初の設計ではありません。

「派手なボタン」が逆効果になる理由

（補足と、現場からの問いかけ）

もちろん、背景に溶けて誰からも見つけられないボタンは論外です。まず見つかる状態にする、そこは前提として動かしません。ブランドの規定やサイト全体のトーン＆マナーによって、使える色が限られている、という事情もあるでしょう。そういう制約の中では、色に頼るのではなく、余白や配置の工夫によって「見つけやすさ」をつくる話になります。

危ういのは、目立たせること自体が目的になって、周囲の重要な情報を犠牲にしていることに気づかないまま運用を続けてしまうことです。

繰り返しますが、これは私が現場で支援を続けるなかで考えている考察であって、実証された絶対的な分類ではありません。サリエンス効果もSystem 1 / System 2も確立した概念ですが、それを実際のWebサイト設計やCTAデザインにどう適用するかは、私がまだ試している最中の話です。もし、実務で違う手応えを得ている方や、近い研究をご存じの方がいれば、教えていただけるとうれしいです。自分でも確かめながら、考えを更新していきたいと思っています。

■ 用語解説（グロッサリー）

本文で使った行動経済学の用語を、かんたんに整理しておきます。

用語	かんたんに言うと	この記事での役割
サリエンス効果	周囲と比べて際立っているものに、注意が勝手に集中する。目立った点が判断の中で重く扱われがちになる。	派手に動くボタンに視線が釘付けになり、周囲のマイクロコピーが読まれなくなる仕組みの解説。
コントラスト効果	同じものでも、何と並べるかで印象が変わる。目立ちは常に相対的であるという原則。	すべてを目立たせようとすると何一つ目立たなくなる理由の解説。全品おすすめの定食屋や過剰な要素並置の例え。
認知的流暢性	情報がどれだけラクに、なめらかに処理できるかという度合い。処理がなめらかだと信頼感も上がりやすい。	すでに買う意思が固まっている顕在層にとって、ボタンがすぐ見つかることが正解になる理由。
行動障壁	行動を起こす際に感じる手間やハードル。手間の多さ、知識不足、心理的な抵抗感も含む。	迷っているユーザーがアクションを躊躇している、色を変えても下がらない本当の原因。
不確実性	人は先天的に不確実なことを嫌う。曖昧さがネガティブな感情（不安や警戒）を生む。	「ボタンを押した先で何が起きるか分からない」という行動障壁の具体的な心理要因。
パワー・オブ・ビコーズ	人に何かをお願いするとき、納得できる理由を添えるだけで、その要求を受け入れてもらえる可能性が上がる。	CTAボタンの周りに置くべきものは彩度や点滅ではなく「押すための正当な理由」であるという結論。
System 1 / System 2	System 1は直感的で高速な意思決定、System 2は論理的で注意を要する遅い意思決定。	意図や意志とは無関係に、動くものに反射的に目が奪われてしまう人間の認知前提の説明。

※System 1 / System 2はダニエル・カーネマンの概念です。

■ 参考文献

ダニエル・カーネマン『ファスト&スローあなたの意思はどのように決まるか？』（村井章子訳、早川書房、2012年）。原著：Kahneman, D. (2011). Thinking, Fast and Slow. Farrar, Straus and Giroux.

この記事を書いた人
最新の記事

佐藤聡（Akira Sato）

スマートスタイル・コンプレックス株式会社代表取締役社長兼 CEO。2011年創業以来、約200社のWebコンサルティングに携わる。化粧品ECでMA/CRMを運用し売上10億円規模への成長を経験した後、BtoBマーケティングへ軸足を移す。現在は行動経済学者・相良奈美香氏を顧問に迎え、行動経済学をWebの導線設計に実装する「行動設計」を主軸に、Web広告・SEO/LLMO・データ分析を横断した戦略立案を担う。岡山ビジネスカレッジ非常勤講師。3児の父、麻雀プロ（RMU所属）。X：@akirasato_ssc