【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
医療や空港の手荷物検査などに用いられている、レントゲン。
そんなレントゲンは人びとの健康維持に役立つだけでなく、実はWebデザインの分野でも活躍しているのです。
もちろん、本物のレントゲンを使うわけではありません。今回はレントゲンを通したようなエフェクトを取り入れたWebデザイン8選をご紹介します。
ユーザーの印象に残るようなWebサイトを制作したい方は、ぜひ参考にしてください。
目次
Noel Delgadoさんが制作した『X-ray me』というコードスニペットです。マウスカーソルにレントゲン風エフェクトが施されており、マウスカーソルを動かすと画面の中にいるキャラクターの骨が見えます。
レントゲン風エフェクトを取り入れたマウスカーソルは、ロゴタイプやタイポグラフィ、背景などのインターフェイスを効果的にユーザーに伝えられるメリットがあります。
Alex Theryさんのポートフォリオサイトは、透明なマウスカーソルが特徴的です。
『X-ray me』のコードスニペットと同様に、カーソルを動かすと大きな円が表示され、円の内側のテキストの色が反転します。タイトルは透明に、プロジェクトの文字はその逆になるのがおもしろいですね。
上記のポートフォリオサイトでは白黒の文字のみが反転しましたが、『Plastic』はほかの要素の色も反転するWebサイトです。タイトル、ロゴ、ナビゲーション、画面に点在するアルファベットの上にマウスカーソルをあわせると、色がカラフルに反転します。
マウスカーソルに対応した円は小さく、ユーザーが見やすいデザイン設計です。余白も十分に取り入れられており、さまざまなところにマウスカーソルを動かしたくなるWebサイトですね。
ここまでにご紹介した事例では文字の色が反転しましたが、『Sabcomeed』のWebサイトではタイトル、テキスト、ナビゲーションなどにレントゲンのようなエフェクトは施されていません。
代わりに、マウスカーソルを動かすと薄い紫色の円の中に繊細な背景画像が浮かび上がります。背景画像は植物のイラストとマッチしていますね。またタイトルの上にカーソルを移動すると「Yemen」の文字が濃くなります。
ひとつのエフェクトをWebサイト全体に施すことで、一貫したユーザーエクスペリエンスを提供しているのです。
『Archi Site Mobius』はシンプルながらも、ユーザーの印象に残るようなレントゲン風エフェクトを取り入れたWebサイトです。
フルスクリーンのスライダーとロゴの上にカーソルをあわせると、小さな円が表示されます。派手なエフェクトではありませんが、とても印象的です。
『White Square』は抽象的な背景とスローガンのみが表示されるシンプルなWebサイトです。文字にマウスカーソルをあわせると、白黒が反転します。
『Archi Site Mobius』と『White Square』のWebサイトはヒーローエリアを最小限にすることで、他のWebサイトとの差別化を図り、ユーザーエクスペリエンスを向上させているのです。
『Contrary Con』のWebサイトは、マウスカーソルにあわせてレントゲン風エフェクトがついた円が動きます。
ユーザーがWebサイトを閲覧する際の邪魔にならずにエフェクトを楽しめる、ちょうどいい大きさの円です。
大きな円のレントゲン風エフェクトを好む方は『Rodrigo Marconatto』のWebサイトを参考にしてみてください。
レントゲン風エフェクトだけでなく、虫眼鏡のように文字が大きくなるエフェクトもついており、印象的なWebデザインです。マウスカーソルも滑らかに動かせるため、ユーザーがストレスを感じにくくなっています。
『Azab』は、レントゲン風エフェクトと赤外線風エフェクトを組み合わせたWebサイトです。
2つのエフェクトを組み合わせることで、一風変わったWebデザインなりますね。
レントゲン風エフェクトと一概に言っても、その使い方はさまざまです。
「文字だけを反転させるのか」「すべての要素にエフェクトを適用するのか」「マウスカーソルの円は大きさはどうするのか」などなど……。レントゲン風エフェクトの使い方によって、Webサイトの印象やUXは大きく変わってきます。
今回ご紹介したWebサイトを参考にして、レントゲン風エフェクトを活用してみてください。
(原文: Nataly Birch 翻訳:Nakajima Asuka)
こちらもおすすめ!▼
おしゃれなWebデザインのポートフォリオサイト36選。現役デザイナーが厳選!
Workship MAGAZINE
2019年の夏は”さわやか&シンプル”。サマーシーズンに流行るWebデザイン3選
Workship MAGAZINE
UXデザインの現場でよく使われるフレームワーク&手法21選
Workship MAGAZINE