CTAボタンのデザインと文言｜押される3つの要素と改善例
目次
CTA（Call To Action）ボタンは、読み手に次の行動を促すためのボタンです。押されるかどうかを左右するのは色や形より、「押すと何が起きるのか」「押しても大丈夫か」が伝わっているかどうかです。
デザインの基本、文言の作り方、目的別の添削例、マイクロコピー、配置、公開前のチェックリストを紹介します。目指すのは「押せる形に見える」「押した先がわかる」「押す不安を消す」の3つがそろった状態で、色はそれを支える要素の1つです。
01CTAボタンを構成する3つの要素
CTAボタンは、見た目だけでなく、文言とその周りの情報を含めた1つのまとまりとして考えます。
| 要素 | 役割 | 例 |
|---|---|---|
| 見た目 | 押せるものだとわからせ、目に留める | 形、大きさ、色、影、余白 |
| 文言 | 押すと何が起きるかを伝える | 「無料で資料を受け取る」 |
| マイクロコピー | 押す前の不安を消す | 「入力は1分」「営業電話はしません」 |
ボタンの色だけを変えても成果が動きにくいのは、見た目しか触っていないからです。押されない原因が文言や不安にある場合は、色をどれだけ変えても解決しません。
02CTAボタンのデザインの基本：押せると一瞬でわかる見た目
形は一般的なボタンの形にする
角の丸い長方形、背景色の塗り、ほんの少しの影など、一般的なボタンの形にしておくと、読み手は迷わず「押せるもの」だと認識します。凝ったデザインで、ボタンなのか見出しなのか区別がつかなくなると、押される機会を失います。
大きさは親指を基準に
スマホでは、ボタンを親指で押します。小さすぎるボタンや、ほかのリンクと近すぎるボタンは押し間違いを招きます。
アクセシビリティの国際的なガイドラインであるWCAG 2.2では、押す対象の大きさについて、最低限の基準として24×24 CSSピクセル以上（または周りに十分な余白をとること）が示されています。これはあくまで最低限の基準なので、LPのメインのCTAボタンは、それより十分に大きく、横幅も広めにとっておくのが安心です。
色は「ボタンだけの色」にする
ボタンの色でもっとも大切なのは、何色かではなく、ページの中でボタンにしか使われていない色かどうかです。見出しや装飾にも同じ色を使っていると、ボタンが目立たなくなります。ページ全体の配色を決める段階で、ボタンに使う色を1つ決めておきましょう。
コントラストを確保する
ボタンの文字が背景に沈んでいると、読みにくいだけでなく、押す気持ちもそがれます。WCAGでは、通常の文字と背景のコントラスト比を4.5:1以上、ボタンの輪郭などの文字以外の要素と周りの色のコントラスト比を3:1以上とする基準が示されています。デザインの確認時に、コントラストを測るツールで確かめておくと安心です。
色だけで伝えない
色の見え方は人によって異なります。WCAGでは、情報を色だけで伝えないことが求められています。ボタンであることは、色だけでなく形や文言でも伝わるようにしておきましょう。
「押したあと」の見た目も用意する
ボタンを押したときに見た目が変わらないと、押せたのかどうかがわからず、何度も押されたり、離脱されたりすることがあります。
| 状態 | 見た目の例 |
|---|---|
| 通常 | 基本の色と形 |
| 押している間 | 少し暗くする、へこんだように見せる |
| 送信中 | 「送信しています」と表示し、もう一度押せないようにする |
| 押せない | 薄い色にして、押せない理由を近くに書く |
03CTAボタンの文言の作り方：押すと何が起きるかを書く
基本の型は「得られるもの＋動詞」
CTAボタンの文言は、読み手が押したあとに得られるものと、その行動を表す動詞で組み立てます。
- 「送信」→「無料で見積もりを受け取る」
- 「お問い合わせ」→「30分の無料相談を予約する」
- 「登録」→「LINEでクーポンを受け取る」
「送信」「申し込む」のように行動だけを書くと、読み手は「押すと何が起きるのか」がわからず、ためらいます。
読み手の言葉で書く
文言は、売り手の言葉ではなく、読み手の言葉で書きます。「資料請求」は売り手から見た言い方で、読み手から見れば「料金と事例を見てみる」かもしれません。どちらが読み手の気持ちに近いかを考えてみましょう。
心理的なハードルを下げる
ボタンを押すことが「契約」や「購入」のように重く感じられると、読み手は先延ばしにします。「まずは」「見てみる」「受け取る」など、軽い行動に見える言葉を選ぶと、押す負担が下がります。ただし、実際の内容より軽く見せる表現は、申し込み後の不満につながるため避けます。
04目的別・CTAボタンの文言の添削例
| 目的 | よくある文言 | 添削後の例 | 変えたポイント |
|---|---|---|---|
| 資料ダウンロード | 資料請求 | 料金と事例の資料を無料で見る | 中身と無料であることを明示 |
| 無料相談 | お問い合わせ | 30分の無料相談を予約する | 時間と行動を具体的に |
| 見積もり | 送信する | 無料で見積もりを受け取る | 得られるものを書く |
| 来店予約 | 予約はこちら | 空いている日時を見てみる | 予約より軽い行動に |
| 購入 | 購入する | カートに入れて送料を確認する | 次の画面で何がわかるかを伝える |
| LINE登録 | 友だち追加 | LINEで限定クーポンを受け取る | 登録する理由を書く |
| 説明会 | 申し込む | オンライン説明会の日程を選ぶ | 選ぶという軽い行動に |
| 無料体験 | 登録 | 14日間の無料体験をはじめる | 期間と内容を明示（実際の条件どおりに） |
数字や「無料」などの言葉は、実際の条件と一致している場合だけ使います。条件がある場合は、ボタンの近くに明記しましょう。
05ボタンの周りに置くマイクロコピー
ボタンのすぐ上や下に置く短い文章（マイクロコピー）は、押す直前の不安を消す役割を持ちます。
| 読み手の不安 | マイクロコピーの例 |
|---|---|
| 手間がかかりそう | 入力は1分で終わります |
| しつこく営業されそう | 営業電話はおかけしません |
| お金がかかるのでは | 相談は無料です。費用が発生する場合は事前にお伝えします |
| すぐに決めないといけないのでは | 相談だけでも大丈夫です |
| 押したあとどうなるか不安 | 送信後、担当者から1営業日以内にメールでご連絡します |
マイクロコピーの内容は、実際の対応と一致させることが前提です。たとえば「営業電話はしません」と書くなら、社内でもその運用を守る必要があります。
06CTAボタンの配置の考え方
気持ちが高まる場所に置く
CTAボタンは、ページの最後に1つだけ置くのではなく、読み手の気持ちが高まりやすい場所ごとに置きます。たとえば、ファーストビュー、解決策を説明した直後、お客様の声のあと、料金を説明したあと、ページの最後などです。
スマホでは追従ボタンも検討する
スマホで長いLPを読む場合、画面の下部にボタンを固定表示する「追従ボタン」を使う方法もあります。いつでも押せる安心感がある一方で、本文を隠してしまうことがあるため、大きさや表示のタイミングに気をつけます。
ボタンの数は増やしすぎない
目的の異なるボタン（資料請求、相談、電話、LINEなど）を同じ重さで並べると、読み手は迷います。メインのボタンを1つ決め、ほかは文字のリンクや小さめのボタンにするなど、重さに差をつけましょう。
07CTAボタンの改善の進め方
CTAボタンの改善は、次の順番で進めると、効果の大きいところから手をつけられます。
- 文言：押した先がわかるか、読み手の言葉になっているか
- マイクロコピー：押す前の不安に答えているか
- 配置：気持ちが高まる場所にあるか
- 見た目：押せる形か、目立つか、押しやすい大きさか
色や形の変更は手軽なので最初に試したくなりますが、文言と不安の解消のほうが、読み手の判断に直接関わります。文言とマイクロコピーの修正はデザインの手を借りずに進められることが多く、社内で最初に試す場所としても向いています。
08公開前チェックリスト
- ボタンだと一目でわかる形になっているか
- スマホで親指で押しやすい大きさと余白があるか
- ボタンの色が、ページの中でボタンだけに使われているか
- 文字と背景のコントラストは十分か
- 色だけでなく、形や文言でもボタンだとわかるか
- 文言で「押すと何が起きるか」がわかるか
- 「無料」「〇分」などの言葉が実際の条件と一致しているか
- ボタンの近くに、押す前の不安に答えるマイクロコピーがあるか
- 押したとき・送信中の見た目が用意されているか
- メインのボタンが1つに決まっていて、ほかと重さに差があるか
09LP以外のCTA：バナーやSNS広告では
CTAはLPのボタンだけではありません。バナーやSNS広告、メール、LINEのメッセージにも、次の行動を促す一言があります。
| 場所 | CTAの形 | 気をつけたいこと |
|---|---|---|
| SNS広告 | 媒体が用意するボタン（「詳しくはこちら」など）と、画像・本文の一言 | ボタンの文言は選択肢から選ぶことが多いので、本文や画像で行き先を補う |
| バナー | 画像の中のボタン風の要素 | 小さな画面でも読める大きさにし、LPのボタンと文言をそろえる |
| メール | 本文中のボタンやリンク | 1通につきメインの行動は1つに絞る |
| LINE | リッチメッセージやボタン | 押した先で何が起きるかをメッセージ内で伝える |
広告で「無料で資料を見る」と書いたなら、LPのボタンも同じ言葉にそろえます。言葉がそろっていると、読み手は迷わずに次の行動へ進めます。
押した先がLINEなら、最初に届くメッセージまで同じ約束が続いているかも確かめます。ボタンの文言だけを直しても、広告が別の期待を持たせていたり、押した先で約束した内容が見当たらなかったりすれば、離脱する場所が後ろにずれるだけです。
10そのまま使えるCTAのテスト案
CTAを改善するときに試しやすいテスト案です。1回のテストでは1か所だけを変えて比べます。
- 行動だけの文言と、得られるものを書いた文言を比べる
- 「無料」を入れた文言と、入れない文言を比べる（実際に無料の場合）
- ボタンの下にマイクロコピーを置く場合と、置かない場合を比べる
- ボタンをファーストビューに入れる場合と、入れない場合を比べる
- スマホで追従ボタンを表示する場合と、表示しない場合を比べる
- メインのボタンを1つにした場合と、2つ並べた場合を比べる
テストの結果は、ボタンのクリック率だけでなく、最終的な申し込みの件数でも確かめます。クリックは増えても、押した先のフォームで離脱が増えていれば、全体としては改善していないことがあります。
ボタンのテストは手軽に見えますが、件数がたまるまでの間に広告の素材や配信先が変わると、差がボタンによるものかどうかわからなくなります。広告とLPの担当が分かれている場合は、テスト期間と、その間に変える予定のものを先に共有しておきましょう。
11よくある質問
CTAボタンは何色がいちばん押されますか？
「この色なら必ず押される」という色はありません。大切なのは、ページの配色の中でボタンが目立つことと、ボタンにしか使われていない色であることです。ブランドの色やページ全体の配色とのバランスで決めましょう。
ボタンの文言は長くても大丈夫ですか？
押した先がわかることが優先です。ただし、長すぎるとスマホで2行になり、読みにくくなることがあります。ボタンの中は短くまとめ、補足はマイクロコピーとしてボタンの近くに書くと読みやすくなります。
「今すぐ」「限定」などの言葉は使っていいですか？
実際に期間や数量の限定がある場合は、条件を明記したうえで使えます。実際には限定がないのに限定であるかのように見せる表現は、読み手の信頼を損なうだけでなく、表示に関する法律上の問題になるおそれもあります。
12まとめ
- CTAボタンは「見た目」「文言」「マイクロコピー」の3つで1つのまとまり
- 見た目は「押せる形」「親指で押せる大きさ」「ボタンだけの色」「十分なコントラスト」が基本
- 文言は「得られるもの＋動詞」で、押すと何が起きるかを読み手の言葉で書く
- ボタンの近くのマイクロコピーで、押す前の不安を消す
- 改善は文言→マイクロコピー→配置→見た目の順に進める
CTAボタンは、LPや広告の最後のひと押しを担う小さな部品です。Lic.では、広告の訴求からLPのボタンの一言までを同じ言葉でつなぎ、読み手が迷わず次の行動に進める導線を設計することを大切にしています。
広告のクリックはあるのに、申し込みが増えない？
広告運用を前提に、離脱防止の設計までふくめたLPや、配信用の広告クリエイティブを制作します。公開後も、配信データをもとに改善を続けます。
- 離脱防止まで考えたLP制作
- 配信用の広告クリエイティブ制作
- 配信データをもとにした継続的な改善
まだ具体的に決まっていない段階のご相談も歓迎です。
参考
- W3C「Understanding Success Criterion 2.5.8: Target Size (Minimum)」 https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
- W3C「Understanding Success Criterion 1.4.3: Contrast (Minimum)」 https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- W3C「Understanding Success Criterion 1.4.11: Non-text Contrast」 https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
- W3C「Understanding Success Criterion 1.4.1: Use of Color」 https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html
