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

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

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

【無料】2024年4月法改正!ウェブアクセシビリティセミナー動画、公開中!

株式会社デジタルアイデンティティでは、過去に開催したウェブアクセシビリティセミナー動画を無料公開しています。

2024年4月、障害者差別解消法の改正施行に伴い、2024年6月から一般企業にも「合理的配慮」が義務化されることで、注目されているウェブアクセシビリティ。
しかし、まだ対策の事例も少なく、Web制作会社であっても対応が難しいというケースも。

本セミナーでは法改正による義務化の範囲、ウェブアクセシビリティの基本的な対策内容、具体的な対策手順など、基本的な内容をまとめて解説しています。

こんなお悩みはありませんか?

  • ウェブアクセシビリティが何か、よくわかっていない…
  • 対応しなかった場合、罰則があるのか不安…
  • 具体的な対策の進め方を知りたい…

過去セミナーの動画ですので、いつでも自分の好きなタイミングでご視聴いただけます。
以下のリンクから、ぜひお気軽にお申し込みください!

【無料】ウェブアクセシビリティセミナーお申し込みはこちら

関連記事

Keywords

無料!プロに相談する Web制作・システム開発のご相談はこちら

Webサイトリニューアル費用はどのくらい?