その他

2022.07.20

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

こんにちは!

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

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

ご紹介Webサイト「Banorama」

https://banorama.banenor.no/

今回ご紹介するWebサイトは、ノルウェーの鉄道会社が制作している電車の周りの安全について学べる子供向けサイトです。
こちらのWebサイトは、CSS Design AwardsとAwwwardsどちらも入賞しています。

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

▼Awwwards掲載ページ
https://www.awwwards.com/sites/banorama

真似したいポイント

ページの進み具合が把握できる左下のメニュー

左下にメニューがあり、それぞれのメニューをクリックすることで該当箇所にリンクされていることはもちろん、現在見ているセクションに印がつく仕組みになっています。

いまどこを見ているのか、あとどれくらいなのかが把握できるて、とても良いと思いました。

まるで線路のようなハンバーガーメニュー

スマートフォンの時には、左下メニューがハンバーガーメニューになります。そのボタンのアイコンが線路のようになっていて、サイト全体の世界観にとてもマッチしています。

また、ハンバーガー内のメニューは、まるで電車が線路を進んでいくようなアニメーションになっていて、とても面白みがあります!

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

クリックが楽しくなる仕掛け

FVのイラストは、クリックすることでゴミが落ちてきたり、風船ガムが割れたりと子供を惹きつけそうな仕掛けがたくさん散りばめられており、楽しめる内容になっていて良いと思いました。

クリックを促すボタンアニメーション

線路のイラストのまわりに配置されているボタンは、波を打つようなアニメーションが施されており、クリックを促しています。
ホバーやクリックによってアニメーションするボタンは多くありますが、ユーザーのアクションなしにボタンがアニメーションしているのは珍しくて興味を惹かれます。

SPでは大胆に削ったFV

FVは、PCのときたくさんのイラストが散りばめられています。一方、SPのときは要素を大胆に削ってイラストの数が減っています。

SPの時もPCの要素をそのまま配置する方法を考えがちですが、このように大胆に削って、結果わかりやすくなるなら、良い方法だなと思いました!

まとめ

ターゲットである子供を惹きつける仕掛けがたくさんあるサイトでした。

魅力的なアニメーションはぜひ真似してみたいです!

前回のレビューはこちら!

[card url=”http://note.spiqa.design/wp/review45/”]

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

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

    その他

おすすめ記事

  • 2021.05.12

    【HTML5】pタグの基本的な使い方やspanタグとの違いを解説

    その他

  • 2021.04.15

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

    その他

  • 2023.11.14

    コーダー同士の情報のやり取りで効率がアップした話

    その他

TAG

×