この記事では、インハウスデザイナーとしてClarityの4種類のデータを読み解き、「なぜCTAがクリックされないのか」を分析し、改善仮説を設計するまでのプロセスを書いていきます。
今回、分析の対象としたのは弊社が運営するサイトでオンライン住宅展示場サイトの中の「注文住宅お役立ち情報」というコーナーの中の1ページです。
記事中にはCTAボタンを2箇所（記事本文の目次の直前と、記事の末尾）設置してあります。
記事自体のPVは数千以上あるにも関わらずClarityで調べたところ、両方合わせても10数クリックしかないということが判明しました。
最初はデザインの問題だと思っていました。ボタンの色が弱いのか、文言が刺さっていないのかと思っていましたが、データを読み解くうちに、問題は別のところにあるのではないかと思うようになりました。
「ユーザーのフェーズと、CTAの文脈が合っていない」
土地探しに関する情報記事では、読者は家づくり初期段階の「情報収集層」がメインです。目次の直前と記事末尾に「家づくりプランをもらう」というCTAが2箇所設置されていますが、どちらもほぼクリックされていない状態でした。
Scroll・Tap・Attentionのヒートマップ画像は実際のデータをもとに加工したダミーです。Areaヒートマップのみ実際のClarityデータを使用しています。
1. Clarityで現状を把握する
Clarityには主に4種類のヒートマップデータがあります。今回はこの4つを順番に読み解いていきます。
- Scroll（スクロール深度）：どこまでスクロールされているか
- Tap / Click（タップ・クリック）：どこがクリックされているか
- Attention（注目エリア）：どこで時間が使われているか
- Area（クリックエリア）：エリア単位のCTR
1-1. Scrollデータ：CTAまで「たどり着いていない」
スクロール深度のデータを見ると、ページ中盤あたりで離脱が急加速しています。上部はほぼ全員が見ているのに、後半になるにつれてどんどんユーザーが抜けていく。記事末尾のCTAまで到達しているのは、全体のごく一部に過ぎませんでした。
つまり末尾CTAは「見られていない」のではなく、そもそも到達していないということがわかりました。
1-2. Tapデータ：CTAより本文リンクのほうが圧倒的に多い
タップデータを見ると、最もクリックされているのは目次のリンクと本文中のテキストリンクでした。CTAボタン（目次直前・記事末尾ともに）のクリック数は、それと比べると桁違いに少ないという結果です。
ここで気になったのが、本文中テキストリンクのクリック率の高さです。ユーザーはボタンよりも「本文の流れの中にあるリンク」を自然にクリックしている。これは後の改善案を考えるうえで、重要なヒントになりました。
1-3. Attention（注目）データ：滞在時間と行動意欲は別物
Attention（注目）エリアのデータでは、ページ上部（タイトル〜目次付近）への注目が最も高く、滞在時間も長い。「見られているならクリックされそうなのに」と思います。
ただし冷静に考えると、目次付近で時間を使っているのは「記事の構成を確認している」「読む価値があるか判断している」という行動のようです。
つまりまだ記事を読み始めてもいないタイミングで「家づくりプランをもらう（＝個人情報を入力してハウスメーカーに連絡される）」という重いアクションを求めても、それではクリックされないのでは？、というのがこのデータを見た私の見解です。
「見ている」と「クリックしたい」は、別の話だと思います。
1-4. Areaデータ：エリア単位でクリックの分布を確認する
Areaデータでアイキャッチエリアのクリック率を確認すると1.04%という数値が出ています。CTAエリア全体には一定のタッチが記録されていますが、これはボタン周辺のテキストや画像への接触も含まれているため、ボタン単体のクリック数とは異なります。実際にボタンがどれだけクリックされているかはTapデータと組み合わせて確認します。
エリア単位では全体の分布は把握できるが、ボタン単体の効果はTapデータと組み合わせて読む必要があるという発見がありました。
2. データから仮説を立てる（2層の原因分析）
4種類のデータを並べてみると、問題が2層構造になっていることが見えてきます。
第1の問題：末尾CTAは「そもそも到達されていない」
スクロールデータが示す通り、ページ後半まで読み進めるユーザーは限られています。記事末尾のCTAは設置場所が悪く、大半のユーザーに届いていない。これは比較的シンプルな問題で、ユーザーがまだいる位置に、文脈に合う形でCTAを追加すれば対処できると考えます。
第2の問題：目次前CTAは「フェーズのミスマッチ」
目次直前というのは、ユーザーが「まだ記事を読んでいない、これから読む」タイミングです。情報収集に来ているフェーズの人に対して、いきなり「ハウスメーカーに相談しませんか」という重いアクションを求めている状態でした。
まだ記事も読んでいないのに「相談しませんか」と言われても——というのは当然だと思います。場所は悪くなかった（ユーザーが見ているエリアに置いてある）が、訴求の重さがフェーズと全然合っていなかったのではないかと推測しました。
整理するとこういう構図です。
| CTA | 問題 | 解決の方向性 |
|---|---|---|
| 末尾CTA | 到達率が低い。大半のユーザーがCTAより前に離脱している | より前の位置に、文脈に合う形で追加 |
| 目次前CTA | 到達・閲覧されているのにクリックされない。情報収集フェーズとのミスマッチ | 訴求文のみ変える。見た目はそのまま、テキストだけ差し替え |
「CTAを増やせばCV改善できる」という発想ではなく、「ユーザーがそのページにいる理由（フェーズ）に合った文脈でCTAを置く」ことが重要だということが、データから見えてきた気がします。
3. 改善仮説をFigmaで設計する
分析結果をもとに、3パターンの改善案を設計しました。
A案（コントロール）：現状維持
目次前CTAボタン＋末尾CTAボタンの2箇所を維持した現状です。後述するB案・C案との比較基準となるベースライン案として位置づけます。
B案：本文中テキストリンク
記事の30〜40%地点（スクロールデータで「ユーザーがまだ多くいる位置」）に、本文の文脈に沿ったテキストリンクを挿入します。
根拠は2つあります。まず、Tapデータで本文中のテキストリンクが最もクリックされているという事実。ユーザーはボタンよりも「本文の流れの中のリンク」を自然にクリックしています。次に、フェーズの一致です。
記事中の「地名に潜むリスクの一覧を読んだ直後」というタイミングは、「じゃあ安全な土地をプロに探してもらいたい」というニーズが自然に生まれる瞬間で、目次前（まだ何も読んでいないタイミング）とは文脈がまったく違います。
リンクテキスト案：
地名の危険度を確認したら、次は専門家に土地選びを相談するのが近道です。
→ ハウスメーカーに無料で土地提案を依頼する
C案：目次前CTAのテキストだけ変える
既存の目次前CTAボタンのテキストのみを差し替えます。背景色・ボタン形状・サイズなどの見た目はA案と完全に同じです。
デザインも変えてしまうと「文言が良かったのか・見た目が変わったから気づいたのか」が切り分けられなくなります。テキストだけ変えることで、変数を訴求文ひとつに絞り、「文言を変えただけでCTRが動くか」を純粋に検証できます。
3案の設計意図まとめ
| 案 | 変えること | 根拠となるデータ |
|---|---|---|
| A案 | 何も変えない（現状） | ベースライン |
| B案 | 設置場所（本文中）＋形式（テキストリンク）＋文脈（読んだ直後） | Tapデータの本文リンク高CTR・Scrollデータの離脱位置 |
| C案 | 目次前CTAのテキストのみ差し替え（見た目はA案と同じ） | Attentionデータの上部滞在・フェーズ分析 |
まとめ
今回やってみてわかったのは、データを読む順番が大事だということです。スクロール→タップ→アテンションの順に読んでいくことで、「そもそも到達されていない」「見られているのにクリックされない」という2層の問題構造が浮かび上がってきました。
Areaデータはその全体像を補完する文脈で使います。
そして最も重要な発見は、「CTAを増やすより、ユーザーのフェーズに合った文脈で置くことが重要」 ということです。
目次前CTAは、場所は悪くなかった（ユーザーが見ているエリア）。でも訴求の重さがフェーズと合っていなかった。末尾CTAは、訴求の重さはあっていたかもしれないが、そもそも到達されていなかった。
そして最も重要だったのは、目次前CTAの分析です。場所は悪くなかった（ユーザーが見ているエリアに置いてある）。でも訴求の重さがフェーズと合っていなかった。末尾CTAは逆で、訴求の重さはあっていたかもしれないが、そもそも到達されていなかった。
どちらも「デザインの問題」ではなく「置く場所・置き方の問題」なのではないかと推測しました。CTAのデザインを見直す前に、ユーザーがそのページにいる理由を先に考える——そういう順番が必要なのではないか思います。
この記事では分析と改善仮説の設計までを書きました。
実際にB案・C案のテストを実施する予定ですが、結果が出るまでの時期は現時点では未定です。数字が出てまとめられそうであれば、続編として書きたいと思っています。