カーソルにレントゲンのような効果を取り入れたWebデザイン8選

医療や空港の手荷物検査などに用いられている、レントゲン。

そんなレントゲンは人びとの健康維持に役立つだけでなく、実はWebデザインの分野でも活躍しているのです。

もちろん、本物のレントゲンを使うわけではありません。今回はレントゲンを通したようなエフェクトを取り入れたWebデザイン8選をご紹介します。

ユーザーの印象に残るようなWebサイトを制作したい方は、ぜひ参考にしてください。

レントゲン風エフェクトの事例

Noel Delgadoさんが制作した『X-ray me』というコードスニペットです。マウスカーソルにレントゲン風エフェクトが施されており、マウスカーソルを動かすと画面の中にいるキャラクターの骨が見えます。

レントゲン風エフェクトを取り入れたマウスカーソルは、ロゴタイプやタイポグラフィ、背景などのインターフェイスを効果的にユーザーに伝えられるメリットがあります。

1. Alex Thery

Alex Theryさんのポートフォリオサイトは、透明なマウスカーソルが特徴的です。

『X-ray me』のコードスニペットと同様に、カーソルを動かすと大きな円が表示され、円の内側のテキストの色が反転します。タイトルは透明に、プロジェクトの文字はその逆になるのがおもしろいですね。

Alex Thery

2. Plastic

上記のポートフォリオサイトでは白黒の文字のみが反転しましたが、『Plastic』はほかの要素の色も反転するWebサイトです。タイトル、ロゴ、ナビゲーション、画面に点在するアルファベットの上にマウスカーソルをあわせると、色がカラフルに反転します。

マウスカーソルに対応した円は小さく、ユーザーが見やすいデザイン設計です。余白も十分に取り入れられており、さまざまなところにマウスカーソルを動かしたくなるWebサイトですね。

Plastic

3. Sabcomeed

ここまでにご紹介した事例では文字の色が反転しましたが、『Sabcomeed』のWebサイトではタイトル、テキスト、ナビゲーションなどにレントゲンのようなエフェクトは施されていません。

代わりに、マウスカーソルを動かすと薄い紫色の円の中に繊細な背景画像が浮かび上がります。背景画像は植物のイラストとマッチしていますね。またタイトルの上にカーソルを移動すると「Yemen」の文字が濃くなります。

ひとつのエフェクトをWebサイト全体に施すことで、一貫したユーザーエクスペリエンスを提供しているのです。

Sabcomeed

4. Archi Site Mobius

『Archi Site Mobius』はシンプルながらも、ユーザーの印象に残るようなレントゲン風エフェクトを取り入れたWebサイトです。

フルスクリーンのスライダーとロゴの上にカーソルをあわせると、小さな円が表示されます。派手なエフェクトではありませんが、とても印象的です。

Archi Site Mobius

5. White Square

『White Square』は抽象的な背景とスローガンのみが表示されるシンプルなWebサイトです。文字にマウスカーソルをあわせると、白黒が反転します。

『Archi Site Mobius』と『White Square』のWebサイトはヒーローエリアを最小限にすることで、他のWebサイトとの差別化を図り、ユーザーエクスペリエンスを向上させているのです。

White Square

6. Contrary Con

『Contrary Con』のWebサイトは、マウスカーソルにあわせてレントゲン風エフェクトがついた円が動きます。

ユーザーがWebサイトを閲覧する際の邪魔にならずにエフェクトを楽しめる、ちょうどいい大きさの円です。

Contrary Con

7. Rodrigo Marconatto

大きな円のレントゲン風エフェクトを好む方は『Rodrigo Marconatto』のWebサイトを参考にしてみてください。

レントゲン風エフェクトだけでなく、虫眼鏡のように文字が大きくなるエフェクトもついており、印象的なWebデザインです。マウスカーソルも滑らかに動かせるため、ユーザーがストレスを感じにくくなっています。

Rodrigo Marconatto

8. Azab

『Azab』は、レントゲン風エフェクトと赤外線風エフェクトを組み合わせたWebサイトです。

2つのエフェクトを組み合わせることで、一風変わったWebデザインなりますね。

Azab

おわりに

レントゲン風エフェクトと一概に言っても、その使い方はさまざまです。

「文字だけを反転させるのか」「すべての要素にエフェクトを適用するのか」「マウスカーソルの円は大きさはどうするのか」などなど……。レントゲン風エフェクトの使い方によって、Webサイトの印象やUXは大きく変わってきます。

今回ご紹介したWebサイトを参考にして、レントゲン風エフェクトを活用してみてください。

（原文： Nataly Birch　翻訳：Nakajima Asuka）

こちらもおすすめ！▼