デザイン会社が発信するLP制作情報メディア

ランディングページの作成をお考えの方必見!CTAをご説明します!

2022.7.24
ランディングページの作成をお考えの方必見!CTAをご説明します!
インターネット上のSNSやランディングページ(LP)、ブログなどでCTAを促す場面は多くあります。Webサイトに訪れたユーザーにアクションを促すためには、行動喚起が必要になるからです。


では、効果的にCTAを配置しコンバージョン率(CVR)アップを目指すには、どのような対策が必要なのでしょうか?今回は、CTAの仕組みや分析方法、CTAボタンデザインのポイントなどを詳しく解説します。
それに併せて、コンバージョン率を高める資料請求のボタンデザインについても解説します。

目次

CTA(Call To Action)とは?

CTA(Call To Action)とは?
CTAとは、Webサイトに訪れたユーザーに対して行動のきっかけを促すことです。Call To Actionの頭文字を取ってCTA(シーティーエー)と呼ばれています。CTAの目的は、ユーザーの行動を喚起することにより、お問い合わせなどのコンバージョンのパフォーマンスを向上させることです。


CTAの役割を担うものとして、ボタンやテキスト、画像、アニメーションなどにリンクをつける方法があります。「申し込み」と書かれたボタンや「こちら」と書かれたテキストなどを見たことがあるのではないでしょうか。これがCTAになります。

CTAで使用されユーザーの行動例

CTAで使用されるユーザーの行動例としては以下の通りです。


• 購入


• 予約


• 資料のダウンロード


• 今すぐ電話でお問い合わせ


• お試しセットの申込み


• メルマガの登録


• 会員登録・定期購読


• 無料レポートの請求


• カタログ無料進呈




たとえば、健康食品を探しているユーザーが自社のランディングページを訪問し、CTAボタンの「お試しセットの申込み」へ行動を促すパターンがあります。また、お役立ち情報をゲットしたいユーザーに対しては、CTAとして「資料のダウンロード」や「メルマガの登録」を設定するのも良いでしょう。

CTAが設置される場所

ユーザーにとってわかりやすい位置にCTAがあれば、コンバージョン率アップを期待できます。よく設置される場所としてはコンテンツ直下、ファーストビュー内、ヘッダー・フッター内です。ページをスクロールするのにあわせてポップアップ形式で表示させることもあります。


目的に応じてCTAの設置場所は異なります。例えば、資料請求のCTAであればコンテンツ直下に設けるのが効果的かもしれません。一方、お問い合わせや会員登録であればヘッダーのように目立つ位置に設置するのもおすすめです。このようにCTAはどこに配置するか、どのような内容で行動を促すかがポイントとなります。

CTAの構成要素には何がある?

CTAは複数の構成要素から成り立っており、「キャッチコピー」「ボタン」「電話問い合わせ表示」「背景デザイン」の4つがあります。
それぞれの構成要素について解説します。

まずはキャッチコピーです。
ここにはCTAの見出しやアクションを促進するコピーやキャンペーンメッセージなどが入ります。

次はボタンです。
ボタンは1つの場合もあれば、複数の場合もあります。
複数のコンバージョンポイントを用意したいのであれば、例えば資料請求用のボタンと問い合わせ用のボタンのように、複数のボタンを配置するケースも存在します。

次は電話問い合わせ表示です。
商品について電話で問い合わせをしたいユーザーもいます。
ランディングページに電話問い合わせのための表示を用意していないと、ユーザーは離れていってしまうでしょう。

このようなユーザーを取りこぼさないためにも、電話番号や受付時間を表示する場合があります。

最後は背景デザインです。
他のコンテンツと差別化するために背景デザインはおしゃれで個性的なカラーリングを意識すると良いでしょう。

zoom_in画像クリックで拡大

制作費用はこちら

CTAはランディングページで最も目立たせるべきです!

CTAボタンの構成要素についてわかっていただけたでしょうか。
ボタンをどのようにして魅力的にしていくかは後半で詳しく解説していくのですが、いくら魅力的なボタンの構想が固まっていても、ターゲットの目につかないと意味がありません。
そのため、ランディングページの中でCTAボタンを最も目立たせるのです。

「キービジュアルを目立たせるのではないのか」
ランディングページに詳しい方はこのように思うかもしれません。
キービジュアルとは、商品に使用されるメインのイメージ画像のことです。
確かにこちらも重要なのですが、一番目立たせるべきなのはCTAボタンです。

具体的には「背景色や装飾を工夫する」「ボタンは大きすぎるくらいのサイズにする」の2つを意識しましょう。

ただ、あまりにわざとらしく目立たせても白々しく思われてしまいます。
周りのコンテンツとのバランスを考慮しつつ、加減しましょう。
製作者側の意図を前面に押し出してしまうと、ターゲットは離れてしまいます。

そのため、以下の3つのポイントを意識してみましょう。

・浮かせるのではなく、目立たせる
・激しいアニメーションを入れない
・縮尺が20パーセントから30パーセントでもボタンの位置がわかるようにする

CTAの分析方法

CTAの分析方法
CTAの分析は、Googleアナリティクスやヒートマップツールで行うことができます。

GoogleアナリティクスでのCTA分析方法

Googleアナリティクスを活用する場合は、トラッキングコードを入れておくだけでなく、各CTAボタンにパラメータを付与することで、CTAを分析できます。パラメータとは、URLの後ろに「?」から始まる部分をさします。ユーザーがどの経路からWebページ訪問したのかが明らかになり、より詳細な分析が可能となります。


パラメータには、アクティブパラメータとパッシブパラメータがあります。アクティブパラメータとは、表示するページの内容に影響を与えるパラメータです。ECサイトで利用されることが多いです。パッシブパラメータとは、表示するページの内容に影響を与えないパラメータです。アクセス経路や滞在時間などを分析するために利用されます。



しかし、2つ以上は使用できないため、複数のパラメータを付与する場合は「&」でつなぎます。



パラメータを設定するメリットは、訪問したユーザーの参照元をGoogleアナリティクスが正確にトラッキングできるという点です。パラメータを設置することで[行動→サイトコンテンツ→ランディングページ]からデータを確認できるようになります。

ヒートマップツールの分析方法

ヒートマップは、訪問したユーザーの行動が色の濃淡で可視化できるツールです。ページ分析を利用することで、各CTAボタンのクリック数やクリック率がわかり、クリックされている場所の可視化が可能になります。また、フィルター機能が存在するため、実際にコンバージョンに至ったユーザーとそうでないユーザーで行動がどう違うのかを比較することもできます。

CVで成果が出ない時にCTAを改善する方法とは?

CVで成果が出ない時にCTAボタンを改善する方法としては「コピー」と「デザイン」がポイントとなります。
CVで成果が出ない時にCTAを改善する方法とは?

コピー

ページを訪問したユーザーに行動してもらうためには、お得感や信頼性、限定などを打ち出し、行動までのあと一押しを促すことが大切です。そのためあと一押しの役割をCTAのコピーが担います。


マイクロコピーは、CTAボタン周りで使用するテキストです。マイクロコピーに「今だけ◯◯無料」「期間限定◯◯%OFF」などの効果的なコピーを検討しましょう。また、CTAボタンの文言は、名詞ではなく動詞にするのも効果的です。たとえば、「問い合わせ」ではなく「問い合わせする」、「資料請求」ではなく「資料を請求する」などといった行動をイメージしやすい動線が必要です。

デザイン

CTAボタンのデザインは、立体的で目立つボタンにしたり、グラデーションで影を入れてみたり工夫しましょう。ただし、目立ち過ぎるとユーザーがハードルの高さを感じる場合もあるので、さまざまなパターンをA/Bテストを用いて改善していくことが成果につながるでしょう。


また訪問者からの離脱を防ぐために、ヘッダーやフッターにCTAボタンを固定させる方法も効果的です。スクロールをしても常にCTAボタンが表示されていると、いつでもアクションを起こすことができるのでコンバージョンアップに最適な方法です。

やっぱりLP制作はプロに任せたい!まず制作事例を見る

CTAボタンデザイン5つのポイント

CTAボタンデザイン5つのポイント
以下では、より具体的にCTAボタンのデザインについて解説します。

クリックできることをわかりやすくする

CTAボタンは、クリックできることを視覚的に伝える必要があります。なぜなら、平らなデザインであればすぐにボタンに気づかない場合が多いためです。CTAボタンは、訪問者から一目瞭然でわかりやすいものでなければなりません。


CTAボタンにグラデーションで影を入れてみたり、立体的な目立つボタンにすることが大切です。


Webサイトやランディングページの中で、しっかりとした動線を作り、ユーザーがすぐにクリックできるような位置にCTAボタンがあることが理想です。

配色を目立つようにする

形やサイズに加え、そのWebサイトやランディングページのイメージにあった配色にすることがポイントです。しかし、サイトのメインカラーと同じ色にするとCTAボタンが目立たなくなります。ページ全体で配色を意識しながら、アクセントカラーを選びましょう。

CTAボタンのデザインはひとつにする

CTAボタンは、ページ内に複数箇所設置することがありますが、すべてのCTAボタンは統一して一種類に絞るようにします。さまざまなタイプのCTAボタンを作成すると、統一感がなくインパクトも弱くなってしまいます。CTAボタンは、一目瞭然ですぐにわかるものでなければなりません。

動きをつけて注目させる

最近のWebサイトでは、動きをつけたCTAボタンが増えています。たとえば、スクロールしたときに飛び出してくるような仕掛けやボタンにアニメーションを付けたCTAボタンは、思わずクリックをしてしまう効果が期待できます。したがって、訪問者の目を引くようなインパクトと動きのある工夫されたボタンが効果的です。

マイクロコピーやラベリングを活用する

訪問者を一押しするような短文を添えると効果的です。たとえば、「限定◯個」「今日限り」「今なら◯%OFF」「送料無料」などです。


ラベリングは、ボタン内で使用するテキストになります。目的や訪問者の目線、行動などがポイントになります。「今すぐクリック」「申し込みはこちら」「無料で請求する」などです。

CTAボタンでコンバージョン率を高めるコツ

CTAボタンでコンバージョン率を高めるコツ

1つ目:CTAボタンは緑色にする

緑といえば、信号の「進め」を意味する色で、世界で共通しています。そのため、行動喚起する意味でもCTAボタンに最適です。また、緑色は癒しやリラックス効果があり、Webサイトに安心感を与える印象になり、自然と訪問者に受け入れられるでしょう。ただし、サービスや商品のイメージとマッチする色を選ぶことが最優先であることは忘れないようにしましょう。

2つ目:配置を工夫する

ランディングページでは、訪問者が最初に目に入るファーストビューにCTAボタンを配置すると効果的です。なぜなら、ファーストビューでページの印象が左右するためです。Webサイトでは、人の視線がZの文字のように左から右、上から下へと動く特徴があります。それらを考慮しながら、最適な位置を検討することが大切です。

3つ目:CTAボタンに動きを付ける

デザインのポイントでも紹介しましたが、動きをつけることでコンバージョン率が高まることがあります。カーソルをあてると、拡大したり音が出るような動きを付けるのも効果的です。

4つ目:CTAボタンのオファーを「モニター」にする

CTAボタンのオファーの名称が「モニター」と書かれていると、コンバージョンがアップしたというA/Bテストの結果があります。通販会社のように単品商品を提供するランディングページのCTAにおすすめです。「サンプル」「お試し」「トライアル」よりも「モニター」のほうがコンバージョン率が上がるとの結果があるため、訪問者にオファーの存在を知ってもらうためにも一度「モニター」にしてみてはいかがでしょうか。

CTAの発展形とクリックを誘導する方法

セカンダリCTAの魔法

Amazonのボタンはアイコンとテキストを並べているのが特徴的です。
アイコンを入れることによって、CTAボタンによるアクションが促進することがわかっています。
「カートに入れる」「今すぐ買う」という2つの種類のボタンを用意しており、それぞれで色分けをしているのもポイントです。

スライドインCTAの巧妙な配置

Airbnbのランディングページに設置されているボタンは、Airbnbのコーポレートカラーを使っており、ページの中でも最も注目される場所に配置されています。
また、ボタンを丸いフォルムにすることによって、ユーザーに親しみやすさを与えているため、コンバージョン率が高いのです。

クリックを誘うテクニックの多様性、その深化版

Netflixのボタンはビビッドな赤色でデザインされています。
また、背景を黒一色に統一することによって、ボタンを際立たせる工夫が施されています。
加えて、1ヶ月の無料体験を始めるとボタンに記載して、無料でスタートできることを強調しています。
会員登録へのハードルを下げていることも重要なポイントですね。

CTAボタンの参考事例をご紹介!

Amazon

コンバージョンに至るボタンは、できるだけ主張させた方が良いと言えます。

例えば、資料請求ボタンに関して、単に資料請求はこちらという文章を図形で囲って色付けするだけでなく、その図形に影を加えることでボタン感は増します。
他にも、アニメーションを付け加えたりと、さまざまな工夫ができます。
このように、押せることを主張することでコンバージョン率の増加につながるのです。

Airbnb

ボタンの色を変えるだけでも、コンバージョン率に変化は出てきます。
ここでのポイントは、ボタンの色に正解はないということです。

緑色のボタンと赤色のボタンを比較した際に、緑色の方がコンバージョン率が高かったとしても、もしかすると黄色にするとよりコンバージョン率が高くなるかもしれません。
効果的な色を見つけるためにも、ABテストを実施してどの色がコンバージョンに結びつくかをテストしましょう。

Netflix

ユーザーの環境というのはさまざまなものがありますが、例を挙げるとすると日頃から触っているボタンが考えられます。

例えば、若者の場合はTwitterやインスタグラムなどのSNSで使われるシンプルなボタンに慣れていると考えられ、逆に中高年はゴツゴツとしたボタンに慣れているとも考えられます。
あくまで一例ですが、ユーザーのさまざまな環境を考慮したデザインにすることで、コンバージョン率の増加を見込めるでしょう。

Spotify

ラベリングとはボタンの中の文章、マイクロコピーとはボタンの周辺の文章のことです。
ラベリングとマイクロコピーを工夫することで、ユーザーの不安を払拭したり、疑問を解決したりしてコンバージョンにつながる可能性を高められます。

具体的には、ラベリングに「資料請求」と記入するだけでなく「資料請求(無料)」と文章を付け加えることで不安感をなくすことが挙げられます。

コンバージョン率を上げるためのボタンデザインで気をつけること

コンバージョン率を上げるためにボタンデザインで気をつけることとして、以下の4点が挙げられます。

1.押せることを主張する

資料請求ボタンが目立たない地味なデザイン、あるいは周囲のデザインに埋もれていた場合、そもそもユーザーがボタンを見つけられなかったりする可能性が出てきてしまうため、ボタンは目立たせておきましょう。

また、人によってはそもそもページの中身を見ずにボタンを探す場合もあるので、わかりやすく目立たせて次のアクションに繋げましょう。

2.ボタンの色をテストする

ラベリングやマイクロコピー、あるいはその周りにユーザーの利益につながる文章を付け加えることもコンバージョン率を上げるにあたって効果的です。

3.ユーザーの環境を考えたデザインにする

デザインに凝りすぎて派手すぎるボタンになったり、商品やサービスの魅力を伝えたいがあまり文章量が長くなってしまったりしてしまうとかえって効果が薄れてしまう可能性があります。

デザインや構成は複雑になりすぎないように注意しましょう。

4.ラベリングとマイクロコピーを工夫する

統一感に関しては、ボタン周りだけでなく、ページとボタンなど、全体的に統一されるように心がけましょう。

資料請求のコンバージョン率を上げるためにボタンデザインでできる工夫

1.目立たせる

2.ユーザーへの利益を明確にする

3.複雑なデザイン、構成にしない

4.統一感を持たせる

5.画像を利用する

6.形を工夫する

7.配置を工夫する

まとめ

CTAボタンは、Webサイトやランディングページに訪れたユーザーに対して行動のきっかけを促す重要な役割です。目的としては、購入、資料のダウンロード、今すぐ電話で問い合わせ、お試しセットの申込み、メルマガの登録などのコンバージョンのパフォーマンスを高めることです。


CTAの改善方法として、Googleアナリティクスやヒートマップツールで分析を行うことも大切です。また、CVで成果が出ない時にはコピーやデザインを改善しましょう。ユーザーの動きをあらかじめ予測し、効率的にCTAボタンにたどり着くような動線が大切です。

この記事を書いたライター
LPの制作に特化したデザイン会社(LP制作実績)。累計では数千LPデザインを手掛けております。すべて内製化しており、構成からデザイン、コーディングまですべてご対応可能です。各種サーバーのご対応はもちろん、楽天市場、ヤフーショッピングなどのモール系などへの反映もご対応可能です。
この記事の画像を作成したデザイナー
所属:株式会社Ryuki Design / 部署:デザイン部
※デザイナー一覧

紙媒体のデザインからwebデザイン(LP制作・バナー制作)までオールマイティーにデザインが可能。
デザインだけではなく構成も得意なハイスペックデザイナー。毎回クオリティの高いデザインをクライアントに提供しています。

LP制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    ※アンケートモニター提供元:ゼネラルリサーチ 
    調査期間:2020年8月7日~12日
    調査方法:インターネット調査 
    調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
    調査対象:全国の20代~50代の男女 1052名

    LPアーカイブ
    mitekaku