“押してオーラ”でCV率アップ！？CSSアニメーションでクリックしたくなるCVボタンを作る

その1：「あ、これ押せそう」と思わせる

See the Pen button hover animation by Risa Hagiwara (@cr022) on CodePen.

マウスカーソルを乗せた時に要素が変化すると、ユーザーは直感的に「これはクリックできるエリアだ」と認識します。
サンプルのような凸型のボタンデザインの場合、多くの人が実際の生活の中で「凸型のボタンに触れたら凹む」という変化を体験しているため、その法則に倣ったアクションをつけることで、より「押したい！」という気持ちを掻き立てることができます。

その2：「押して！」オーラを出す

See the Pen button aura animation by Risa Hagiwara (@cr022) on CodePen.

人間には、動いているものを目で追う習性があります。
ボタンをアニメーションさせてユーザーの視線を誘導することで、重要なボタンを見落とす可能性を減らし、またユーザーの好奇心をくすぐることができます。
ボタン自体のデザインを派手にしなくとも目立たせることができるため、周囲の要素に埋もれてしまいがちなゴーストボタン等にも有効なのではないでしょうか。
ただし、主張の強いボタンが複数並んでいるとかえってユーザーを迷わせることになるので、使いどころをよく見極める必要があります。

その3：「押せそう」と「押して！」を組み合わせる

See the Pen button aura&hover animation by Risa Hagiwara (@cr022) on CodePen.

上でご紹介した2つのテクニックを組み合わせてみましょう。
アニメーションするボタンで視線を引きつけ、マウスオーバーアクションでさらにクリックしたい気持ちを後押しします。
このボタンを押したらいかにも何かが起こりそう……そんな気持ちになりませんか？

まとめ

ほとんどの主要ブラウザがCSS3アニメーションに対応したことで、ボタン1つをとっても様々な工夫を凝らしているサイトが多く見られるようになりました。
今回ご紹介したサンプル以外にも、「押せそう」と「押して！」をアピールするアニメーションパターンはたくさん存在します。
ユーザーが思わずクリックしたくなるようなボタンを模索し、CV率アップを目指していきましょう！

DIではボタンの改善を含め、CVへの誘導を意識した設計・デザインのコンサルティングをご提供しています。WEBサイトのコンバージョン率を改善したい方、動線に改善余地が無いか気になる方、お気兼ねなくお問い合わせください！

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。