簡単なホバー処理をワンランク上質にする意識したい6つのこと

Last updated at 2024-12-22Posted at 2024-12-22

はじめに

よくあるボタンなどのホバーアニメーションを
もう一段カッコよく、もう一段できるやつ風に...「あら、なんだか気が遣えていい感じね」と思わせたい。
そんな僕が普段頭の片隅で意識している6つのことを紹介します。

使い所を選ぶものもあり狙った通りの効果を生まない場面もありますので、
アイデアの1つと捉えていただくとちょうどいい内容です。

ぜひ今日から皆さんも意識しつつ、普段のホバーアニメーションのランクを上げる一助になればと思います。

一番多く実装されるやつですかね。
実装も簡単で、CSSのopacityプロパティを使うだけです。

背景が白や黒の単色の場合はあまり気にならないですが、
背景がボタンの補色であったり、
画像やグラデーションなど複雑なもので構成されている

そんな場合にボタンを透過すると、視認性が落ちまくりです。

透過させるボタンの背景に白もしくは黒の背景を追加することで、見た目を保つという方法をとります。
例は少し極端な色を背景にしていますが、ホバー領域がしっかり見やすく保ててよさそうですね。

See the Pen 背景透過 by arichel-unt (@arichel-unt) on CodePen.

さらにより視認性を高めるために、
ボタンの背景だけ透過させ、テキストは透過させないという方法もオススメです。

コントラスト比も意識しつつ、
どの部分をアニメーションさせるか意識して使うことで、より高品質なホバーアニメーションを目指しましょう。

ホバーした後のスタイルがホバーする前のスタイルと同じ場合、
アクティブ状態を知らせるのがアニメーション再生時しかないため不親切です。

ユーザーにボタンが反応していることを伝えるために重要ですので、
ホバーした前と後のスタイルは異なるようにすることをオススメします。

よくある矢印の例です。
矢印が帰ってくるアニメーションは簡単でかっこいいので好きですが、
元のスタイルと変化がわからなくなるので
やるなら違う箇所で差をつけたいところ。

ボタンに影が付いているデザインの時などは、scaleでボタンを縮めたくなりますよね。
ボタン押してます感があるのでとても素敵です。

ただホバー領域が縮まってしまうと、ボタンの端っこを狙っている時にホバーが外れてしまい、ガタガタと拡縮されるのがちょっとダサいかも。

例は赤枠が実際のボタンの領域です。「いい感じ！」のボタンは中身だけが縮小されている点に注目してください。
こちらの方がスムーズにホバーできるのでオススメです。

スライダーのライブラリなどを使用しているとよく出現するこいつ。
ライブラリによってはクリックさせる気がないほど領域が狭いのでケアしたいところ。

擬似要素で領域を広げてあげるだけでもユーザビリティが向上するので、
積極的に見直してみてください。

アニメーションをワンランク上質にするためにはぜひ、ホバーが外れる時のアニメーションも重要視したいところ。

ホバー時とマウスアウト時のアニメーションは逆再生になると美しくないものもあります。

マウスアウトとはフォーカスから外れ、すでにユーザーの視線にはありません。
目についてしまうアニメーションを避け最小で元に戻ることを意識します。

例は、ホバー時よりマウスアウト時の方がtransitionの時間が0.1sほど短めにしています。
また、ボーダーのアニメーションも逆再生しないようにしました。

マウスアウト時は邪魔にならないように、を意識していくとよさそうですね。

なんとも簡単な実装になりがちなボタンなどのホバーアニメーションですが、
簡単な実装からでも

もう一歩ユーザビリティを意識して
もう一歩かっこよさを意識して

そうしてこだわるとなかなか奥が深いものです。

欲張ると構造が複雑になってしまいがちですが、
JavaScriptを使わずともできる範囲で、よりご機嫌で上質な実装を目指したいですね。

ありちぇるでした。