CTAバナーの作り方｜押される設計と配置、ボタンとの使い分け

「押されないのだから、色かサイズか文言のどれかを変えれば数字は動くはず」。CTAバナーを前にして、まずそう考えるのは自然なことです。バナーはWebページの中で最も手軽に直せる要素で、色も文言も位置もその日のうちに差し替えられるため、押されない原因を切り分ける前に作り直しから入りやすいからです。

しかし、SEO記事とオウンドメディアの制作を通じて本文とバナーを一緒に組み立ててきた弊社の立場から言えるのは、反応を分けるのはバナーの作り込みより、直前まで読んだ読者の納得の度合いと、バナーが求める行動の重さが釣り合っているかどうかだということです。課題を認識したばかりの読者に相談や見積のような重いお願いを見せているなら、見た目を変える前に、読まなくても価値が想像できるチェックリストや資料一覧へ置き換えて反応を見る手もあります。

本記事では、CTAバナーとボタンやテキストリンクの使い分けから、押されない三つの理由と置く場所ごとのオファーの決め方、クリック率を数えて改善する手順まで、SEO記事とオウンドメディアを制作してきた現場の視点で順を追ってお伝えします。

CTAバナーとは、次の行動の入口を画像で示した導線

CTAはCall To Actionの略で、読者に次の行動を促す要素の総称を指します。そのうち、画像一枚で作られたものがCTAバナーです。資料請求、無料相談、会員登録、セミナー申し込みといった行動の入口を、文言と図版をひとまとめにして見せる形式だと考えてください。

ボタンとの決定的な違いは、一度に載せられる情報量です。ボタンに置けるのは短い一行だけですが、バナーなら「誰に向けたものか」「何が手に入るか」「いつまでか」を同時に見せられます。その代わり、バナーは情報量を持てる代わりに、画像である制約を全部背負います。文字が読める大きさで表示されるか、環境によって非表示にならないか、書き換えにどれだけ工程がかかるか。そうした問題はボタンやテキストリンクでは起きません。

なお、同じ「バナー」でも、広告として外部の媒体に配信するバナーと、自社サイトの中に置くCTAバナーでは役割が違います。広告バナーの仕事は、まだ自社を知らない人に立ち止まってもらうこと。サイト内のCTAバナーの仕事は、すでに読んでくれている人を次の一歩へ送り出すことです。前者は目立つことが評価軸になりますが、後者で同じ作り方をすると、後述する「広告に見えて飛ばされる」状態を自分で作ってしまいます。

CTAバナーとCTAボタン、テキストリンクの使い分け

三つの形式は優劣ではなく、読者がどの状態にいるかで選び分けるものです。

読者にまだ動機がない場面では、オファーの中身を見せて関心を作る必要があるため、情報量を載せられるバナーが向きます。逆に、記事を最後まで読んで気持ちが固まっている読者に対しては、情報量の多いバナーがかえって判断を鈍らせることがあります。すでに決まっている人に必要なのは、迷わせない一行と押す場所だけ。

関連記事：コンテンツマーケティングの基礎知識を総まとめ｜やり方から成果につなげる方法まで徹底解説

CTAバナーが押されない三つの理由

デザインを作り直す前に、押されない状態がどの種類のものかを切り分けておくと、手戻りが減ります。現場でよく見るのは次の三つです。

一つ目は、広告に見えてしまい視線から外されている状態。読者は長年のWeb利用のなかで、四隅がはっきりした矩形で彩度が高く、本文と無関係な位置に置かれたものを広告として学習しています。意識的に拒否しているのではなく、見る前に飛ばされてしまう。本文と地続きに見える余白と配置にするだけで、見られる回数は変わってきます。

二つ目は、求めている行動が本文より一段重いこと。課題を認識したばかりの読者に「無料相談はこちら」を見せても、その時点で相談すべき内容が本人のなかで言語化されていません。押されない原因の多くは、見た目ではなく求める行動の重さです

Web担当者

色を派手にして目立たせたのに、クリック数がほとんど変わりませんでした。次は何を試せばよいのでしょうか。

Writers-hub
編集部

目立たせて変わらなかったなら、見えていなかったのではなく、見えたうえで押されていない可能性が高いです。その場合は色ではなく、バナーが求めている行動を軽くする方向を先に試してください。相談ではなく事例集の閲覧に変える、といった具合です。

三つ目は、スマホの実機で文字が読めていないこと。制作時の確認がPCの画面だけで終わっていると、横長のバナーがスマホ幅に縮んだときに、バナー内の文字が本文より小さくなっている状態を見落とします。

• 記事の内容と関係のないサービス紹介バナーを、どの記事にも同じ形で置いている
• バナー内の文字が、実機のスマホで本文より小さく表示されている
• 同じデザインのバナーを、一本の記事に三枚以上並べている
• 押せる要素であることを示す矩形や矢印がバナーに入っていない
• リンク先がトップページで、バナーの文言に対応する内容が着地先に見当たらない

関連記事：CTAとは？意味と種類、成果につながる設計と改善の手順

反応されるCTAバナーに入っている五つの要素

上位の解説記事では「色」「コピー」「配置」が並列に並べられがちですが、実際に作る側の手順としては、載せる情報を先に決めてから見た目に進むほうが早く仕上がります。反応されるバナーには、次の五つが入っています。

• 誰に向けたものかが分かる一言が入っている
• 手に入るものの実体が書かれている（資料、事例、診断、見積など）
• 押した後に何が起きるかが想像できる
• 押せる場所が形として示されている
• ためらいを減らす補足が添えられている（無料、記入項目の数、所要時間など）

五つ目を軽く見ないでください。ためらいを減らす一言が入っているかで反応は変わります。読者が手を止める理由は「面倒そう」「営業されそう」という予測であって、色の好みではないからです。フォームの記入項目が三つだと分かっていれば、同じオファーでも心理的な負担が下がります。

文言は、押した後に起きることが浮かぶ動詞で書く

五つの要素のうち、もっとも書き換えの効果が読みやすいのが文言です。おさえておきたい観点は三つあります。

一つ目は、サイト側の処理ではなく読者側に起きることを書くという点。「送信する」はフォームが行う処理の名前であって、読者が得るものではありません。「無料で資料を受け取る」であれば、押した後に何が手元に来るかが読み取れます。同じく「お問い合わせ」も企業側から見た窓口の呼び名なので、「相談内容を送る」のように読者の動作へ言い換えると、行動の輪郭がはっきりします。

二つ目は、「詳しくはこちら」を単独で使わないこと。何について詳しいのかがバナーの画像の中でしか説明されていないため、画像が表示されない環境や読み上げの環境では、行き先の分からないリンクになってしまいます。「料金の内訳を見る」のように、対象を含めた形にしてください。

三つ目は文字数です。バナー内の文言は、スマホでの縮小を前提にすると、目安として十文字前後に収めたほうが読める大きさを保てます。伝えたい条件が多いときは、バナー内には短い動詞だけを置き、条件はバナーの外の一行に逃がすと成立します。

一人称で書く形（資料をもらう）と、読者へ呼びかける形（資料を受け取る）のどちらが効くかは、商材や読者層によって分かれます。正解を探すより、書き換えやすい状態を作って両方試すほうが早く答えが出るでしょう。

色は、目立たせるためでなく読ませるために選ぶ

目立たせることと読みやすいことは別の話です。背景色と文字色のコントラストが足りないバナーは、目立っていても読めません。

※ 出典はWCAG 2.1の達成基準1.4.3（ウェブアクセシビリティ基盤委員会による日本語訳）です。

Web Content Accessibility Guidelines (WCAG) 2.1 (日本語訳)

Web Content Accessibility Guidelines (WCAG) 2.1 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、運動制限、発話困難、光感受性発作及びこれらの組合せ、並びに学習障害及び認知限界への一部の適応を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。しかし、これらの障害のある人に対するあらゆる利用者のニーズに対処するものではない。このガイドラインは、デスクトップ、ラップトップ、タブレット、及びモバイルデバイス上のウェブコンテンツのアクセシビリティを扱う。このガイドラインに従うことは、一般にウェブコンテンツが利用者にとってより使いやすいものにもなる。

🌐 waic.jp

外部リンク

関連記事：CV改善を実現する導線設計とは｜課題別の改善策と実践的な設計手法を解説

バナーの中に「詳しくはこちら」は必要か

この問いに対する答えは、Web上で正反対に分かれています。「入れるべき」という解説もあれば、「デザイナーが勝手に入れるべきではない」という主張も見かけます。どちらも正しく、前提が違うだけです。

分かれ目は、そのバナーがどこに置かれるかです。InstagramやXの広告として配信されるバナーの場合、プラットフォーム側が「詳しくはこちら」「購入する」といったボタンを自動で表示します。そこに画像内のボタンを重ねると、同じ意味の要素が二つ並び、限られた画像面積を無駄に使うことになります。

一方、自社サイトの記事内に置くバナーやメルマガのバナーでは、その画像そのものが唯一の押す入口です。押せる要素だと伝える表現が画像の外側に存在しないため、バナー内に矩形や矢印を置く意味が出てきます。

制作を外部に依頼するときは、掲載面と、その面がCTAボタンを自動表示するかどうかを最初に伝えてください。依頼書にこの一行があるだけで、作り直しの往復が一回減ります。

どこに置くか、その場所にどのオファーを載せるか

記事内のCTAバナーは、位置によって出会う読者の状態がまったく違います。位置ごとに読者の理解度が違うので、載せるオファーも変えます。同じバナーを目次上と記事末に貼っているとしたら、そこが最初の改善点になるでしょう。

目次の上やファーストビューで出会う読者は、まだ本文を読んでいません。この位置に相談や見積といった重いオファーを置いても動きにくく、合うのはチェックリストや資料一覧のように、読まなくても価値が想像できるものです。

セクションの末尾は、そのセクションの話題を読み終えた直後です。話題が限定されている分、オファーもその話題に絞ったものが効きます。記事全体を最後まで読んだ読者に出会う記事末は、関心がもっとも高い位置なので、相談や個別の診断といった重いオファーを置く場所として使えます。

追従バナーは扱いに注意が必要です。スマホでは常時表示が本文の可読領域を削り、読了率そのものを下げることがあります。出すなら高さを抑え、閉じられる形にしておくのが無難でしょう。

追従を使うかどうかは、ページの種類でも判断が変わります。LPは上から下へ読ませる前提で作られていて、離脱は読み終える前に起きます。読者が「もういいかな」と思った瞬間に押せる導線がその場にある意味は大きく、追従が働きやすい面です。一方、記事は読者が自分のペースで拾い読みをするため、常に画面を覆っている要素が邪魔になりやすい。同じ追従バナーでも、LPで成果が出たからといって記事にそのまま持ち込むと、読了率のほうが先に落ちます。

置き場所を決めるという作業は、突き詰めると「この位置の読者は何をどこまで知っているか」を書き出す作業です。バナーのデザインより先に、この対応表を一枚作っておくと、後の判断がぶれません。

メルマガのCTAバナーで見落とされやすいこと

メルマガのCTAバナーには、Webサイトとは別の事故が起きます。もっとも多いのが、画像が表示されない環境の存在です。受信側の設定によってリモート画像が読み込まれないと、画像だけで作ったCTAはただの空白になります。

ダークモードも見落とされがちです。背景を透過した画像に白い文字を置くと、明るい背景を前提としたデザインが、暗い背景の表示環境で文字ごと沈みます。背景色を塗ったバナーのほうが、表示環境の差による事故は起きにくくなります。

表示幅も同様で、メールの表示領域はWebページより狭い場合が多く、横長のバナーに詰め込んだ小さな文字は潰れます。メルマガのバナーは、Webサイト用より情報量を減らし、文字を大きくする前提で設計してください。

画像バナーとテキスト型CTA、運用で選ぶなら

ここまで読んで、「そもそも画像バナーにする必要があるのか」と考えた方もいるでしょう。文字と背景色だけで組んだテキスト型のCTAとの比較を、運用の視点から整理します。

判断の目安は「そのCTAを月に何回書き換えるか」です。ほとんど書き換えないなら画像バナーの利点が生きます。文言や条件を何度も試したいなら、編集担当がその場で直せるテキスト型のほうが試行回数を稼げるでしょう。改善を回す前提であれば、書き換えの速さがそのまま成果の差になります。

実務でもっとも事故が少ないのは、画像バナー一枚と、その下のテキストリンク一本を併記する形です。画像が出ない環境でも導線が残り、文言の微修正はテキスト側で先に試せます。

クリック率を測って改善する手順

見た目の議論に入る前に、数えられる状態を作ってください。数えられていない改善は、良くなったのか悪くなったのかを判断できません。

分母を表示回数にしないと、到達の問題と見た目の問題が混ざります。この切り分けができていないまま色や文言を変え続けている現場は珍しくありません。

クリックをイベントとして記録する具体的な手順は、Googleアナリティクスの公式ヘルプに手順がまとまっています。

[GA4] 推奨イベント - アナリティクス ヘルプ

これらのイベントをウェブサイトまたはモバイルアプリに追加すると、より有益なレポートの生成に加え、さらに多くの機能や動作の測定を行ったり、オーディエンスの候補を作成したりすることができます。これらのイベントは、なんらかのコンテキストと組み合わせた場合にのみ意味をもちます。そのため、これらが自動的に送信されることはありません。 この記事内のリンクを使用して、各イベントの既定のパラメータをご確認くださ

🌐 support.google.com

外部リンク

計測の仕組みを一度整えてしまえば、以後の判断は数字で片づきます。整えないまま感覚で色を変え続けると、半年経っても何が効いたのか分からないまま。最初の一回に手間をかける価値があるのは、この差が積み上がるためです。

CTAバナーに関するよくある質問

まとめ

CTAバナーは、Webページの中で最も手を入れやすく、それゆえに原因の特定を飛ばして触られやすい要素です。押されない状態に出会ったら、まず表示されているかどうかを数字で切り分け、そのうえで求めている行動の重さが本文の流れに合っているかを確認してください。色やサイズの調整は、その後で十分に間に合います。

形式の選び方も、優劣ではなく読者の状態で決まります。動機がまだない読者にはオファーの中身を見せられるバナーを、動機が固まった読者には迷わせないボタンを。掲載面がCTAボタンを自動で表示するかどうかで、バナー内にボタンを入れるかどうかも変わってきます。

合同会社Writers-hubでは、SEO記事とオウンドメディアの制作を通じて、本文の設計とCTAの設計を切り離さずに組み立てる支援を行っています。バナーの見た目だけを改善しても数字が動かない、という段階にいるのであれば、記事側の設計から一度見直してみる価値があるはずです。