CTAボタンのデザイン、色、位置を決めるポイント

運営しているWebサイトのコンバージョン率が低い、成果につながらないといった悩みがある場合、導線が不十分である可能性が高いです。そう、いわゆるCTAボタンが影響しているかもしれません。漠然と配置しているだけでは、ナビゲーションの機能は果たせていないでしょう。ゆえに改善点として見直してみることが大切です。
CTAボタンは、サイトにアクセスしてくれたユーザーの行動喚起を促す役目として大事な要素となります。
本記事では、CTAボタンのデザイン・色・位置をどのように設定すればコンバージョンにつながるかを考察。
具体的にポイントを挙げ、解説いたします。

CTAとは？

そもそもCTAとは何か。言葉自体は、“Call To Action”の頭文字をとった略語になります。意味はまさに行動を呼び起こすこと。すなわちWebサイト上で訪問者を目的のページ（取引）へ導く働きです。

主に購買や請求、問い合わせなどのボタンで使われます。売上に直結するものとして扱うときもあれば、まずは愛着度を高めてもらうためにブログ記事ページなどに設けるケースもあります。前者はプライマリCTA、後者はセカンダリCTAなどと呼ばれ、一の矢で仕留められれば万歳とはいえ、二の矢を使い興味・関心を引きつけることが定石です。ユーザーをロイヤルカスタマー（企業や商品、サービスに対して忠誠心の高い顧客）へと育成する場合も有効に作用するマーケティング手法のため、戦略上必須といっても過言ではありません。

CTAの重要性とコンバージョンとの関係性

CTAの基本や役割をおさえたうえで、さらに理解しておきたいのがその重要性。設定したゴールへと導くこと、すなわちコンバージョンにつながるものであるがゆえ、収益を左右するものです。
本章では、CTAボタンがいかにサイト設計で大事なものなのか、コンバージョンとの関係性や成果向上のヒントを交えて説明します。

コンバージョン数の向上

Webサイトは、必ずしもすべてのページにCTAが用意されているとは限りません。確かに、コンセプトやテースト（味わい）によっては不要の向きがあるのもわかります。
しかし、一方でビジネスチャンスを逃しかねません。ユーザーは、ときに予想し難い動きでコンバージョンします。
また、ページ内においても、視認漏れは極力防ぐ工夫が必要です。そこを怠ってしまうと、思いのほか、コンバージョン数が伸びないといった事態に陥るかもしれません。
仮に、グローバルナビゲーションやサイドバーに「お問い合わせ」「資料請求」「購入フォーム」といったリンクがあったとしても、訪問者が認識しないまま離脱する可能性は大いにあるといえるでしょう。だからこそ、各コンテンツの下部などにもあらためてコンバージョンポイントに該当するCTAを用意した方が良いと考えます。もしくは先述したセカンダリCTAの設置もおすすめです。

たとえユーザーがすぐに購入や申し込みに至らなかったとしても、CTAボタンを押されていたという事実が残れば、少なからず前向きな顧客であることは分かります。したがって、その数を見込み客としてカウントできるのです。CTAの成果云々は、サイト全体の目標における検証・分析にも役立つことでしょう。

いずれにせよ、コンバージョン数を向上させたいなら、CTAボタンを適切に配置することが欠かせないわけです。

ユーザーから嫌われるリスク

CTAボタンが正しく機能していないWebサイトだと、せっかく訪れたユーザーを手離してしまうリスクがあります。たとえば、「見つかりにくい、押せるかわからない、クリックしても目的のページにたどり着かない」といった印象を抱かれると、そのボタン一つのせいでサイト自体が敬遠され、二度とアクセスされないことにもなりかねません。リピーターを増やすためにも、CTAボタンに不備は無いか折に触れシミュレーションすることを推奨します。

CTAのヒント

「コンバージョンを増やすための効果的なCTAボタンにするといっても、何から手を付ければよいのかわからない」。
そうした方々は決して少なくないと思います。該当する読者へ伝えたいのは、自分自身の行動パターンを分析することの必要性です。特に意識せずやってきた様々なサイト内での行動を振り返ってみてください。明確な理由があってサイトへアクセスすると思うのですが、そこで起こすアクションは能動的なものばかりでなく、自然と案内されていることだってあるはずです。おそらく、その入り口になっているボタンはすぐに目につく、ふと気になるといった要素が含まれていませんか。
これこそ貴重なヒントになり得ます。大体、ファーストビューに置かれているものです。つまりこの場合「位置」が影響しているわけですね。
そのほか、デザイン、色、ラベリング、マイクロコピーあたりがフックとなって我々は誘導されているといえます。

CTAボタンの役割

よくあるケース、役割を簡単に紹介します。

• 申し込みや問い合わせフォームへの誘導
• 資料請求ページへの誘導
• 商品詳細などのサービスページへの誘導
• 特集記事、特定コンテンツページへの誘導
• 外部メディア（LP、広告等）から自社サイトへの誘導

CTAボタンのデザインを決めるポイント

さてここからは、具体的に各要素について言及していきます。
本章はデザインについてのポイントです。

カスタマージャーニーを取り入れる

ユーザーがサイトへ訪れる目的を解像度高く把握できるとしたら、デザイン設計についてある程度絞り込むことができると思います。そこでおすすめしたいのはカスタマージャーニーを取り入れてみることです。ペルソナの行動・思考・感情を整理し、割り当てたステージに対して訴求方法を変えたアプローチができれば、コンバージョンへの期待は高まるでしょう。実際、パーソナライズされたCTAボタンは、一般的なボタンよりコンバージョン率が高まったという調査結果もあります。

（関連記事）
カスタマージャーニーとは？基本的な作り方をわかりやすく解説

認識ステージのユーザーに向けたCTA

前述したステージは3つ。それぞれ認識・検討・決定です。
その一つ、認識ステージにいるユーザーは、何らかのきっかけでWebサイトを訪問してみたものの、まだサービス利用の検討も決定もしていません。しかし、何の印象も残せないまま離脱されてしまうと、以降も顧客になってもらえるチャンスを逃してしまいます。
となればここで訴求すべきは何か。たとえば、お得感はいかがでしょう。有益な情報を明確にユーザーへ示すのです。具体的には無料で登録できるメルマガや会員案内をCTAボタンとし、“無料”を強調するというのがセオリーでもあり一定数気を引くことができると考えます。

検討ステージのユーザーに向けたCTA

検討ステージにいるユーザーは、問題を解決するための方法を求めています。そのため、サイトが提供すべきなのは専門的なコンテンツです。たとえば、個別で相談に乗れるようなサービスがあると、ユーザーの興味・関心を引きやすいでしょう。この場合、CTAボタンに設定するのは、問い合わせページがふさわしいと考えますが、実績や事例ページにしてみるのも有効かもしれません。前者はラベリングに一工夫。「お問い合わせ」だけの文言だと淡白に映る、もしくはそもそも視界に入らない可能性があります。一例ですが、「お悩み、相談はこちら」のようにユーザー心理を重ねてみてはどうでしょう。
他方、後者ですが「実績」「事例」を際立たせたデザインを推奨します。

決定ステージのユーザーに向けたCTA

決定ステージにいるユーザーは、最終的な決断を下す段階にあります。
購入や申し込みを後押しする一手は何か。シンプルに購入ボタンを大きく打ち出すことも効果的だと思います。強引に誘導することに後ろめたさを感じてはいけません。強く背中を押すことは迷うユーザーのためにもなります。
また、訴求すべきは価格か商品かという問題も考えるべきポイントです。ここでの選択はしっかり見極めないといけないでしょう。前者はお得感を打ち出すラベリングとデザイン、後者は「お客様の声」と称し、レビューページへ案内するのが適切に思います。
ちなみに、一部のデータでは、なんだかんだいって強引に購入ページへ誘導させる方法が一番結果につながっているようです。

CTAボタンの色を決めるポイント

続いて、色について言及します。
まさに市井の人々の食指を動かす最適解は、果たして存在するのでしょうか。

絶対的正解は無い？

CTAボタンの色を変えることで、コンバージョンにも差があったという声を聞くことがあります。しかし、何色なら確実にコンバージョンが上昇するといった普遍的答えにたどり着いた顕著な例は、いまだ出ていないはずです。つまりは臨機応変に対策を練ることが肝要になります。一般的には補色、反対色で違和感を作ってあげることがCTAボタンを有効化するといわれていますが、サイトによってはそうならないケースもあるようです。したがって、色の違いで成果を出したいなら、「解無し」の結論も念頭に置きながら、繰り返しABテストを行い検討することを推奨します。

三原色のイメージを把握する

色の基本についてはきちんとおさえておく必要があります。
なかでも三原色のイメージは、把握しておくと活用できると考えます。
まず、赤系はセールや問題解決をイメージしやすい色です。巷の広告など見ても大方このセオリーに当てはまっています。ということで、商品やサービスのキャンペーンには赤色系統が無難です。
緑系は、環境・公的サービス・教育・健康分野でよく使われています。安全・安心といった印象を持たれやすい色です。
青系は、一般的に信頼感や爽やかさのイメージがあるといわれています。クールな印象を持つ人も多く、ビジネス的なコンテンツにブルー系が用いられることも少なくないです。CTAボタンで使うにはやや躊躇するところですが、周辺の組み合わせ次第ではうまく生きることがあるかもしれません。

ページ全体で配色を意識する

CTAボタンの色を選択する際、ページ全体で色の配分に気を付ける必要があります。基本、差し色を使うことが多いです。そう、アクセントカラー。会社のロゴにも採用される象徴的なメインカラーに対して、補色関係のアクセントカラーはページ内で目立ちやすいといえるでしょう。が、あくまでセオリー。配置や他のボタンとの兼ね合いによってはうまく引き立たないこともあります。柔軟に対応するようにしましょう。

CTAボタンの位置を決めるポイント

ユーザーの視界に入れるため、位置もしっかり考えていかなければなりません。

視線の流れを考慮する

一般的に、人がWebサイトを閲覧するときはアルファベットのZを書くときのように左上から右上に進み、次に左下、右下の順に視線が動くといわれています。そう考えると、左上にどかんと置くことで、鮮明なファーストインプレッションをもたらせるかもしれません。
まずは何よりインパクト。もちろん、見落とされないよう他の要素も強化しておく必要はあります。

サイトの随所に登場させる

コンテンツ量が膨大なページでは特に顕著ですが、下部にのみCTAボタンが置かれるとユーザーに認識してもらえない可能性があります。要するに、そこへたどり着く前にサイトから離脱されてしまうというわけです。
防止策として、入り口となるランディングページ全てを対象に、スクロールしなくても自然と目に入る位置には必ずCTAボタンを設置することをおすすめします。加えて、ページの途中にも違和感なく差し込むことが大事です。
もちろん、CTAボタン自体に動きをつけることも有効ですが、時と場合によっては、かえってサイト閲覧の邪魔になるリスクもあるため注意しましょう。
ユーザーが最下部までコンテンツをスクロールする割合は、ページの縦の長さにもよりますが、ほとんど半分以下と考えてください。他方、コンテンツをじっくり見るユーザーも当然考慮すべきなので、サイト下部には確実に置きたいですね。

惹きつける文言もしっかり意識しよう

一般的に、CTAボタンにはラベリングと呼ばれるテキストが挿入されています。一方でボタン周辺にはマイクロコピーと呼ばれる補足の文章が配置されていることが多く、2つの文言がいわばキャッチとなってユーザーを誘導します。ただし、ラベリングとマイクロコピーの目的はそれぞれ異なるため注意が必要です。

ラベリング

ラベリングには、ボタンを押すとどうなるかをユーザーに想起させる働きがあります。そのため、挿入するテキストは具体的かつ簡略にすることが大切です。そのため、「会員登録する」のように、どこへつながるボタンなのかをしっかり伝えるようにしてください。
他方、時々「ここをクリック」だけの表示をみかけることがあります。お察しの通り、このラベリングだと漠然としていて、なかなか押そうとは思えないのではないでしょうか。

マイクロコピー

マイクロコピーは先述のごとく、ラベリングをフォローし案内する役割があります。
時に、ユーザーがクリックするハードルを下げてくれるなど、その貢献度は地味に高いです（笑）。ポイントはきちんとメリットを打ち出すこと。たとえば、「会員登録する」のラベリングに対して「たった30秒で完了」と補足する文言があれば、ユーザーはすんなりとクリックしてくれるかもしれません。また、特典が付くことを伝えても同様の効果をもたらすでしょう。マイクロコピーのポテンシャルをいかに発揮させるか、強く意識してみてください。

CTAボタンの改善を実践しよう

CTAボタンは、デザイン・色・配置を変えるだけでコンバージョンや成果に少なからず影響を与えるものと、あらためて考えます。
色々と試す機会があれば、ぜひ拙稿を参考にしてもらえると幸いです。ここで紹介した知識や情報、アイデアはいずれも簡単に実践できますよ。
コンテンツの充実度だけでなく、CTAボタンによって事態が好転する可能性は大いにあります。
さあ、うまくユーザーを案内してあげてください。