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

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

• 購入

• 予約

• 資料のダウンロード

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

• お試しセットの申込み

• メルマガの登録

• 会員登録・定期購読

• 無料レポートの請求

• カタログ無料進呈

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

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

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

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

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

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

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

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

関連記事

ランディングページ（LP）の「分析〜改善」までを徹底解説！

2020.09.09

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

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

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

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

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

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

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

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

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

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

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

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

関連記事

CVが高まるLPのボタンデザインとは？UI改善のポイント

2019.06.20

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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