CV率改善！WEBサイトにおいて本当に効果のあるCTAのデザインとは

CTAの設置場所を変更しただけでCV率が3倍にUPした、色を変えただけで3.5倍以上もダウンロードされた、そんな事例があるのをご存知でしょうか？そこで本記事では、様々な業界で行われたケーススタディを参考に、CV率の改善に効果的なCTAデザインのポイントについてまとめてみました。

CTAとは？

CTA（Call To Action）とは、行動を呼ぶと直訳できる通り「ユーザーに行動を喚起させる要素」を指しています。具体的に言うと、WEBサイトを見ている訪問者に対し「無料査定」や「ダウンロード」といった特定の行動を誘導するための画像やテキスト、ボタンなどに対して使われる用語です。

優れたCTAは単体でも効果を発揮しますが、工夫できる幅が広い要素としても知られています。たとえば、当サイトの下記画像を見ていただくと分かる通り、赤枠で囲ってあるCTAの上部にユーザーの興味を引きつけるキャッチコピーを追加するのも効果的な手法です。

CTAによって「資料請求」や「お問い合わせ」へと誘導されたサイト訪問者は、ウォーム・リードからホット・リード（有望見込み客）へと変化する可能性を秘めています。つまり、優れたCTAはサイト運営の最終目的であるCV率の改善に直結する要素と言っても過言ではないのです。

種類別！よく見かけるCTA

WEB上では意外と多くのCTAが溢れています。この段落では、よく見かけるCTAを3つのカテゴリーに分類してご紹介しましょう。

▼クリック後に特定の目的を達成させるCTA

• 資料請求
• ブックのダウンロード
• ファイルのアップロード
• 割引を受ける

▼別のページに訪問者を誘導するCTA

• 商品に関する詳細ページ
• お問い合わせフォーム
• 会員登録フォーム
• メルマガ登録フォーム
• 見積もりフォーム
• 査定フォーム

▼リードフォームの一部で入力後にクリックするCTA

• 送信
• 登録
• 確認画面

優れたCTAは4つのポイントを考慮している

平凡なCTAと優れたCTAとでは、クリック率に大きな差が生じます。できるだけ多くのサイト訪問者にCTAをクリックしてもらうには、少なくとも下記の4点について考慮しておかなければなりません。

• CTAをページ内のどこに設置すべきか
• CTAの数はいつくにすべきか
• デザインをどのように工夫すべきか
• CTAの周囲にどんなキャッチコピーを追加すべきか

CTAの設置場所

コンテンツの中央部であろうとサイドメニューであろうと問題となるのが、ページの上部と下部のどちらにCTAを設置すべきか、という問題でしょう。CTAを設置する適切な場所は、サイト訪問者がCTAを目にしてから「クリックしよう」と決断するまで、どの程度の時間を必要とするかによって異なります。なぜなら、説明しなくてもユーザーに特徴が伝わるシンプルな商品と詳しい内容を説明すべき複雑な商品とでは、CTAの設置場所を使い分ける必要があるからです。

ページの「上部」にCTAを設置すべきケース

サイト訪問者がCTAを目にしてからクリックするまでの時間が短い場合は、ページの上部がCTAの適切な設置場所になります。

• 特徴を説明する必要がないシンプルな商品を扱っている場合
• 対象ユーザーが、すでに商品について熟知しているホット・リードの場合

上記のような場合、ユーザーは最初から特定の目的があってサイトを訪問しますので、目当てのCTAまで短時間で辿り着けるほどユーザビリティの高いコンテンツと言えます。

お手本CTA：ページ上部

CTAがページの上部に設置してあるサイトでお手本にしたいのが、宅配ピザチェーンのDomino Pizzaです。サイト訪問者の視線が最も集まりやすい場所にコントラストを効かせたCTAが配置されています。しかも、ユーザーが直観的に選べるよう「配達注文」と「お持ち帰り予約」の2択になっており、シンプルながら明解なテキストでアクションを促しています。

ページの「下部」にCTAを設置すべきケース

一方、ページの下部がCTAの適切な設置場所となるのは、ユーザーがある程度の時間をかけて意思決定を下す場合です。特に、健康や育児といった高いレベルの信頼が求められる商品ほど、CTAをクリックするまでの時間が長くなります。

• 特徴を説明する必要がある複雑な商品を扱っている場合
• コールド・リードもしくはウォーム・リードが対象の場合

お手本CTA：ページ下部

上記の画像は、ランディングページ作成ツールを提供しているカナダのソフトウェア会社Unbounceによる調査結果です。この調査によると、サイト訪問者がアクションを起こす前に多くの情報を消化する必要がある場合、ページの下部にCTAを設置することでCV率が304％も向上したと報告されています。

1ページあたりのCTA数

あまりにも多くのCTAがページ内に散乱していると、ユーザーを混乱させるだけでなく複雑なコンテンツだという印象を与えかねません。より多くのサイト訪問者にクリックしてもらうには、余計な選択肢を与えないよう1ページあたりに設置するCTAの数を必要最低限に留めておく方が効果的です。

• 1つのCTAだけに視線を集中させる
• 「Windows 用」と「Mac 用」のように対のCTAは異色で区別する
• 複数のCTAを設置する場合は、メインだけサイズや色を変えて目立たせる

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

• 旧テキスト：情報を注文する
• 新テキスト：情報を入手する
• 結果：CV率が38.26％UP
• ポイント：「注文」は支払いを、「入手」はメリットを連想させる

▼記事の一部だけを読んだ未登録のユーザーが完読するために登録するCTA

• 旧テキスト：今すぐフルバージョンのエッセイを読む
• 新テキスト：今すぐインスタントアクセスを取得する
• 結果：CV率が39.03％DOWN
• ポイント：「アクセスを取得」がユーザーに抵抗感を抱かせる

▼ジムの会員登録のCTA

• 旧テキスト：メンバーシップを取得する
• 新テキスト：最適なジムを見つけてメンバーシップを取得する
• 結果：CV率が68％UP
• ポイント：ジム選びでは場所が重視されるため、登録前に「選択肢がある」と伝える

お手本CTA：短時間で完了すると一目で分かる

上記の画像は人材紹介事業を手掛けているレバテックのサイト内で、フリーランス向けに特徴を解説しているページです。わずか10文字のテキストながら、「無料で登録できる」「60秒以内で登録が完了する」という2点が一目で伝わります。

CTAの周囲に追加するキャッチコピー

CTAはシンプルなほどユーザーに好まれる傾向が見られます。とはいえ、ボタン内に入力できるテキストの文字数は限られていますので、わずか数文字のテキストで伝えたい内容を全て表現するのは、簡単ではありません。そんな時は、CTAの周囲にキャッチコピーを追加してみましょう。

キャッチコピーの役割

「資料請求」や「メルマガ登録」などメッセージがダイレクトに伝わるボタン内のテキストに対し、必要に応じて使い分けられるのがキャッチコピーの強みです。ここでは、代表的なキャッチコピーの役割についてご紹介しましょう。

• クリックで得られるメリットを伝える
• 商品の価値をイメージさせる
• クリック後の展開を説明する
• ユーザーの警戒心を和らげる
• 支払いの有無や詳細説明など、ユーザーの状況に関連させる

お手本コピー：メリットを的確に伝える

こちらは、ホームページ作成ツールを提供しているWiX のトップページです。CTAの上部に追加されたキャッチコピーは、たった数文字で商品の特徴からユーザーが得られるメリットまでを的確に言い表しています。しかも、レイヤーを重ねたような2段構えの背景でコントラストを際立たせたデザインは、さすがプロ仕様といったところでしょうか。

お手本コピー：クリック前の警戒心を和らげる

NETFLIXのキャッチコピーを見ると、クリックする前のユーザー心理を研究しつくしているのが分かります。具体的な日数が入ったテキストや視覚的に無料期間が理解できる画像が、ユーザーの警戒心を和らげるのに絶大な効果を発揮しています。

まとめ

優れたCTAはCV率の改善に直結する要素ですが、使い方を間違ってしまうとCV率のダウンに繋がりかねません。まずは、ターゲットに合わせてCTAの目的を定めたうえで、「設置場所」「数」「デザイン」「キャッチコピー」の4点からCV率の改善に繋がるヒントを探してみましょう。