CTAとはマーケティング用語のひとつで「Call To Action（コールトゥアクション）」を略したものです。Webサイトを訪れたユーザーに対して、行動を喚起するためのテキストやボタンなどを指します。

Webサイトを訪れたユーザーがメリットを感じ、行動を起こすことで多くの見込み顧客とつながることが可能です。

この記事では、CTAとは何か、意味やマーケティングとデザインとの関係性について解説します。CTAの参考事例も紹介します。

CTAとは

CTAとは、Webサイトへアクセスした訪問者の行動を喚起するためにデザインされたボタンやテキストを指します。

正式名称は「Call To Action（コールトゥアクション）」で頭文字を取って「シー・ティー・エー」と呼ばれます。

CTAをわかりやすくいうと「資料ダウンロードはこちら」「購入する」といったボタンやテキストリンクなどです。これらは売上に直接影響するものもあるため、計画的に配置しなければなりません。

関連記事：マーケティングにおけるデザインの役割とは？必要な理由からデザインが重要となる施策まで解説

金融業界や医療業界でもCTAと呼ばれるものがありますが、今回はマーケティング用語のCTAについて解説します。

CTAとマーケティングの関係性

マーケティングにおけるCTAは、Webサイト運営の目標を達成するために欠かせません。CTAでどのように行動を喚起するのかが大切になってきます。

例えば、商品紹介のLPで商品購入のCTAボタンを設置したときに、ボタンの場所がわかりにくいと購入率は増えません。

また、ボタンはあっても導入文がなければ唐突に感じて、クリックされない可能性も考えられます。

こうしたWebサイトは、ユーザーの欲求を満たせないため、成果につながることはないでしょう。放置していると離脱率が増え、アクセス数が減少する可能性があります。

ユーザーのニーズを満たすために、CTAを適正な位置に配置することが大切です。

CTAが促すユーザーの行動例

CTAはWebサイト運営の目的を達成するために、ユーザーを誘導して行動を喚起します。誘導した結果、ユーザーが実際にとる行動がCV（コンバージョン）です。

CVには以下のようなものがあります。

• 資料請求
• 商品購入
• サービス登録
• 予約・申し込み
• コメント記入

CVはWebサイトの種類によって異なります。ECサイトでは「商品購入」、サービスサイトでは「資料請求」といった具合です。

CTAをWebページ上のどこに配置するかで、CVにも大きく影響します。一度設置したら終わりではありません。

ユーザーをCVへつなげるのは簡単ではないため、設置後はユーザーの行動を分析して改善していきます。

CTAとデザインの関係性

CTAのデザインは、ユーザーに行動を直接促進するための重要な役割を担います。目立つ色やデザインを採用することで、注意を引きやすくなるのです。具体的にどのような要素があるのか解説します。

1. CTAボタンのテキストを工夫する

CTAボタンに入れるテキストは、ユーザーにどのような行動を取ってほしいのか、短くシンプルに表現します。

「ダウンロード」だけではなく「資料をダウンロード」または「無料で資料をダウンロードする」などといったテキストが効果的です。

2. マイクロコピーで行動を喚起する

マイクロコピーとは、ボタンの周囲に設置する短い文章のこと。わかりやすくいうとボタン内に配置したテキストを補足する文章です。

適切な場所にCTAを設定しても「フォームが入力しにくい」などといった理由で離脱してしまいます。

マイクロコピーはCTAだけでは伝えきれない部分を視覚的にサポートする役割を担っているのです。

以下のように、マイクロコピーを入れることで、どこに何を入力したらよいのかが明確になります。

マイクロコピーはユーザーの不安を払拭する役割もあります。ユーザーの心理状況を理解したうえで作成することで、UXの向上にもつなげることが可能です。

CTAボタンをクリックしたら何があるのかを、簡単に伝えられるとよいでしょう。

関連記事：ユーザビリティとは？効果的な改善を行うための5つのポイントとサイト事例を紹介！

3. 設置するCTAの種別を絞る

CTAには「資料請求」や「商品を購入する」などさまざまな種類があります。ページ上であらゆる箇所に設置することもできますが、あまりにも多いと押し売りのような印象を与えてしまいクリック率の低下につながることも。

ページの内容やターゲットにあわせて設置するCTAの種別を絞ることが大切です。

例えば、Webデザインに関心を持っているユーザーに向けて、デザイナー向けのCTAを配置するといった方法です。

Webデザインに関心をもつ人に、エンジニア向けのCTAを配置してもクリックすることはほぼないでしょう。

少しでも興味や関心を引くことができれば、行動するきっかけとなります。

関連記事：効果的なCTAボタンのデザインは？意識すべきポイントや効果的な配置場所を解説

4. ボタンのコントラストをつけて目立たせる

CTAをクリックしてもらうには、視認性を高める必要があります。一般的には「捕色」や「反対色」がよいとされています。

補色や反対色を組み合わせることで、コントラストが生まれて目立つわけです。

ただ、すべてのサイトにこうした手法がベストなわけではありません。背景色が白色に近ければ、どの色でも存在感は強調されるものです。

より目立たせるには、マウスオーバーによる色の変化や拡大・縮小など、ユーザーが操作することでUIに変化をつける方法があります。

ほかにも見せ方として、角に丸みをもたせてボタン内のテキストにフォーカスさせるといった方法もあります。

点滅や拡大などの特殊なエフェクトは、一部のユーザーが使いにくさを感じることもあるため、ターゲットの属性を踏まえたデザインを採用することが大切です。

参考：デザイン庁「デザインシステムβ版」

関連記事：CTAは何色がよい？デザイン視点でのポイントと依頼先
関連記事：CTAボタンとは？デザインする際のポイントも紹介

4. オーバーレイ表示で控えめにアピール

オーバーレイ表示とは、Webページに重ねて表示させる方法です。ポップアップ広告のように完全に重ねて表示させると、ユーザビリティを損ねてしまい離脱の要因になります。

ページを閲覧中のユーザーの行動を妨げないように、控えめに表示させるのが望ましいでしょう。Webページでは右下表示を多く見かけます。

スクロールをしても消えないため、閲覧中に行動意欲が高まったタイミングでクリックしてもらうことができます。

5. 視線の動きを意識して設置する

ユーザーの視線の動きを踏まえた位置にCTAを配置します。視線のパターンは「Z型」「F型」「N型」があり、それぞれの文字の形状にあわせて視線が動くというものです。

CTAを配置するときは、ファーストビューを見るユーザーの視線パターンを想定します。どのパターンでも被る位置にCTAボタンを配置して視認性を高めることが可能です。

とくに画面の右上の位置は、休閑領域と呼ばれており、もっとも注目を集める箇所となります。

ページ内に設置するときは、コンテンツの内容からユーザーの行動を予測したCTAを配置します。

ページ最下部まで読んでくれたユーザーが行動しやすいように、最下部にもCTAを設定します。

ページ内に設置するCTAは、あれもこれもと盛り込むと、ユーザーが迷ってしまうため、設置するCTAの種類を絞ることが大切です。

ページのフッター部分にも、お問い合わせ・資料ダウンロードのCTAを設置します。

同じCTAでも、ユーザーが見ている情報にあわせて、ボタンやテキストなどバランスよく配置しましょう。

関連記事：印象が変わる！見やすいホームページを作るポイント8選

6. 効果検証・改善をくり返す

CTAは一度設置したら終わりではありません。ヒートマップツールやアクセス解析ツールを用いて、ユーザーがページ上でどのような行動を取り、どのCTAボタンをクリックしてCVにいたったのかを分析します。

分析したデータから、アクセス数が多いページやよく読まれている箇所を把握したら、その箇所に最適なCTAを設置します。作成したデザインを比較検証するために、A/Bテストを実施してもよいでしょう。

定期的に効果検証を実施して、ユーザーの反応に基づいて改善することが大切です。

関連記事：ABテストの実施方法とサイト改善のメリット、注意点やおすすめツールも解説

CTAの参考事例

効果的なCTAを設置するためには、他社の事例を知ることも大切です。CTAで成果を上げた事例を3つご紹介します。

ユーザーメリットを重視したコピーを採用

株式会社GIGが運営する『Workship MAGAZINE』のCTAバナーの事例です。

記事をスクロールすると右下に表示されるCTAバナーのABテストを実施しました。テストに使用したのは、以下の6種類のバナーです。

それぞれどのくらいクリックされたのか検証した結果は以下の通りです。

上段の3種類のバナーはターゲットが絞られています。ユーザーが求めている情報を示唆するコピーが訴求力を高め、クリック率の向上につながったのだと考えられます。

エフェクトボタンで視認性を高める

株式会社kubell（旧：Chatwork株式会社）のCTAボタンは、マウスカーソルを重ねるとサイズが変化します。

▲出典：Chatwork動きがついているのは、中央と右上にあるCTAボタンです。どちらもマウスを重ねると、以下のように少しだけ縮小します。

エフェクト機能を付けることで、色数を抑えながらもCTAボタンの視認性を高めています。

お役立ち資料専用のページをつくる

▲出典：Cinarra Systems Japan株式会社Cinarra Systems Japan 株式会社は中間CVとして使われる「お役立ち資料」専用のページを設けています。

ここにアクセスするユーザーは、プロダクトに強い関心をもっており、資料を活用して理解を深めようとしています。

そのため専用ページを設けることで、CVの機会を増やすことができます。

デザインと統一感をもたせたCTAボタン

『クロスデザイナー』のトップページを見てみましょう。CTAボタンは、サイト全体のデザインに用いられているピンク色が使われています。

同じピンク色でも視覚的に注目されるように、わずかなグラデーションが入っています。

CTAを改善する方法

CTAを改善するだけで、資料請求や商品購入などのCVを増やすことができます。具体的にどのような方法があるのか解説します。

CTAツールを導入してデザインを改善する

CTAの改善を自社で行うなら、CTAツールを導入しましょう。CTAツールとは、CTAの設置に欠かせないデータの分析や検証機能を備えたツールです。

有名なものに『HubSpot』や『Karte』があります。CTAツールはおもに以下のような機能を備えています。

• CTAボタンのデザイン
• 効果測定機能
• ドラッグアンドドロップ操作に対応

これらの機能があれば、デザインが苦手でも目を引くCTAボタンを作ることが可能です。カスタマイズできれば、Webサイトのデザインと統一感をもたせることができます。

制作会社へリニューアルを依頼する

「CTAツールを使いこなせるのか不安がある」「CTA以外にWebサイトのデザインも変えたい」という方もいるのではないでしょうか。

CTAの改善を含めて、Webサイトのリニューアルをすることで、ユーザーのニーズを満たしたWebサイトを公開できます。

Webサイトのリニューアルは種類が規模によって異なりますが、大改修となるため、それなりの予算が必要です。

UI/UXデザイナーへ依頼する

コストを抑えてCTAのみ改善したいけどリソースがないときは、フリーランスのUI/UXデザイナーへ依頼する方法もあります。UI/UXデザインは、ユーザーとプロダクトをつなげるデザインです。

フリーランスのUI/UXデザイナーなら、一部の業務のみ委託できます。Webサイトのリニューアルではなく、CTAのみ改善したい場合におすすめの方法です。

リソース不足を補うために、新たに雇用するのはたいへんです。フリーランスのように専門スキルをもつ人材を採用する方法を「ジョブ型」といいます。以下の無料でダウンロードいただける資料では「ジョブ型雇用」についてくわしく解説しています。

【お役立ち資料】ジョブ型導入ガイド

xdesigner.jp

フリーランスへ仕事を依頼するときは原則、業務委託契約を結びます。しかし、初めて業務委託契約を結ぶとなると不安な担当者もいるはずです。

以下の資料は業務委託契約書作成ガイドとなっています。フリーランスデザイナーとスムーズに契約を結べる契約書を作成することが可能です。ぜひお役立てください。

【お役立ち資料】フリーランス・副業人材との業務委託契約書作成ガイド

xdesigner.jp

優秀なUI/UXデザイナーをお探しならクロスデザイナーへおまかせください

CTAでCVを向上させるにはマーケティング戦略が欠かせません。またユーザーの興味を引くためのデザインも重要です。CTA改善のために、優秀なUI/UXデザイナーをお探しなら『クロスデザイナー』へおまかせください。

『クロスデザイナー』はフリーランスデザイナー専門のエージェントサービスです。グラフィックデザインやWebデザイン、UI/UXデザインなど、様々なデザイナーのニーズに対応することが可能です。

約7,000名の登録デザイナーは、すべて厳正な審査を通過しているため、スキルチェックの手間をかけずに優秀なデザイナーへデザイン制作を依頼できます。以下より【サービス資料】を無料でダウンロードいただけます。即戦力デザイナーをお探しの方は、【お問い合わせ】ください。平均1営業日以内にご提案します。