CTA とは？クリックされるボタンの文言・色・配置のコツ
「CTA」という言葉は、LP やウェブ広告、SNS の運用で頻繁に登場します。意味は知っていても、文言や配置をどう決めればよいか迷う人は少なくありません。ボタン 1 つの作り方で、クリック数が大きく変わる場合もあります。
この記事では、CTA の意味、ボタンの文言、色と大きさ、配置する場所と数、効果を比べる方法を説明します。効果は商材や読者によって異なるため、具体例は考え方を示すためのものとして読んでください。
CTA とは
CTA は「Call To Action」の略で、日本語では「行動喚起」と訳されます。読者に取ってほしい行動を示す、ボタンやリンク、一文のことです。
CTA の例
| 場面 | CTA の例 |
|---|---|
| 商品の販売 | 「カートに入れる」「購入手続きへ」 |
| サービスの申し込み | 「プランを見る」「申し込む」 |
| 資料請求 | 「資料をダウンロード」 |
| 会員登録 | 「アカウントを作成」 |
| SNS の投稿 | 「詳しくはプロフィールのリンクへ」 |
| アフィリエイト | 「公式サイトで料金を確認」 |
CTA は、ボタンの形をしているとは限りません。テキストリンクや、画像、動画の最後の案内文も CTA です。
CTA が重要な理由
読者が興味を持っても、次に何をすればよいか分からなければ、行動に移りません。CTA は、その最後の一押しと、行動の入口を示す役割を持ちます。LP 全体の流れの中で、各セクションの終わりに CTA を置く考え方は、LP の構成の記事で説明しています。
CTA の効果は、押された割合で測ります。クリック率の考え方と合わせて理解すると、改善の判断がしやすくなります。
ボタンの文言
CTA の文言は、押した先で何が起こるかを伝えます。
良い文言の条件
- 行動が具体的に分かる。「送信」より「資料を受け取る」
- 読者の得られるものが分かる。「登録」より「料金プランを比べる」
- 負担が小さく感じられる。「3 分で設定」など、事実に基づく表現
- 押した先と一致している。ボタンの文言と遷移先が食い違わない
文言の比較
| 弱い文言 | 具体的にした文言 |
|---|---|
| こちら | 公式サイトで料金を確認する |
| 送信 | 見積もりを依頼する |
| 登録 | アカウントを作成する |
| 詳細 | プランの違いを見る |
注意すべき表現
「無料」「今だけ」「限定」といった言葉は、事実と異なる場合は不当表示になる恐れがあります。無料と書くなら、いつ、どの範囲で無料なのかを、近くに明記します。期限を示す場合も、実際の期限と一致させてください。景品表示法の注意点は、景品表示法の記事で整理しています。広告を隠した誘導も問題になるため、広告であることを示す表示は消さないでください。
色と大きさ
色
ボタンの色に、決まった正解はありません。重要なのは、周囲と区別できることです。
- 背景と文字の明るさの差(コントラスト)を十分に取る
- ページの基調色と異なる色を、ボタンに使う
- 同じ役割のボタンは、ページ内で同じ色にそろえる
- 色だけに頼らず、文言や形でもボタンだと分かるようにする
W3C の WCAG では、通常の文字は背景とのコントラスト比 4.5:1 以上が達成基準 AA の目安とされています。ボタンの文字にも当てはまるため、淡い色の背景に白い文字を置くときは注意してください。色の見分けにくい人にも配慮し、色だけで意味を伝えないことも大切です。
大きさと余白
スマホでは、指で押す前提で大きさを決めます。Apple のガイドラインでは 44 × 44 pt 以上、Google の Material Design では 48 × 48 dp 程度が、押せる領域の目安として示されています。WCAG 2.2 では最小 24 × 24 CSS ピクセルが達成基準 AA に含まれます。見た目が小さくても、周囲の余白を含めた押せる領域を確保すれば、誤タップを減らせます。
- ボタン同士の間隔を空ける
- 文字は読める大きさを保つ
- 画面幅いっぱいに広げると、押しやすさが増す
形状
角丸、影、枠線などの装飾は、ボタンらしさを伝える手段です。ただし、サイト全体の他の要素と調和していることが重要です。装飾が強すぎると、広告のように見え、押されにくくなる場合もあります。
配置する場所と数
場所
CTA は、読者が行動したくなる瞬間に置きます。
- ファーストビュー。すぐに行動したい読者のために必ず置く。詳しくはファーストビューの記事を参照
- 特徴や利点を説明した直後。納得した瞬間に押せる
- 料金や比較表の近く。判断が固まった読者への入口になる
- ページの末尾。最後まで読んだ読者に、再度行動を促す
数
長い LP では、3 〜 5 か所に置くことが多いですが、数に決まった正解はありません。短いページに多数置くと、押し付けがましく見えます。逆に、長いページに 1 か所だけでは、読者が押したくなったときに、近くにボタンがありません。
1 ページの目的を 1 つにする
異なる行動を促す CTA を並べると、読者は迷います。たとえば、「購入」と「資料請求」と「LINE 登録」が同じ強さで並ぶと、どれも選ばれにくくなります。主な CTA は 1 種類にそろえ、補助的な行動は控えめに見せてください。
SNS での CTA
SNS の投稿では、ボタンを置けない場合が多いため、文章の最後に一文で行動を示します。
- 「詳しくは下のリンクから」
- 「プロフィールのリンクで一覧を見られます」
SNS ごとにリンクの置ける場所や仕様が異なるため、各サービスの公式ヘルプで確認してください。
効果を比べる方法
CTA の効果は、数字で確認します。
比べる方法
- 現在のクリック率を記録する
- 変更する要素を 1 つに絞る。文言、色、位置のどれか
- 同じ期間、同じ条件で、新旧の CTA を比べる
- 差が出たほうを採用する
A/B テスト
複数の案を同時に配信し、どちらが多く押されるかを比べる方法を、A/B テストといいます。同じ時期に、ランダムに案を見せるため、季節や曜日の影響を避けられます。ただし、アクセスが少ない場合は、差が偶然かどうかを判断しにくくなります。十分な数が集まるまで、結論を急がないでください。
見る数字
- CTA のクリック率
- CTA を押した後の成約率
- 端末別、流入元別の違い
クリックが増えても、成約が減ったなら、文言が実際の内容より期待を高めすぎている可能性があります。クリックの数だけでなく、その後の行動も合わせて確認してください。
例 CTA を見直す手順
資料請求の LP で、CTA の押された割合が低い場合を考えます。数字は説明用の例です。
| 項目 | 変更前 | 変更後 |
|---|---|---|
| 文言 | 送信 | 資料を受け取る |
| 位置 | ページ末尾のみ | ファーストビューと末尾の 2 か所 |
| 表示数 | 2,000 | 2,000 |
| クリック数 | 40 | 70 |
| クリック率 | 2.0% | 3.5% |
この例では、文言と位置の 2 つを同時に変えているため、どちらが効いたかは分かりません。本来は 1 回に 1 つずつ変えます。まず文言だけを変えて 2 週間測り、次に位置を変えて 2 週間測れば、それぞれの効果を切り分けられます。
よくある失敗
| 失敗 | 起こること | 直し方 |
|---|---|---|
| CTA が文章中に埋もれている | 押す場所が分からない | ボタンの形にし、余白を取る |
| 同じ強さの CTA が複数ある | 選べずに離脱される | 主 CTA を 1 種類に絞る |
| 文言が「詳細」「こちら」だけ | 何が起こるか伝わらない | 動詞と目的を入れる |
| スマホで指が届かない位置 | 誤タップが増える | 親指で押せる範囲に置く |
| ボタンの先が文言と違う | 離脱や不信感を招く | 文言と遷移先を一致させる |
固定表示の CTA について
スマホでは、画面の下に常に表示される固定ボタンを使うサイトもあります。常に目に入るので押しやすくなりますが、本文が隠れる場合があるため、画面の下部の高さを抑え、閉じられるようにしておくと安心です。
よくある質問
CTA は何個置くのが最適ですか
最適な数は、ページの長さと商材で変わります。長さの目安として、画面 2〜3 枚分ごとに 1 つ置き、あとはクリック率で調整します。
緊急性を示す言葉は使ってよいですか
実際の期限や在庫に基づく場合だけ使えます。毎日カウントダウンが繰り返されるような表示は、読者の信頼を損ない、不当表示に当たる恐れもあります。
CTA の効果はどのくらいで分かりますか
最低でも 1 週間を単位に、必要な件数が集まるまで待ちます。数日の結果は、曜日や配信先の偏りで揺れます。
まとめ
CTA は、読者に取ってほしい行動を示す、ボタンやリンクのことです。文言は押した先で起こることを具体的に伝え、「無料」などの強い言葉は事実と一致する範囲で使います。色は背景と区別でき、大きさはスマホで押しやすいものにします。配置はファーストビューと、読者が納得した直後を中心に、主な行動は 1 種類にそろえます。効果は、1 回に 1 つだけ変えて、クリック率とその後の成約率で比べてください。
CTA の押された数を、投稿や配信先ごとに比べたい場合は、Boostlink の短縮 URL とクリック分析が使えます。プロプランなら、A/B テストでリンク先の反応を比べることも可能です。
CTA を届ける土台となる SNS アカウントを探している場合は、アカウントの購入や M&A を扱う Boostshop も選択肢です。購入の際は各プラットフォームの利用規約を確認してください。