マグネティックボタン
マグネティックボタンは、カーソルがボタンに近づくとボタン自身がその方向へ少し引き寄せられる、磁石のような演出の操作パーツです。実装は mousemove でカーソル座標を取得し、ボタン中心からのずれを 0.3〜0.4 倍した値を transform: translate() に渡すだけのシンプルな構成で、離れると…
解説
マグネティックボタンは、カーソルがボタンに近づくとボタン自身がその方向へ少し引き寄せられる、磁石のような演出の操作パーツです。実装は mousemove でカーソル座標を取得し、ボタン中心からのずれを 0.3〜0.4 倍した値を transform: translate() に渡すだけのシンプルな構成で、離れると mouseleave で元位置へ戻します。動きの滑らかさは CSS の transition が担うため、JavaScript は座標計算だけに専念できます。
使うと映える場面
- ヒーロー直下の主要 CTA を「触りたくなる」要素にしたいとき
- ポートフォリオやブランドサイトの遊び心ある問い合わせボタン
- 料金ページの申し込みボタンなど、視線を集めたい一点
引き寄せの強さは座標に掛ける係数で調整でき、値を小さくすると上品に、大きくすると大胆に動きます。注意点として、この効果はマウス前提なのでタッチ端末では発火しません。指で押す体験を壊さないよう、モバイルではタップしやすい大きさを保ち、過度な追従は避けてください。動きが苦手な利用者向けに prefers-reduced-motion で 追従を無効化する分岐を入れると親切です。
使用例・適したシーン
- クリエイティブポートフォリオ
- アートディレクション系
- ブランドサイト
よくある質問
引き寄せる強さはどこで変えられますか
JavaScript 内でカーソルのずれに掛けている 0.3 や 0.4 という係数が強さです。小さくすると控えめに、大きくすると大胆に動きます。横と縦で別の値を使えば動きの癖も変えられます。
スマホでも動きますか
この演出はマウスの移動を前提にしているため、タッチ操作のスマホやタブレットでは発火せず通常のボタンとして機能します。モバイルではタップしやすいサイズを保てば問題ありません。