こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトを訪れたとき、ふっと目を引く「ちょっとした仕掛け」に心が躍った経験はありませんか？
中でも、マウスの動きに合わせて光が尾を引いたり、カーソルが幻想的に光ったりするエフェクトは、ユーザー体験をぐっと楽しいものに変えてくれます。
今回は 「マウスに追従する光るカーソルエフェクト」 の作り方を解説します。
JavaScriptとCSSを組み合わせれば、数行のコードで実現できるシンプルな方法から、応用的な表現まで自在に広げられます。
なぜカーソル演出が有効なのか？
- 視線誘導の役割：動く要素に人間の目は自然と注目します。
- 滞在時間の延長：小さな遊び心が「もっと見たい」という気持ちにつながる。
- ブランディング効果：サイトの世界観を強調する演出として機能。
もちろん、やりすぎは逆効果!
本文の可読性や操作性を邪魔しない、程よい演出を心がけることがポイントです。
基本の実装：円形の光がマウスを追従
以下のコードは「光る円」をマウス位置に追従させるシンプルな例です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
これで「通常カーソルを隠して、光る円がマウスの動きに合わせて動く」仕組みが完成します。
応用：残像エフェクトで幻想的に
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
さらに「尾を引く光」を作れば、より幻想的な表現が可能です。
考え方はシンプルで、マウスの座標を記録し、複数の光を時間差で表示するだけです。
- 1フレームごとに新しい光を追加
- 古い光は透明にしてフェードアウト
- 複数の光が残像のように重なり合う
これをCSSの opacity と transition を使って実装すると、自然な「流れ」が生まれます。
注意点：パフォーマンスとユーザビリティ
演出に凝りすぎると、サイトが重くなったり、ユーザーが操作に困惑してしまうリスクもあります。
- マウス移動ごとに大量のDOM操作を行わない（CanvasやrequestAnimationFrameで最適化）。
- スマホ閲覧ではカーソルが存在しないので、無効化する。
- 光が強すぎると本文が読みにくくなるため、透明度を調整する。
まとめ
マウスに追従する光るカーソルは、ちょっとした遊び心を加えたいときに効果的なUI演出です。
シンプルに「円が追従する」だけでもインパクトがありますし、残像やグラデーションを加えるとさらに幻想的な世界観を表現できます。
ただし、大切なのは 「ユーザー体験を損なわない範囲で活用すること」。
Webサイトの目的やターゲット層に合わせて適度に取り入れれば、記憶に残る演出になるでしょう。
satokotadesignキャンペーン実施中！
