【勝手にWEBサイトレビュー #02】アニメーションに遊び心がある!カナダ/CN100周年特設サイト

こんにちは。

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

前回から引き続き、「CSS Design Awards」または「awwwards」の中からWebサイトをピックアップし、特に目に止まった良いところをお伝えした行きたいと思います!

ご紹介Webサイト
「CN100 — A Moving Celebration」

CN100 — A Moving Celebration

https://www.cn100.ca/en/

今回ご紹介するWebサイトは、カナダのCN鉄道100周年特設サイトです。

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

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/cn100-a-moving-celebration/35170/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/cn100-a-moving-celebration

真似したいポイント

Web制作をする上で真似したい、参考にしたいと思った点をご紹介します。

ページ切り替えの際のアニメーション

こちらのWebサイトは、ナビゲーションなどからページを切り替える際に可愛らしいアニメーションが表示されます。このアニメーションは、全て同じではなく、ページごとに異なるデザインとなっています。

また、このページ切り替えの際のデザインは、100周年記念の鉄道ラッピングと同じデザインになっています(上記画像の電車がそのラッピングです)。ファンの方々にとって嬉しいことであるとともに、誰が見ても楽しめる仕様になっています。

Webサイトに訪れるのが楽しみになるページというのは、とても良いですよね。

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

続いて、このデザインはすごい!と思った点をご紹介します。

SVGで再現されたアニメーション

Webサイトには多数のイラストが載っており、アニメーションしています。

アニメーションは、ずっと動くものだけではなく、マウスの動きや画面のスクロールに合わせて動く部分などもあり、とても遊び心があります。例えば、トップページの電車は、ページのスクロールに合わせて、ぐんっと前に進みます。

色々な仕掛けがあるので、Webサイト内を探検したくなりますね。

また、これらのイラストはSVGで再現されており、画面を拡大しても画質が落ちることなく綺麗に見ることができます。こちらもユーザーにとって嬉しいポイントですね。

▼気になった方は、こちらも確認してみてください!

統一されたカラーリング

このWebサイトは、使用されている色数が多くなく、全体的に統一されています。そのため、おしゃれで洗練しているように感じますね。

まとめ

どのような仕掛けがあるのだろうかと、探し回りたくなる素敵なWebサイトでした。

シンプルではありますが、アニメーションを使用することでユーザーを飽きさせないデザインのように感じました。

つい見入ってしまうアニメーションがあるので、ぜひ見てみてください。

関連記事

  • 2021.07.23

    世界のすごいWebサイトをレビュー(まとめ)#4

    サイトレビュー

  • 2021.07.22

    世界のすごいWebサイトをレビュー(まとめ)#3

    サイトレビュー

  • 2021.07.21

    世界のすごいWebサイトをレビュー(まとめ)#2

    サイトレビュー

おすすめ記事

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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