こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトを見ていると「背景がじんわり動いている」「マウスに合わせて色が変わる」そんなおしゃれなエフェクトを見かけたことはありませんか？
特に最近では、静的な背景ではなく「ユーザー操作によって変化する背景デザイン」が人気です。理由はシンプルで、視覚的に楽しく、滞在時間の向上にもつながるからです。
今回は、「マウスを動かすと背景のグラデーションが変化する」というインタラクティブなデザインを紹介します。JavaScriptをほんの少し加えるだけで、雰囲気のある背景が簡単に作れるので、ぜひ試してみてください！
マウスに合わせて変化する背景の魅力
通常の固定された背景とは異なり、マウスに反応して色が変化する背景には以下のようなメリットがあります。
- 直感的なインタラクションでユーザーを引き込める
- 動きのあるデザインでサイトの第一印象を高められる
- シンプルな実装でも“最新感”を演出できる
- ブランドカラーや世界観に合わせてアレンジできる
特にポートフォリオサイトやランディングページでは効果抜群です。
実装の基本アイデア
今回の仕組みはとてもシンプルです。
- mousemoveイベントでマウスの位置を取得する。
- 位置情報（X座標・Y座標）を割合に変換する。
- その値をHSLやRGBに変換し、CSSのbackgroundプロパティに反映する。
これだけで、マウスを動かすと背景グラデーションが変化するおしゃれな演出が可能になります。
実際のコード例
以下はシンプルなサンプルコードです。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用アイデア
このコードを少しアレンジすると、さまざまな表現が可能です。
- マウスの動きに合わせて**彩度や明度**を変える
- 複数レイヤーの背景に適用して**奥行き感**を演出する
- CSS変数（カスタムプロパティ）を使って他の要素にも色を同期させる
まとめ
「マウスを動かすと背景のグラデーションが変化する」エフェクトは、シンプルながらサイト全体の印象をグッと引き上げてくれる手法です。
少しのJavaScriptとCSSで実装できるので、ぜひポートフォリオやランディングページで取り入れてみてください。
satokotadesignキャンペーン実施中！
