CTAとは?意味や重要性、設置場所、CTAボタン作成のポイントなど


Writer:
山崎雄司
  • facebook
  • Twitter
  • LINE

CTAとは、「Call To Action」の略称であり、「行動喚起」と訳される。Webページに訪問したユーザーを具体的な行動に誘導するために、Webサイト上に設置されたボタンやリンクなどの要素を指す。

CTAとは


CTAは、Webページを訪問したユーザーに対し、その先のアクションを促すためのボタンやリンクのこと。Webページの下部に設置されることが多い。具体的な行動内容は、購入や申し込み、問い合わせ、資料請求、会員登録など。

CTAの重要性


CTAは、CV(コンバージョン)につながる導線として重要な役割を担う。Webページを訪問し、商品やサービスなどに納得したユーザーが次の行動に移るためのボタンであり、リンク先の行動をイメージできるようなCTAボタンをわかりやすく配置することで、確実なCVへと誘導することができる。そのため、ユーザーの目線に立ったデザインや設置場所を工夫する必要がある。


CTAの設置場所

 
CTAは、一般的に以下のような場所に配置される。

・コンテンツの下部(ボリュームが大きい場合は区切りとなる箇所)
・サイドバー
・ファーストビュー
・Webページのヘッダー及びフッター
・モーダル(ポップアップ)

なお、CTAの設置場所については、グーテンベルク・ダイヤグラム を参考にすることもできる。グーテンベルク・ダイヤグラムとは、同じ画面に均等配置された情報を見る際の視線の動きに着目した法則であり、視線は左上から右下に流れていくのが一般的なパターンといわれている。横書きが主流である欧米の文書等で用いられており、Webページ作成時にCTAの設置場所を検討する際のヒントとなる。

CTAボタンの作成とポイント


CTA ボタンとは、ユーザーのクリックを促すボタン形式のリンクのこと。ボタンに掲載するテキストやサイズ、色などのデザインを工夫し、目的に合ったボタンを作成する必要がある。

テキスト

CTAのテキストは、ボタンに記載する「ラベリング」と、ボタン周辺に記載する「マイクロコピー」から成り立っており、いずれも具体的かつシンプルな文言が求められる。 たとえば、クリックすることのメリットが伝わる文言(例:「ダウンロードはこちら」→「〇日間無料トライアル 」)や、リンク先の行動をわかりやすく示す文言(例:「予約はこちら」→「事前登録不要!かんたん予約 」)を掲載すると、CVにつながりやすい。また、緊急性を感じさせる文言(例:「本日限定」「残り〇日」など)を用いるのも有効だが、強く押し出しすぎると避けられてしまうことも。

サイズ 

スマートフォンやタブレットの場合は指でクリックし、PCの場合はマウスでクリックすることになるため、適したサイズはデバイスによって異なる。一般的に、指のサイズに合わせるのがベストといわれている。CTAボタンはPCで作成作業をすることが多いため、スマートフォンやタブレットでの見え方を必ず確認しておきたい。 

CTAは目立たせることが重要となるため、背景とのコントラストが強い色(補色など)を使用する。色のもつ印象が与える影響は大きく、たとえば赤系は活発なイメージ(=セールなど)、緑系は自然なイメージ(=環境や健康など)、青系は安全なイメージ(=ビジネスなど)といった特徴があるため、コンテンツのイメージに合う色を選ぶと効果が期待できるだろう。 ただし、Webページで扱う商品やサービスによってクリックされやすい色は異なり、正解はないため、A/Bテストなどを活用して見極める必要がある。

CTAの注意点


目立つようにデザインする

ユーザーに見落とされることのないよう、CTAボタンを他の要素より目立つデザインにすることが大切だ。Web全体のページ全体のバランスを考えながらインパクトのあるボタンを作成したい。ボタン形式でなくテキストを配置する際も、フォントや文字色を工夫し、Webページのデザインに馴染みすぎないよう工夫する必要がある。

設置数を増やしすぎないようにする

CTAはCVへと誘導する重要な要素であるが、Webページのいたる所に何個も設置してしまうとユーザーはうっとうしく感じ、信頼を損なうリスクも。基本的には1つのコンテンツにCTAを1つ設置 し、コンテンツのボリュームが多い場合は区切りごとにするなど、必要最小限に抑えたい。

CTAの設置場所を確認する 

ユーザーがCTAの設置場所までたどり着けていない場合、CTAに工夫を施しても効果がない。ヒートマップなどを活用し、ユーザーがWebページをどこまでスクロールし、どこでクリックしているかを把握し、マウスの導線を確認することで、CTAの設置場所が的確であるかを確認すると良い。
また、Webサイト全体でCTAの配置箇所に統一感をもたせると、ユーザーにとって見やすくわかりやすいページとなる。

メルマガ登録
  • facebook
  • Twitter
  • LINE