悩めるWEB担当者様のための最新ノウハウをお届け

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

thumb_20170821

こんにちは、クリエイティブDiv.の萩原です。

皆さんは、Webサイトを見ていて「このボタンをクリックしたい」と思ったことはありますか?

サイトの目的にもよりますが、特にLPやキャンペーンサイトでは、ユーザーにCVボタンをクリックしてもらうことが非常に重要です。
魅力的なビジュアルやキャッチコピーでアピールしても、いざCVしようとした時に「ボタンはどこ?」「これクリックできるの?」などと思われてしまっては、ユーザーを逃してしまいます。

では、一体どんなボタンならユーザーの心を引き付けることができるでしょうか?
今回はCSSアニメーションを使用して「クリックしたくなるボタン」を作るテクニックをご紹介します。

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

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

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

参考事例

【交通事故コンシェルジュのMr.リード(ミスターリード)】交通事故被害の総合情報ポータルサイト
img01_20170816
https://mr-lead.com/
Camden Town Brewery
img02_20170816
http://www.camdentownbrewery.com/

その2:「押して!」オーラを出す

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

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

参考事例

FirstTouch, Inc.
img03_20170816
http://1st-touch.jp/
伊勢丹新宿店食品フロアのツボ
img04_20170816
http://www.isetanspecial.com/foodfloor/

その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に関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

関連記事