2022.07.20

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

こんにちは！

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

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

ご紹介Webサイト「Banorama」

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事をシェアする

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

枠線や下線を引きたい！CSSのborderの使い方を解説【初心者向け】