その他

2022.07.27

【勝手に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サイトを見ている人が楽しむことができる仕掛けだと思います。

まとめ

実際に商品を買った人も買っていない人も楽しめる仕掛けがたくさんあるWebサイトでした。ぜひ見てみてください!

関連記事はこちら

[card url=”http://note.spiqa.design/wp/review19/”]

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2020.12.26

    最初に覚えておきたい!CSSセレクタの基礎

    その他

  • 2021.12.14

    アナリティクスで特定のページのレポートを作成する方法

    その他

  • 2021.06.08

    簡単!蛍光ペンっぽいアンダーラインを引く方法

    その他

TAG

×