【勝手にWEBサイトレビュー#20】細やかなこだわりが詰まったパリの音楽バンドのサイト

その他

こんにちは。

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

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

ご紹介Webサイト「TAKO TSUBO」

https://l-imperatrice.cool/

今回ご紹介するWebサイトは、フランスパリの音楽バンドのサイトです。
こちらのサイトはAwwwardsに入賞しています。

▼Awwwards掲載ページ
https://www.awwwards.com/sites/tako-tsubo

真似したいポイント

インスタグラムへの導線の写真のレイアウト

インスタグラムへの導線として、インスタグラムに投稿している写真がグリッドの形で並べてあるWebサイトをよく見かけますが、こちらのサイトは3つの大きさが異なる写真が並べてあり、こちらがインスタグラムへの導線になっています。
思わずクリックしてみたくなる仕掛けになっていると感じました。

ホバー時のマウスカーソルのイラスト

こちらのWebサイトでは、どこにマウスを当てているかによって、マウスカーソルのデザインが変わります。
動画の上にあるときは再生ボタン、別ページへのリンクになっている部分では矢印、インスタグラムへの導線になっている写真の部分ではインスタグラムのロゴとユーザーにとってわかりやすい仕様になっています。

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

実際に商品を開けているようなアニメーション

こちらのWebサイトにアクセスすると、最初はテキストのアニメーションのみが表示されます。
このテキストアニメーションにマウスカーソルをかざすとハサミのマークに変わり、クリックするとダイナミックにアルバムタイトルとイラストが表示されます。レコードを袋から取り出すようなアニメーションになっていて、面白みがあると感じました。

また、メインビジュアル上でマウスカーソルを動かすと、背景が揺らめくようなアニメーションになります。こちらも実際の商品の紙質を再現していて面白い仕掛けだと思いました。

スクロールの速さにあわせて動くアニメーション

こちらのWebサイトでは、右上のメニューや画面を横断している文章がスクロールに合わせて動く仕掛けになっています（右上のメニューはスクロールしていない時でもゆっくり回っています）。こちらは、ただ動くだけでなく、スクロールの速さに連動しており、早くスクロールするとアニメーションも早く動く仕組みになっています。
Webサイトを見ている人が楽しむことができる仕掛けだと思います。