画像バナーのCTAがクリックされない問題
記事の途中や末尾にLINE登録を促すバナー画像を貼っている。でも、ほとんどクリックされていない。これは専門メディアの運用で実際に直面した問題だった。
バナーのデザインを変えるべきか、コピーを見直すべきか。いろいろ考えたが、そもそも「バナー画像」という形式自体が間違っているのでは？という疑問にたどり着いた。
Microsoft Clarityの行動データを分析してみたところ、その仮説はかなり的確だった。読者はバナーではなくテキストリンクをクリックしていたし、記事末尾のCTAはそもそも98%の読者の目に入っていなかった。
この記事では、専門サービス企業のオウンドメディア（主力サービスカテゴリ18記事）を対象に、Clarityのデータ分析からCTA形式と配置位置を再設計した流れを共有する。
分析環境と対象サイトの概要
- サイト：専門サービス企業のオウンドメディア
- 対象カテゴリ：主力サービス（全18記事）
- 分析ツール：Microsoft Clarity
- 分析期間：2026年2月3日〜3月4日（直近30日間）
- サイト全体の月間PV：約127万PV
- 対象18記事の月間PV：約10,123PV（サイト全体の0.9%）
Clarityは無料で使えるヒートマップ・セッション録画ツールで、読者がどこまでスクロールしたか、どこをクリックしたか、どこで離脱したかを可視化できる。
Clarityで見えた5つのファクト
1. モバイル90%、記事末尾の到達率はたった2%
最も衝撃的だったのがスクロールデータだ。このデータが意味するのは、CTAの「配置位置」がCTAの「デザイン」よりはるかに重要だということだ。どれだけ洗練されたバナーを作っても、読者の目に入らなければ存在しないのと同じ。まず読者がどこまでスクロールしているかを把握し、その上で配置を決める。この順序を逆にしている限り、CTA改善は空振りに終わる。
訪問者の90%がモバイルユーザーで、残り10%がPC。
スクロールファネルを見ると、記事冒頭ではほぼ全員が残っているが、読み進めるごとに急激に離脱していく。記事の10%地点では全デバイス82%・モバイル80%がまだ残っているが、25%地点で全デバイス62%・モバイル60%まで減少する。50%地点に到達するのは全デバイスで31%、モバイルではわずか28%。そして80%地点になると全デバイス5%・モバイル2%しか残っていない。
モバイルユーザーの98%は記事の80%地点に到達しない。記事末尾にどんなに魅力的なバナーを置いても、ほぼ誰にも見られていなかった。50%地点でさえモバイルの到達率は28%。10人中7人はすでに離脱している。
2. 外部リンクは押すが問い合わせボタンは押さない（6倍の差）
このファクトが示すのは、読者の「現在地」を正しく理解することの重要性だ。CTA設計でありがちな失敗は、読者がすでに購買意欲を持っている前提で「今すぐお問い合わせ」を促すこと。しかしデータは、読者がまだ情報収集の段階にいることを明確に示していた。読者の心理ステージを無視したCTAは、早すぎるプロポーズのようなものだ。
Clarityのスマートイベントで、読者のクリック行動を比較した。
サイト全体（30日間）では、外部リンクのクリックが21,829回に対し、問い合わせアクションは4,951回で約4.4倍の差がある。対象18記事に絞ると、外部リンククリック約307回に対し問い合わせアクション53回で、その差は約5.8倍にまで広がる。
読者は「次の情報」を求めてリンクをクリックしているが、「問い合わせしよう」という段階にはまだ至っていない。読者はまだ情報収集フェーズにいる。いきなり「お問い合わせはこちら」と促しても心理的に早すぎる。
3. 「押しても反応しない」クリックが843件
Dead Clickのデータは、読者が「受動的にスクロールしているだけ」ではなく、「能動的に次のアクションを探している」ことを証明する。ここに気づけるかどうかが分岐点だ。多くのサイト運営者はDead Clickを「UIの不具合」としてしか見ないが、実際にはそこに読者の「行動したい」という意志が表れている。この意志を拾い上げる設計ができれば、無理に読者を動かすのではなく、読者が自然に動く導線を作れる。
Dead Click（デッドクリック）は、読者がタップしたのにリンクやボタンがなく何も起きなかったクリックのこと。
Dead Clickが多い記事は以下の通りだ。
- 「やってはいけないこと」：843件
- 「契約後の注意点」：478件
- 「サービス比較一覧」：390件
読者にはクリック意欲がある。ただ、受け皿が用意されていない。ここにCTAを設置すれば、無理なく読者の行動をキャッチできるはずだ。
4. 「危機感」を感じた読者が最も動く
記事によって問い合わせ率に大きな差があるという事実は、「すべてのページに同じCTAを置く」というアプローチの限界を浮き彫りにする。読者の感情状態は記事のテーマによってまったく異なる。データからその違いを読み取り、記事ごとにCTAの文脈を調整できるかどうかが、サイト全体のコンバージョン効率を大きく左右する。
18記事の中で問い合わせ率が最も高かったのは「よくある失敗パターンとは？」という記事だった。
- 「やってはいけないこと」：月間595PV、問い合わせ率1.41%
- 「契約後の注意点」：月間668PV、問い合わせ率0.90%
- 「高額プランのリスク」：月間624PV、問い合わせ率0.64%
- サイト全体平均：問い合わせ率0.39%
問い合わせ率1.41%はサイト平均0.39%の3.6倍。読者が「このまま放っておくと損をするかもしれない」と危機感を抱いたとき、最も行動に移りやすい。
5. 83%が初回訪問、いきなり問い合わせはハードルが高い
このファクトは、CTAの「ゴール設定」そのものを見直す必要があることを示している。初回訪問者が8割を超えるサイトで「お問い合わせ」を最終ゴールに設定するのは、初対面の相手に契約書を差し出すようなものだ。データが教えてくれるのは、まずは関係構築から始める中間ステップが必要だということ。この判断ができるかどうかは、CTAデザインのスキルではなく、データから読者の心理を推測する分析力にかかっている。
新規ユーザーが83%、リピーターが17%。大半が検索エンジン経由の初回訪問者だ。知らない企業に個人情報を渡すのは心理的にハードルが高い。
ここでLINE登録の優位性が見えてくる。LINEなら個人情報の入力は不要で、ワンタップで登録できる。「まだ問い合わせる気はないけど、もう少し情報はほしい」という読者にちょうどいい温度感のCTAだ。
データが示した答え「バナーをやめてテキストボックスにする」
5つのファクトを踏まえた結論は、画像バナー型CTAをやめて、記事に溶け込むテキスト型CTAボックスに変えるということだった。
根拠1：読者がクリックするのはテキストリンク
外部リンククリック21,829回というデータが示すのは、読者はテキストリンクなら躊躇なくクリックするということだ。一方、画像バナーには「広告」というラベルが無意識に貼られる。あるSEOメディアの事例では、CTAをバナー画像からテキストリンクに変えただけでクリック率が4倍に上がった報告もある。
根拠2：Dead Clickの正体は「情報を求めるタップ」
Dead Clickが843件も発生しているということは、読者は記事を読みながら能動的に「次の情報」を探している。画像バナーではなく、記事本文の延長として読める導入文+ボタンの組み合わせがDead Clickの受け皿になる。
根拠3：ポップアップや固定バナーは閉じられている
Clarityのセッション録画では、ポップアップやフローティング要素が表示された際に「x」ボタンをタップして閉じる行動が多く観察された。モバイル画面で画面を覆うポップアップや下部固定の帯バナーは、コンテンツ閲覧を邪魔する存在でしかない。
採用した形式：
- テキスト導入文+ボタン（メインCTA）：記事本文と同じフォント・サイズ感で、広告に見えない
- カード型案内ボックス（補助CTA）：白背景+緑の縦ラインで、記事の一部として自然に見える
避けた形式：
- 画像バナー：テキストリンクの方がクリック率が高い。画像は「広告」として無視される
- ポップアップ：「x」で閉じられている。割り込み型は逆効果
- フローティングバナー：モバイル90%の環境では画面を圧迫し、コンテンツ閲覧を妨げる
CTA配置のベストポジションをスクロールデータから逆算する
CTAの形式が決まったら、次は「どこに置くか」だ。スクロールファネルのデータが判断材料になった。
1箇所目：記事の20〜25%地点
モバイルの到達率が60〜67%あるこの位置は、10人中6〜7人の目に入る。記事の構成でいうと、1つ目のH2見出しの直後から2つ目のH2の直前あたりにあたる。読者が導入部分を読んで「もっと詳しく知りたい」という気持ちが高まっているタイミングだ。ここにテキスト導入文とボタンを組み合わせたメインCTAを配置する。
2箇所目：記事の35〜40%地点
モバイル到達率は40〜47%まで下がるが、1箇所目をスルーした読者に対する2回目の提案として機能する。記事の構成では2つ目のH2終了後から3つ目のH2の直前にあたる位置だ。ここにはカード型の案内ボックスを補助CTAとして配置し、1箇所目とは切り口を変えて訴求する。同じ言葉を繰り返すのではなく、記事の文脈に合わせて角度を変えることで、異なる動機の読者を拾い上げる。
記事末尾：設置するが過度な期待はしない
モバイル到達率は2〜8%にすぎない。ただし、ここまでスクロールした読者は記事を最後まで読み切った高関与層だ。LINE登録だけでなく電話番号やメール相談など複数の選択肢を提示して、その高い関心度に応える設計にする。とはいえ、記事末尾のCTAは「あれば拾える」程度のもの。ここに全リソースを投じるのは間違いだった、というのが今回最大の学びだった。
読者の心理状態に合わせて導入文を5パターン用意した
18記事をテーマ別に5グループに分けて、グループごとにCTAの導入文を変えた。同じ「LINE登録してください」でも、読者の気持ちによって響く言葉はまったく違う。
グループA：サービス理解系（3記事）
読者心理：「自分の課題は何なのか知りたい」「放っておいて大丈夫か不安」
導入文の方向性は「ご自身の課題がどの段階にあるのか、気になっていませんか？」と次のステップへの好奇心を刺激する。
グループB：自分で解決・DIY系（4記事）
読者心理：「自分でなんとかしたい」「プロに頼むのはまだ早い」
導入文の方向性は「自分で試してみたけど、うまくいかなかった方へ」と記事で読んだ内容を直接参照する。
グループC：高額プラン・契約検討系（6記事）
読者心理：「高額プランを勧められたが不安」「他の選択肢はないか」
最も切迫感が強い層。LINE登録だけでなくお問い合わせ直リンクも併用する。導入文の方向性は「大きな契約を決める前に」と決断の前にワンクッションを提案。
グループD：サービス比較・選び方系（3記事）
読者心理：「今のやり方に限界を感じている」「何を選べばいいか迷っている」
導入文の方向性は「結局、自分にはどのプランが合っているの？」と読者の内なる疑問を代弁する。
グループE：日常の改善・メンテナンス系（2記事）
読者心理：「課題と付き合いながら運用したい」「少しでも効率よく進めたい」
導入文の方向性は「日常の工夫だけで、この先もずっと大丈夫ですか？」と長期的な視点への気づきを促す。
実装で気をつけたこと
導入文は3行以内
モバイル90%の環境では長い導入文はスクロールで飛ばされる。1行目で注意を引き、2行目で提案、3行目で行動促進。この3行構成を基本にした。
ボタンの直前に「ハードル下げ」を入れる
「営業の連絡はいたしません」「30秒で届きます」という一文をボタンの直前に必ず添えた。新規ユーザー83%の環境では、知らない企業のLINEに登録するのは小さくない決断だ。安心材料はボタンに最も近い場所に置く。
既存CTAとの共食いに注意
新しいCTAを追加すると読者の注意を分散させるリスクもある。記事内にすでにある電話番号、メール相談、既存バナーとの関係を整理して、CTA過多にならないようにした。選択肢が多すぎると「どれもクリックしない」という結果を招く。
優先度の高い5記事から段階的に導入
18記事に一斉導入するのではなく、PVと問い合わせ率から優先度を算出して上位5記事から導入した。2週間のデータを見てからLINE登録率を測定し、その後残り13記事に展開する計画だ。
よくある質問（FAQ）
Q. Clarityは無料で使えますか？
A. はい。Microsoft Clarityは完全無料で、セッション数の上限もない。GA4と連携させることで、より深い分析も可能になる。
Q. バナー画像のCTAは完全にやめた方がいいですか？
A. 必ずしもそうではない。ただ、モバイルユーザーが大半のサイトではテキスト型の方がクリック率が高い傾向がある。まずは両方をA/Bテストして、自分のサイトでの数値を確認するのがいい。
Q. CTA配置の20〜25%地点はどうやって特定しますか？
A. Clarityのスクロールヒートマップで到達率を確認し、記事のH2見出しの位置と照らし合わせる。到達率60%以上の場所がCTAの第一候補になる。
Q. Dead Clickが多い箇所はどうやって見つけますか？
A. Clarityのクリックヒートマップで、リンクやボタンがない場所にクリックが集中している箇所を確認する。読者が「ここにリンクがあるはず」と思ってタップしている場所だ。
Q. LINE登録ではなくメルマガではダメですか？
A. メルマガでも考え方は同じだ。ただ、モバイル90%の環境ではメールアドレスの入力はハードルが高い。LINEはワンタップで登録でき、開封率もメールより高い傾向がある。
Q. BtoC系以外のサイトにも応用できますか？
A. Clarityでスクロールデータとクリックデータを分析する手法は業種を問わず使える。記事テーマ別にCTAの導入文を変えるアプローチも、読者の心理状態が記事ごとに異なるサイトであれば有効だ。
Q. 記事のスクロール率自体を上げる施策はありますか？
A. 目次の改善、冒頭の要約追加、記事の冗長な箇所の削除が有効。スクロール率が低い記事はCTA以前に記事そのものの改善が必要になる。
まとめ
Clarityのデータを分析した結果、3つのことがはっきりした。
- 記事末尾のバナーCTAは、モバイルユーザーの98%に届いていなかった
- 読者がクリックするのは画像バナーではなくテキストリンクだった
- 読者はまだ情報収集段階にあり、「問い合わせ」より「LINE登録」の方が心理的に受け入れやすかった
CTA改善というとボタンの色やコピーの文言に目が行きがちだ。しかし今回のケースでは、形式そのものと配置位置を変えることの方がインパクトが大きかった。
バナーのA/Bテストを繰り返す前に、一度Clarityでスクロールデータとクリックデータを確認してみてほしい。答えはデザインの中ではなく、読者の行動の中にある。
Clarityのデータは誰でも見ることができる。無料で、セッション数の上限もない。しかし、スクロールファネルから配置位置を逆算し、Dead Clickから読者の意志を読み取り、記事テーマごとにCTAの文脈を設計する。このデータの「読み解き」から「施策への落とし込み」までの一連のプロセスには、数多くのサイトで試行錯誤を重ねた経験が要る。データはあるのに活かしきれていないと感じるなら、その分析と実装を一緒に進められるパートナーを探してみてほしい。
