LPのCTAボタンとは？クリックされる位置やデザインを実例付きで解説

「無料で資料請求をする」「簡単1分で会員登録をする」のように記載されたボタンを、CTAボタンと言います。

CTAボタンは、ただ設置をすれば良いわけではありません。位置やデザイン、文言などによって、クリック率が大きく変わります。

今回はLPにおけるクリックされやすいCTAボタンの位置やデザイン、クリック率をあげるためのテクニック5つなどについてまとめました。

LPについて詳しくない方でも無理なく読み進められるよう、専門用語は極力使用していません。使用する際は用語の説明を入れています。

記事を最後までチェックすれば、LPにおけるCTAボタンについてひと通り理解できます。

クロスバズのLP制作サービス「バズLP」では、競合分析とユーザー分析を徹底的に行い、売れるランディングページを作成いたします。

自社商品・サービスの売上をより伸ばしたい方は、ぜひ以下より詳細をご確認ください。

LPのCTAボタンとは？

CTAは「Call To Action」の略で、日本語では「行動喚起」です。つまりCTAボタンは、LPを訪れたユーザーに特定の行動を促すためのボタンを意味します。

「特定の行動」の例は以下のとおりです。

• 資料請求をする
• 無料体験をする
• ダウンロードをする

以下は、弊社クロスバズのLP内におけるCTAボタンです。

LPを訪れたユーザーに対して「LP制作のお問い合わせ」を促しています。

LPのCTAボタンはコンバージョン率を高めるために重要

ユーザーの資料請求や無料体験、問い合わせをコンバージョンと言います。そしてLPは、コンバージョン獲得のために作られています。

コンバージョンまでの一般的な流れは以下のとおりです。

1. ユーザーがWeb広告に興味を持つ
2. Web広告をクリックしてLPに流入する
3. LPの内容に興味を持つ
4. CTAボタンをクリックしてコンバージョンする

CTAボタンは、コンバージョンの一歩手前にある要素です。そのためCTAボタンの出来が、コンバージョン率に大きく影響します。

例えば月間1,000人が訪問するLPを例に考えてみましょう。

①CTAボタンのクリック率が1%の場合
→100人のユーザーが申し込み
→コンバージョン数は10件

②CTAボタンの文言やデザインを最適化して、クリック率が2%に上昇する
→200人のユーザーが申し込み
→コンバージョン数は2倍の20件

上記のように、CTAボタンの改善によってクリック率が伸びると、同じアクセス数でもより多くのコンバージョンを獲得できます。

関連記事：LPのコンバージョン率はどのくらいが目安？低い要因や改善のポイントを解説

LPにおけるクリックされやすいCTAボタンの位置

LPにおけるCTAボタンがクリックされやすいとされる位置は、以下3か所です。

• ファーストビュー下部
• ボディー下部
• クロージング下部

それぞれ詳しく見てみましょう。

ファーストビュー下部

ファーストビューは、LPを開いた際、最初に表示される部分のことです。例えば以下は、弊社LPのファーストビューです。

上記LPでは例外的に、ファーストビュー内にCTAボタンを設置していません。しかし一般的には、ファーストビュー下部のCTAボタンはクリック率が高いとされています。

なぜならLPを訪問するユーザーのなかには、あらかじめ資料請求や問い合わせを決めている方がいるからです。

そういった方はLPの下部まで目を通さず、ファーストビューから直接コンバージョンに至ります。

またファーストビューは、LPにおいて最も離脱率が高い箇所です。LPにアクセスをして「なんか違うな」と即ブラウザバックをした経験がある方も多いでしょう。

LPのファーストビューにおける離脱率は70%以上とも言われています。

ファーストビュー下部へのCTAボタン設置には「離脱される前にできるだけ多くの方にCTAボタンを見せる」といった意味合いもあります。

関連記事：LPのファーストビューとは？重要性やサイズについて事例付きで解説！

ボディー下部

ボディーとは、LPのメインコンテンツが展開されるエリアのことです。具体的には商品・サービスのベネフィットやお客様の声、料金などが掲載されます。

ボディー下部も、CTAボタンがクリックされやすい箇所です。ボディーを読み進めて、納得をしたユーザーに、流れるように行動を促せます。

ユーザーが「申し込もうかな」と思うタイミングで、ちょうどCTAボタンが表示されるのが理想です。

例えば以下は、弊社LPのボディー下部に設置されたCTAボタンです。

ベネフィットや他選択肢との比較、実績を読んで納得いただけたユーザー様に、スムーズにCTAボタンをクリックしてもらおうという意図があります。

クロージング下部

クロージングとは、LPの最終盤に位置する部分のことです。

クロージングにはFAQ(よくある質問)や割引のオファーなど、ユーザーの背中を後押しするための要素が掲載されます。

クロージング下部も、CTAボタンのクリック率が高い箇所とされています。「LPを下部まで読んでくれる＝それだけ興味関心を持っている」と考えられるからです。

以下は、弊社LPのクロージング下部に設置されたCTAボタンです。

これまでのCTAボタンとは異なり、入力フォームを直接掲載しています。

「CTAボタンをクリック→フォームを入力」ではなく、最初からフォームに入力してもらった方が、コンバージョン率が上がるからです。

しかし他の場所にもこの入力フォームを掲載すると、場所を取って流れが悪くなるので、クロージング下部のみの設置としています。

関連記事：LPでの顧客獲得はクロージングがカギ！覚えておきたいポイントとは？

LPにCTAボタンを設置しすぎると押し売り感が出るので要注意

CTAボタンは、とにかく多く設置すれば良いというわけではありません。

要素ごとにCTAボタンがあると「押し売り感」が強くなり、クリック率やコンバージョン率が下がります。

CTAボタンの数はできるだけ少なく、ユーザーの目に留まりやすい場所にピンポイントで設置するのが理想です。

ファーストビュー下部・ボディー下部・クロージング下部への設置は必須として、LPの長さに応じて、ボディーにCTAボタンをもう1か所追加するくらいにしておきましょう。

関連記事：ランディングページ(LP)が胡散臭いと言われる3つの理由と怪しまれない作り方

LPにおけるクリックされやすいCTAボタンのデザイン例

クリックされやすいCTAボタンのデザイン例は、以下のとおりです。

• 四角ではなく角丸にする
• 商品・サービスに合った配色にする
• ボタンの上下にマイクロコピーを設置する
• 立体的にする
• カーソルを合わせた際にデザインを変化させる

1つずつ詳しく解説します。

四角ではなく角丸にする

CTAボタンの形には、以下2つの種類があります。

• 四角
• 角丸

▼四角のCTAボタンの例

▼角丸のCTAボタンの例

クリック率が高いのは、角丸のCTAボタンです。角丸の方がボタンとして認識しやすく、親しみやすさを感じるからです。

一方四角のCTAボタンは、シャープな印象で、信頼性・堅実・安心といったイメージを与えます。

クリック率が高いのは角丸のCTAボタンですが、不動産や法律など、業界によっては四角の方が良いケースもあります。

商品・サービスに合った配色にする

色にはそれぞれ、人に与えるイメージがあります。主な例は以下のとおりです。

• 赤系：活発、力強い、熱い
• 青系：さわやか、冷たい、堅実

CTAボタンは、商品・サービスにあった配色にしましょう。

例えば不動産投資や歯医者など「信頼感」が特に重視される商品・サービスでは、青系のCTAボタンが良いでしょう。

食品やスポーツジムなどでは、赤系のCTAボタンが良いでしょう。

またCTAボタンがLPの背景と同系色だと、視認性が低下します。一方でページ全体の配色から極端に浮いてしまうと、不自然に見えてしまいます。

CTAボタンの色を選ぶ際は、この辺りとの兼ね合いにも注意しなければなりません。

ボタンの上下にマイクロコピーを設置する

マイクロコピーとは、CTAボタン付近に配置される、短い補足テキストのことです。

例えば弊社LPに設置されたCTAボタンの場合「ご相談・お見積もりは無料！」や「お気軽にお問い合わせください」といった文言が、マイクロコピーにあたります。

マイクロコピーには、CTAボタンのクリックに対する「最後の懸念事項」をなくす意味合いがあります。

例えば「※しつこい営業は一切ありません」というマイクロコピーがあると「営業が面倒だと思っていたけど、それなら相談してみようか」と考える方もいるでしょう。

CTAボタン付近には、マイクロコピーを1〜2個は設置しましょう。

立体的にする

CTAボタンは、立体的にしましょう。

具体的には、影をつけたり、色をグラデーションにしたりすると、CTAボタンが立体的に見えます。

以下は弊社LPのCTAボタンを拡大したものです。よく見るとボタン下部に影が見えます。

CTAボタンを立体的にすると、直感的に「押せるもの」であると伝わります。

実は、ユーザーがCTAボタンに気づかないケースは多々あります。制作する側のように、真剣にLPを読んでいないからです。

CTAボタンを立体的にすれば、気づかずにスルーされる可能性を減らせます。

カーソルを合わせた際にデザインを変化させる

CTAボタンにカーソルを合わせた際、デザイン面で何かしらの変化があると、クリック率が上昇します。

直感的に「反応がある＝押せる」と認識されるからです。

具体的には、カーソルを合わせた際にCTAボタンの色や形を変化させたり、カーソルを矢印から人差し指に変化させたりといった方法があります。

なおスマートフォンにはカーソルがないので、こういった変化は活用できません。

ここまで紹介したCTAボタンのデザインについては、以下の記事でより詳しく解説しています。

関連記事：LPのCVボタンデザインの7つの要素とは？デザイン考案のポイントと参考事例

LPにおけるCTAボタンのクリック率を上げるためのテクニック

続いて、デザイン以外の要素でLPにおけるCTAボタンのクリック率を上げるためのテクニックは、以下の5つです。

• 「クリックすると何が起きるのか」を明確にする
• コンバージョンのハードルをより低いものにする
• 魅力的なオファーを提供する
• LPが極端に長い場合はフローティングボタンを導入する
• A/Bテストを実施する

それぞれ詳しく解説します。

「クリックすると何が起きるのか」を明確にする

CTAボタンに「ここをクリック」のような文言が記載されているLPを目にします。

しかし「ここをクリック」だと、クリックをしたあとに何が起きるのか、ユーザーには伝わりません。

そのため不安が生じて、クリックをためらう要因になります。

CTAボタンの文言は「資料請求をする」や「無料相談に申し込む」など、クリック後に何が起きるのかが伝わるようにしましょう。

ここまで何度か紹介している弊社LPのCTAボタンに掲載の文言も「LP制作のお問い合わせをする」となっています。

「資料請求をする」の前に「無料で」や「簡単1分で」のような文言を付け加えるのも選択肢の1つです。

コンバージョンのハードルをより低いものにする

何をコンバージョンとするかは、以下のようにさまざまです。

• 資料請求
• 問い合わせ
• 無料体験
• 購入・申し込み

コンバージョンのハードルが高いほど、CTAボタンのクリック率は下がります。

例えば1,000万円の不動産投資物件の販売を目的とする場合、CTAボタンの文言を「不動産物件を購入する」としてもなかなかクリック率は上がりません。

1,000万円という額は、LPを読んだだけでポンと出せる額ではないからです。

一方「資料請求をする」や「無料セミナーに申し込む」だとクリック率は上がるでしょう。

ハードルの高さ次第では、最初からゴールを狙うのではなく、段階を踏むことも大切です。

例えば「不動産投資を始めてみませんか？」というCTAの文言は、LPの読者ではなく、無料セミナーの参加者に見せた方が確実です。

魅力的なオファーを提供する

「〇〇日までの申し込み限定で〇〇をプレゼント」や「7日間の無料体験あり」のような魅力的なオファーがあれば、手っ取り早くCTAボタンのクリック率を上げられます。

ユーザーは、常に「今行動しなくても良い理由」を探しています。「今週中に申し込もう」と離脱したユーザーの多くは、そのことを忘れてしまい、戻ってきません。

魅力的なオファーは「今申し込まない理由」をなくすのに役立ちます。

しかしオファーにはコストがかかります。そのためどこまでオファーを出せるのかについては、考えなければなりません。

LPが極端に長い場合はフローティングボタンを導入する

フローティングボタンとは、画面をスクロールしても常に固定表示されるCTAボタンのことです。

LPが極端に長い場合でも、常にユーザーの目に留まる場所にCTAボタンを表示させられます。

しかしフローティングボタンがあると、画面が狭くなり、ユーザビリティが下がります。そのためサイズを小さくするなどの工夫が必要です。

例えば弊社LPにもフローティングボタンを設置しています。しかし邪魔にならないよう、サイズは小さくしています。

▼スマートフォンで弊社LPを表示した際のフローティングボタン(画像右下)

A/Bテストを実施する

ここまで、CTAボタンのクリック率を上げるためのデザインやテクニックを紹介しました。

しかし「本当に効果があるのか」や「どのくらい効果があるのか」は試してみるまで分かりません。

そこで大切なのがA/Bテストです。改善前と改善後のクリック率を比較することで、どちらのデザインや文言が適しているか分かります。

直感ではなく、A/Bテストによるデータを参考にしましょう。

LPのCTAボタンに対してA/Bテストを実施する具体的な方法

LPのCTAボタンに対してA/Bテストを実施する具体的な方法は、以下の2つです。

• Googleアナリティクスを使用する場合
• ヒートマップツールを使用する場合

1つずつ詳しく解説します。

Googleアナリティクスを使用する場合

GoogleアナリティクスとGoogleタグマネージャーを使えば、CTAボタンのクリック数を計測できます。

そのため「文言を変更してクリック率がどう変化したか」「デザインを変更してクリック率がどう変化したか」などが分かります。

詳しくは以下の記事を参考にしてください。

関連記事：ユニバーサルアナリティクスで設定したコンバージョン設定をタグマネージャーでGA4に移行する方法

ヒートマップツールを使用する場合

ヒートマップツールを導入すると、以下の情報を確認可能です。

• スクロール率
• 熟読エリア
• クリックエリア

スクロールが終わりユーザーが離脱している箇所、熟読されていない箇所、クリックされていない箇所を変更するなどして、A/Bテストを実施できます。

おすすめのツールについては、以下の記事で紹介しています。

関連記事：【無料あり】LPにヒートマップツールは必要？概要や分析できる項目を分かりやすく解説

LP制作や運用は制作会社への依頼がおすすめ

ここまで解説したCTAボタンの改善は、LPOのなかの一要素に過ぎません。

LPOとは？：
Landing Page Optimizationの略。日本語ではランディングページ最適化。LPのコンバージョン数やコンバージョン率を向上させるために行われる施策の総称。

LPOには他にも、以下のような施策があります。

• コンテンツの追加・改善
• ページ読み込み速度の改善
• 画像や動画の追加・変更
• フォントや文字サイズの調整

LP制作に関するスキルがない状態で、これらすべてを自社で完結させるのは至難の業です。

LP自体は出来上がるかもしれません。しかしクオリティの面で競合を上回るのは難しいでしょう。

そのためLP制作やLP運用は、制作会社への依頼をおすすめします。詳しくは以下の記事で解説しています。

関連記事：ランディングページ制作会社10社を比較！選ぶポイントや費用相場なども紹介
関連記事：【目的別】おすすめのLPO代行会社20選｜選び方や費用相場も解説

まとめ

LPにおけるクリックされやすいCTAボタンの位置やデザイン、クリック率をあげるためのテクニック5つなどについて解説しました。

いくら良いLPや商品・サービスでも、CTAボタンの出来によってコンバージョン率やコンバージョン数は大きく変わります。

早速本記事で紹介した内容を実践してみましょう。

弊社クロスバズの提供するバズLPでは、丁寧なヒアリングから競合分析を行い、成果の出るLPを制作します。

相談や見積もりは無料です。無理な勧誘をすることもありませんので、お気軽にお問い合わせください。

>>株式会社クロスバズが提供する「バズLP」の詳細はこちら