「クリック率が伸びた事例と同じ色と文言にすれば、自社のボタンも動くはずだ」。CTAボタンの改善事例は「変更前」「変更後」「結果」の3点でまとめられているため、変えた箇所さえ写せば同じ数字が出ると考えやすくなります。実際に色を近づけて文言を差し替えたあとも、翌週の数字が前の週とほとんど変わらないままで、どこを見直せばよいのか迷う場面があります。
しかし、これまで多くのオウンドメディアで記事制作と記事内の案内の設計を支援してきた弊社の立場から言えるのは、公開されている数字の裏にはもとの母数、流入の構成、同時に動いていた施策といった前提があり、そこが違えば同じ変更をしても結果は揃わないということです。事例から自社に移せるのは色や文言ではなく、押される前後の設計にあたる部分です。
本記事では、公開された数字が自社で再現しない理由から、いま見に行って構造を確認できる実例、事例に共通する4つの条件、自社で記録を残すまでの手順まで、記事制作会社の視点で順を追ってお伝えします。
- 公開された成功事例の数字が、自社で再現しない理由
- 事例から取り出して自社に移せる4つの条件
- いま見に行って構造を確認できるCTAボタンの実例
- 記事コンテンツとランディングページで、CTAの前提が違う点
- 自社で成功事例と呼べる記録を残すまでの手順
成功事例が再現しないのは、数字と一緒に条件が公開されていないから
改善事例の記事は、たいてい「変更前」「変更後」「結果」の3点で構成されています。ボタンの色を変えた、文言を変えた、位置を下から中盤に移した。そして結果の数字が置かれる。読み物としては分かりやすい形ですが、公開されているのは結果の数字で、条件は載っていないという点は押さえておく必要があります。
数字を左右しているのは、ボタンよりページの前提
同じ「クリック率が2倍」でも、もとが1パーセントに届いていなかったのか、5パーセントを超えていたのかで意味は変わります。前者は改善の余地が大きく残っていた状態、後者はすでに設計が詰められていた状態です。伸びしろの位置が違えば、同じ施策を打ったときの反応も違ってきます。
母数も同じです。月に数十件しかクリックがないページで前後を比べると、季節変動や検索順位の上下だけで倍近く動きます。その振れ幅の中で「ボタンの色を変えたから伸びた」と読むのは、因果関係の取り違えになりかねません。
公開事例で気をつけたいのが、施策の同時進行です。CTAの変更と一緒に、ページの構成変更、広告の出稿、メール配信が動いていることは珍しくありません。記事には最も分かりやすい要素だけが書かれるため、読者からは切り分けができない状態になります。数字の大きさより、比較期間中に他が動いていないと明記されているかを見てください。
事例から取り出せるのは、差がついた理由の仮説
では、公開事例を読む意味がないのかというと、そうではありません。取り出す対象を変えれば使えます。事例から持ち帰るのは施策ではなく、差がついた条件という読み方です。
文言の変更で伸びたという報告を読んだときは、変更後の文言を書き写すのではなく、その文言が満たしている条件を箇条にしてみてください。押した先に何があるかを言い切っている、所要時間や分量を示して負担の見通しを与えている、といった具合です。条件の形にしておけば、自社の提供物に合わせて書き直せます。
文言をそのままコピーすると、自社が渡せるものと合わなくなります。数分で読める資料を用意していないのに所要時間を書けば、クリック後の離脱が増えるだけでしょう。
関連記事：コンテンツマーケティングの基礎知識を総まとめ｜やり方から成果につなげる方法まで徹底解説
見に行って構造を確認できるCTAボタンの例
数字が伴わない代わりに、誰でも今すぐ確認できる材料があります。実際に公開されているページの構造です。以下は執筆時点で確認できる形であり、各社とも改修が入るため、必ずご自身の目で見に行ってください。
Amazonの商品ページ、購入の準備が違う2人を1画面で分けて受ける
Amazonの商品ページには、「カートに入れる」と「今すぐ買う」が縦に並んでいます。長く維持されている構造で、いま開いても確認できるはずです。
ここで起きているのは、検討段階の異なる2人を同じ画面で取りこぼさない設計です。他の商品も見比べたい人はカートへ、買うものが決まっている人はそのまま決済へ進む。もし片方しか置かなければ、もう一方の層は一度戻るか、離脱します。
HubSpotのブログ記事、本文の冒頭と末尾で渡すものを変える
BtoBのオウンドメディアで参考になるのが、記事本文の中でオファーを出し分ける形です。HubSpotのブログ記事では、本文が始まってすぐの位置に資料ダウンロードの枠が置かれ、記事の終盤には別の導線が用意されています。
冒頭に置かれているのは、記事のテーマに沿った資料です。読み始めた段階の人は、まだ発注先を探しているわけではありません。渡せるのは情報であって、商談の予約ではない。段階に合うものが置かれているかどうかを、目次より前の位置で確認してみてください。
Kaizen Platformのコンテンツページ、最上部に資料の常設枠を置く
もう一段はっきりした形が、ページ最上部への常設です。Kaizen Platformのコンテンツページでは、記事の見出しより上に資料の案内枠が固定的に置かれています。
記事を読みに来た人の視線が最初に通る位置を、そのまま接点に使う判断です。本文を最後まで読まない層にも届く反面、記事の内容と関係が薄い文言だと無視されやすくなります。常設枠を採用するなら、記事カテゴリ単位で出し分けられるかを先に確認しておきたいところです。
3つに共通しているのは、ボタンの装飾ではなく、誰にどの段階のものを渡すかという判断です。真似る対象を見た目に置くと再現しませんが、この判断の部分であれば自社の提供物に置き換えられます。
競合調査でCTAを見るときは、スクリーンショットを撮って日付を記録しておくと後で使えます。半年後に同じページを見ると構造が変わっていることがあり、変更の方向を比べるだけでも判断材料になります。撮る対象はボタン単体ではなく、その前後2画面分を含めてください。
関連記事：CTAとは？意味と種類、成果につながる設計と改善の手順
事例に共通していた、自社に移せる4つの条件
構造を並べていくと、成果が出ているCTAには重なる部分が見えてきます。色や角丸ではなく、押される前後の設計にあたる部分です。
1つ目は、押す直前に読者の状況が本文で言語化されていること。2つ目は、押した先で何が起きるかがボタンの中で言い切られていること。3つ目は、検討段階の違う人を同じ画面で取りこぼさないこと。4つ目は、1つの画面で求める行動が1つに絞られていることです。
3つ目と4つ目は矛盾するように見えますが、意味する層が違います。Amazonの2ボタンは、どちらも「買う」という同じ方向への行動で、進み方だけが分かれている形。一方、資料請求と採用応募と会員登録が同じ画面に並んでいる状態は、方向そのものが分かれています。前者は取りこぼしを減らし、後者は判断を増やす。並べてよいかどうかは、行動の方向が揃っているかで決まります。
- ボタンの直前の段落で、読者が置かれている状況に触れているか
- ボタンの文言だけを読んで、押した先で起きることが分かるか
- 同じ方向の行動で、進み方の違う選択肢を用意できているか
- 方向の違う行動を、同じ画面に並べていないか
- ボタンの先で求める入力量が、渡す情報の価値と釣り合っているか
最後の項目は、クリック率が上がったのに件数が変わらないときの確認先になります。1枚のチェックシートを渡すために電話番号と従業員数を尋ねていれば、フォームの途中で手が止まるのは自然な反応でしょう。
関連記事：記事を書いても問い合わせが来ない——CVにつながるコンテンツ導線の設計方法
記事コンテンツでは、ランディングページの成功事例が前提から合わない
公開されているCTAの成功事例は、ランディングページや商品ページを対象にしたものが多くを占めます。オウンドメディアの記事に持ち込むときは、前提の違いを踏まえて読み替える必要があります。
来訪した時点での目的が違う
ランディングページに広告経由で来た人は、その商品やサービスに関する何かを見に来ています。対して、記事に検索から来た人の目的は、疑問を解消することです。記事のCTAは、読者の段階に合う提供物を選ぶところから始まります。
| ランディングページ | 記事コンテンツ | |
|---|---|---|
| 来訪時の目的 | 商品やサービスの確認 | 疑問の解消と情報収集 |
| ページ内の行動の種類 | 1つに絞る | 記事の位置ごとに変える |
| 押す理由をつくる場所 | ページ全体の構成 | ボタン直前の本文 |
| 適したオファー | 申し込み、見積もり、購入 | 資料、事例、関連記事、相談 |
| 成果を測る単位 | ページ単位 | キーワード群と記事群の単位 |
右列に印を付けているのは、オウンドメディアを運用している方が自社の状況を当てはめる列だからです。CTAボタンの成功事例を読むときは、その事例がどちらの列を前提にしているかを先に確かめてください。広告のランディングページ向けに書かれた知見を記事へそのまま持ち込むと、噛み合わない場所が出てきます。
記事では、本文の質がそのままCTAの成果に乗る
ランディングページであれば、ボタンまでの説明もページ内で完結します。記事の場合、ボタンの手前にあるのは本文であり、その本文は検索意図に答えるために書かれたものです。
読者の課題が本文の中で具体的に書かれた直後は、自分の話として受け取られやすい位置になります。逆に、一般論だけで進む記事の末尾にボタンを置いても、押す理由は生まれません。CTAの改善だと思っていた作業が、実際には記事の中身の改善だったという結論になる場面は少なくありません。
同じ相談は、運用の現場からも繰り返し寄せられます。
経営者他社の成功事例を参考にして、記事の末尾のボタンを全部作り直しました。デザインも文言も揃えたのですが、問い合わせ数はほとんど変わっていません。次はどこを見ればよいでしょうか。
Writers-hub編集部
記事を、キーワードの段階別に3つに分けてみてください。用語の意味を調べている段階の記事、方法を比べている段階の記事、依頼先を選んでいる段階の記事です。全部の末尾に同じ問い合わせボタンが入っている状態なら、揃えたこと自体が原因になっています。段階ごとに渡すものを変えて、問い合わせは3つ目の群に集めてください。ボタンの見た目は、そのあとで整えれば十分です。
記事ごとに渡すものを変える運用は、本数が増えるほど管理の手間が膨らみます。それでも、他社の事例から文言を借りて全記事へ一括反映する作業より、先に効いてきます。
記事は積み上がっているのに、そこから先の数字が動いていないとき
どの記事にどのオファーを置くかは、記事1本ずつではなくメディア全体の設計として決まります。キーワードの棚卸しから本文の構成、記事内の導線までを含めた制作体制づくりを、Writers-hubがご一緒します。
自社で成功事例と呼べる記録を残すまでの手順
他社の事例を読む段階から一歩進めると、自社の記録が判断材料になります。変更前の数字を残していない改善は、事例にならないという点が出発点です。
クリック数、クリック率、遷移先の到達数、最終的な件数を、最低でも4週間分そろえます。曜日や月末の偏りがあるため、1週間だけの数字では比較の土台になりません。流入経路の内訳も一緒に控えておきます。
文言、色、位置、オファーのうち、どれを触るかを1つ決めます。同時に2つ以上を変えると、差が出ても原因を特定できません。急ぐ場合は、影響の大きいオファーから着手してください。
広告の出稿、メール配信、記事の大幅なリライトが重なると、切り分けができなくなります。止められない場合は、いつ何が動いたかを日付で残しておきます。
週あたりのコンバージョンが数件しかない状態では、差が出ても偶然と区別できません。足りない場合は数値比較をやめ、ヒートマップやフォームの離脱位置の観察に切り替えます。
数字だけを残すと、半年後に読み返したときに再現できません。対象ページ、期間、流入構成、同時に動いていた施策までを1枚にまとめておきます。
手順の中で最も飛ばされやすいのが、4つ目の母数の判定です。ABテストは条件が揃って初めて判断材料になる手法で、揃わないまま実施すると、誤った結論を土台にして次の改修へ進んでしまいます。
※ 出典: A/B Testing 101（Nielsen Norman Group）
記録の形式は凝ったものである必要がありません。続けられる粒度に落とすほうが優先されます。
記録シートは、スプレッドシート1枚で足ります。列は「対象ページ」「期間」「変更した要素」「変更前の数値」「変更後の数値」「同時に動いていた施策」「所感」の7つ。所感の列を作っておくと、数字に出ない気づきが翌年の判断に効いてきます。担当者が変わったときの引き継ぎ資料としても使えます。
ここまでの記録が2、3件たまると、他社の事例を読む目的も変わってきます。答えを探すためではなく、自社の記録と条件を突き合わせるために読む形に近づいていきます。
記録を残す前に、そもそも記事側の設計を見直したほうが早いと感じたなら
記事の検索意図とオファーがずれている状態では、どれだけ丁寧に記録しても差は出にくくなります。キーワードの選定から本文の構成、記事内の導線設計までを含めたSEO記事制作を、Writers-hubがお引き受けします。
事例を真似たときに起きやすい失敗
最後に、公開事例を参考にした改修でよく見かける形を挙げておきます。どれも、条件を確認しないまま結果だけを移したときに起きるものです。
- 事例と同じ色を使ったが、自社サイトでは既に別の要素で使っている色だった
- 事例の文言をそのまま置いたが、押した先に該当する提供物がなかった
- 複数の事例から良さそうな要素を集め、1画面に行動の方向が違うボタンが並んだ
- 記事の全ページに同じCTAブロックを一括で入れ、テンプレートの一部として読み飛ばされた
- 変更前の数字を控えないまま差し替え、効果があったかを判断できなくなった
4つ目は、CMSでの一括変更を行ったときに起きやすい形です。同じ形のブロックを繰り返すと、広告として無視される傾向は、ユーザビリティの研究でも繰り返し確認されています。Nielsen Norman Groupは、広告に似た見た目の要素、広告の近くにある要素、広告が置かれがちな位置にある要素を、利用者が意識せず避けることを報告しています。
※ 出典: Banner Blindness Revisited: Users Dodge Ads on Mobile and Desktop（Nielsen Norman Group）
一括で入れること自体が悪いのではなく、記事の内容と無関係な文言のまま全ページに複製されると避けられやすくなる、という順序です。カテゴリ単位でオファーを分けられる仕組みを持っておくと、この形は避けられます。
CTAボタンの成功事例についてよくある質問
事例の読み方について、相談の場で挙がることが多い論点をまとめます。
Web担当者公開されている成功事例は、参考にしないほうがよいということでしょうか。
Writers-hub編集部
読む価値はあります。読み方を変えてください。数字の大きさではなく、変更前の状態がどう書かれているか、比較期間に他の施策が動いていないと明記されているかを先に見ます。そこが書かれている事例なら、条件まで含めて参考にできるでしょう。書かれていない事例からは、施策の発想だけを借りて、自社の条件で確かめ直すことになります。
残りの論点も、質問の形で整理しておきます。
数字そのものより、変更前の母数と比較期間が書かれているかで判断してください。もとの数値と期間が明記されていれば、自社の規模と比べて再現の見込みを測れます。書かれていない場合は、その施策が有効だった可能性を示す情報として扱い、自社では改めて検証する前提で読むのが安全です。
始められます。母数が少ないうちは数値比較ではなく、サイト内でボタンの文言と見た目を揃える作業、記事ごとにオファーが合っているかの確認から着手してください。どちらもテストを伴わずに実行できて、後から比較する土台にもなります。
構造は参考になり、文言はそのまま使えないと考えてください。ボタンの中で行動を言い切る、負担の見通しを添えるといった原則は言語をまたいで成立します。一方、直訳した文言は日本語として不自然になりやすく、業種によっては強すぎる印象を与えます。
数を増やすより、自社と近い条件の事例を選ぶほうが役立ちます。業種、サイトの種類、月間セッションの規模、主な流入経路の4点が近いものを3件ほど押さえられれば、共通する構造は見えてきます。
使えますが、他社の数字を自社の見込み値として提示するのは避けてください。事例は施策の方向性を示す材料として使い、目標値は自社の過去データから置くほうが、後の振り返りで責任の所在がはっきりします。
まとめ
CTAボタンの成功事例は、そのまま移植する対象ではなく、条件を読み取るための材料として使うものです。公開されている数字の裏には、もとの母数、流入の構成、同時に動いていた施策といった前提があり、そこが違えば結果は揃いません。まずは自社と条件の近い事例を選び、押す直前の文章、ボタンの中で言い切られている内容、行動の方向が揃っているかという構造を取り出してください。そのうえで変更前の数字を記録し、1つずつ変えていけば、他社の事例ではなく自社の判断材料が手元に残ります。
記事コンテンツの場合、CTAの成果を決めるのは本文との接続です。読者の状況が言葉になっていない記事の末尾にボタンを置いても、押す理由は生まれません。合同会社Writers-hubでは、SEO記事の制作から記事内の導線設計、渡すオファーの組み立てまでを含めたコンテンツ制作をお引き受けしています。
他社の事例を並べてはみたものの、自社ではどこから手を付けるか決めきれないなら
着手する順番は、いまのメディアの規模と記事の構成によって変わります。現状をうかがったうえで、記事側の見直しとCTA側の調整のどちらを先に置くかからご提案します。
