【サイトレビュー#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の要素をそのまま配置する方法を考えがちですが、このように大胆に削って、結果わかりやすくなるなら、良い方法だなと思いました!

まとめ

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

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

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

0

関連記事

  • 2021.07.09

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

    サイトレビュー

  • 2021.07.08

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

    サイトレビュー

  • 2021.07.01

    【サイトレビュー#45】 色や図形を上手に使ってカメラの撮り方を解説するWebサイト

    サイトレビュー

おすすめ記事

  • 2021.05.24

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

    JavaScript

  • 2021.06.08

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

    CSS

    WordPress

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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