CTAの設置場所を変更しただけでCV率が3倍にUPした、色を変えただけで3.5倍以上もダウンロードされた、そんな事例があるのをご存知でしょうか？そこで本記事では、様々な業界で行われたケーススタディを参考に、CV率の改善に効果的なCTAデザインのポイントについてまとめてみました。
CTA（Call To Action）とは、行動を呼ぶと直訳できる通り「ユーザーに行動を喚起させる要素」を指しています。具体的に言うと、WEBサイトを見ている訪問者に対し「無料査定」や「ダウンロード」といった特定の行動を誘導するための画像やテキスト、ボタンなどに対して使われる用語です。
優れたCTAは単体でも効果を発揮しますが、工夫できる幅が広い要素としても知られています。たとえば、当サイトの下記画像を見ていただくと分かる通り、赤枠で囲ってあるCTAの上部にユーザーの興味を引きつけるキャッチコピーを追加するのも効果的な手法です。
CTAによって「資料請求」や「お問い合わせ」へと誘導されたサイト訪問者は、ウォーム・リードからホット・リード（有望見込み客）へと変化する可能性を秘めています。つまり、優れたCTAはサイト運営の最終目的であるCV率の改善に直結する要素と言っても過言ではないのです。
WEB上では意外と多くのCTAが溢れています。この段落では、よく見かけるCTAを3つのカテゴリーに分類してご紹介しましょう。
▼クリック後に特定の目的を達成させるCTA
▼別のページに訪問者を誘導するCTA
▼リードフォームの一部で入力後にクリックするCTA
平凡なCTAと優れたCTAとでは、クリック率に大きな差が生じます。できるだけ多くのサイト訪問者にCTAをクリックしてもらうには、少なくとも下記の4点について考慮しておかなければなりません。
コンテンツの中央部であろうとサイドメニューであろうと問題となるのが、ページの上部と下部のどちらにCTAを設置すべきか、という問題でしょう。CTAを設置する適切な場所は、サイト訪問者がCTAを目にしてから「クリックしよう」と決断するまで、どの程度の時間を必要とするかによって異なります。なぜなら、説明しなくてもユーザーに特徴が伝わるシンプルな商品と詳しい内容を説明すべき複雑な商品とでは、CTAの設置場所を使い分ける必要があるからです。
サイト訪問者がCTAを目にしてからクリックするまでの時間が短い場合は、ページの上部がCTAの適切な設置場所になります。
上記のような場合、ユーザーは最初から特定の目的があってサイトを訪問しますので、目当てのCTAまで短時間で辿り着けるほどユーザビリティの高いコンテンツと言えます。
CTAがページの上部に設置してあるサイトでお手本にしたいのが、宅配ピザチェーンのDomino Pizzaです。サイト訪問者の視線が最も集まりやすい場所にコントラストを効かせたCTAが配置されています。しかも、ユーザーが直観的に選べるよう「配達注文」と「お持ち帰り予約」の2択になっており、シンプルながら明解なテキストでアクションを促しています。
一方、ページの下部がCTAの適切な設置場所となるのは、ユーザーがある程度の時間をかけて意思決定を下す場合です。特に、健康や育児といった高いレベルの信頼が求められる商品ほど、CTAをクリックするまでの時間が長くなります。
上記の画像は、ランディングページ作成ツールを提供しているカナダのソフトウェア会社Unbounceによる調査結果です。この調査によると、サイト訪問者がアクションを起こす前に多くの情報を消化する必要がある場合、ページの下部にCTAを設置することでCV率が304％も向上したと報告されています。
あまりにも多くのCTAがページ内に散乱していると、ユーザーを混乱させるだけでなく複雑なコンテンツだという印象を与えかねません。より多くのサイト訪問者にクリックしてもらうには、余計な選択肢を与えないよう1ページあたりに設置するCTAの数を必要最低限に留めておく方が効果的です。
CTAのデザインを工夫するだけで、CV率が格段に向上するのをご存知でしょうか？この段落では、優れたCTAに共通するデザインのポイントを4つご紹介します。
日本企業のWEBサイトでは、赤色のCTAを採用しているケースが多く見られます。その根拠の一つとして挙げられるのが、インバウンドマーケティングを得意とする米国のハブスポット（HubSpot）社が行ったテスト結果でしょう。赤色と緑色のCTAを比較した結果、緑色のCTAよりも赤色のCTAをクリックした人の方が21％も多かったと報告されているのです。
一方、オープンソースの代表的なウェブブラウザとして知られるFirefoxを提供しているカナダのモジラ（Mozilla）社でも、CTAの色についてテストを行った結果を公式ブログ上で報告しています。
1週間ごとに異なるカラーのCTAを設置した結果、緑色は全ての項目で最も優秀だっただけでなく、他の3色に比べて3.5倍以上も多くダウンロードされたことが判明したのです。
ただし、残念ながらモジラ社の調査には赤色が含まれていませんし、サイト訪問者に促すアクションの種類が同じでなければ単純比較はできません。とはいえ、CTAの色でCV率の改善を目指すなら「赤」もしくは「緑」が有力候補と言えるでしょう。
Webサイトにおける配色の仕方については下記の記事で解説しています。
下記の画像は、シカゴを拠点とするアパレル企業RIPT Apparelが行ったA / Bテストに使用されたCTAデザインです。上段の画像では背景とCTAが同じモノクロで統一されており、下段の画像ではモノクロの背景にグリーンのCTAが採用されています。
このA / Bテストの結果、背景と同系色のCTAをコントラストが強調されたグリーンのCTAに置き換えただけで、CV率（売上）が6.3％もUPしたのです。
まずは、Unbounce社が行ったボタンの形状に関するA / Bテストの画像を見て下さい。左手のボタンは形状がフラットで背景のデザインに埋もれているのが分かります。一方、右手のボタンはコントラストが際立つライトグリーンに変更され、さらに四つ角を丸めてボタンらしい形状にすることで存在感が増しています。
このA / Bテストの結果、ボタンらしい形状で存在感を際立たせたデザインに変更するだけで、CV率が35.81％もUPしたそうです。
サイト訪問者にアクションを促すには、ボタンに注意を引く要素を追加するのも効果的な手段です。ここでは、簡単に導入できる3つのアイディアについてご紹介しましょう。
ボタン内のテキストは一見どれも同じように思われがちですが、実は重要な役目を担っています。結果を端的に伝えるだけでなく、ユーザーの心理を理解してニーズも満たさなければなりません。Unbounce社のケーススタディでは、ボタン内のテキストに応用したいコツが分かりやすく解説されています。
▼詳細情報を入手するためのCTA
▼記事の一部だけを読んだ未登録のユーザーが完読するために登録するCTA
▼ジムの会員登録のCTA
上記の画像は人材紹介事業を手掛けているレバテックのサイト内で、フリーランス向けに特徴を解説しているページです。わずか10文字のテキストながら、「無料で登録できる」「60秒以内で登録が完了する」という2点が一目で伝わります。
CTAはシンプルなほどユーザーに好まれる傾向が見られます。とはいえ、ボタン内に入力できるテキストの文字数は限られていますので、わずか数文字のテキストで伝えたい内容を全て表現するのは、簡単ではありません。そんな時は、CTAの周囲にキャッチコピーを追加してみましょう。
「資料請求」や「メルマガ登録」などメッセージがダイレクトに伝わるボタン内のテキストに対し、必要に応じて使い分けられるのがキャッチコピーの強みです。ここでは、代表的なキャッチコピーの役割についてご紹介しましょう。
こちらは、ホームページ作成ツールを提供しているWiX のトップページです。CTAの上部に追加されたキャッチコピーは、たった数文字で商品の特徴からユーザーが得られるメリットまでを的確に言い表しています。しかも、レイヤーを重ねたような2段構えの背景でコントラストを際立たせたデザインは、さすがプロ仕様といったところでしょうか。
NETFLIXのキャッチコピーを見ると、クリックする前のユーザー心理を研究しつくしているのが分かります。具体的な日数が入ったテキストや視覚的に無料期間が理解できる画像が、ユーザーの警戒心を和らげるのに絶大な効果を発揮しています。
優れたCTAはCV率の改善に直結する要素ですが、使い方を間違ってしまうとCV率のダウンに繋がりかねません。まずは、ターゲットに合わせてCTAの目的を定めたうえで、「設置場所」「数」「デザイン」「キャッチコピー」の4点からCV率の改善に繋がるヒントを探してみましょう。
受付時間：平日10:00~19:00(土・日・祝日を除く)
