PcBanner SpBanner

ボタンのアニメーション効果

2017.04.01 2021.11.09

ボタンのアニメーション効果

ランディングページ内のボタン要素は主に資料請求や申込みなどの成果達成につながる要素であることが多く、 大変、重要な要素となります。

このボタンにCSS3アニメーション適用することで、クリック率が大幅に改善する可能性があります。
今回のA/Bテストではアニメーションを適用していない普通のボタンと、
アニメーション効果を適用したボタンで行いました。

btn_ani※テストで使用したアニメーションイメージ

約2週間のテストから、下記の結果となりました。

パターン クリック率 該当パターン訪問者数/総訪問者数
アニメーション無 12.64% 71/561
アニメーション有 18.40% 100/561

クリック率で約6%の差が出ています。
アニメーションにすることで、訪問者の目をひきクリック誘導に成功したテストとなりました。

注意点としましては、スマートフォンなどの画面領域が狭い環境では
アニメーションすることで誤タップを誘発する可能性があります。

デザインやレイアウトに十分配慮の上、アニメーション導入を検討してみましょう。

img
BCJ管理人

BCJ管理人

ブルースクレイ・ジャパン(株)サイトの管理人です。 担当業務は全ファネル領域におけるサイト改善コンサルです。

BCJメールマガジンのご登録

最新のセミナー情報やお役立ち情報をメールにてお届け致します!

その他の「Webデザイン」関連カテゴリ

お急ぎの方はお電話ください

03-5468-3860

受付時間10:00-18:00(土日祝休)

メールでのお問い合わせはこちらから