その他

2022.07.27

【勝手に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で再現されており、画面を拡大しても画質が落ちることなく綺麗に見ることができます。こちらもユーザーにとって嬉しいポイントですね。

▼気になった方は、こちらも確認してみてください!
[card url=”http://note.spiqa.design/wp/svg/“]

統一されたカラーリング

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

まとめ

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

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

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

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

    その他

おすすめ記事

  • 2021.02.19

    【CSS】角丸線をつくるには?borderの端を丸くする方法

    その他

  • 2021.07.20

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

    その他

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

TAG

×