【勝手に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サイトでした。ぜひ見てみてください!

関連記事はこちら

0

関連記事

  • 2021.07.09

    【サイトレビュー#48】ユーザビリティに優れたデザイン!個人投資家のための信託サイト

    サイトレビュー

  • 2021.07.08

    【サイトレビュー#47】デザイナーらしいこだわりが満載のデザイナー紹介サイト

    サイトレビュー

  • 2021.07.02

    【サイトレビュー#46】遊び心満載の電車にまつわる安全を学べるサイト

    サイトレビュー

おすすめ記事

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!