【勝手にWEBサイトレビュー#23】臨場感あふれる!マウンテンバイクの映像作品を紹介するサイト

こんにちは。

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

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

ご紹介Webサイト「TRWM」

https://www.takearidewith.me/

今回ご紹介するWebサイトは、デンマークの映像作家Nikolaj Juhlsen氏によるマウンテンバイクの映像作品を紹介するサイト「TRWM」です。

サイト名は、「take a ride with me」の略のようです。

ページ右上に「NOT FOR THE FAINT OF HEART(気弱な人向けではありません)」と記載されている通り、マウンテンバイクのライディングムービーは非常にスリリングです。

こちらのサイトは、CSS Design Awardsとawwwardsどちらも入賞しています。

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

▼awwwards掲載ページ
https://www.awwwards.com/inspiration/trwm-home

真似したいポイント

ページのエリアによってマウスカーソルが変形

こちらのWebサイトのトップページでは、FV(ファーストビュー)をはじめたくさんの映像が配置されています。

各映像にマウスを合わせると、マウスカーソルが変形し、「PLAY」という文字が表示されます。

マウスカーソルが「PLAY」になっていると、どこをクリックしても映像の全画面ページに遷移し、大迫力のマウンテンバイクのライディングムービーが楽しめます。

また、FV下では、マウスカーソルが目のように丸2つに変形し、映像が表示されます。

まるで自分がマウンテンバイクを運転しているかのような臨場感があります。

瞬きのような動きもついており、かわいいですね。

メールアドレスの@が回っているなどの細かな動き

アバウトページはNikolaj Juhlsen氏についての紹介ページになっています。

ページ下部では、Nikolaj Juhlsen氏のお問い合わせ用のメールアドレスが記載されていますが、このメールアドレスの@が回っています。

とても細かいのですが、こういったところどころに散らばる遊び心は面白いなと思いました!

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

スクロールに合わせて動くテキストやレコード

トップページ中央付近に、スクロールと連動して動くテキストとCSSでスタイルされたレコードが配置されています。

スクロールの上下で連動するなめらかなアニメーションがとても気持ちいいです!

SNSリンクの見せ方が大胆!

アバウトページのページ下部に、Nikolaj Juhlsen氏のTikTokとInstagramのリンクがWindow幅いっぱいに配置されています。

SNSのリンクというと幅と高さが100px程度のアイコンを配置する、というのが一般的だと思います。

Webサイトによっては、SNSリンクもTRWMのように大胆に見せてもいいなと思いました!

まとめ

訪問ユーザーにマウンテンバイクのライディングムービーを見てもらうための工夫はもちろん、細かな遊びが随所に散りばめられていて、見ていてとても楽しいWebサイトですね!

今まで見たことのないような大胆なデザインや工夫もあったので、刺激になりました!

前回のサイトレビューはこちら

0

関連記事

  • 2021.04.16

    【勝手にWEBサイトレビュー#28】画像の枠にこだわりのあるポートフォリオサイト

    サイトレビュー

  • 2021.04.15

    【勝手にWEBサイトレビュー#27】画面スクロールで楽しめるWPテーマコレクションサイト

    サイトレビュー

  • 2021.04.11

    【勝手にWEBサイトレビュー#26】細かな工夫・こだわりがすごい!フランスのインタラクティブデザイナーのポートフォ……

    サイトレビュー

おすすめ記事

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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