CTA

この記事では、サイトに来訪した人たちをコンバージョンするための起点となるコンテンツのひとつ、Calls To Action(CTA)についてお伝えします。クリックしてもらえる魅力的なCTAを作るには、どのようにすればよいでしょうか。

CTAとは?

CTAという言葉をあまり聞いたことがない方もいるかもしれません。CTAとはCalls To Actionの略で、「あなたのウェブサイトを訪問したビジター、リード、顧客に対して特定のアクションを促すイメージ像やインラインテキストなどを含めたクリッカブル(クリック可能)なコンテンツ」のことです。

例えば、このブログにもサイドカラムに「Eメール購読」という目的を持ったCTAが設置されています。また、このブログの下部にも「インバウンドマーケティングに関するEbookをダウンロードできるランディングページへ誘導」という目的を持ったCTAが設置されています。

スクリーンショット_2015-05-01_14_59_07

なぜ行動喚起を行うCTAが必要なのでしょうか。一般的にウェブサイトは製品サービスをカタログのように紹介するショウケース的な存在ではありません(そういったケースもありますが)。ウェブサイトは、マーケティング活動を行う上での1チャネルとなることが多いため、ウェブサイトの訪問者に自然な形で顧客になってもらうための行動喚起の仕組みが必要です。その仕組みの一環としてCTAのようなクリッカブルのコンテンツを用いることがあります。

アクションによって生まれたメリットを明確にするCTAを設置することは(明確なターゲットに対してマーケティングキャンペーンが行われていることが前提としてありますが)、マーケティングゴールを達成するための手助けとなり、よりよいコンバージョン率(CTRなど)が計測できればさらなる助けになります。

魅力的でコンバージョン率が高いCTAには共通点があります(前提としてターゲットオーディエンスに関係性のあるコンテンツであることが必須です)。

  • 視線が集まるデザイン
  • アクションを明確化したコピー文
  • アクションを取ることで得られるメリットが明確
  • クリックできる箇所が明確

などがあると言われています。

Thinking about the CTA from ★Jose L. Giraldez

上記スライドには様々なCTAが集められています。スライド12枚目(下記画像)では、ファネルごと(TOFU、MOFU、BOFU)に魅力的と考えられるコンテンツを無料利用してもらい、購買のファネルを進んでもらうための行動喚起を促すCTAが多く紹介されています。

名称未設定

その他によくあるCTAのタイプには、

  • カートへ追加するためのCTA
  • 無料ダウンロード用のCTA
  • 無料トライアル用のCTA
  • サインアップを促す購読タイプのCTA
  • 「続きはこちら」のような学習を促す目的のCTA

などがあります

次に、よくあるCTAの具体例と実際に製作する際に気をつけるべきポイントを紹介します。

美しいCTAの具体例3つ

MakeLeaps – トライアルタイプのCTAに注目

クラウドの見積・納品・請求書を作成・管理・郵送するサービスを提供しており、ウェブサイトのトップページに「今すぐ無料で試す」と明確に示されたCTAが設置されています。

image2

良い点:

  • アクションを促すコピー文章:無料でサービスを試すことがわかるCTAを設置していて、メリットが非常に明確。
  • イメージ画像:PCの画像と実際のサービス画像を組み合わせており、製品サービスのことを明確にわからない人でもどのようなサービスなのかをイメージしやすくデザインされている。


Evernote – サインアップタイプのCTAに注目

Evernoteは、ノートをとるように情報を蓄積することのできるサービスで、パソコンやスマートフォン、タブレットに対応しドキュメントやメモ書きを管理整頓することができます。サイトのトップページにサインアップを促すCTAが設置されています。

image3

良い点:

  • ターゲットが明確:上記画像では20代前半くらいと思われる男性が画像として用いられていますが、この画像はスライダーで自動的に切り変わり、同社がターゲットとしている性別と年齢層と彼らの利用しそうな方法(上記アジア系の男性では、家具の配置を考えている想定のようです)が非常に明確にイメージできる(こちらから確認可能)。
  • イメージ画像:上記MakeLeapsと同様に、PCの画像と実際のサービス画像を組み合わせていて、製品・サービスのことがイメージしやすいデザイン。


pardot –
デモタイプ、ダウンロードタイプ、学習を促すタイプのCTAに注目

pardotはセールスフォースが扱うB2B向けマーケティングオートメーションのツールで一般的な消費者には馴染みがないかもしれません。また、自身で学習を進めないと適切に利用することが難しい製品です。そのため、学習を促すタイプのCTAやデモを試すなどのCTAがたくさん設置されています。

image4

良い点:

  • CTA(コンテンツ)が豊富:学習やデモなどを促すCTAを多く設置し、サービスに対する理解度を高めるための教育的なCTAに注力している。
  • アクションを促すコピー文章:
    REQUEST A DEMO(デモをリクエストする)
    TAKE A GUIDED TOUR(ガイドツアーを始める)
    DOWNLOAD NOW(今すぐダウンロードする)
    などアクショナブルで明確なコピー文章。

これらの素晴らしいCTAを用いた事例に共通する点はどういったもので、どうしてクリックを促されるのでしょうか。

CTAのクリックを促すためにオススメする3つの方法

1. 空っぽのスペースを活用する

訪問者の注意を引くために文章やイメージ画像、色彩に至るまでありとあらゆる要素を詰め込んだCTAを見かけることがよくあります。実は、そういったCTAに対してネガティブな印象を持つ人は多く、本来探している情報へ到達してもらうためのハードルとなります。

先の事例のすべてがスペースをつくることを実践しています。CTAの内外に適切な無地のスペースが確保されるようにしましょう。オススメの方法としては、

  1. ボタンの周りにスペースを必ず確保する
  2. 空っぽのスペースを使う際には“三分割法”や、黄金比などを利用する
  3. 白いスペースでボタンを際立たせる色、サイズに注意!

CTAのサイズも非常に重要で、ボタンが大きすぎると周りのコンテンツの存在感を圧倒しすぎてしまいます。一方で小さすぎるボタンは他のコンテンツに圧倒されすぎるために大きさに気を使うことは非常に重要です。

2. CTAの色

色彩も重要で一般的に緑のボタンが一番クリック率がよいとは言われていますが、すべてに言えることではありません。ボタンのサイズが色彩に影響を与えますので、小さいボタンであれば明るい色合い、また周りが白地であれば極端に明るい色にする必要もありません。オススメの方法として、

  • 最優先のボタンを一番大きいCTAとして設置する
  • 特に小さいCTAに関しては背景色と対照色を用いて目立たせるようにする
  • 全体のデザインやブランドイメージを破壊しない程度の色合いのコピー文章、アイコンとイメージ画像も重要

3. コピー文章+画像

コピー文章も非常に重要です。また同時に、CTA内にイメージ画像を設置することもコンバージョン率をあげることにつながります。イメージ画像を入れる理由は、訪問者が得られるメリットを明確にすることです。

つまり、先の事例のMakeLeapsとEvernoteとではボタン内にイメージ画像こそ入っていないものの、アクションを取ったのちにどのようなメリットが持たされるかをボタン横のイメージ画像を用いて明確にイメージさせています。

ダウンロードを表す矢印やアイコンなどを用いることもあります。pardotの事例であるように小冊子のイメージ画像をボタンと組み合わせることもよい方法です。オススメは、

  • アイコンとイメージ画像で、ボタンをクリックすることから得られるメリットを示す
  • シンプルなイメージ、アイコンを利用して瞬時に訪問者に理解してもらえるようにする
  • アイコンの意味合いが明確に理解できる限り、なるべくユニークなデザインのアイコンにする

などがあります。

これら上記の具体例や方法は一例に過ぎません。それらを自社のターゲットオーディエンスであるペルソナにカスタマイズしていくことが非常に重要です。

そのためにはターゲットオーディエンスに対して有益なブログ、ダウンロードコンテンツ、デモ、ウェビナーなどのコンテンツを製作し、それらに対して最適化したCTAを製作し、改善を繰り返していくことがリード獲得へとつながっていくことになります。


インバウンドマーケティング入門02 CONVERT(リードに転換)