2021.11.09 2017.04.01

ランディングページ内のボタン要素は主に資料請求や申込みなどの成果達成につながる要素であることが多く、 大変、重要な要素となります。
このボタンにCSS3アニメーション適用することで、クリック率が大幅に改善する可能性があります。
今回のA/Bテストではアニメーションを適用していない普通のボタンと、
アニメーション効果を適用したボタンで行いました。
※テストで使用したアニメーションイメージ
約2週間のテストから、下記の結果となりました。
パターン | クリック率 | 該当パターン訪問者数/総訪問者数 |
---|---|---|
アニメーション無 | 12.64% | 71/561 |
アニメーション有 | 18.40% | 100/561 |
クリック率で約6%の差が出ています。
アニメーションにすることで、訪問者の目をひきクリック誘導に成功したテストとなりました。
注意点としましては、スマートフォンなどの画面領域が狭い環境では
アニメーションすることで誤タップを誘発する可能性があります。
デザインやレイアウトに十分配慮の上、アニメーション導入を検討してみましょう。

BCJ管理人
ブルースクレイ・ジャパン(株)サイトの管理人です。 担当業務は全ファネル領域におけるサイト改善コンサルです。
BCJメールマガジンのご登録
最新のセミナー情報やお役立ち情報をメールにてお届け致します!
-
【SEO初心者必見】検索結果で目立つ構造化データの使い方と実装ステップ
2025.06.05
View more
-
【徹底比較】4C分析とは?3C・4Pとの違いとマーケティングでの使い分けガイド
2025.04.08
View more
-
RFM分析とは?3つの指標で顧客をセグメント化する方法を解説
2025.04.04
View more
-
トピッククラスターとは?作り方やSEO対策における効果、メリットを徹底解説
2025.01.20
View more
-
E-E-A-T攻略法!E-E-A-Tの基本からYMYL、SEOに与える影響やGoogle評価基準まで徹底解説
2024.12.25
View more
-
4P分析とは?基本から他フレームワークとの違い、活用事例まで徹底解説
2024.12.23
View more