その他

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

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

統一されたカラーリング

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

まとめ

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

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

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2024.02.02

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

    デザイン

    その他

おすすめ記事

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×