効果的なCTAの作り方とは？LPのコンバージョン率を上げるポイントまで解説

Webサイトや広告において、コンバージョン率を今よりもっと上げることができれば、ビジネスを拡大するチャンスが広がります。そのコンバージョン率に大きな影響を与える要素のひとつが、「CTA(Call To Action)」です。

しかし「CTAが重要」ということは分かっていても、「コピーやデザインをなんとなくで決めてしまっている」という方も多いのではないでしょうか？

そこで今回は、普段から広告クリエイティブやWebサイトの企画・制作・ディレクションを行っている筆者が、CTAの基礎知識や作り方、成果を上げるために意識したいポイントをご紹介します。

CTAとは？

CTA(Call To Action)とは、コンバージョンやページ遷移など具体的にとってもらいたい行動に誘導する、ボタンやリンク、コピーのことです。

たとえば、以下のようなものが該当します。

よく使われるのはボタン形式ですが、以下のようなバナー形式やリンク形式のものもあります。同じページ内に複数のCTAが存在する場合は、特に行動を喚起したい内容をボタンやバナー形式にして、それ以外の要素はリンク形式にするなど使い分けられているケースが多いです。

CTAはなぜ重要なのか？

CTAが重要なのは、見込み顧客が行動を起こすきっかけを作り、コンバージョンへの最後の一押しができるからです。

CTAは広告やランディングページを見て、ある程度モチベーションが高まっている状態の見込み顧客に見せるものなので、「導線として設置していさえすれば良いのでは？」と思う方も多いかもしれません。

しかし、どんなにモチベーションが高い見込み顧客でもすぐに行動しないことはよくあります。例えば、一目ぼれした商品があったとしても、初めて利用するECサイトで登録が面倒だったり、送料の有無が分からなかったりすると、「後でいいか」と途中で離脱する方が増えてしまいます。

それを防ぐために「SNS連携でかんたん登録」「送料無料」といったコピーを添えるなど、少しの工夫で大きな効果が見込めるためCTAは重要なのです。

CTAの成果を左右する要素

CTAの成果に影響を与える要素は、大きく分けて「ラベリング」「マイクロコピー」「デザイン」「アニメーション」の4つあります。

より良いCTAを作るために前提として知っておきたい、それぞれの役割や目的について解説します。

テキスト情報

まずは、CTAで最も重要なテキスト部分の要素から紹介します。

ラベリング

ラベリングとは、CTAボタン内のコピーのことを指します。「無料登録する」「今すぐ購入する」「お見積もりはこちら」「資料をダウンロード」など、クリックするとどうなるか？を具体的に示すことで行動してもらいやすくする目的があります。

マイクロコピー

CTAにおいて、顧客の意思決定に大きく影響を与えるのがマイクロコピーです。マイクロコピーとは、「全機能をお試しできます」「いつでも解約OK」「簡単〇分で完了」などボタンの周囲にあるコピーを指します。見込み顧客のモチベーションを高めたり、不安要素を取り除いて背中を押す役割があります。

視覚情報

加えて、テキスト情報をより際立たせるための要素を紹介します。

デザイン

CTAのデザインの要素は、色や形、大きさ、配置、フォント、画像パーツの有無など多岐に渡ります。ラベリング、マイクロコピーの方が行動を促す要素としての重要度は高いです。しかし、それらの内容が良くても、見づらかったり、内容が理解しづらいとクリックされにくくなります。そのためデザインは、ラベリングやマイクロコピーの視認性を上げたり、より理解しやすくすることでCTAのクリック率を上げるために必要な要素となります。

アニメーション

アニメーションについては、「何かアクションしたときに動くもの」と「常に動いているもの」の2パターンがあります。

何かアクションしたときに動くものとして代表的なのは、マウスカーソルをボタンに合わせたときに動くもので、パソコン向けのWebサイトに実装されていることが多いです。

常に動いているものはスマートフォン向けのWebサイトに実装されていることが多く、流し読みしていても目に留まりやすいのが特徴です。

以下はLPでよく見かけるアニメーションの一例です。

動きがあることによってCTAの視認性が上がり行動を促しやすくなるので、利便性や与える印象、サイトの読み込み速度に悪影響を与えない範囲で設定しておくことをおすすめします。

デザイナーやコーダーに依頼をする際は、以下のようなアニメーションがまとまっているサイトなどを使ってイメージを共有するとスムーズです。

参考：ボタン | 動くWebデザインアイディア帳

思わずクリックしたくなるCTAを作るための3ステップ

ここからは、思わずクリックしたくなるようなCTAを作る方法を3つのステップに分けて具体的に紹介します。

STEP1：見込み顧客の不安や懸念を洗い出す

こちらが望んだアクションをしてもらうには、してほしいことを一方的に伝えるのではなく、消費者の不安や懸念を払拭することが大切になります。

例えば、リノベーションの資料申し込みを検討している人を見込み顧客と想定した場合、CTAをクリックする前の不安や懸念点としては「入力が面倒」「自分が欲しい情報を得られるか」「送料など費用がかからないか」「しつこく電話がかかってこないか」などが挙げられそうです。

STEP2：ラベリングとマイクロコピーを考える

次に顧客の心理状態を分析した内容を踏まえて、何をどういった優先順位で伝えるかを整理します。

伝えたい内容を考えるときはCTAの構成要素で説明した通り、それぞれの役割を果たせるように以下の点を意識しましょう。

＜意識すべきポイント＞

先ほどのリノベーションの資料申し込みを例に挙げると、伝えることは以下のようになります。

不安や懸念	伝えること
入力にどのくらい時間がかかるか	かんたん30秒で完了
自分が欲しい情報を得られるか	施工実績10,000件突破！リノベのヒントが満載の事例集
送料など費用がかからないか	無料で資料をもらう
しつこく営業されないか	しつこい営業電話は一切いたしません

何を伝えるかを書き出したら、それぞれの内容に優先順位を付けます。優先順位を考える時は、サイト上のゴールと見込み顧客のゴールのバランスが大切です。

この例の場合、サイト上のゴールは資料請求してもらうことなので、「無料で資料をもらう」が最優先になります。見込み顧客にとって重要な要素の順番としては、「自分が欲しい情報を得られるか」「入力にどのくらい時間がかかるか」「しつこく電話がかかってこないか」になりそうなので、以下のようにまとめます。

＜伝える内容の優先順位＞

STEP3：デザインやアニメーションを検討する

デザインやアニメーションを検討する際は、「見込み顧客にCTAを認識・理解してもらいやすいか？」を考慮する必要があります。具体的には以下のような点です。

考えなくても直感的にCTAの内容が伝わるようにする

アイコンを入れたり、実物がある商材なら商品画像を添えるなど、伝えたいことをビジュアライズすることで内容が伝わりやすくなります。

図解と同じように、関連した内容はできるだけ近接させると情報処理の負担が減ります。

他の要素と差別化して視認性を高める

CTAの周囲や背景がどんなデザインになっているかによって認識のしやすさは変わるため、ボタンの周囲に余白を確保したり、他の要素と被らない配色や形で作るのがおすすめです。

見込み顧客に合わせた見せ方を意識する

例えば、同じリノベーションのランディングページだったとしても、見込み顧客が変われば適切な見せ方も変わります。見込み顧客の目線を取り入れて、「どんな印象を持ってもらいたいか？」を考えて設計しましょう。

＜具体例＞

CTAの効果を最大化するために押さえておくべきポイント

ここまで、クリックしたくなるようなCTAを作る方法を紹介しました。ここからは、そのCTAの効果を最大化するために押さえておくべき4つのポイントを解説します。

見込み顧客のモチベーションを踏まえて設置場所と数を決める

CTAはファーストビュー、コンテンツの合間、最下部に「なんとなく」で設置されがちです。しかし、そのランディングページで「誰に・何を・どのように伝えたいのか」によって、適切なCTAの位置と数は異なります。

例えば、まだ商材の必要性に気づいていない潜在層に向けた記事LP(記事型のランディングページ)の場合、ファーストビューにCTAがあったとしても、まだモチベーションがない状態なのでスルーされてしまいます。

逆に、似た商材を比較検討している顕在層に向けた通常LP（メインとなる商品LP）の場合は、ファーストビューにCTAがあった方がスムーズにゴールへたどり着けるので設置すべきだと考えられます。

CTAはあくまで見込み顧客が行動を起こすきっかけを作り、コンバージョンへの最後の一押しをすることが目的なので、「どんなモチベーションで流入するのか？」「どのタイミングで態度変容が起きそうか？」という点を意識して設置場所と数を決めましょう。

追従型・ポップアップ型のCTAは使い方に注意する

CTAには画面の上下左右いずれかに固定表示させる追従形式や、ポップアップとして表示する形式もあります。

追従形式の場合、見込み顧客が押したいタイミングでいつでも押せるようになるので、クリックしてもらいやすくなります。

ポップアップの場合は一定量スクロールしたり、一定時間滞在した時に表示することで追従形式と同じ効果を期待できます。さらに、ページを離脱しようとしたときに表示することも可能なので「キャンペーンは今月まで」など、今すぐ行動すべき理由を提示することで行動を促せます。

ただし、コンテンツ内に設置する場合と同様に、まだモチベーションが高まっていない状態で表示してしまうと閲覧の邪魔になってしまい、離脱を生む可能性もあるため注意して下さい。

追従型CTAのみのランディングページも存在しますが、背景と同化していたり、最初から表示されていることで目に馴染んでしまい見落とされることも少なくありません。追従型CTAを設置していたとしても、コンテンツ内にCTAは入れることをおすすめします。

ゴールが異なる複数のCTAの設置は慎重に検討する

基本的に、ランディングページ内には同じゴールのCTAのみ設置するのがおすすめです。

たとえば「フェア予約」「オンライン相談」「資料請求」「お問い合わせ」など選択肢が複数あると、検討するためにページを離脱してしまったり、コンバージョンのハードルが低いCTAにクリックが集中して、CTAが一つの時よりもより重要度の高いコンバージョンの数が減ってしまう可能性があるためです。

しかしながら、高単価な商材やBtoB商材などコンバージョンのハードルが高い場合は、検討段階の見込み客を取りこぼさないために、複数のCTAを設置したいというケースもあるかと思います。その場合は、より重要度の高いCTAを目立つデザインにするなど、工夫しましょう。

A/Bテストで改善し続ける

CTAは設置して終わりではありません。まずはGA4などのWeb解析ツールやLPO(ランディングページ最適化）ツールを導入し、どのCTAがどのくらいクリックされているのか、コンバージョンに繋がっているかを確認できる環境を整えておく必要があります。

そして、ランディングページ内で最も重要度の高いファーストビューの検証がひと段落した時点で、全体の成果が目標値に達していなかったり、他の見せ方にすることで改善する見込みがある場合はA/Bテストを実施しましょう。

まとめ

CTAはコピーやデザイン、設置場所、他要素とどれだけ差別化できているかなど、複数の要素によって成果が左右されます。

定番のCTAにとらわれず、ランディングページに流入した見込み顧客が何を望んでいて、どのタイミングでどんな情報を伝えるべきなのか？という仮説を持ったCTAを作って、PDCAを回すことが重要です。

以下の記事ではランディングページ全体の成果を改善するためのポイントについて解説しているので、CTA以外の改善にも取り組みたい方はぜひご一読下さい。

ランディングページを改善するために、最低限押さえておきたい5つのポイント