【勝手にWEBサイトレビュー #17】ユニークなデザインが魅力！ロンドンを拠点とするクリエイティブスタジオのWebサイト

こんにちは。

Webデザインアワードで入賞しているWebサイトのご紹介第17回です。

今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます！

ご紹介Webサイト「Something」

https://something.global/

今回ご紹介するのは、ロンドンを拠点とするクリエイティブスタジオ「Something」のWebサイトです。

CSS Design Awardsに入賞しているWebサイトになります。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/something/36008/

真似したいポイント

マウスカーソルの位置によって背景画像が切り替わる

下層のStudiosページでは、Somethingのプロジェクトがリストとなって並んでいます。

各プロジェクトのセクション内では表示される背景画像が異なり、さらに何枚かの画像が切り替わるようになっています。

マウスカーソルを置く位置で切り替え判定しており、マウスカーソルをブラウザ外に持っていくと背景が真っ黒になります。

弊社でも、背景画像が切り替わる動きを取り入れたことはありますが、マウスカーソルで判定しているのは珍しいと思いました！
※多くは、「スクロールしてセクションからセクションへ移動したら切り替える」という手法を取り入れています。

画像と文章を左右に配置して雑誌のように読めるWebサイトもいいですが、背景画像を切り替えるなどのWebの長所を活かしたデザインが魅力的ですね。

マウスカーソルを細かく切り替えている

上述したように、こちらのWebサイトでは背景画像を切り替える動きを取り入れていますが、マウスカーソルも細かく切り替えています。

もちろん、背景が黒の場合はマウスカーソルを白に、背景が白の時はマウスカーソルを黒に切り替えていますね。

それだけでなく、トップページにアクセスした時にはマウスカーソルが「Play」と表示されています。

また、画像やテキストの上では半透明になるなど、コンテンツが見やすい設計にしていますね。

すごい！と思ったポイント

あえてロゴを隠すデザイン

トップページにアクセスすると、真っ黒な空間中央に映像が流れる長方形が配置されています。

その長方形にマウスカーソルを合わせると、FV全体と長方形が反転し、中央にはロゴが現れます。

このような工夫はWebサイトの至るところに施されています。デフォルトでは「Something」というロゴがベタ塗りの長方形で隠されており、ホバーさせるとロゴが表示されます。

ロゴを隠すとは斬新です！逆にSomethingというロゴが強調され、頭から離れなくなります。

その他ユニークなデザイン

ハンバーガーメニュー内のメニューにホバーさせると、打ち消し線が表示されます。

ホバー動作は色の反転や半透明にするなどが主流ですが、打ち消し線をホバー動作にするのはユニークですね。

また、ホバー動作にはtransitionプロパティを使用して時間を遅らせることでふわっとした動きにすることが多いですが、こちらのWebサイトは遅らせることなくそのままです。

パッと変わる軽快な動作がこのWebサイトの雰囲気にマッチしていますね！

まとめ

取り入れている動作自体はシンプルなものが多いですが、他のWebサイトとは一線を画するWebサイトでした。

主流・流行りの逆を行くWebデザインがとてもかっこよかったです！