【デザイン例つき】CTA（コールトゥアクション）とは？意味、効果を高める作成・改善方法を解説

CTA（コールトゥアクション）は「行動喚起」の意味で、主にWebページやLPなど、CVページへのリンクボタンを指します。「資料請求はこちら」「まずは見積もりを取ってみる」などのCTAを見たことがある方も多いでしょう。

本記事ではCTAとは何か、なぜ重要なのかを具体的に解説。CTAを設計するうえでの鉄則や、効果を高めるテクニックもまとめて紹介します。

CTA（コールトゥアクション）とは？

CTAとは「Call To Action（コールトゥアクション）」を略したもので、日本語にすると「行動喚起」となります。Webマーケティングの用語で、主にWebサイトやLPの訪問者に「リンククリック」「問い合わせ」などのアクションを促すことです。

広義でのCTAの意味

広い意味でのCTAは先述のとおり、「WebサイトやLPの訪問者にアクションを促すこと」です。リンククリックや問い合わせ、資料請求、見積もりなどの「起こしてほしいアクション」を決め、そのアクションを起こしてもらうための「何か」を設置します。

この何かとは、たとえば「リンク直前に配置した、リンク先の内容やどんな人にリンクをクリックしてもらいたいかを伝えるテキスト」であったり、「資料請求や問い合わせフォームなどへのリンクつきのボタン」であったりとさまざまです。

広義でのCTAは、これらのあらゆる行動喚起、アクションを起こしてもらうための要素を指します。

狭義でのCTAの意味

広い意味でのCTAが「行動喚起のためのあらゆる要素」を指すのに対し、狭義でのCTAは「資料請求や問い合わせフォームなどへのリンクつきのボタン」を指します。このようなボタンは「CTAボタン」と呼ばれます。ただ「CTA」とだけ言う場合、このCTAボタンを指すのが一般的です。

CTAの設計が重要な理由

広義での行動喚起にしろ、狭義でのCTAボタンにしろ、CTAの設計は重要です。Webページへの訪問者にアクションを促すCTAは、そのページの成果（問い合わせ、資料請求、見積もり、メルマガ登録など）に直結する要素だからです。

ユーザーにどんなアクションを起こしてもらいたいのか、そのためにはどんなテキストやボタンが必要なのかを考えCTAの質を高めることが、WebページにおけるCV率を高めます。

ここからはユーザーにアクションを起こしてもらうためにはどうすればいいのか、CTAボタンの作り方と、ボタンやリンク付近に設置するテキストの作り方を解説します。

どちらの場合で押さえておきたいのは、「ターゲットを明確にすること」「わかりやすいこと」の2つです。ユーザーにアクションを起こしてもらうには、そのアクションを「自分事」、つまり「自分に関係のあること」として受け取ってもらわなければなりません。

たとえば資料請求なら、その資料を読むことが自分にとって必要である、自分にとって役立つ・興味のある内容の資料であると思ってもらうことが大切です。問い合わせなら、対象の商品やサービスに興味を持ってもらい、もっと知りたいと思ってもらわなければなりません。

後述する「ユーザーにとって押しやすいデザインにする」「限定感を演出する」などのテクニックも大切ですが、まずはユーザーの置かれた状況や目的などを理解し、ユーザーの気持ちになって考える姿勢をもつことが肝要です。

効果的なCTAボタンを作る4つのコツ

ユーザーのことを理解し、ユーザーの気持ちになって考えることは大切ですが、それだけで具体的なアクションを促すことは難しいでしょう。

アクションを促すための第一歩として「CTAボタンを押してもらう」というハードルがあるなら、「ユーザーにとって押しやすいのはどんなボタンか」を知らなければなりません。

ユーザーにとって押しやすいボタンの作り方、ボタンクリック後の遷移先で「問い合わせ」「資料請求」などのアクションを起こしてもらうにはどうすればいいのか、4つのコツを紹介します。

遷移先の内容とボタンのテキスト・アイコンをマッチさせる

起こしてほしいアクションを具体的に明示する

遷移先が問い合わせフォームであれ資料請求フォームであれ、まずはその画面に続くCTAボタンを押してもらわなければなりません。そのために、CTAボタンには「ユーザーに起こしてほしいアクション」を具体的に書きましょう。

たとえばCTAボタンの遷移先が資料請求なら、最低でも「資料請求」のテキストをボタンに入れます。資料のダウンロードが目的なら「資料請求はこちら」「資料をダウンロードする」など、ダウンロード不要でブラウザから読める資料なら「詳細を見る」「ダウンロード不要の資料はこちら」などというように、より具体的なテキストを考えてみましょう。

テキストは端的にまとめる

CTAボタンはあくまでボタンであり、「ボタンのサイズ」がある程度制限されます。ボタンの中に入れられるテキストは限られていますし、文字がぎっちりと詰まった「見づらいボタン」は読みづらくクリックされづらいです。

ボタンがすっきりとした見た目になるよう、ボタンに入れるテキストは端的にまとめましょう。

最近はPCよりも、画面の小さなスマートフォンでWebページを見るという人が多いです。小さな画面でも文字がつぶれないよう、文字数を抑え、テキストのサイズを大きくするよう心がけましょう。

なお、「うちのサイトはBtoBでPC閲覧がメインだから、テキストが多少小さくても問題ない」という場合でも、端的さは大切です。直感的に内容がわかるボタンの方がクリックされやすいからです。

ユーザーにとって押しやすいデザインにする

CTAボタンが押されるかどうかには、その中に入れるテキストだけでなく、デザインも大きくかかわってきます。色や形などのデザインも工夫し、「ユーザーにとって押しやすいボタン」を作りましょう。

デザインを工夫するといっても、凝ったデザインにすればいいわけではありません。CTAボタンで重要なのは見やすさ、シンプルさです。それを踏まえ、具体的には次のようなポイントを意識するといいでしょう。

ボタンの色をアクセントカラーにする

CTAボタンの色はWebページ全体の基調となる色（メインカラー）の反対色（アクセントカラー）にすると目立ちます。メインカラーとアクセントカラーは、それぞれ色相環の対角線上に位置しています。

Color Supplyのようなツールを使うと、メインカラーとアクセントカラーを調べやすいでしょう。

与えたいイメージからボタンの色を決める

白と青なら誠実さ、白と淡いオレンジなら暖かさというように、使う色やその組み合わせにより与える印象は大きく変わります。

たとえばBtoB、BtoCでも保険や住宅といった高額商品を扱うなら、誠実さを印象付ける「白と青のボタン」がよく使われます。「家族で写真を共有するアプリのダウンロードボタン」なら、幸せで暖かな家族を印象付ける「白と淡いオレンジや黄色のボタン」もいいかもしれません。

ただ、画面内にたくさんの色があると見づらい、ごちゃごちゃしているという印象を与えてしまいます。画面全体の色味や色の数、ページ全体のメインカラーとの相性を考え、CTAボタンの色を決めましょう。

ボタンサイズはスマートフォン表示で10mm×10mm

CTAボタンのサイズも押しやすさに影響を与えます。特にスマートフォン表示では、ボタンを押す指の大きさを考えましょう。平均的な指のサイズから、10mm×10mmのCTAボタンが押しやすいといわれています。

アイコンを入れてよりわかりやすく

CTAボタンにアイコンを入れることで、そのボタンが何のボタンなのかをより直感的に伝えられます。たとえば電話問い合わせなら受話器やスマートフォンの、メール問い合わせならEmailのアイコンを入れるといいでしょう。

北米のマーケティングエージェンシー・Tinuiti社が行ったABテストでは、アイコンなしよりもアイコンありのCTAボタンの方が、リード送信数が30％高くなるという結果が出ました。

参考：【ABテスト事例】CTAのアイコン表示。有りと無しではどちらが効果的？

もちろん、画面の全体構成やボタンのサイズや形（アイコンを入れるとボタンが大きくなり、高さや幅も大きくなる）の兼ね合いもあるので、自社に取り入れると効果的か検討してみてください。

遷移先の内容とボタンのテキスト・アイコンをマッチさせる

CTAボタンの遷移先と、ボタンに入れるテキストやアイコンはマッチさせましょう。ここでは「より具体的に」と意識してください。

たとえば同じメルマガ登録のCTAボタンでも、「定期配信を受け取りたい方はこちら」では、何の配信かがわかりません。「メルマガ登録はこちら」のような、より具体的で端的なテキストが好ましいです。

ユーザーのアクションを促す、効果的なCTA文言の作り方

CTAボタンの中には、遷移先の内容を端的に、具体的に伝えるテキストを入れることが大切です。

CTAボタンの上下どちらかに、それを補足するようなテキストを入れるのもいいでしょう。たとえばCTAボタン内のテキストが「メルマガ登録はこちら」なら、その上に「＼完全無料／」「＼1分で完了／」のようなテキストを入れます。これを「マイクロコピー」といいます。

CTAボタンの中、あるいは上下に設置するテキストはどのように作ればいいのか、意識したい3つのことを紹介します。

ユーザーにとってのベネフィットを意識する

CTAの文言は「ユーザーにとってのベネフィット」を意識して作りましょう。ここでいうベネフィットとは、ユーザーにとっての利益、そのアクションを起こすことでユーザーの未来がどう変わるかといったことを指します。

ユーザーにとってのベネフィットを伝えるためには、マイクロコピーを工夫しましょう。たとえばCTAボタンに「メルマガ登録はこちら」というテキストを入れるなら、その上に「＼最短でブログを収益化／」のようなマイクロコピーが考えられます。

アクションのハードルを下げる

あえて乱暴な言い方をすると、ユーザーはとにかく面倒くさがりです。たとえば促したいアクションが「見積もり」なら見積もりを出すための情報入力、見積もり後に来るであろう電話やメールへの対応などを、ユーザーは面倒に感じるでしょう。

アクションを促す際には、この面倒くさいという気持ちをカバーすることが大切です。CTAボタン内のテキストや、その上下に設置するマイクロコピーを工夫し、アクションを起こすハードルを下げましょう。

たとえば促したいアクションが見積もりなら、CTAボタン内のテキストは「1分で見積もりを出してみる」「登録不要でまずは見積もり」などが考えられます。

その上下どちらかに、「定期購入なし」「入力項目は3つだけ」のようなマイクロコピーを設置すれば、ハードルはさらに下がるでしょう。

限定感や緊急性を演出する

ユーザーがCTAボタンを思わずクリックしてしまうよう、マイクロコピーで限定感や緊急性を演出しましょう。「今しかできない」「今じゃなきゃダメ」と、ユーザーに「今この瞬間」を意識させるのです。

「今この瞬間」が大切なのは、人は忘れる生き物だからです。「後でやろう」と思っているうちに、ユーザーは今見ているWebページのことを忘れてしまいます。思い出したとしても、ブックマーク登録でもしていなければ、そのページを見つけられないかもしれません。

忘れなかったとしても、時間が経つほどモチベーションは下がっていきます。「明日やろう」と思っていても、明日になれば「来週やろう」、翌週になれば「来月やろう」になり、最終的には「やっぱりいいや」になりかねません。

限定感や緊急性を演出するには、次のようなマイクロコピーが考えられます。

• 今だけ無料

• 限定100個

• 完全受注生産

• 〇月〇日23:59まで

• このページからの申し込み限定　など

CTAボタンのデザイン例

画像はここまで解説してきたことを踏まえた、CTAボタンのデザイン例です。これらを参考に、自社サイトのメインカラーやブランドイメージ、目的に合ったCTAボタンを作ってみましょう。

ボタンもテキストも！CTA作成・改善時のポイント

CTAのためのボタンやテキストの作成・改善をするときに、覚えておきたい4つのことを紹介します。これらを常に念頭に置くことで、CTAの効果をより高められるでしょう。

数を増やしすぎない

CTAのためのボタンやリンクは数を抑えて配置しましょう。特にCTAボタンが多すぎると押し売り感が強くなり、ユーザーに敬遠されたり、情報収集・読了の妨げになったりしかねません。

CTAボタンはWebページの中盤や最後など、ここぞというタイミングで表示させましょう。

選択肢は少なめに

CTAボタンは数を抑え、一度にひとつだけ表示させるのが鉄則です。しかし、「電話で問い合わせる」「メールで問い合わせる」など、複数のCTAボタンを並べなければならないこともあるでしょう。

この場合も、選択肢をなるべく抑えるのが鉄則です。選択肢が多すぎると選ぶことが面倒になったり、選ぶことに疲れてしまったりするものです。結局どのボタンも押されずに離脱されてしまう、ということも珍しくありません。

このことはコロンビア大学のシーナ・アイエンガー教授が提唱した「ジャムの法則」で立証されています。教授はスーパーマーケットのジャム売り場で試食販売を行います。このとき6種類のジャムを売るパターンAと、24種類のジャムを売るパターンBを用意し、どちらの購入率が高いのかを調べました。

結果、購買率は24種類のジャムで3％、6種類のジャムで30％となりました。このように、選択肢が多すぎると人は選べなくなることがわかっています。

配置にもこだわる

CTAボタンの配置にもこだわりましょう。Webページの途中にボタンを設置するなら中央、画面に常に表示するボタンは左下に設置するのがベターです。

人の目線は左上から右下へとアルファベットのZの文字のように動きます。横書きが前提のWebコンテンツでは特にそうです。この目線の動きにあわせて、ファーストインプレッションを残したい場合は左上に置くのが効果的です。

分析・改善をし続ける

CTAのためのボタンやテキストは、一度作って終わりではありません。ABテストを行い、データを集計・分析し、改善し続けることで、少しずつ成果を高めていきましょう。

具体的にはページの閲覧数や離脱率、ボタン・リンクのクリック率、遷移先でのCV率などのデータを集めます。

CTAの改善にはABテストが役立ちます。ABテストとはいくつかのパターンを用意し、それをページ訪問者にランダムに表示することで、最も成果の出るパターンを見つける方法です。

ABテストとは何か、どのように行えばいいのかは、こちらの記事で解説しています。

関連記事：ABテストとは？効果的なやり方のポイント・おすすめツール、検証ポイントまで解説

ここぞという場所に効果的なCTAを設置し、CV向上を図ろう

CTAはWebページや広告などのCV率を高めるために重要です。ユーザーにどんなアクションを起こしてほしいのかを明確にし、それを端的に伝えることで、ボタンやリンクのクリックを促します。

本記事で紹介したように、ユーザーにとってのハードルを下げること、具体的なベネフィットを示すことで、クリック率を高めましょう。遷移先とボタンの内容がマッチしていれば、ユーザーはそのままアクションを起こしてくれるはずです。

【関連記事】

ABテストとは？効果的なやり方のポイント・おすすめツール、検証ポイントまで解説

ABテストは、Webサイト・サービスや広告などの改善に役立ちます。CTAボタンやファーストビューといった要素ごとに検証を行い、少しずつ、着実に成果アップを目指していきます。 本記事...

BtoBマーケティングとは？基礎知識から戦略・具体的な施策・成功のポイントを解説

企業間の取引のことをBtoBと呼びます。「BtoBマーケティング」は、そうしたBtoBに関するマーケティング活動全般のことを意味する言葉です。BtoCマーケティングと比べて、難しいイメージを抱い...

SNSマーケティングとは？企業が戦略を立てる5つのポイントから、成功事例までを紹介

自社のブランディングや自社商品の認知獲得に便利な「SNSマーケティング」。手軽に開始でき、低コストで運用できることから多くの企業がSNSマーケティングを実施しています。気軽に始められる一方で、成...