【勝手にWEBサイトレビュー #10】スクロールが楽しくなる！レンタカー提供・ ドライバーサポートサービスサイト

こんにちは！

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

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

ご紹介Webサイト「Sally」

https://new.drivesally.com/#home

今回ご紹介するWebサイトは、ニューヨークを拠点とする会社・タクシーの運転手等へのレンタカー提供・ ドライバーサポートサービスサイトです。

こちらのサイトは、CSS Design AwardsとAwwwardsのどちらも受賞しています。

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

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

真似したいポイント

画面上に選択項目だけが表示されるセレクトボックス

レンタカーの検索条件を選択しようとすると、アニメーションにより現在選択する必要のある項目のみが表示されるようになっています。選択画面にアニメーションがあるのは珍しいと思いました。また、関係のない項目は消えるので、ユーザーにもわかりやすい設計となっています。

横から文字色が変わるアニメーション

Webサイト内で使用されている縁取りの文字にマウスをかざすと、左上から右下にかけて赤く変化していきます。このような動きは珍しく感じ、斬新な印象を受けました。

すごいポイント

車が前進するようなアニメーション

トップページでスクロールすると、普段のWebサイトとは異なり、次のコンテンツが上から流れてきて、TOPにあった車が前進しているように見えます。車の角度が変わったり、最後には車がカーブするような動きになっていたりと、とても遊び心のあるアニメーションになっています。

細かいインジケーターの動き

トップページのスクロールにあわせて、左下のインジケーターが動きますが、こちらはページが動いている時と、止まっている時と表示が違っていて、細かいですが、配慮があっておしゃれだと感じました。

Webサイト制作のコンセプト・メイキング

「Designed by Red Collar」のボタンを押すと、デザイン制作会社のWebサイトにリンクします。ここでは、Webサイトの制作についてコンセプトやメイキングが細かく記載されています。このような形で発信することも良いなと思いました。

まとめ

色味はシンプルながら、様々な種類のアニメーションがとても魅力的でした。

特にトップページのスクロールは、車が前進している様子が楽しいので、ぜひ見てみてください！