カードUIの影が動く！CSSとJavaScriptで実装する「光の追従」エフェクト

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトのデザインをより魅力的に見せるテクニックのひとつに「影の使い方」があります。

特にカードUI（商品一覧やブログ記事カードなど）では、影をどう表現するかでデザインの印象が大きく変わります。
今回は、カーソルの動きに応じて影がリアルに動く「光の追従」エフェクトをご紹介します。
まるで画面上にライトがあり、ユーザーの操作に合わせて立体的な陰影が変化していくような表現です。

この表現を取り入れることで、カードがより浮き上がったように見え、ユーザーの視線を惹きつけやすくなります。
例えば、商品カードに適用すれば「高級感」や「立体感」が演出でき、ブログ記事のサムネイルカードなら「遊び心のあるUI」に早変わり。
インタラクションデザインの中でも導入のしやすい演出ですので、ぜひ実装してみてください。

実装の基本アイデア

マウス位置を検知する

まずは JavaScript でマウスカーソルの位置を取得します。 カーソルがカードのどの位置にあるのかを計算し、その情報を影の位置に反映させます。

影を動的に変化させる

CSS の box-shadow を JavaScript で書き換えることで、マウスの移動に合わせて影の角度や距離を変化させます。 これにより「光源が動いている」ような自然な表現が可能になります。

実装サンプルコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

このサンプルでは、マウスを動かすと影がカードの反対側へ動きます。
カーソルを左上に動かせば光が左上から当たっているように見え、右下に動かせば逆の影が出ます。

応用アイデア

こうした工夫を加えると、よりインタラクティブでユーザーを引き込むデザインが完成します。

まとめ

「光の追従」エフェクトは、シンプルなカードUIにリアルな立体感を加えられる強力なテクニックです。
特に視覚的な訴求力が求められる商品紹介ページやポートフォリオサイトでは、効果的にユーザーの印象に残ります。
ちょっとしたスクリプトを加えるだけで見栄えが大きく変わりますので、ぜひ一度試してみてください。

satokotadesignキャンペーン実施中！