CTAとは、Call to Actionの略で、わかりやすく言うと「行動喚起」です。
WebサイトやSNSでユーザーに「次にしてほしい行動」を示すボタンやバナー、テキストなどの総称のことを指します。どれだけアクセスを集めても、CTAが弱いと資料請求や問い合わせ、購入といった成果にはつながりません。逆に言うと、こだわって作ったCTAだったら今以上にCVを上げる結果に繋がるかもしれません。
本記事では、CTAの意味と役割、よく使われるCTAの種類、作成時の重要ポイント、効果を高める改善・分析の考え方までを実務に役立つ目線でわかりやすく解説します。
「うちのHPから毎月、お問合せが来ればいいのに…営業のメールしか来ないよ…」と悩む企業様へ
SEO歴7年以上のプロが無料で、貴社の事業に合ったSEO対策、HP改善案をご提案します。
エイチリンクは「従業員数10名以下の中小企業のコーポレートサイトのSEO集客」に特化したWebマーケティング会社で月間売上0→500万円、月間お問合せ1〜2件→40件などのSEO集客改善実績がございます。
「中小企業ならではのリソース問題」に寄り添った、アドバイスだけではない実行支援を得意としています。
- そもそもうちはSEO対策やるべき?
- どんなキーワードで対策すればいいの?
- うちのホームページからお問合せが来るにはどんな改善をすればいい?
そんな疑問を、無料相談であなたの事業に合わせてお答えします。
\毎月3社限定・営業なし・完全無料/
CTAとは
CTA=Call To Action(行動喚起)
CTA(Call To Action)は、ユーザーに「次にしてほしい行動」を明確に示すための仕掛けです。ボタンやリンク、バナー、テキストなど見た目は様々ですが、共通しているのは「ここを押せば、あなたの悩みが解決したり目的が前に進みそうだな」とユーザーに感じてもらえるよう設計されているということです。
普段何気なく見ているWebサイトや、SNSの投稿も「誘導が分かりやすいな」「ボタンが大きく目立つな」と感じたことはないでしょうか。今やCTAに無頓着なサイトが少ないと思う程のCTA強化時代です。
WebサイトやLPでは多くのアクセスが集まっていても、CTAが弱いとコンバージョンに結び付くユーザーが少なくなってしまいます。逆にいえば、コンテンツや導線がほぼ同じでも、CTAの言葉・位置・デザイン(マイクロコピーも含む)を最適化するだけでCVRが伸びるケースに過去にも多く出会いました。
CTAは単なる「ここを押すボタン」ではなく、集客から成約までの導線をつなぐ“ラストワンマイル”の役割を担う重要な要素と捉えるのがポイントです。
ビジネスにおけるCTAとは
実はCTAは金融や医療でも使う言葉です。IT業界ではビジネス文脈で使用します。
ビジネスの文脈でのCTAとは、売上やリード獲得に直結する“行動のトリガー”です。BtoBなら「資料ダウンロード」「問い合わせ」、BtoCなら「カートに入れる」「無料で試す」「会員登録する」などが代表例です。
ここで重要なのは、いきなり申し込みボタンだけを押してもらおうとするのではなく、ユーザーの検討段階に応じたCTAを用意することです。
- 認知フェーズ:関連資料のダウンロード、メルマガ登録
- 比較・検討フェーズ:導入事例集、デモ申し込み
- 意思決定フェーズ:問い合わせ、見積もり依頼
といった形で、段階ごとにハードルの異なるCTAを置くことで、ユーザーのペースに合わせて関係性を深めていけます。ここを丁寧に作り込む事をおすすめします。
SNSでのCTAとは
SNSにおけるCTAは、Webサイトとは少し役割が異なり、「次のアクションを軽く一歩だけ進めてもらう」イメージに近くなります。例えば次のようなものです。
- 「いいね・保存・シェア」を促すCTA
- 「詳しくはプロフィールのリンクから」「続きはブログで」など外部サイトへの遷移を促すCTA
- 「コメントで教えてください」「DMで相談できます」などコミュニケーションを促すCTA
TikTokやInstagramでよく見るのではないでしょうか。SNSは情報の流れが速く、ユーザーも“ながら見”していることが多いため、「1投稿に1つのわかりやすいCTA」に絞ることがかなり効果的です。また、テキストだけでなく、スタンプ・絵文字・矢印・GIFなどビジュアル要素を使って視線を惹き付ける工夫も有効です。
CTAの設置や改善にはユーザー行動理解が最優先
CTAをどれだ工夫して考え抜いても、ユーザーの行動パターンを理解していなければ成果は安定しません。大切なのは、「ユーザーはどこから来て、どの順番でページを見て、どのタイミングで離脱しているのか」を先に把握することです。
たとえば、記事冒頭のスクロール離脱が多いのか、フォーム手前で離脱しているのかによって、有効なCTAの位置は変わります。前者なら「記事冒頭にベネフィットを明確にしたCTAを置く」だったり「見出し前に資料DLできるCTAを入れる」といった対策が考えられますし、そもそもユーザーをシッカリと惹き付けるページ(またはLP)になっているかも再度確認しましょう。
後者なら「フォームの手前に安心材料となる事例やFAQを配置する」「CTAの上にマイクロコピーをそっと添える」ほうが効果的です。
これも一概に全てのWebページでの最適解ではないのです。
GA4のイベント計測やヒートマップ、スクロール計測などを組み合わせて、ユーザー行動の“流れ”をつかんだうえで、“どこにどんな意図でどんなCTAを置くのか”を決めていくのが、成果につながる(または成果をUPさせる)王道パターンです。
CTAの種類
CTAと一口に言っても、CTAにはいくつかの種類があります。ここではどういったCTAの種類があるのかを見ていきます。
形式・見た目
CTAの形式にはいくつかパターンがあります。目的や文脈、WebサイトのターゲットやtoB、toCに応じて分析して使い分けることで、ユーザーの背中を押せます。自然な流れでクリックできるCTAを目指して下さい!
ボタン型

ボタン型のCTAは最もオーソドックスな形式です。当たり前のように目にしたことがあることと思います。
資料請求、問い合わせ、購入などの明確なアクションを促したい場面で使います。マウスをホバーすると少し浮き上がっているように立体感が出るボタンや、キラッと光るボタン、平面のボタンなどがあります。ボタンの色やボタンの中に置くテキストの大きさや絵文字、記号にも拘り、自社サイトのユーザーにマッチした“クリックされやすいボタンリンク”を見付けていきます。
テキストリンク型

テキストリンクは、文字の上にリンク(URL)を乗せるタイプです。記事本文の流れの中に自然に溶け込ませたいときや、複数のCTAをさりげなく並べたいときに有効です。
テキストリンク型はアフィリエイトに於いてもよく使用される形です。どの型がクリック率が良いかと考えることもあるかと思いますが、筆者はこのテキストリンク型が自然にクリックを促せ、クリックされるのでよく使用しています。
リンクの色も黒以外であれば何でも良いという訳ではありません。色診断視点では、信号機でも「赤は止まれ、黄色は注意、青は進め」というように、青色が安心してクリックしやすいという説も聞いたことがあります。最近ではサイトによって緑の方が青よりもクリック率が高かったと情報公開しているサイトも出てきました。
例として、Googleでは検索結果やGmailの広告リンクのカラーについて、数十種類の青を使った大規模なテストを行い、わずかな色味の違いでクリック率や広告収益が大きく変わることが確認されたと報じられています(Guardian紙が Google UK マネージングディレクター Dan Cobley氏の講演内容として紹介しています。2014年の話です)
参考記事:Googleがデザイナーよりエンジニアを優先する2億の理由
また、Googleの元ビジュアルデザイナーであるDouglas Bowman氏は、自身のブログで「2つの候補の青の間を41 段階に分けてテストしていた」と述べており、同様のエピソードはニューヨークタイムズ紙の記事でも紹介されています。
参考記事:Stopdesign(Douglas Bowman氏ブログ)
見やすさの判断基準が掴めない…といった場合は、多くのユーザーに普段利用されているGoogleやYahoo!で使われている青のカラーコードに寄せることも一つの手法です。
バナー・カード型

サイドバーや記事途中で、視覚的に目立たせたい場合に使われます。メディア内の他コンテンツやホワイトペーパーに誘導したいときに便利です。テキストリンク型と併用しても良いでしょう。
フォーム直結型

「今すぐ登録」「無料で診断する」といったボタンから、そのままフォームに遷移させるパターンです。LPなど、1ページ完結でCVを狙う場合に多用されます。エイチリンク株式会社のフォーム直結CTAは2つを同時に並べ、ユーザーの目的に合った方を選べるように配慮しています。
資料をダウンロードしたいのか、相談がしたいのかを明確に切り分けることでユーザーの迷いを無くします。それに、こうして2つの選択肢を目の前に出すことで「どちらか一つを選びたい」という心理に駆られるものです。
ポップアップ・スライドイン型

離脱時や一定スクロール後など、特定のタイミングで表示されるCTAです。ポップアップという呼び名は聞いたことがあるのではないでしょうか?
気を付けるべきポイントは、出しすぎるとUXを損ねるためユーザーに使いづらさや不快感を与えてしまいます。閉じるボタンの×の大きさに拘ったり、どこまでスクロールしたら現れるように設定するかといった視点から、LPを上から読んでいきベストなタイミングはどこであるかを見計らうシナリオ設計が重要です。
設置場所
CTAの設置場所も、クリック率を左右する大きな要因の一つです。LPの最後の部分やWebページの最下部に置かれているのは見たことがあるでしょう。よく使われるのは次のようなポイントです。
ファーストビュー(ヒーローエリア)

サイトの顔とも言える、一番最初に目に触れる場所をヒーローエリアと言います。「このページで何が得られるのか」が伝わった直後にCTAを置くことで、モチベーションが高いユーザーを取りこぼさずに済みます。
何の会社なのか?何を提供しているのか?を一発で魅せることも大事な決定事項に関わる要素です。サイテーションにより指名検索がすでにあるのであれば、サイトに訪れる前の段階から期待値を上げておくことができます。
グローバルナビ・ヘッダー・フッター

サイトのヘッダーとフッターにもCTAはよく設置される場所です。サイト全体で共通のCTA(例:資料請求・お問い合わせ)を設置し、どこからでもアクションできる状態をつくります。後術しますが、スマートフォンの普及によりスマホからの閲覧が多いサイトであれば、スマホだけ追従でCTAを表示する様に設計することも有効です。
コンテンツ途中・直後

自社サイトのコラム記事やセクションを読み終えたタイミングは、課題意識が高まっている瞬間です。「この内容について詳しく知りたい方はこちら」など、文脈に沿ったCTAを置くと高い確率でCVを獲得できます。
CTAだけではなく、関連記事や参考記事、別LPなどワンクッション挟んでユーザーを教育し、そこからCVへ誘導した方が納得感を持って申し込みや購入をしてもらえるケースも。コンテンツに合わせて設置するべきCTAを決めましょう。
サイドバー・関連記事エリア
記事一覧やおすすめコンテンツと並べてCTAを置くことで、「もう少し情報収集をしたいユーザー」に自然なステップアップを提案できます。
CTA作成で大事な8つのポイント
置くだけでクリックされている現状を、さらにクリック率を高めていきたいと誰しも考えると思います。次はCTA作成で大事なポイントを8つお話します。
1.CTAの目的を1つに絞る
1つのエリアに資料請求もメルマガ登録も無料相談も…と詰め込みすぎると、ユーザーは選べなくなります。エリアごとに「このCTAで何をさせたいか」を明確にして、1つ置いて見るところから始めましょう。欲張らないことが重要です。
2.ターゲットと検討段階を具体化する
- 誰の
- どんな悩みを
- どこまで解決する
このCTAは“何のためのCTAなのか”を言語化しておきましょう。CTAはいかに短い文章でクリックに持っていけるかが肝です。ペルソナ像はシッカリと尖らせて決め、どんな検討段階に居るのかをハッキリさせておくと文言やオファーがぶれません。
3.行動を促す動詞から始める
「資料請求」「お問い合わせ」という単語はよく見ると思います。これらの単語だけよりも、「資料をダウンロードする」「無料で相談してみる」のように、ユーザーの行動を具体的な動詞で示すとクリックされやすくなります。
「公式サイトはここから行けます」「無料で相談してみる」というように、収まりの良い量の行動形式に変えてみましょう!
4.ベネフィットを一言で添える
ベネフィットとは、ユーザーがその商品やサービスを使った場合に“結果としてのうれしさや得られる未来、楽しさ”のことを指します。
ユーザーが自分の意思で動くということが重要でありながら、なかなか人を動かす事は難しいのです。
もしCTAにベネフィットが見えていたら、それは行動の後押しになります。「無料」「〇分で完了」「事例集付き」など、ユーザーが損せず、得られるメリットを短く添えることで、目の前のCTAをクリックする価値が伝わりやすくなります。
5.心理的ハードルを下げるコピーを入れる
誰しも行動を取る際には心理的ブロックが掛かります。これは人間の本能で自分を守ろうとするからです。
押そうかな、どうしようかなといった場面で「いつでも解約できます」「営業電話は一切ありません」など、不安を和らげる一言をボタン付近に置くことで、躊躇を減らせます。
迷ったら「自分だったら何と書いてあれば気楽になるだろう?」と考えてみてください。CTAそのものよりも、直上に小さめな文字でマイクロコピーとして書いてあっても心に響きます。
6.周囲の情報量を減らし、余白をつくる
CTAの周りに派手な要素が多すぎるとボタンが埋もれてしまいます。CTAの周囲には余白をしっかり取り、「ここが次の一手だー!!」と視線が自然に集まるようにします。
サイトの背景色とCTAの色の関係性も大事です。CTAを設置した際に目立つ必要があります。時々CTAが境目がハッキリしない物を見付けることがありますが、圧倒的に損なので影を付けたり工夫しましょう。
7.ブランドトーンを壊さない範囲でコントラストをつける
サイト全体のトーン&マナー(トンマナ)から浮きすぎないように注意しつつ、背景とのコントラストをしっかりつけ、ボタンであることがひと目でわかる色・形にします。
目立たせたいからと言ってデザイン的に浮いていると、ユーザーに取っては押し売り感を強く感じ、UI的にも雰囲気を壊します。
世界観を崩さないトンマナを意識してください。
8.スマホ前提でサイズ・位置を決める
ここ約10年で、スマートフォンの普及が一気に広がったことにより多くのユーザーがスマホでサイトを閲覧するようになりました。
業種によってはPCでの閲覧が多いケースも否めませんが、自社サイトがPCかスマホのどちらからの流入が多いかを知っておくことは非常に重要です。
スマホ流入が多いサイトでは、「親指で押しやすい位置かどうか」「タップ領域が十分か」が成果に直結します。PCで設置して確認していると案外スマホでのCTAの文言ズレやサイズの誤りに気付きます。
PCだけでなく、必ずスマホ実機での見え方とスマホだけでCTAやポップアップを出すなどと言った実際に使ってみての操作感を確認しましょう。
以上8つのポイントを紹介してきましたが、エイチリンクが支援するサイトでの記事制作ではこの8つをしっかりと踏まえた上でさらに細かいところまでこだわったCTAの配置で、企業様のお問い合わせ最大化に動きます。
興味がある方はぜひ下ボタンを押してお問い合わせしてください。
CTAの効果をUPさせる改善方法
CTAを設置してみると、現在のクリック状況や実際の申し込み状況が見えてくることと思います。そのままでは勿体ないので改善していきます。
ここでは、どういった改善方法を取ればいいのかを解説します。
CTAの文言
CTAの文言は、最も少ない改修工数で成果に影響を与えられるポイントです。短い文字だからこそ次の観点で見直してみましょう。
- 検索意図・読後感とズレていないか
- ユーザーにとって“CTAクリック後の結果”がイメージできるか
- ネガティブ要因を和らげる一言があるか
例えば「比較記事の最後に“まずは無料相談”」が来ると、読者の頭の中とのギャップが大きくなります。「詳しい料金表をダウンロード」など、一歩手前のCTA文言に変えるほうがスムーズな場合もあります。サイトのUI/UX的にも綺麗です。
「資料請求」だけより「ここからSEO成功事例集をダウンロード」のように、“このボタンの先で何が得られるのか”を具体的に示します。
「30秒で完了」「登録不要で読めます」など、ユーザーが感じていそうなめんどう・不安を少しでも軽くしてあげる文言に整えます。こうするとクリック率が上がりやすくなります。
CTAの位置・配置
文言の次に効きやすいのが「位置」です。
- ファーストビューに“最重要CTA”を1つ置く
- スクロールの節目ごとに“文脈に合ったCTA”を置く
- スマホでは“フローティングCTA”も検討する
サービスLPであれば、「無料相談」や「資料請求」など、最終的に一番押してほしいCTAをFV(ファーストビュー)にどーんと配置します。
課題整理のブロックの直後に「課題チェックリストをDL」というCTAを置いてみる、事例の後に「自社でもできるか無料で相談する」など、セクションごとにCTAを変えると、押す理由が自然に生まれます。
スマホではどうしてもスクロールする、という動作が発生します。視野角が狭くなるのでスクロールが長くなるページでは、画面下部に常に表示されるフローティングCTAを設置することで、思い立ったタイミングで行動してもらいやすくなります。
CTAのデザイン
デザインは自分の好みではなく、ボタンだと認識され、尚且つ押しやすいかが一番優先していただきたいことです。
- ボタンらしい形と立体感
- 背景とのコントラストとCTA周囲の余白
- 視線誘導の工夫
角丸で長方形の四角にすることや影をうっすら付けるなど、「これは押せそうだ」と直感的に伝わる形にします。
背景とボタンが同系色で埋もれていないか、テキストが読みにくく文言を詰め込んでいないかをチェックします。アクセシビリティの観点からも、テキストと背景のコントラスト比は十分に確保しましょう。
アイコンや矢印を文言の前後に入れているCTAはここ数年で多くなりました。人物写真の視線の方向などを活用して、自然とCTAに視線が流れるレイアウトを意識します。
CTA分析と最適化の仕方
CTAをサイト内に置いていると、次はCTAをより研究し分析して、自社サイトに合うように最適化したいと思うようになってくることでしょう。最適化する際に使えるツールや方法を伝授します。
ヒートマップ

ヒートマップを使うと、どこまでスクロールされているか、どこがよくクリックされているか、また注目が集まっているエリアはどこかが視覚的にわかります。
集中的に見られている場所やクリックされている箇所が濃い色となって視覚的に把握できます。
たとえば、CTAより上でスクロールが大きく落ちているといった場合や、上段のCTAではクリックが集中しているが下段のCTAはそれほどでもない、といったケースも。
思わぬ箇所(画像や見出し)にクリックが集中しているな?といった気付きから、CTAをもう少し上に持ってこようとか、画像の近くにCTAを追加しよう!といった改善アイデアが生まれます。
Clarity(クラリティ)は無料で使用できるマイクロソフト社の分析ツールです。数年前まではワードプレスのプラグインでヒートマップを使用するケースも多かったのですが、ここ数年クラリティが登場してからは人気となっているツールです。
ABテスト
ABテストは、CTAの文言・色・サイズ・位置などを「Aパターン」「Bパターン」に分けて出し分け、どちらが高い成果を出すかを比較する手法です。
- 一度に変える要素はできる限り1つに絞る
- テスト期間中は他の大きな変更を避ける
- クリック率だけでなくCVRまで見る
といった点を押さえると、「何を変えたことで成果が変わったのか」がはっきりし、再現性の高い改善ができます。地道で期間も要しますが、どこに作用しているのか判断するためにもじっくり取り組みたいところです。
タグ計測
ヒートマップやABテストだけではなく、GA4や広告管理画面でのタグ計測も欠かせません。CTAクリックをイベントとして計測し、
- ページ別・流入チャネル別のクリック率
- CTAクリック後のコンバージョン率
- デバイス別の成果の違い
を把握することで、「どのCTAが本当に売上に貢献しているか」が見えてきます。
GTMを使えば、ボタンのクリックやフォーム送信を比較的簡単にイベント計測できるので、早めに仕組み化しておくのがおすすめです。
ユーザー行動心理を読む
一番大切なのはここだと思っているのが“ユーザー行動心理を読む”です。数値だけでは「なぜその行動を取ったのか」の気持ちまではわかりません。
- スクロールやクリックのログ
- セッションリプレイ(録画)
- ユーザーインタビューやアンケート
といった情報を組み合わせて考えましょう。録画を見ているとクリックを連打し「イライラしているのかな」と思う事もあります。どうしてこのCTAはクリックされないのかの仮説を立てるのは良いことですが、仮説を自分の思考で立ててしまうとユーザー行動を読んだ事にはなりません。
あくまでもログやレビュー口コミ、ユーザーの声を素直に拾うべきです。
ユーザー心理を軸にCTAを見直すことで、行き当たりばったりの改善から抜け出せます。
まとめ
CTAは単なるボタンではなく、ユーザーにとって次なる一歩です。
シッカリと自社サイトに合うCTAボタンを作り込み、必ずテストと分析をしてPDCAを回しましょう。
CTAに関するお悩みや、今すぐにサイトへ流入したユーザーをシッカリとCVに持っていきたい!というお悩みにエイチリンク株式会社はお答えできます。
CTAのお悩みも、ぜひエイチリンク株式会社にお任せください!
\営業なし・完全無料・課題分析/


