海外情報:CTAをサイトに設置するときの6つのTips

本日は海外記事よりCTAを作る際に参考になるTipsを紹介したいと思います。

紹介するのはBeeketingのブログより「The Ultimate Guide To Make Effective Call-To-Action on Your Website」というタイトルの記事です。この記事では、「CTAをサイトに設置するときの究極のガイド」として、6つの方法を取り上げています。

気になる方は元記事(英語)をご覧になってみてください。本記事では概要のみご紹介したいと思います。

CTAをサイトに設置するときの究極のガイド 6選

紹介されていたTipsは以下の6つです。

  1. シンプルにせよ
  2. ユーザーにインセンティブを与えよ
  3. アクションワードを使え
  4. 視覚的効果に注意を払え
  5. 正しい位置に配置せよ
  6. 緊急性を創出せよ

順に紹介していきます。

シンプルにせよ

ボタンはシンプルであることに越したことはありません。
ユーザーがそのボタンをクリックすると何が起こるのかを簡単に理解できるような、ストレートでシンプルな言葉使いが望ましいでしょう。

ユーザーにインセンティブを与えよ

例えばクーポンコードのように、ユーザーにインセンティブを与えることでCTAが強力に機能します。

クーポン

クーポンコード表示のCTAの例

さらに記事では、多くのサイトがクーポンコードというインセンティブを、コンバージョン率の増加のために加え、ソーシャルアカウントのフォロー数の増大を目的に活用しているという点にも触れられていました。

例えば、ECサイトでの購入時に、FacebookやTwitterでのシェアと引き換えに、送料無料か割引を提示する、というような方法です。

アクションワードを使え

ユーザーを混乱させないよう、違和感のない言葉を使うことが重要です。また、強すぎる言葉も避けるべきだと筆者は述べます。

ここは英語と日本語でニュアンスの違いがあるかもしれませんが、筆者が良い例として挙げていた言葉(一部を抜粋)としては

Buy(買う)、Get(手に入れる)、Purchase(購入)、I want this!(これが欲しい)、Ask(尋ねる)、Live Chat(チャットする)、Sign up(登録する)、Learn(学ぶ)、Discover(発見する)See more(もっと見る)

などだそうです。

視覚的効果に注意を払え

効果的なCTAを作るためには、視覚的にユーザーを惹きつけることが必要です。

CTAの視覚的側面について4つの方法が紹介されていたので簡単に紹介します。

  • 太字のフォントやしっかりとした囲みを用いる
  • けばけばしい色を使わず、サイトにマッチしした色を使用する
  • 充分に大きく。一番大きいクリック要素になっているとなお良し。
  • ハロウィンやクリスマスなどシーズンに合わせた変化を適用する
  • この中でも特に、ボタンの色は重要です。色を変えただけでCVRが大きく伸長する例もありますので、適した色が何色なのかを検証してみると良いでしょう。

    正しい位置配置せよ

    ボタンをどこに配置するかも重要なポイントです。

    この章ではさらに2つのTipsが紹介されていました。
    いずれもユーザーの視線の動きに合わせた配置の重要性を示しています。

    1.上から下へ
     ー商品などの詳細の最後(一番下)に配置する
    2.左から右へ
     ーユーザーは左から右に向かってサイトを見る
      (ファーストビュー内に収まっているとなおよし)

    なお、ボタンを右側に配置するべき理由については、過去のこの記事でも考察しています。

    視線の動きのクセから考える、フォームの送信ボタンを 右側におくべき理由
    https://f-tra.jp/blog/column/4857

    緊急性を創出せよ

    機会が限られている感覚はユーザーのコンバージョンへのモチベーションを増加させます。
    季節のセールや数量限定の商品などの訴求をCTAのオファーに盛り込みましょう。

    限定

    限定商品のCTAの例

    最後に

    本日は海外記事より、CTAのためのTipsを紹介しました。
    ぜひあなたのサイトのCTAとくらべていかがでしたか?ぜひ、今後のCTA設計にお役立て下さい。

    参考記事:The Ultimate Guide To Make Effective Call-To-Action on Your Website

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です