「CTAボタンは目立つ色にすれば押されるはずだ」。色の変更から手を付ける運用担当の方は多いです。橙色が強い、緑は押されやすいといった説明が、色ごとの正解のように語られてきたためです。変えたあとも数字が動かず、次に直すのは大きさなのか置き場所なのかで社内の意見が割れる、という相談も届きます。
しかし、SEO記事の制作とオウンドメディアの運用支援を通じて、記事本文とその先のボタンまでを合わせて設計してきた弊社の立場から言えるのは、読者は橙色のボタンを押しているのではなく、周囲の文字より明らかに押せそうに見える要素を押している、ということです。同じ色でも、ページの他の場所で使われていれば押せる場所の目印になりません。目立つかどうかではなく、その見え方をボタンだけが持てているかどうかに基準を移すと、色も寸法も決めやすくなります。
本記事では、色の割り当て方と指で押せる寸法の目安から、動きを付けてよい範囲、記事とランディングページで変わる置き場所まで、記事制作会社の視点で順を追ってお伝えします。参考事例の見方と、作り方の5つの手順もあわせて整理しました。
- CTAボタン、CTAエリア、CTAバナーが指している範囲の違い
- 色を決めるときに「目立つ色」より優先して確認すること
- 指で押せる寸法の目安と、隣接要素との間隔の考え方
- 動きやアニメーションを付けてよい範囲と、避けたい表現
- 記事、ランディングページ、サービスページで変わる置き場所
CTAボタンとは、押した先の行動をひとつだけ示す部品
CTAボタンとは、読者に取ってほしい行動をひとつだけ示すために置くボタンを指します。CTAはCall To Action（コール トゥ アクション）の略で、日本語では行動喚起と訳されます。資料請求、無料相談、会員登録、購入といった行動の入口として、Webサイトやランディングページ、メールの本文に設置される部品です。
デザインの検討に入る前に、ひとつ押さえておきたい前提があります。読者は「橙色のボタン」を押しているわけではありません。「周囲の文字よりも明らかに押せそうに見える何か」を押しています。CTAボタンの良し悪しは、周囲の要素との差で決まるため、他社の見た目だけを切り出して持ち込んでも、同じようには機能しないわけです。
CTAボタン、CTAエリア、CTAバナーの違い
3つの言葉は現場で混ざりやすいので、指している範囲を分けておきます。CTAボタンは、クリックやタップの対象になる矩形そのもの。CTAエリアは、ボタンに加えて見出し、説明文、画像、入力フォームなどをまとめた一区画を指します。CTAバナーは、その一区画を1枚の画像として作ったものです。
「ボタンの色を変えたのに反応が変わらない」という相談の多くは、実際にはエリア全体の設計に原因があります。ボタンという部品だけを見て議論している限り、見出しの文言や説明文の長さ、フォームの項目数といった変数が視野に入りません。
デザインを決める前に固定しておく2つのこと
配色や寸法を検討する前に、先に決めておくと後戻りが減る項目が2つあります。ひとつは、そのページで取ってほしい行動を1種類に絞ること。もうひとつは、ボタンを押した直後に読者が何を見るのかを、実際の画面まで書き出しておくことです。
押した先がフォームなのか、資料のダウンロードなのか、それとも別ページの説明なのか。行き先によって、ボタンに書くべき文言も、添えるべき安心材料も変わってきます。ここが曖昧なまま色や形の議論を始めると、社内レビューで意見が割れたときに判断の基準がありません。
経営者社内では「もっと目立つ色にしよう」という話で毎回止まってしまいます。デザイナーからは全体のトーンが崩れると言われ、結局そのままになっています。どう整理すればよいでしょうか。
Writers-hub編集部
色の好みではなく、ページ内でその色が何か所使われているかを数える話に置き換えてみてください。ボタンと同じ色が見出しやアイコンにも使われているなら、目立たない理由は明るさではなく重複です。ボタン専用の色を1つ決めて、他の場所からその色を外す。デザイナーとも合意しやすい進め方だと思います。
関連記事：コンテンツマーケティングの基礎知識を総まとめ｜やり方から成果につなげる方法まで徹底解説
色は「目立つ色」ではなく、他で使っていない色を割り当てる
CTAボタンは何色がよいか、という質問に決まった答えはありません。橙色が強いという説明も、緑が押されやすいという説明も、特定のサイトで得られた結果にすぎず、背景色やブランドカラーが違えば再現しません。
実務で確実に効くのは、色そのものよりも色の使い分けです。ボタン以外に使っていない色を1つ確保する。見出しにも、テキストリンクにも、装飾の罫線にも使っていない色をボタン専用に割り当てておけば、読者はページ内でその色を見つけた瞬間に「押せる場所だ」と判断できるようになります。
アクセントカラーをボタンに専有させる
よくある構成が、ブランドカラーをサイト全体で多用したうえに、ボタンにも同じ色を使う形です。ヘッダーの帯、見出しの下線、アイコン、図解の強調、そしてボタン。同じ色が5か所に散っていれば、ボタンだけを目で拾うのは難しくなります。
対処は2通りあります。ブランドカラーを装飾から引き上げてボタンに集約するか、ブランドカラーと明度差の大きい色を1つだけ追加してボタン専用にするか。後者を選ぶなら、追加した色をバナーや図解に流用しないよう、社内のデザインルールに書き残しておく必要があるでしょう。
コントラストは感覚ではなく数値で確認する
目立っているかどうかを目視で判断すると、制作者の環境に引きずられます。明るい室内の高輝度ディスプレイで十分に見えていても、屋外のスマートフォンでは沈むことがある。
判断の基準として使えるのが、アクセシビリティの規格が定めているコントラスト比です。WCAG 2.2の達成基準1.4.11では、ボタンのようなUI部品と隣接する色との間に3対1以上を求めています。ボタン内の文字と背景の間については、達成基準1.4.3で4.5対1以上（大きな文字は3対1以上）が基準です。ブラウザの開発者ツールやコントラスト計測ツールで測れる数値のため、レビューの場に持ち出せば議論が短く収まります。
※ 出典: Web Content Accessibility Guidelines (WCAG) 2.2 達成基準1.4.11「非テキストのコントラスト」、達成基準1.4.3「コントラスト（最低限）」
赤と緑には、すでに意味が付いている
色には慣習的な役割があります。赤は警告や削除、緑は完了や許可。入力フォームの周辺で赤いボタンを使うと、エラー表示と見分けにくくなることがあります。反対に、キャンセルや退会のボタンを目立つ色で作ると、意図しない操作を誘発してしまう。
ボタンの色を決めたら、そのページを一度グレースケール表示にして確認してみてください。色を抜いた状態でもボタンの位置が分かるなら、明度差が確保できています。色を抜いた途端に沈んで見えるようであれば、色相の違いだけで目立たせていた状態です。
関連記事：CTAとは？意味と種類、成果につながる設計と改善の手順
サイズと形は、指で押せる寸法から逆算する
ボタンの大きさは、見た目のバランスではなく操作の確実性から決めます。パソコンのマウスポインタは数ピクセルの精度で狙えますが、指の接触面積はそれよりずっと大きい。閲覧の中心がスマートフォンであれば、指を基準に寸法を決めるのが自然な順番になります。
タップ領域は44ピクセル四方を下限に考える
AppleのHuman Interface Guidelinesは、タップ操作の対象を44×44ポイント以上にすることを推奨しています。Googleのマテリアルデザインでは48dpが目安として示されており、指で押す前提なら44ピクセル四方が実用的な下限と考えて差し支えありません。
アクセシビリティの規格では、もう少し低い水準も定められています。WCAG 2.2の達成基準2.5.8（レベルAA）はターゲットを24×24CSSピクセル以上とする内容で、達成基準2.5.5（レベルAAA）が44×44CSSピクセル以上を求める構成です。法令対応として最低限を満たすなら24ピクセル、押しやすさを取るなら44ピクセルという読み方になります。
※ 出典: Web Content Accessibility Guidelines (WCAG) 2.2 達成基準2.5.8「ターゲットのサイズ（最小）」、達成基準2.5.5「ターゲットのサイズ（拡張）」
高さの数値を満たしても、隣接する要素との間隔が足りなければ押し間違いが起こります。押し間違えた読者の多くは戻ってきません。計測の上では単なる離脱として記録されるため、原因に気づけないまま残り続ける問題です。実機で確認するときは、人差し指の先ではなく親指の腹で操作してください。
幅は「画面いっぱい」が正解とは限らない
スマートフォンで横幅いっぱいのボタンを置く設計は広く使われていますが、常に最適というわけではありません。幅が広く高さが低いと、ボタンではなく帯や見出しとして処理されてしまう場合があります。左右に余白を残し、角を丸め、わずかに影を付けて浮かせたほうが、押せる部品として認識されやすい。
パソコンでは事情が変わります。横幅1000ピクセルを超える領域に幅いっぱいのボタンを置くと、視線が右端まで届かず、文言の後半が読まれません。文言の長さに合わせた幅を取り、左右それぞれに文字1〜2文字分の内側余白を足す程度が扱いやすい形です。
角丸、影、アイコンの使いどころ
角丸と影は、押せる部品であることを伝えるための記号として機能します。ただし、サイト内の他のカードや枠にも同じ角丸と影が使われていれば、ボタンだけを区別する手がかりにはなりません。色と同じで、専有できているかどうかが判断の分かれ目になります。
ボタン内に矢印アイコンを添える手法は、次のページへ進むことを示すのに有効です。一方で、ダウンロードなのか外部サイトへの遷移なのかを示すアイコンは、行き先の予告として役立ちます。装飾として付けるのではなく、押した先の状態を1つ増やす目的で選んでください。
関連記事：BtoBサイトのCVRの見方と上げ方｜平均値との比べ方と改善の着手順
動きと状態表現は、押せると分かる範囲にとどめる
動きの付いたボタンは目に留まりやすい反面、付けすぎると広告表示として処理され、視界から外されます。判断の基準は「押せることを伝えているか」に置くとぶれません。
ホバーと押下の反応は必ず用意する
マウス操作の環境では、ポインタを重ねたときに色や影が変わるかどうかで、押せる要素かどうかを確かめる読者がいます。ホバー時の変化がまったくない要素は、画像や見出しとして見過ごされることがある。
押した瞬間の反応も同様です。タップしても何も変化がないと、押せていないと判断して二度三度と押されます。フォーム送信であれば二重送信の原因にもなるため、押下時の見た目の変化と、送信中の状態表示はセットで用意しておきたいところです。
アニメーションを付ける前に確認すること
点滅、拡大縮小の繰り返し、色の往復といった連続的な動きは、慣れとともに無視されるようになります。加えて、動きに敏感な読者にとっては閲覧そのものの負担になる。
現在のブラウザには、利用者が端末側で「視差効果を減らす」設定を有効にしているかどうかを判別する仕組みがあります。CSSのprefers-reduced-motionという記述で、動きを控えめにした表示へ切り替えられるため、アニメーションを実装する際は分岐を用意しておくのが実務上の作法です。
動きを検討するときは、避けたい表現から先に押さえておくと判断が早くなります。次に挙げる5つは、クリック数が一時的に増えても、読者の不信につながりやすい形です。
- 常時点滅させ、視線を強制的に奪おうとする動き
- スクロールに合わせてボタンが伸縮し、押す瞬間に位置がずれる動き
- ホバーしないと文言が読めない配色の切り替え
- 表示から数秒後に画面を覆う形で現れ、閉じる操作が見つけにくいもの
- 端末の設定に関係なく再生され続けるループアニメーション
なかでも判断が分かれやすいのが、画面を覆う形で出るポップアップです。
画面全体を覆うポップアップでCTAを出す手法は、短期的にクリック数が増えることがあります。ただし閉じる操作が分かりにくい実装は、モバイル検索の評価上も好ましくない扱いを受けます。表示するなら画面の一部にとどめ、閉じるボタンを最初から見える位置に置いてください。
置き場所は、ページの型ごとに決まっている
ボタンをどこに置くかは、デザインの問題であると同時に、読者がどこまで納得したかという問題でもあります。読者が納得した直後にしかボタンは押されないという前提を置くと、配置の判断がしやすくなります。
記事、ランディングページ、サービスページでの違い
同じCTAボタンでも、ページの型が変われば効く位置が変わります。読者がそのページに来た時点でどれだけ情報を持っているかが違うためです。
| 効きやすい位置 | 置いても反応が薄い位置 | |
|---|---|---|
| 記事ページ | 課題を言語化した中盤と、まとめの前後 | リード文の直後 |
| ランディングページ | 冒頭の主張の直下と、各根拠の区切り、末尾 | 中盤に1か所だけ |
| サービス紹介ページ | 料金や対応範囲を示した直後 | 会社概要の後ろ |
記事ページの冒頭にボタンを置いても反応が薄いのは、読者がまだ何も納得していない段階だからです。すでに答えを知っていて実行手段だけを探している層は一定数いますが、多数派ではありません。冒頭に置くならテキストリンク程度にとどめ、面積を使ったボタンは中盤以降に回すのが扱いやすい配分です。
追従ボタンと固定ボタンをどう判断するか
画面下部に貼り付いて動く追従ボタンは、スマートフォンで親指の可動域に入るという利点があります。一方で、本文の表示領域を常に削り続けるという性質も持っています。
判断の目安として、1ページで取ってほしい行動が1つに定まっているランディングページとは相性がよく、複数の記事が同じテンプレートを共有するオウンドメディアでは、文言が汎用的になりがちで反応が鈍りやすい傾向があります。記事に追従ボタンを入れるなら、カテゴリ単位で文言を出し分ける仕組みまで含めて検討してください。
数を増やす前に、役割を分ける
ボタンの数を増やせば反応が増えるわけではありません。同じオファーのボタンを何度も繰り返すと、読者はページの装飾として処理するようになります。
1ページに複数のCTAを置くなら、読者の段階に応じて中身を変えます。中盤には資料やチェックリストなど負担の軽いもの、末尾には相談や見積もりなど一歩踏み込んだものを配置する。同じ「お問い合わせ」を3回並べるより、段階の違うオファーを2つ置くほうが取りこぼしが減ります。
この出し分けは、記事が10本を超えたあたりから手が回らなくなります。テンプレートに固定のCTAを埋め込んだまま本数だけが増え、キーワードとオファーがずれた記事が積み上がっていく状態は、多くのメディアで起きています。
記事ごとにCTAの中身を出し分ける運用を、どう回していくか
記事の本数が増えるほど、どの記事にどのオファーを置くかの判断は属人化していきます。キーワードごとの読者の段階を整理し、受け皿になる資料や導線まで含めて設計するところから、Writers-hubがご一緒します。
CTAボタンの作り方を5ステップで
ここまでの内容を、実際に手を動かす順番に並べ直します。色から決め始めると後戻りが起きやすいため、行動の定義から始めるのが確実です。
そのページで取ってほしい行動を1種類に絞り、押した直後に表示される画面を実際に開いて確認します。フォームであれば入力項目の数まで見ておきます。ここが決まらないと文言も安心材料も決められません。
「送信」「こちら」のように押した先が分からない文言を避け、「資料をダウンロードする」のように行動と対象が分かる形にします。ボタンの下には、所要時間や費用の有無といった不安を打ち消す一言を添えます。
ページ内で使われている色を洗い出し、ボタンに割り当てる色が他で使われていないかを確認します。使われている場合は、装飾側からその色を外すか、別の色を追加します。決めた色でコントラスト比を測ります。
スマートフォンの実機で表示し、親指の腹で押します。高さ、左右の余白、隣接する要素との間隔を確認し、押し間違いが起きないかを見ます。パソコンでは幅が広がりすぎていないかを確認します。
ページの型に合わせて位置を決め、クリック数だけでなく遷移先の到達数とフォーム完了数まで測れるようにします。クリックだけが増えて完了が増えない変更を、改善と誤認しないための備えです。
最後の項目は見落とされがちですが、後の判断を大きく左右します。ボタンのクリック率だけを見ていると、文言を強めてクリックを集め、フォームで大量に離脱している状態を「改善できた」と読み違えてしまう。
デザイン参考を集めるときに見ておきたいこと
参考事例を並べても自社に応用しにくいのは、切り出されているのがボタンの見た目だけだからです。参考にするのはボタンの見た目ではなく、その前後という視点に切り替えると、集めた事例の使いどころが変わります。
- そのボタンの直前に、どんな文章や図が置かれていたか
- ボタンの下に、どんな一言が添えられていたか
- ページ内で、その色が他に何か所使われていたか
- 押した先がどの画面で、入力項目がいくつあったか
- 同じサイトの他のページでは、同じ行動を何と呼んでいたか
実際に参考サイトを開き、ボタンの位置までスクロールしながら本文を読んでみると、押したくなる理由が本文側に用意されていることが分かります。ボタンの画像だけを保存して並べる作業では、その部分が抜け落ちてしまう。
Web担当者競合サイトのボタンを一通り集めてみたのですが、どれも似たような形で、どこを真似すればよいのか分かりませんでした。
Writers-hub編集部
形が似ているのは自然なことで、差が出るのは文言と置き場所のほうです。集めた事例を、ボタンの直前2段落と一緒にキャプチャし直してみてください。同じ「無料相談」でも、その手前で何を約束しているかが違うはずです。そこを比べると、自社のページで足りていないのがボタンなのか本文なのか、判断がつきやすくなります。
比較して本文側が足りないと分かった場合、修正の対象はボタンではなく記事の構成そのものになります。
ボタンの手前にある本文まで含めて設計し直したいとき
CTAボタンの反応は、その直前まで本文が何を伝えたかで大きく変わります。キーワードの選定から構成、本文、記事内の導線までを一貫して組み立てる記事制作を、Writers-hubがお引き受けします。
CTAボタンについてよくある質問
実際の制作現場で相談を受けることの多い5つの論点について、判断の基準を示します。
色そのものに正解はありません。判断の基準は、その色がページ内のボタン以外で使われていないことと、周囲との間に3対1以上のコントラスト比が確保されていることの2点です。ブランドカラーを装飾で多用しているサイトでは、あえてブランドカラー以外を選ぶ判断もあります。
数ではなく役割で決めます。同じオファーを繰り返すより、中盤には資料など負担の軽いもの、末尾には相談など踏み込んだものを置き、段階を分けるほうが取りこぼしが減ります。記事ページであれば2か所前後が扱いやすい配分です。
押せる要素だと伝える範囲では有効です。ホバー時の色変化や押下時の反応は用意しておく価値があります。一方、常時点滅や拡大縮小の繰り返しは、時間の経過とともに無視されるうえ、閲覧の負担になる読者がいます。
テストを必要としない項目から着手してください。ボタンの色がページ内で重複していないか、寸法が指で押せる大きさか、サイト内で同じ行動を同じ言葉で呼んでいるか。いずれも数値検証なしで判断でき、直せば元に戻る性質の変更ではありません。
取ってほしい行動が1つに定まっているランディングページでは有効に働きます。複数の記事が同じテンプレートを共有するメディアでは文言が汎用的になりやすく、本文の表示領域を削る割に反応が伸びない場合があります。カテゴリ単位で文言を出し分けられるかどうかが判断の分かれ目です。
まとめ
CTAボタンのデザインは、色、寸法、動き、置き場所という4つの観点に分けて考えると、社内の議論が整理されます。色は目立つかどうかではなく、ページ内で専有できているかどうか。寸法は見た目のバランスではなく、指で押せるかどうか。動きは、押せる要素だと伝える範囲まで。置き場所は、読者が納得した直後です。
そのうえで、ボタンを直しても数値が動かない場合は、原因がボタンの外にあると考えてください。押した先のオファーが読者の段階と合っていないか、ボタンまでの本文が押す理由を用意できていないか、そのどちらかであることがほとんどです。ボタンの色を3回変えるより、直前の2段落を書き直すほうが変化が出る場面は珍しくありません。
合同会社Writers-hubでは、SEO記事の制作とオウンドメディアの運用支援を通じて、記事本文から記事内の導線までを一貫して設計しています。ボタンの手前にある文章から見直したい場合は、現状のページをお持ちいただければ、どこから着手すべきかの整理からご一緒します。
自社のページでは、ボタンと本文のどちらから直すべきか
今のページを共有いただければ、CTAの配置とその手前の本文を確認したうえで、着手する順番をご提案します。相談の段階で費用は発生しません。
