マグネティック リンク（カーソルが寄る）

解説

カーソルがボタンに近づくと、リンクがマウスへ吸い寄せられるように少しだけ動く演出です。仕組みは mousemove で要素の中心からカーソルまでの差を計算し、その距離を約3割に縮めて transform:translate に渡すというもの。カーソルが離れると translate(0,0) に戻り、元の位置へすっと戻ります。

ヒーローの主要ボタン、採用ページの応募リンク、ポートフォリオの問い合わせなど、ひとつの行動へ確実に誘導したい大事なリンクに向いています。マウスに反応する動きが、押したくなる感覚を生み出します。

調整と配慮

• 吸い寄せの強さは座標に掛ける係数（例の 0.3）で変えられます。大きくすると大胆に、小さくすると控えめになります。
• data-m 属性を付けた要素すべてに同じ動きが適用されるため、複数のボタンへまとめて使えます。
• タッチ端末では動かないため、見た目だけでも押せると分かるデザインにしておきます。動きを嫌う利用者向けに無効化する配慮もあると丁寧です。

使用例・適したシーン

• ナビゲーションのインタラクティブ装飾
• ギャラリーのホバーリビール
• サービスカードの強調