【ITニュース解説】Building a Mouse-Responsive SVG Polygon Background with JavaScript and CSS

ウェブサイトを訪れた際、背景の画像がマウスの動きに合わせて反応し、まるで生きているかのように変化する様子を目にしたことがあるかもしれない。このようなインタラクティブな背景は、ウェブサイトに魅力を加え、ユーザーの注意を引きつける効果がある。本稿では、静的なSVG（Scalable Vector Graphics）画像を用いて、マウスの動きに反応して色を変える多角形背景をJavaScriptとCSSを組み合わせて作成する具体的な方法を解説する。これは、ポートフォリオサイトやインタラクティブなウェブページ、あるいはプロフェッショナルな環境でも利用できる、視覚的に興味深い要素となる。特に、幾何学的な模様を簡単に生成できるツール「Haikei」で作成された多角形背景を例にとり、その操作方法を順を追って説明する。

このプロジェクトの目的は、Haikeiで作成された多角形背景を、マウスがその上を通過する際に色を変えるようにすることだ。具体的には、ユーザーがSVG画像上の多角形にマウスカーソルを重ねると、その多角形自身の色が微妙に変化し、さらにその周囲にある多角形にも影響が及ぶように設計する。この変化の度合いは、マウスから多角形までの距離に応じて調整され、例えばマウスに近い多角形は大きく色を変え、少し離れた多角形は穏やかに変化するといった効果を作り出す。このような変化によって、背景全体がまるで波打つような、あるいは光が差すような動的な表現が可能になる。色を暗くしたり、明るくしたり、光るような効果を加えたりと、様々な視覚効果を実装できる柔軟性もこの手法の魅力の一つだ。

まず、動的な背景として使用する多角形パターンを準備する。Haikeiという無料のリソースを使用して、多角形のパターンを生成し、それをウェブページで使用するSVG形式でエクスポートする。エクスポートされたSVG画像は、PCの画面サイズ（例えば1920x1080ピクセル）に比べて小さい場合があるため、デザインツールであるFigmaなどに一度インポートして、画面いっぱいに広がるようにサイズを調整する。これにより、どのデバイスでも適切に表示されるような柔軟な背景を作成できる。ここでの重要な作業は、作成したSVG画像に含まれる多数の多角形一つ一つに、個別にJavaScriptからアクセスして色を操作できるように、ユニークなID（識別子）を付与することだ。例えば「Vector1」「Vector2」といった規則的な名前を付けてIDとしてエクスポートしたり、SVGコードを直接編集してIDを付与したりする方法がある。このIDによって、プログラムはどの多角形を操作すべきか正確に判断できるようになる。最後に、SVG画像がウェブページ上で適切に表示され、画面いっぱいに広がるように、SVGタグにwidth="100%", height="100%", viewBox="0 0 1980 1080", preserveAspectRatio="none"といった属性を設定する。これにより、SVGは親要素のサイズに合わせて縦横比を保たずに伸縮する。さらに、このSVGを、画面全体に絶対位置で配置されるdiv要素（CSSでposition: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;を設定）の中に配置することで、背景として画面いっぱいに表示され、はみ出した部分は隠されるようになる。

多角形の色をマウスホバー時に変えるだけであれば、CSSの:hover疑似クラスを使えば実現できるが、今回の目標は、マウスの周囲にある複数の多角形に距離に応じて影響を与えることだ。そのため、すべての多角形に関する必要な情報をアプリケーションの起動時に一度だけ収集し、それらのデータに基づいてマウスの動きを処理するアプローチが採用された。この方法は、マウスが動くたびに要素を頻繁に探し出すような、パフォーマンスに負荷のかかる処理を避けるための効率的な解決策となる。

アプリケーションが起動し、ページが読み込まれたとき、最初にSVG内のすべての多角形（パス要素）を処理し、必要な情報を収集して保存する。この「初期設定」は一度だけ行われることで、後続のマウス処理の効率を大幅に向上させる。各多角形について収集するデータは以下の4つだ。一つ目は、多角形に付与したユニークなID。二つ目は、マウスからその多角形までの距離を一時的に保持するための値。三つ目は、多角形の初期色。これは多角形がマウスの影響を受けて色が変わった後、元の色に戻す必要がある場合に備えて記憶しておく。四つ目は、多角形の中心座標。多角形が画面上のどこに位置しているかを特定するための重要な情報だ。なぜこの情報を保存する必要があるかというと、多角形の座標を取得するような処理は、実行するたびに比較的大きなコストがかかるためだ。これをマウスが動くたびに、つまり毎フレーム実行することは、ウェブページの動作を重くする原因となる。そのため、アプリケーションの初期化時、またはウィンドウのリサイズ時に一度だけ中心座標を計算し、その結果を保存しておくことで、不要な再計算を避け、スムーズなアニメーションを実現する。

多角形の初期設定が完了したら、いよいよマウスの動きに反応する主要な処理に入る。この処理は、ユーザーがマウスを動かすたびに実行されるmousemoveイベントリスナーの中に記述される。mousemoveイベントが発生すると、イベントオブジェクトから現在のマウスのX座標とY座標を取得し、これをプログラム内で利用しやすいように保存する。次に、初期設定時に収集・保存しておいた全ての多角形データ（ID、距離、色、中心座標を含むオブジェクトの配列）を一つずつループ処理する。このループ内で、各多角形に対して、その中心座標と現在のマウスの座標との間の直線距離を計算し、その多角形データの距離情報を更新する。これにより、すべての多角形について、マウスからの最新の距離が常に把握されることになる。

マウスからの距離情報を使って、実際に多角形の色を変化させる。この処理は、多角形オブジェクト、最大距離、色の変化の強度といったパラメータを受け取る関数で行われる。まず、多角形のIDを使って、HTMLドキュメント内の実際のSVG要素を取得する。次に、計算されたマウスからの距離と、効果が及ぶ最大距離とを比較し、距離が最大距離を超えないように調整する。ここで色の変化の核心となる計算が行われる。元の明るさ（初期値は100%）と、マウスからの距離を最大距離で割って正規化した値を使用する。この正規化された値は、マウスに近いほど小さく、遠いほど大きくなるように調整される。そして、元の明るさにこの正規化された値を掛けることで、新しい明るさが決定される。結果として、マウスに非常に近い多角形は明るさが大幅に減少し（暗くなり）、遠い多角形はわずかに明るさが減少する程度となる。計算された明るさを使って、HSL（Hue, Saturation, Lightness）形式で新しい色を生成し、その多角形要素の塗りつぶし色と線色スタイルに適用する。色の滑らかな変化のためには、CSSのtransitionプロパティも設定される。元の多角形の色を活かすためには、初期設定時に保存しておいた多角形の色相と彩度の値と、この計算された明るさの値を組み合わせる。これにより、元の色合いを保ちつつ、マウスからの距離に応じて明るさだけが変化する、より自然で魅力的な効果が実現できる。

この基本的な仕組みを応用することで、多種多様な視覚効果を作り出すことができる。色の変化ロジックや初期色設定を変更するだけで、暗くするだけでなく、マウスに近い多角形を明るく光らせる効果を追加したり、効果を反転させてマウスに近いほど明るく、遠いほど暗くしたり、あるいは色の変化をより微妙にしたり劇的にしたりと、変化の度合いを調整できる。これにより、背景が単なるアニメーションではなく、ウェブサイトのデザインに溶け込むような洗練された効果にすることも可能だ。また、Haikeiで生成したSVGの初期色を変更したい場合、わざわざ新しいSVGを生成し直す必要はなく、初期化処理の段階で、プログラム的に各多角形の色を任意の範囲の色に調整することができる。このように、一度構築したシステムは非常に柔軟性が高く、クリエイティブなアイデア次第で無限の表現を生み出せる。

この解説で紹介した、マウスに反応するSVG多角形背景の作成方法は、ウェブサイトに動的で魅力的な要素を追加するための強力な手法だ。静的な画像にインタラクティブ性をもたらすことで、ユーザー体験を向上させ、ウェブサイトに個性とプロフェッショナリズムを与えることができる。この方法は柔軟性が高く、デザイナーや開発者の創造性に合わせて様々な効果を生み出すことが可能だ。システムエンジニアを目指す上で、このようなインタラクティブなUI（ユーザーインターフェース）の構築は、ユーザーの視覚的な興味を引きつけ、ウェブアプリケーションの魅力を高める重要なスキルの一つとなる。