【勝手に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サイトでした。

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

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

0

関連記事

  • 2021.07.09

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

    サイトレビュー

  • 2021.07.08

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

    サイトレビュー

  • 2021.07.02

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

    サイトレビュー

おすすめ記事

  • 2021.06.08

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

    CSS

    WordPress

  • 2021.06.30

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

    CSS

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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