「クリックが増えないのは、ボタンの色か文言が弱いからだろう」。赤は購買意欲を高める、緑は安心感を与えるといった色の心理効果の解説が広く出回っているため、反応が鈍いときはまずボタンの見た目から手を付けるのが自然に思えます。色を変え、角を丸くし、言葉を少し強めても数字が動かないと、次にどこを直せばよいのか迷います。
しかし、記事本文とその先の申し込み先をあわせて組み立ててきた弊社の経験から言えるのは、反応が鈍い原因はボタンの外にあることが多い、ということです。用語の意味を知りたくて読みに来た人に相談の申し込みボタンを出しても、押す理由がありません。ボタンの装飾で埋められる差より、読者がいる段階に合う提供物を選び直したときの差のほうが大きくなります。
本記事では、CTAボタンが担っている範囲と、押される文言やデザインの決め方から、記事の中での置き場所、ABテストを始める前に確認しておく条件まで、記事制作の現場の視点で順を追ってお伝えします。
- CTAとCTAボタンの違いと、ボタンが担っている範囲
- 色や文言を変えても反応が変わらないときに、どこを疑うか
- 押される文言のつくり方と、避けたい言い回し
- 記事の中でCTAボタンを置く3つの位置と、それぞれの役割
- ABテストを始める前に確認しておく条件
CTAボタンとは、読者に次の一手をひとつだけ示す部品
CTAはCall To Actionの略で、日本語では行動喚起と訳されます。Webサイトを訪れた人に、資料請求や会員登録、購入といった次の行動をとってもらうための働きかけ全般を指し、そのうちクリックできる形で画面に置かれたものがCTAボタンです。
押さえておきたいのは、ボタンの役割が「行動を促すこと」ではなく「行動先をひとつに絞って提示すること」だという点です。選択肢が並んでいれば、読者はどれを選ぶかを考える手間を負います。ボタンの仕事は、その手間をなくすことにあります。
CTAとCTAボタンを区別しておく理由
CTAという言葉は、テキストリンク、バナー、フォームの送信ボタン、記事末尾の誘導ブロックなど、行動を促す要素の総称としても使われます。会話の中で両者が混ざると、改善の話がかみ合いません。
区別しておく実務的な理由は、作業の範囲が変わるためです。「CTAを改善したい」と言われたとき、ボタンの色を差し替える話なのか、誘導先のオファーごと組み替える話なのかで、工数も期待できる変化の幅も違ってきます。前者は数時間、後者は数週間かかる仕事です。
社内で改善の相談をするときは、「ボタンの見た目」「文言」「誘導先のオファー」「ボタンまでの導線」の4つのうちどれを触るのかを最初に決めておくと、議論が早く収束します。反応が悪いという事実だけを共有すると、それぞれが別の対象を思い浮かべたまま話が進みます。
ボタンは2種類のテキストで構成されている
CTAボタンに関わるテキストは、大きく2つに分かれます。ひとつはボタンの内側に入る文言で、ラベリングと呼ばれるもの。もうひとつが、ボタンの上下に添える短い補足文にあたるマイクロコピーです。
ラベリングは行動そのものを示し、マイクロコピーは行動に伴う不安を先回りして解消します。「無料相談を申し込む」がラベリング、その下の「30秒で入力完了。しつこい営業はいたしません」がマイクロコピーです。前者を何度も書き換えるより、後者を足したほうが反応が変わる場面は少なくありません。
関連記事：コンテンツマーケティングの基礎知識を総まとめ｜やり方から成果につなげる方法まで徹底解説
色や文言を変えても数字が動かないのは、原因がボタンの外にあるから
ボタンの見た目や文言をひととおり試したのに反応が変わらないとき、多くの場合、問題はボタンより手前で起きています。
読者の検索意図と、ボタンの先にあるオファーの距離を測る
検索してページにたどり着いた人には、その時点での目的があります。用語の意味を知りたいだけの人、複数の方法を比べている人、依頼先を決めかけている人。同じキーワードで訪れていても、置かれている段階は違います。
「CTAボタンとは」と検索した人は、たいてい最初の段階にいます。その人に対して「お問い合わせはこちら」というボタンを出しても、押す理由がありません。押さないのは文言が弱いからでも色が地味だからでもなく、いま求めている情報と、ボタンの先にある提供物が離れているからです。
逆に、段階に合ったものを差し出せば、飾り気のないテキストリンクでも押されます。ボタンの装飾で埋められる差と、オファーの選択で生まれる差では、後者のほうがはるかに大きくなります。
| 記事に置くオファーの例 | 押されにくいオファー | |
|---|---|---|
| 用語や仕組みを知りたい | 関連記事、チェックリスト、用語集 | 見積もり依頼、商談予約 |
| 方法や手段を比べている | 資料ダウンロード、比較表、事例紹介 | 用語解説の記事 |
| 依頼先を決めかけている | 無料相談、料金の確認、問い合わせ | 入門的な読み物 |
右列は「置いてはいけない」ではなく、その位置に置いても押されにくい、という意味です。段階を飛ばした誘導は、押されないだけでなく記事の印象も損ないます。
押す理由をつくるのは、直前の文章
ボタンは、そこまでに読んだ内容の延長として押されます。押す理由を用意するのは、ボタンではなく直前の文章です。
読者が抱えている状態を言語化した直後が、最も押されやすい位置になります。「自社で書こうとしたが、記事の質が安定しない」「担当者が異動して、更新が止まっている」といった状況が本文の中で言葉になった瞬間、読者は自分の話として受け取ります。その直後に、状態を解く手段としてボタンを置く。順番が逆になると、宣伝に見えます。
この話は、相談の場でもほぼ同じ形で出てきます。
経営者記事からの問い合わせがほとんどありません。ボタンは各記事の末尾に入れてあるのですが、文言や色を変えても数字が変わらず、次に何を試せばよいか分からなくなってきました。
Writers-hub編集部
記事のキーワードを段階別に並べ替えてみてください。用語解説のキーワードで書いた記事に問い合わせボタンだけが入っている状態なら、変えるべきはボタンではなくオファーです。その層には資料やチェックリストを渡し、問い合わせは比較検討のキーワードで書いた記事に集中させる。同じ本数のままでも、受け皿の配置を変えるだけで結果が変わることがあります。
記事ごとにオファーを変える運用は、たしかに手間が増えます。ただ、色や文言のパターンを何十通りも試すより、こちらのほうが先に効きます。
記事は増えているのに問い合わせにつながらない、という状態が続いているとき
どの記事にどのオファーを置くかは、記事単体ではなくメディア全体の設計の話になります。キーワードの段階を整理し、受け皿となる資料や導線まで含めて組み立てるところから、Writers-hubがご一緒します。
関連記事：CTAとは？意味と種類、成果につながる設計と改善の手順
押される文言は、押した先の状態を言い切っている
オファーの選択が済んだら、次はラベリングです。文言のつくり方には、いくつか判断の軸があります。
押した先で何が起きるかを、ボタンの中で示す
「送信」「こちら」「詳しくはこちら」といった文言は、押した先に何があるかを伝えていません。読者は、押した結果が分からないものを押すのをためらいます。押した先に何が起きるかを、ボタンの中で言い切るのが基本の形です。
「資料をダウンロードする」であれば、押せば資料が手に入ると分かります。「相談内容を入力する」なら、次の画面で入力が始まると分かる。動詞まで含めて書くと、行動の輪郭がはっきりします。
主語を読者の側に置く
「お問い合わせ」は、企業側から見た言い方です。読者の側から見れば、それは「相談する」「聞いてみる」という行為にあたります。主語を読者に寄せると、ボタンが自分に向けられたものとして読まれやすくなります。
ただし、極端に砕けた文言はサイト全体のトーンから浮きます。BtoBの製造業サイトに「まずは話してみる」が合うかどうかは、ほかのページの言葉づかいを見て決めることになるでしょう。
心理的な負担を下げる語を添える
行動の重さは、言葉で調整できます。「無料」「1分で」「まずは」といった語は、押した後に発生する負担の見通しを与えるもの。マイクロコピーで「入力は3項目のみ」「その場で確認できます」と補うと、見積もりはさらに具体的になります。
大事なのは、実態と合っていることです。「30秒で完了」と書きながら入力項目が15個ある状態では、フォームの途中で離脱が増えます。クリック率だけが上がって件数が変わらない、という結果になりやすい失敗です。
- 「送信」「こちら」など、押した先が分からない文言
- 「今すぐお申し込みください」と、まだ検討段階の読者に決断を迫る文言
- ボタンの中に説明を詰め込み、2行以上になっている文言
- サイト内で同じ行動なのに、ページごとに呼び方が違う状態
- 実際の手順と食い違うマイクロコピー
最後から2つ目の項目は見落とされがちです。同じ資料請求なのに、あるページでは「資料請求」、別のページでは「ダウンロード」と書かれていると、読者は同じものかを判断できません。サイト全体で呼び方を揃えるだけでも迷いは減ります。
関連記事：LPOとは？SEO・EFOとの違いと改善の手順、成果につながる施策
デザインで効くのは「押せると分かる」ことと「埋もれない」こと
デザインの話では、色の心理効果が話題になりがちです。赤は購買意欲を高める、緑は安心感を与える、といった説明。ただ、実務で効いてくるのはもっと手前の条件です。
色は、目立つ色ではなく、他で使っていない色
周囲の要素と十分に差がついていれば、色そのものの選択が結果を左右する場面は多くありません。むしろ問題は、サイト内の他の要素と同じ色をボタンに使うケースです。見出しの装飾やリンクの色と同じであれば、ボタンだけが浮き上がることはありません。
目立つ色ではなく、サイト内の他で使っていない色を選ぶ。これが実務での判断基準になります。ブランドカラーが背景に大きく使われているサイトほど、ボタンにブランドカラーを使うと埋もれます。
読みやすさの基準は、主観に頼らずに決められます。WCAG 2.1の達成基準1.4.3（レベルAA）が求めるのは、テキストの視覚的提示における4.5対1以上のコントラスト比。ボタンの枠のようなテキスト以外の部分は、達成基準1.4.11（レベルAA）で、隣接する色との間に少なくとも3対1が必要とされています。どちらもブラウザの検証ツールで測れる値であり、社内で意見が割れたときの判断材料になります。
※ 出典: Web Content Accessibility Guidelines (WCAG) 2.1 日本語訳（WAIC）
サイズは、指で押せるかどうかで決める
スマートフォンからの閲覧が中心であれば、ボタンの大きさは指の接触面積から逆算します。目安になるのが、同じくWCAG 2.1の達成基準2.5.5（レベルAAA）です。ポインタ入力のターゲットを44×44CSSピクセル以上とする内容で、テキストブロック内のリンクなどの例外も併記されています。
大きさと同じくらい影響するのが、周囲の余白です。ボタンのすぐ横に別のリンクが並んでいると、押し間違いが起きます。押し間違えた読者は戻ってこないため、数字の上では単なる離脱として記録されます。
ボタンの周囲に余白を確保する目的は、見た目を整えることではなく、誤タップを減らすことにあります。実機で確認するときは、親指の腹で操作してみてください。人差し指の先で試すと、押しにくさに気づけないまま公開してしまいます。
形状と動きは、押せることを伝えるための手段
角丸、影、枠線といった要素は、それが押せる部品であることを伝えるために使います。フラットなデザインが広まってから、ボタンとただの色付きブロックの区別がつきにくいページが増えました。マウスを乗せたときに色が変わる、わずかに沈むといった反応があると、押せる部品だと認識されます。
一方、常に点滅する、跳ね続けるといった強い動きは逆効果になりやすいものです。広告と誤認されて視線を避けられる現象は、バナーブラインドネスとして古くから知られています。動きは操作への反応として使うほうが安全でしょう。
記事コンテンツの中では、置く場所によって役割が変わる
ここからは、オウンドメディアやブログ記事にCTAボタンを置く場合の話です。ランディングページと違い、記事は最後まで読まれるとは限りません。読み進めた度合いによって、読者の状態が変わっていきます。
3つの位置と、それぞれが担う役割
記事の中でボタンを置ける位置は、大きく3つです。同じ記事に置くボタンでも、位置によって出すオファーを変えると、それぞれが別の役割を果たします。
まだ本文を読んでいない段階です。すでに答えを知っていて実行手段だけを探している読者を拾う位置で、無理に置く必要はありません。置くならテキストリンクや控えめな案内にとどめます。
最も反応が出やすい位置です。本文の中で読者の状況を具体的に書き、その解決手段としてボタンを置きます。記事の主題とオファーがずれていると、ここが最も強い違和感になります。
最後まで読んだ読者は、関心の度合いが高い層です。相談や問い合わせなど、一歩踏み込んだオファーを置いてよい位置になります。記事の結論と矛盾しない文言にすることが条件です。
3つすべてに同じボタンを並べる運用は勧められません。同じものが繰り返し出てくると、読者は広告として処理し、視線を向けなくなります。位置ごとに役割を分けるほうが、合計のクリック数は伸びます。
追従型のボタンを使うかどうか
画面の下部や側面に固定表示し、スクロールしても付いてくるタイプのボタンがあります。常に視界に入るため接触機会は増えますが、その分だけ本文を読む体験を圧迫します。
判断の目安は記事の目的です。比較検討の段階にある読者が読む記事なら、追従型を置く価値があります。用語解説のように情報収集の段階で読まれる記事では、本文の邪魔になるだけで終わりがちです。導入する場合も、閉じる操作は必ず用意しておきましょう。
記事の内容に合わせてオファーを出し分ける運用を、どう回していくか
記事ごとに読者の段階を見極めてオファーを変える作業は、本数が増えるほど属人化します。キーワードの選定から本文の構成、記事内の導線設計までを含めた記事制作を、Writers-hubがお引き受けします。
改善が回るかどうかは、テストを始める前の条件で決まる
CTAボタンの改善方法として、ABテストは定番の手段です。ただ、テストを始めれば必ず答えが出るわけではありません。成立する条件が揃っているかを、先に確認しておく必要があります。
十分な母数がなければ、テストは判断材料にならない
2つのパターンで差が出たとしても、それが偶然のばらつきなのか本当の差なのかは母数によって変わります。月に数件しかコンバージョンがないページで色を比べても、翌月には順序が入れ替わる程度の差しか観測できません。
母数が足りない状態でのABテストは、判断を誤らせるという意味で、やらないより悪い結果を招きます。少ないデータで「赤のほうが強い」と結論づけ、その前提でサイト全体を作り替えてしまうと、後から検証もできません。母数が確保できないページでは、オファーの見直しや導線の整理から着手するほうが確実です。
アクセスが足りない段階でやるべきことは、ヒートマップでの観察や、フォームのどの項目で離脱しているかの確認です。数値の比較ではなく、詰まっている場所を目で見つける作業になります。
クリック率と完了率は分けて見る
ボタンのクリック率が上がっても、最終的な件数が変わらないことがあります。原因はたいてい、ボタンとその先の画面のあいだにあるずれです。
クリック率とCV率は分けて見ると、どこで落ちているかが特定できます。クリック率が上がったのに完了率が下がったなら、ボタンが実態以上の期待を持たせています。クリック率が変わらないなら、問題はボタンの手前です。両方が動かないなら、そもそも訪問者の層が合っていない可能性を疑うことになります。
- ボタンのクリック数と、遷移先ページの到達数が一致しているか
- 遷移先のフォームで、どの項目を境に離脱が増えているか
- スマートフォンとパソコンで、クリック率に大きな差が出ていないか
- ボタンの文言と、遷移先ページの見出しが同じことを指しているか
- 計測タグが全ページで正しく動いているか
最後の項目は基本的な確認ですが、リニューアルや記事テンプレートの変更で計測が外れていた、という事例は珍しくありません。原因が計測側にあった場合、ボタンをいくら触っても状況は変わらないままです。
Web担当者ABテストができるほどのアクセスがまだありません。この段階で、CTAボタンについてやっておけることはありますか。
Writers-hub編集部
サイト内でボタンの文言と見た目を統一するところから始めるのがよいと思います。同じ行動なのにページごとに呼び方が違う、ボタンなのか装飾なのか判別しにくい、といった状態は、テストをしなくても直せます。そのうえで、記事ごとにオファーが合っているかを見直す。アクセスが増えてからテストを始めても、遅くはありません。
CTAボタンについてよくある質問
制作の現場で相談を受けることが多い論点を、質問の形でまとめます。判断に迷ったときの確認先として使ってください。
色そのものに正解はなく、周囲の要素と十分な差がついているかで判断します。サイトの背景色やリンク色と近い色を避け、コントラスト比が確保できているかを測って決めるほうが確実です。ブランドカラーを大きく使っているサイトでは、あえてブランドカラー以外を選ぶ判断もあります。
数よりも、役割が分かれているかどうかが重要です。同じオファーのボタンを何度も繰り返すと広告として処理されやすくなります。記事であれば、中盤と末尾で異なる段階のオファーを置く形が扱いやすいでしょう。
本文と無関係な内容であれば邪魔になります。読者の課題が本文で言語化された直後に、その解決手段として置けば、本文の続きとして読まれます。分かれ目は位置ではなく、直前の文章とのつながりです。
行動の重さで分けます。資料請求や問い合わせのように意思決定を伴うものはボタン、関連記事への誘導のように負担の軽いものはテキストリンクが向いています。すべてをボタンにすると、優先順位が伝わりません。
まとめ
CTAボタンの改善で最初に手が伸びるのは色と文言ですが、そこで変わる幅はそれほど大きくありません。反応が鈍い状態が続いているなら、記事を読みに来た人がどの段階にいて、ボタンの先の提供物がその段階に合っているかを先に確認してください。オファーを合わせたうえで文言を整え、押せると分かるデザインにし、母数が揃ってからテストに進む。この順番であれば、どこで効果が出たのかも判断できます。
合同会社Writers-hubでは、SEO記事の制作から記事内の導線設計、オファーの組み立てまでを含めたコンテンツ制作をお引き受けしています。記事は積み上がっているのに成果につながらない、という状態でお困りでしたら、現状を確認するところからご相談ください。
記事の本数は足りているのに、そこから先が動いていないと感じているなら
どこに原因があるのかは、記事の内容と読者の段階を突き合わせないと判断できません。いまのメディアの状況をうかがったうえで、着手する順番からご提案します。
