【勝手に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サイトの制作についてコンセプトやメイキングが細かく記載されています。このような形で発信することも良いなと思いました。

まとめ

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

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

0

関連記事

  • 2021.05.04

    【勝手にWEBサイトレビュー#32】建築とWebのデザインが調和している!ポルトガルの建築デザインスタジオのWeb……

    サイトレビュー

  • 2021.04.30

    【勝手にWEBサイトレビュー#31】映像の見せ方が多用な映像制作会社のコーポレートサイト

    サイトレビュー

  • 2021.04.23

    【勝手にWEBサイトレビュー#30】スタイリッシュかつ見やすい!ギリシャにあるオープンスペースの紹介サイト

    サイトレビュー

おすすめ記事

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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