カーソルエフェクトの作り方 — 追従・マグネット・スポットライト
カスタムカーソルや追従エフェクトは、ポートフォリオやクリエイティブLPの没入感を一段引き上げます。本ガイドでは、マウス座標の取得から、追従・マグネット・スポットライトといった代表的なカーソル演出の実装を解説します。
マウス座標の取得が基本
すべての起点は mousemove イベントです。getBoundingClientRect() で対象内の相対座標を求め、CSS変数（--x / --y）や transform に渡します。
実装デモ：Custom Cursor
追従（lag follow） — 慣性のある動き
requestAnimationFrame のループ内で現在地を目標地点に x += (target - x) * 0.1 のように少しずつ近づける（lerp）と、遅れて滑らかに追う慣性が生まれます。
マグネット — 要素が引き寄せられる
ボタン中心とカーソルの距離を測り、一定半径内なら距離に比例して要素を translate で寄せます。離れたら原点へ戻す。CTAの存在感を高める人気手法。
スポットライト — カーソルが照らす
カーソル位置を中心にした radial-gradient を要素に当てると、カーソルが表面を照らすスポットライトになります。カードや隠し文字の演出に。
実装デモ：Cursor Glow Follow、Cursor Spotlight Reveal、Card Spotlight
アクセシビリティの注意
cursor: none で標準カーソルを隠す場合、タッチデバイスや支援技術利用者への配慮が必要です。重要操作はカーソル演出に依存させないこと。
@media (hover: none) でタッチ端末では演出を無効化するのが安全です。
FAQ
カーソルエフェクトはモバイルで動く？
マウスのないタッチデバイスでは多くが機能しません。
@media (hover: none) で無効化し、標準カーソル演出に依存しない設計にします。追従がカクつくときは？
transform（translate）で動かし、left/top の変更は避けてください。requestAnimationFrame を使い、重い処理をループ内に入れないことも重要です。
cursor: none にしたら操作しづらい
代替の視覚要素（ドットやリング）を必ず表示し、ボタン等のクリック領域が分かるようにします。
パフォーマンスへの影響は？
mousemove は高頻度発火するため、ループは rAF にまとめ、DOM 生成は最小限に。トレイル系は要素数の上限を設けると安定します。
関連書籍
PR · Amazon
CSSアニメーション + 高度なテクニック
CSS animation を体系的に学べる定番書。実例多数。
PR · Amazon
Web Designer 必須テクニック
プロのWeb制作で使えるUI/UXとアニメーション解説。
PR · Amazon
Microinteractions（マイクロインタラクション設計）
Dan Saffer著・マイクロインタラクション設計の定番書。
学びを止めない · Amazonサブスク
PR · Amazon
Kindle Unlimited
技術書・デザイン書が読み放題。30日無料体験 →
PR · Amazon
Audible
移動中に耳で学ぶオーディオブック。30日無料体験 →
PR · Amazon
Amazon Prime
Prime Reading・配送特典つき。30日無料体験 →
PR · Amazon
Music Unlimited
作業用BGMに。1億曲が聴き放題・30日無料体験 →
※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。