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

自社サイトのウェブアクセシビリティ状況、診断してみませんか？

株式会社デジタルアイデンティティでは、ウェブアクセシビリティ診断サービスを提供しています。

2024年4月、障害者差別解消法の改正施行に伴い、2024年6月から一般企業にも「合理的配慮」が義務化されています。
これに伴い、努力義務である「環境の整備」に含まれるウェブアクセシビリティについても、対応を進める企業が増えています。

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

• どこからウェブアクセシビリティ対応に手をつければ良いかわからない…
• 今のサイトで問題のあるページを一覧化して欲しい…
• ウェブアクセシビリティの具体的な改善方法を知りたい…

WCAG2.2に準拠した診断項目・達成基準で、問題のあるページをリスト化してページ単位で問題点をリストアップ。
課題点が明確になるので、具体的な改善アクションに繋げることができます。

また、診断後の改善作業を弊社にワンストップでご依頼いただくことも可能です！
ぜひお気軽にご相談ください！

ウェブアクセシビリティ診断のお申し込みはこちら