はじめに
カーソルまわりの演出は、やりすぎると使いづらくなりますが、控えめに入れると少し触ってみたくなる空気が出ます。特に CTA のような要素では、派手さよりも「近づいたときに違和感なく反応すること」の方が見え方に効きやすいです。
このサンプルでは、遅れてついてくるカーソル表現と、近づいた分だけ少し吸い付くボタンを組み合わせています。どちらも大きくは動かさず、マウスの移動に対して少しだけ余韻が残るくらいにすると、比較的自然な触感に寄せやすいです。
組み合わせのポイント
- カーソルはぴったり追いかけず、わずかに遅らせて余韻をつくる
- ボタンは吸い付く量を控えめにして、意図しない操作感にならないようにする
- hover 中だけ反応を強め、離れた瞬間はすっと元に戻して切り替えを明確にする
- 戻りのイージングを柔らかくすると、実際の操作に対して違和感が出にくい
- 演出の主役はあくまでボタンなので、カーソル側を目立たせすぎない
まとめ
マウス系の演出は、派手さよりも反応の気持ちよさを優先した方がまとまりやすいです。強く引っ張ったり大きく遅延させたりすると使いにくさが出やすいので、まずは小さな追従と小さな吸着から試して、違和感の少ないところで止めるのがよさそうです。