Web制作の現場に立つと、CTAという言葉を耳にする機会があるかもしれません。
まずCTAというのは、「Call to Avtion」の略で、行動喚起という意味を持ちます。転じて、Web閲覧者にしてほしい行動を促す文章、画像、ボタンのことを指す言葉となっています。
このCTAがしっかりしていないと、サイト目的の達成、コンバージョンになかなか結び付かない結果となってしまいます。逆にCTAの質が高ければ、より高いコンバージョン率を成果に上げられるでしょう。
しかし、CTAという言葉は、単体で聞くものではないのではないでしょうか。つまり、大抵はCTAボタン、という、ボタンとセットになる言葉なのでは、ということです。
これはWebという仕組みの上で、とても大きな重要度がCTAボタンにあるためです。
そのため、今回はCTAボタンのデザインについて、BtoBを基礎とした視点から説明していきたいと思います。
以下が、CTAボタンのデザインの要点です
・ボタンの設置場所
・ボタンのデザイン
・ボタンのテキスト
一つ一つ説明していきます。
目次
CTAボタンの設置場所として、理解しておくべき点は二つあります。
・ファーストビューに設置してあるか
・押したくなったときにすぐ押せる設置場所になっているか
まず、ファーストビューについて説明します。
ファーストビューとは、「Webページを開いたとき、閲覧者が初めて見る画面」のことです。
CTAボタンの定石として、必ずここに設置する、というものがあります。また、ここでなら「資料請求をする」「トライアルを申請する」など二種類配置するのもいいでしょう。
何故ここに必ず設置するのか、といえば、やはりWebページにおいて、ファーストビューが非常に高い重要度を持つためです。
具体的に言えば、Webページはどれだけ長いものになろうと、ファーストビューがその重要度の7割を占めると言います。何故かといえば、Webページの閲覧者は7割がファーストビューで離脱している、というデータがあるためです。
それは興味がないのに間違って開いてしまった閲覧者がいるだけでは？ という指摘もあることでしょう。確かにそういう閲覧者がいないとは言いません。
ですが「最初から申し込む気満々だったのに、ボタンが見つからず離脱してしまった」という閲覧者は、その内どれだけ居るでしょうか。これはファーストビューにCTAボタンを設置していないと起こりうる、非常にもったいない事例です。
他にも、イメージが違うからそのまま離脱してしまった、という閲覧者も、CTAボタンを設置することで、ボタンの敷居が低ければ取りこぼさずに済むかもしれません。そうして顧客として抱えた先に、「あのときボタンを押してよかった」という声を聞く可能性もあります。
このように、Webページの閲覧者全員が目にするファーストビューだからこそ、ここにCTAボタンを設置するのは定石であり最重要項目と言えます。
次に重要なのは、CTAボタンがすぐに押せる設置場所になっているかどうかです。ここがしっかりしていないと、「申し込みしたくなったけど、ボタンが見つからなかったからやめておこう」と閲覧者にもWeb運営側にも良くない結果をもたらすことになります。
しかし、「押したくなったとき」とは一体何なのか、という問題があります。これを解決するCTAボタンの設置方法は、大まかに二つあります。
一つは、スクロール位置に追従して移動するCTAボタンです。
これは「押したくなったとき」を拡大解釈した、それこそ「いつでも」押せるCTAボタンと言えるでしょう。大抵左右のどちらか、縦に細長く上下する形で追従するボタンとなります。
この追従型ボタンのいいところは、やはり「閲覧者を迷わせない」という事でしょう。押したいときに１秒で押せる、というのは非常にストレスフリーです。
ただそれだけに、ボタンそのものの自己主張にまつわる難しさがついて回るのが度メリットと言えそうです。自己主張が激しければ、目にうるさく感じてしまい、離脱を助長します。かといって自己主張が弱ければ、デザインがCTAボタンを押すきっかけになれないかもしれません。
もう一つは、要所要所でCTAボタンを設置するです。
画像、文章などのコンテンツがひと段落する度に、「お申し込みはこちらから！」という風に設置してあれば、まさに「押したいとき」に押せる設置と言えるでしょう。
この要所要所設置型ボタンのいいところは、アクセントやアイキャッチとしての役割も果たしますので、存在感がある点です。追従型と違って目にうるさくともスクロールすれば見えなくなるので、アピールもしやすいです。
ただし難しい点としては、やはり頻度とタイミングがあるでしょう。CTAボタンを多く近い箇所に詰め込み過ぎると、閲覧者を混乱させてしまう要素になりかねません。
一方で少なすぎれば、やはり閲覧者の混乱を招きます。「申し込みたいのにどこから押せばいいのか分からない」と閲覧者はWebページで右往左往し、最後には離脱してしまうのです。
この通り、「追従型」にも「要所設置型」にも異なる長所短所、難しさがあるため、専門家に依頼した上で適切に使い分けて使用するのがよいでしょう。
ここで解説するボタンのデザインとは、「どんな色であるか」「どんな大きさであるか」という点について着目して説明します。
まず色ですが、BtoBにおいては青を始めとした沈静色が多く使用されます。
これは色について回るイメージの問題で、BtoBで求められるイメージは何か。そのイメージを持つ色は何か。という形で沈静色が使用される、という文脈が存在します。
詳しく説明します。BtoBでは、基本的に本能的に魅力を伝える「シズル感」といった要素は効果を持ちません。何故なら、クライアント企業内では正式な申し込み前に稟議が行われ、そこで論理的に他社よりも優れているとい判断される必要があるためです。
ですが唯一、情緒面に訴えうる要素があります。それが「安心感、信頼感」とされるものです。
BtoB製品は、概して高額になりがちです。数十万から数百万といった費用の掛かる案件を、安心して任せられない企業に依頼することは出来ません。
そこで、安心感のある企業、信頼できる企業が優先して依頼される、という事になるのです。ですが、安心感や信頼感というものは、実績などもありますが、やはり人間の感情で、もっというならイメージに分類される要素です。
そういったイメージの演出として使用されるのが、青などの沈静色で、この沈静色によって「この企業は信頼して任せられそうだ」と感じられる訳なのです。
ボタンの大きさを考えるときに重要なのは、デザインというよりは、デバイスごとの設計です。
BtoBのWebページは、PCだけで閲覧するものではありません。通勤中にスマートフォンで、というパターンも十分に想定できます。
そんなとき、PCとスマートフォンで同じサイズのボタンを配置する訳にはいきません。もしPCのものが大きすぎて、それがそのままスマートフォンに表示されたら、画面を覆い尽くすようなことにもなりかねないでしょう。
上記のような極端な例でなくとも、PCでクリックしやすいサイズと、スマートフォンでタップしやすいサイズは異なるものです。閲覧者の媒体デバイスに合わせた配慮が必要です。
ボタンのテキストについて重要なのは、以下の2点です。
・シンプルか
・ユーザーの行動を促す内容か
まずシンプルかどうかについて。
CTAボタンのテキストはシンプルである必要があります。何故なら、「このボタンは何のボタンなのか」が短時間ではっきり分からないと、閲覧者の混乱、ひいては離脱を誘発するためです。
例えばお試し申請が出来るCTAボタンなら「トライアルはこちら」といった言葉で端的に表すべきです。「○○の初月無料申し込み所」などと書くと、複雑ですしトライアルなのか違うのかが判然としません。そうなると心理的抵抗感が生まれて、離脱してしまう訳です。
次に行動を促す内容かについて。
こちらは、行動を意識できる文言を加えるべき、という点と、敷居の低い内容にすべきである、という二つの要点を含んでいます。
まず行動を意識する文言ですが「トライアル」と「トライアルはこちら」だとやはり後者の方がクリックしやすいのではないでしょうか。
それは、前者に比べて後者には「ここをクリックするとトライアルの申し込みが出来ますよ」ということが意味合いに含まれているからです。細かな差ですが、おススメの方法です。
そして敷居の低い内容にすべき、という点についてはいきなり「契約はこちら」と書くと敷居が高すぎて尻込みしてしまいますが、「トライアルはこちら」「資料請求はこちら」と書かれていると、まだ金銭の発生する段階ではないので、心理的に気楽にお申し込みが出来る、という事です。
具体的にBtoBサイトで使用されているCTAボタンのテキストは、以下の通りです。
・資料請求
・トライアル
・お問い合わせ
以上の三つが、もっともポピュラーなCTAボタンテキストでしょう。
今回、CTAボタンのデザインについて、以下の３点から説明しました。
・ボタンの設置場所
・ボタンのデザイン
・ボタンのテキスト
ボタンの設置場所は、まずファーストビューに、次に要所設置か追従型かお好きな方を、と説明しました。
次にボタンのデザインでは、色と大きさについて説明しました。色は沈静色だと安心感がBtoBで効果を持つためおススメで、大きさはデバイスに合わせて設計するのが良いという話をしました。
最後にテキストは、シンプルかつ行動につながるようにすべき、とお話しました。行動につながるためには、行動を意識した「～はこちら」などの言葉を付け加えたり、「契約」など敷居の高い言葉ではなく「トライアル」「資料請求」など敷居の低い言葉を使うべき、と解説しました。
以上が、CTAボタンのデザインのポイントとなります。Web制作事業に携わる場合は、是非ご活用いただければ幸いです。