TIPS 2020.2.25

収益につながる！LPやWebサイトのCTAボタンの正しい設定方法をご紹介

ランディングページ（LP）やECサイト、サービスサイト、コーポレートサイトなど、どんなWebサイトでも、最終的な目標は「ユーザーに興味を持ってもらい、商品やサービスへの収益につなげる」ことになるはずです。Webデザインを行う際は、どうすれば制作したWebサイトが収益につながるかを考える必要があります。

Webサイトを閲覧しているユーザーに対して、コンバージョンを促すのが「CTA(Call To Action)」ボタンです。分析をもとにちょっとしたCTAボタンの改善を行うだけで、Webサイトのコンバージョン効果が大きく高まる可能性もあります。

結果につながるCTAボタンとは何かを理解しておけば、Webデザインの際大いに役立つでしょう。

今回は成果の出るWebサイトを作りたい方向けにCTAボタンとは何か、そしてその重要性や正しい設定方法のポイントなどをご紹介していきます。

CTAボタンとは

CTAボタンとは、「Webサイトユーザーへコンバージョンに関係するアクションを取ってもらうよう促すボタン」を指します。たとえば

・オウンドメディア記事終了直後の「無料でメール会員になる」ボタン
・アフィリエイトサイト下部にある「（商品名）を購入する」ボタン
・予約サイトファーストビューにある「予約を行う」ボタンなど、さまざまなCTAボタンが存在します。

CTAボタンはなぜ重要なのか

どのようなWebサイトでも、「ターゲットユーザーはまだ商品やサービスに対する熱意が低いのでまずはメールでフォローしたい」、「ターゲットユーザーはすでに商品やサービスに対して熱意が高いので利用に直接つなげたい」など何かしらのコンバージョン目標があるはずです。

コンバージョン目標を達成するには、ユーザーにWebサイト内でアクションしてもらわないといけません。その際コンバージョンにつながるアクションが発生するかどうかは、CTAボタンに掛かっています。

極端な話CTAボタンがターゲットユーザーの要望にそぐわない内容であったり、目立たないとまったくクリック・タップされない可能性もあります。

しかしながら意外と、WebデザインではCTAボタンが意識されないケースも多いです。CTAボタンの重要性を知らないでWebデザインを行ってしまうと、Webデザインに同化してしまうようなCTAボタンを作ってコンバージョン率を下げてしまうなどよくないことが起こる危険性があります。

CTAボタンの正しい設定方法

ここからは、CTAボタンの正しい設定方法についてご紹介していきます。

・アクション内容を簡潔に説明する
・興味を引くデザインにする
・設置個所を工夫する

アクション内容を簡潔に説明し、興味を引く

Webサイトのユーザーは、あいまいな部分を嫌います。つまりCTAボタンを押すと何が起こるのか分からない場合は、大きくコンバージョン率が下がる可能性があります。

たとえば「会員登録」とだけ書いてあるCTAボタンは、無料登録か有料登録か分からずクリック・タップをためらうユーザーが増えます。また「クリック」だけだとそもそも何が起こるか分からず、「有害なWebサイトへアクセスさせようとしているのではないか」という疑念も発生してしまうかもしれません。

まずはCTAボタンのアクション内容を簡潔に説明してユーザーの興味を引き、アクションを促しましょう。

たとえば「30日間無料！会員登録を行う」とすれば30日間はお金が掛からないことが明白になり、クリック・タップへのハードルを下げられます。また「クリックして今すぐ購入」のCTAボタンの上に「今なら20％OFFキャンペーン実施中！」といった吹き出しを用意すれば、購入ページへのアクセスボタンだと分かる上にお得感が出るので、クリック・タップしてくれるユーザーが増えやすくなります。

CTAボタン内のコピーを「ラベリング」、周辺にある関連コピーを「マイクロコピー」と呼びますが、CTAボタン作成の際はラベリングとマイクロコピーを工夫しユーザーの興味を引けるフレーズを設定しましょう。

興味を引くデザインにする

CTAボタンのクリック・タップ率を高めるためには、デザインも重要です。

Webサイトの統一感を重んじるあまり、CTAボタンを目立たないようにデザインするのは本末転倒です。Webサイト内のCTAボタンはアクセントカラーと同じに捉え、Webサイトに対して目立つ色でデザインしましょう。

たとえば暖色系のデザインならば青や黒などの寒色系のデザイン、寒色系のデザインならば赤やオレンジなどの暖色系デザインのCTAボタンが映えやすくなります。

また、CTAボタンの形も重要です。

・四角形のCTAボタン・・・シャープな印象を与える
・角丸のCTAボタン・・・角がないので、親しみやすい印象を与える
・正円型のCTAボタン・・・丸っこく、ポップな印象を与える

と効果が変わってくるので、CTAボタンを設置するWebサイトのテーマなどに合わせて適切なボタンを選びましょう。

さらに、ボタンの大きさにも注意しましょう。

あまりにもこじんまりしているとボタンと分かりにくく、ユーザビリティも低くなります。押しやすく目立ちやすいよう、目障りにならない程度に大きく制作するのがコツです。

ユーザーがボタンと認識しやすいよう、陰影をつけたりして立体感を出すのもポイントです。

設置個所を工夫する

CTAボタンのコンバージョン効果を最大化するには、設置個所にも気を配っておきましょう。

「CTAボタンはWebサイト下部に置くものだ」と考え、下に一つだけ設置する方も多いです。しかしCTAボタンを下に一つ設置する方法が、最善の方法とは限りません。

たとえば最初から認知度の高い商品やサービスはユーザーの熱意がすでに高まっているので、ファーストビュー付近にCTAボタンを設置しても効果が出る場合があります。またLPの中には、コンテンツの区切りごとに都度CTAボタンを設置しているものもあります。

またユーザーのコンテンツ閲覧の邪魔にならない箇所にCTAボタンを固定して、すぐアクションが取れるよう工夫しているWebサイトもあります。

CTAボタンに、正解はありません。効果のありそうな場所に設置した後は、分析ツールで改善を行いながら一番効果の出る場所を探す必要があります。

ただしコンバージョンが異なるCTAボタンを、同じWebページ内に複数置くのはあまりおすすめできません。どんなアクションを取ればよいか、ユーザーが混乱してしまう可能性があるからです。

どうしてもCTAボタンを複数置きたい場合は優先順位を考え、一番目立たせたいものは派手に、それ以降のものは少し落ち着いたデザインにするなどして差別化しましょう。

まとめ

今回はCTAボタンとは何か、そして重要性や正しい設定方法をご紹介してきました。

コピーやデザイン、設置個所を工夫してCTAボタンを目立たせるだけで、大きなコンバージョン効果が見込めます。せっかく制作したWebサイトデザインがいくらすばらしくても、成果につながらなければ意味がありません。CTAボタンをクリック・タップしてもらい設定にしてユーザビリティを高めれば、SEOにもよい効果をもたらします。