この記事では一部分を中心に解説しています。
全体像や関連知識もあわせて理解したい方は、以下の記事もぜひご覧ください。
スクロールCTAが集客に効果的な理由
ユーザーはページを最後まで読まないことも多いため、常に行動できる導線が重要です。 スクロールに応じてCTAを表示することで、問い合わせ率の向上が期待できます。スクロールすると「お問い合わせはこちら」のボタンが表示されます。
スクロールすると「お問い合わせはこちら」のボタンが表示されます。
お問い合わせはこちらタイミングよく表示できる
一定のスクロール位置で表示することで、自然なタイミングで誘導できます。離脱前にアクションを促せる
ページを閉じる前にボタンが目に入ることで、クリックされる可能性が高まります。実装の流れ
シンプルなJavaScriptで実装できます。HTMLの準備
まずはCTAボタンを用意します。<a href="/contact" class="cta-btn">お問い合わせはこちら</a>CSSで初期状態を非表示にする
最初は表示しないように設定します。<style>
.cta-btn {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
</style>JavaScriptでスクロール制御
スクロール量に応じて表示・非表示を切り替えます。<script>
window.addEventListener('scroll', function() {
const btn = document.querySelector('.cta-btn');
if (window.scrollY > 300) {
btn.style.display = 'block';
} else {
btn.style.display = 'none';
}
});
</script>さらに効果を高めるポイント
実装だけでなく、見せ方も重要です。アニメーションを追加する
フェードインさせることで自然に表示できます。色や文言を工夫する
「無料相談はこちら」など、具体的な行動を促すと効果的です。スマホ対応の注意点
スマホでの表示も必ず確認しましょう。タップしやすいサイズにする
ボタンが小さいと押しづらく、効果が下がります。他のUIと重ならないようにする
メニューやフッターと被らない位置に配置しましょう。まとめ
スクロールCTAは、簡単な実装で大きな効果が期待できます。 ・スクロールに応じて表示する ・自然なタイミングで誘導する ・スマホでも使いやすくする この仕組みを取り入れることで、問い合わせ率の向上につながります。 今回解説した内容に関連するテーマは、以下の記事でも詳しく解説しています。
理解を深めたい方は、あわせてご覧ください。