CVR・CTR伸び悩み！改善すべきはCTAボタンのデザイン？設置場所？

目次

• ユーザーにコンバージョンを促すCTAボタン
• CTAボタンの「デザイン」を見直す
• CTAボタンの「設置箇所」を見直す
• デザインと設置場所の相関関係
• まとめ｜CTAボタンのデザインは一つに、設置は複数箇所に

ユーザーにコンバージョンを促すCTAボタン

・CTAボタンとは

Webサイトを訪れたユーザーに、サービスの購買などのアクション（コンバージョン）を促すバナー画像などがCTA（Call To Action）ボタンです。コンバージョンボタンと呼ばれることもあります。

CTAの意味についての基礎知識は、こちらの記事で詳しく解説しています。

ボタン一つでCV率アップ！クリックされやすいCTAボタンとは？基礎知識と改善・成功事例をご紹介

・優れたCTAボタンはCTR、CVRに直結する

行動を喚起し、実際に問い合わせや購入といったユーザーアクションを起こしてもらうために、企業は様々な趣向を凝らしています。CTAボタンへの工夫もその一つです。少しでも多くクリックしてもらい、コンバージョンに繋げるため、CTAボタンについてのA/Bテストを実施されている企業もあります。

サイト全体で見ると細かい要素かもしれませんが、軽んじることができないものがCTAボタンなのです。

・伸び悩むサイトのCV率…見直すべきは？

「EC物流について資料を作成したがダウンロード数が増えない……」「ノベルティグッズについて特集ページを作ったのに問い合わせがこない……」

WebサイトやLPを設置してはみたもののCTRやCVRが伸び悩み、売上や顧客獲得といった成果が表れない場合もあるでしょう。

そのような場合には、まずページ全体のコンテンツ内容を精査する必要があります。ユーザーの興味を惹くページ構成になっているか、サービスについての魅力がわかりやすく説明されているかを見直し、本文に加筆修正を加えます。導線のわかりやすいユーザビリティの高いページになっているかの見直し・修正も必要です。

しかし、加筆修正によって内容を充実させ、ユーザーの導線を確保してもCTRやCVRが低迷しているという場合には、CTAボタンを見直すことで状況が改善されるかもしれません。

「つい」押したくなるCTAボタンを設置しよう

サイトを閲覧中、表示されたバナー広告やその先に設置されているCTAボタンをついクリックしてしまった経験がある人は多いのではないでしょうか。たとえ元々は興味のない内容であったとしても、商品の魅力が伝わってくる画像や「今だけ限定」「50％オフ」といったコピーが目に入ってくると、思わずクリックしたくなってしまうものです。

CTRやCVRが伸び悩んでいる場合には、そんな「つい」クリックしたくなるCTAボタンが設置できているか、見直してみましょう。

見直すポイントは「デザイン」と「配置場所」

CTAボタンについて見直す際、着目する点はボタン自体のデザインと、ボタンをどこに設置するかの2点です。それぞれ、どのような点を改善したら良いのか、詳しい要素について詳しくご紹介していきます。

CTAボタンの「デザイン」を見直す

そもそもCTAボタンだと認識されていますか？

CTAボタンというくらいですから、クリッカブルな要素であることがわからなくては、そもそもクリックされません。ボタンのデザインやエフェクトを工夫し、クリック可能な要素であることをユーザーにアピールすることも必要です。

・立体感を持たせる

ボタン下部の色を濃くしたり影を付けたりするなどして立体感を持たせることで、ボタンらしさが格段にアップします。画像自体を編集して影を付け加えるほか、CSSを使って立体的なボタンを作成することも可能です。

・ボタンにアイコンをつける

「カートに入れる」ボタンであればカートのイラスト、「送信」であればメールのイラストのように、クリックで発生する動作を直感的に理解できるアイコンをつけることも効果的です。

・他の要素との差別化を図る

ページ内の他の要素に埋もれないように明確な差別化を図る必要があります。例えばページ全体の要素が四角で構成されていたらボタンは角丸などにする、地の文章とCTAボタンでフォントを変える、などです。また、ボタン自体の色も他の要素と被らない色味を選ぶようにしましょう。

・マウスオーバーエフェクトを設定する

CTAボタンにマウスオーバーカーソルを載せた際に変化させるとユーザーの注意を引くことができ、またクリック可能要素として認識されやすくなります。効果の内容も様々ですが、一回り大きく表示される、色が変わる、画像を明るくする・暗くする、画像を動かす、文字をポップアップさせる、などがよく使われているマウスオーバーエフェクトです。

ただし、注意を引くことばかり考えてエフェクトをつけすぎるとうるさく感じられ、反対に違和感を与えてしまう場合もあるため、適度に設定しましょう。

ボタンの形状を見直す～大きさ、形、画像

・大きさ

CTAボタンのサイズはページ全体とのバランスを見て決める必要があります。小さすぎては要素が埋もれてしまいますし、大きすぎてもトンマナを損ないます。また、パソコンから閲覧するか、スマートフォンから閲覧するかによっても見え方が異なりますので、サイト訪問者の使用デバイスも想定して画像を作る必要があります。

・形

多くのCTAボタンは四角、角丸、円形のいずれかの形状を取っています。他の要素との差別化を図るほか、形状を変えることでユーザーに与えたいイメージを操作することもできます。

形が角ばっているほどスタイリッシュでモダンな印象となり、反対に丸みを帯びていくほど柔らかく親しみやすい印象を与えます。

・カットを利用する

写真やイラストを用いて視覚的に示すことで、明確にリンク先へのイメージを持たせることができます。資料請求や無料サンプルの申し込みがコンバージョンなのであれば手に入る実物の画像を載せるなど、目的に応じて活用するのも良いでしょう。

色の持つ心理効果を利用

目立たなくてはボタンであることに気付かれず、クリックしてもらえませんので、CTAボタンには他の要素からの差別化を図ることができる色を選ぶとよいでしょう。ただし強いコントラストを付けてしまうと、悪目立ちをしてしまいます。コーポレートカラーやサイト全体の基調カラー、製品カラーを考慮し、統一感を失わないよう相性の良い色を用いることも大切になります。

色を選ぶと相性のいい文字色や補色の組み合わせがわかる以下のようなサイトもあるので、配色の参考にするのもよいでしょう。

https://colorbase.app/ja

また、色がもたらす心理効果を用いると、ユーザーにイメージを強く喚起させることもできます。暖色は興奮色、寒色は沈静色という大きなくくりだけでなく、それぞれの色が持つ以下のようなイメージを利用するのもおすすめです。

同じ色であっても明度（色の明るさ）や彩度（色の鮮やかさ）が異なれば、与える印象も変わります。ユーザーに抱いて欲しいイメージに合う色を用いて訴求を行いましょう。

ボタンや周囲の文言は適切か

デザインと言われるとビジュアル面に注目してしまいがちですが、CTR、CVRを上げるためには、CTAボタンに用いる文言も大切になってきます。ベルメゾンに出稿した広告主様のA/Bテストでは、ボタン自体が小さくとも、「20％オフ」とテキストでわかりやすく表示したボタンの方がCTRが高いという結果も出ています。

情報がなさすぎては行動が喚起されませんし、反対に盛り込みすぎては読み飛ばされてしまい、クリックに繋がりません。適度な文量でベネフィットとメリットを示し、ユーザーがボタンクリック後に何が得られるかのイメージを抱かせることが必要です。

商品やサービスへの詳細ページの入口となるようなCTAボタンでは特に、信頼関係の出来上がっていないユーザーがほとんどですから、安心感を与えてクリックへのハードルを下げてやる必要があります。バナー画像や周囲に適切な文言を設置することはその為の第一歩でもあるのです。

・4Uの法則

「4Uの法則」「4Uの原則」と呼ばれる、文章の精読率を上げる見出しのコツがあります。これは、いくつもの会社を経営する起業家のマイケル・マスターソンが提唱したと言われており、Uから始まる以下の4項目を見出しに盛り込むことで、読み手を引き付けることができるというものです。

具体的な例で考えてみるとわかりやすいでしょう。

「会員登録はこちら」とだけ書かれているより、「たった1分で会員登録完了」「会員登録で2,000円引きクーポン配布中」と書いてある方が、会員登録してみようかなという気持ちになりませんか？

「特別セール実施中」とだけ書かれているより、「1時間限定特別セール実施中」の方が今すぐクリックしなくてはという気持ちをかき立てられると思います。「全品50％引き特別セール実施中」と書かれていれば、興味のないECサイトであってもクリックへのハードルが下がるはずです。

このように、ユーザーの行動を引き出すコピーを用いることも、CTAボタンでは非常に重要なのです。

正解はないCTAボタンデザイン

CTAボタンのデザインには「ボタンの色は赤が良い」「緑色が良い」といった通説もありますが、どんなコンテンツ、どんなランディングページでも通用するような普遍的な正解はありません。

自社サイトにとって効果的なCTAボタンとするためにも、実際に数パターンのデザインを用意して試してみる必要があるでしょう。
デザインごとの効果を検証するには、A/Bテストでの比較が有効です。

CTAボタンの「設置箇所」を見直す

CTAボタンそのもののデザインを見直したら、今度はページ全体に対するCTAボタンの見栄えや位置について考えてみる必要があります。

ページ全体で見たときの視認性、差別化はされているか

CTAボタンが小さすぎて他の要素に埋もれていたり、反対に大きすぎて悪目立ちしたりはしていないでしょうか。パソコンサイト向けに設置したバナー画像が、スマートフォンから見ると大きすぎて画面からはみ出しているといった事象もあります。各デバイスからの見え方確認を怠らず、レスポンシブデザインを意識することも大切になります。

ボタンそのものの大きさだけでなく文字の大きさや太さといった可読性・視認性にも注意を払う必要があります。

複数箇所に設置する

CTAボタンを複数箇所に設置することは、簡単ですが効果的な方法です。

商品についての長い紹介ぺージを閲覧中、記事の冒頭にしか購入ボタンがなかったらどうでしょうか。せっかくページを読んで行動への意欲が高まっていっても、最初までスクロールで戻るのが面倒になりクリックせずに離脱してしまうケースもあるかもしれません。反対に、最初から購入意欲があるにも関わらず、ページの最下部にしか購入ボタンがなかったらどうでしょうか。
アンケート調査などでも設問数が多いと回答率が下がるなど、手間やかかる時間が増えるごとにCVRが下がることが明らかになっています。

ユーザーが購入したい、資料を請求したい、問い合わせしたいという気持ちになった時にすぐ行動に移せるよう、CTAボタンはページやサイト内の複数箇所に設けておくのがベターです。記事の最初、途中、最後と最低3つ以上配置できるとよいでしょう。フローティングやポップアップで、常に表示されるようにしておく工夫も効果的です。

既に複数箇所に設置してあるという場合には、クリックしたいタイミングにボタンやフォームが設置されているかユーザー目線で確認しましょう。

ただし、複数のボタンがあるとユーザーの混乱を招いてしまうため、同一ページ内に表示するCTAボタンのデザインは基本的に1種類のみにしておくのが賢明です。

人間の心理を利用した配置

様々な情報で溢れている紙面やWebサイトを見るとき、一度にすべての情報を捉えることはできません。ある一点に注目し、そこから順番に視線を動かして情報を追っていくことになります。この視線の動きを誘導し利用することで、CTAボタンに注目させたり、実際にボタンを押下させたりすることができます。この手法はアプリのUIや様々なサイト、ツールで用いられています。

・Z型

左上→右上→左下→右下とアルファベットのZ字型に読んでいくパターンです。横書きが多いWebでは特に一般的な読まれ方であると言えます。Z型の場合は視線が右下に落ち着くため、CTAボタンを画面の向かって右下に配置すると良いでしょう。

・F型

左上→右上→左中→右中→左下→右下→左……と左側を軸にして下へ下へと読んでいくパターンで、アルファベットのFのような形を描きます。画面左側に設けられているメニューバーや目次、アイコンなどが軸となることが多いです。F型の場合、下になるにつれ情報が読み飛ばされる傾向にあるため、上部にCTAボタンを表示するのが効果的です。

・N型

右上→右下→左上→左下とアルファベットのN字型に文章を読んでいくパターンです。新聞や雑誌のような縦書きの文章での一般的な読まれ方になります。縦書きでのページがWeb上で見られることはあまりありませんが、最終的に視線の落ち着く左下に着目して欲しい点を配置するとよいでしょう。

・読ませたい箇所に目線を合わせる画像を用いる

また、情報を追う際、指差されている箇所や矢印の向いている箇所に視線が向くことが分かっています。目線の先がCTAボタンになるような人物の画像やCTAボタンを指差す画像、矢印などを合わせて配置することで、ユーザーの注意を向けさせることができます。

デザインと設置場所の相関関係

デザインと設置場所の2つの観点からCTAボタンの改善について見てきましたが、それぞれの要素は切り離せない関係にあります。

ベルメゾン広告の例

以前同じサイト内で複数デザインのCTAボタンを設置した際、掲載するページによって反応が違うという事例がありました。

ベルメゾン広告ではお客様が注文を完了した直後のページにバナー広告を表示することが可能です。商品注文後のお客様は今まさにお買い物を終えられた、購入意欲の高いアクティブなお客様。そのため、赤系のCTAボタンの方がCTRが高かったのです。

興奮色である暖色のデザインを興奮状態にあるユーザーの見るページに配置したことによる効果であると言えます。

このように、どのようなデザインのCTAボタンを作成するか、どこに設置をするかは相互に影響し合います。テストを繰り返しながら効果を分析・検討し、デザイン・ページ・商品ごとの勝ちパターンを見つけていくことが、CTR、CVRの向上、ひいては売上の拡大に繋がっていきます。

まとめ｜CTAボタンのデザインは一つに、設置は複数箇所に

つい押したくなるCTAボタンを目指して、デザインと設置場所の２観点から改善項目を見てきました。A／Bテストを効果的に用いて最も効果のあるデザインに絞り、ページ全体のバランスを見ながら複数個所にCTAボタンを設置していくことが重要です。CTR、CVRを見ながら定期的な見直しを図り、より効果的なCTAボタンにして、コンバージョンを引き出していきましょう。

ベルメゾン広告への出稿では、2種類の異なるランディングページを用意し、CTAボタンのデザインや設置場所についてA/Bテストを実施することも可能です。マーケティング効果にお悩みの場合には、ぜひお気軽にご相談下さい。