X
  1. TOP
  2. 【サイトレビュー#46】遊び心満載の電車にまつわる安全を学べるサイト
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の要素をそのまま配置する方法を考えがちですが、このように大胆に削って、結果わかりやすくなるなら、良い方法だなと思いました!

まとめ

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

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

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

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

この記事をシェアする

関連記事

おすすめ記事

株式会社スピカデザイン

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

© 2020 spiqa design

×