【サイトレビュー#40】水面のような表現が素敵なデジタルエージェンシーのサイト

こんにちは!

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

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

ご紹介Webサイト「Outsmart Labs」

今回ご紹介するWebサイトは、カナダにあるブランドとオーディエンスを繋ぐデジタルエージェンシーのサイトです。
こちらのWebサイトは、CSS design AwardとAwwwardsどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/outsmart-labs/38480/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/outsmart-labs

真似したいポイント

ホバーに合わせて変わる写真とグラデーションの色

こちらのWEBサイトでは、TOPページのFV下にメニューがあります。

このメニューをホバーすると、メニューに合わせて写真と丸型のグラデーションの色味が変わります。
色味が変わることでページの印象が変わるので、面白みがありますね!

リンクホバー時の手書きのようなアニメーション

右上の「WORK WITH US」などのリンクをホバーすると、手書きで文字が囲われるようなアニメーションになっています。

WEBサイト全体の印象と合っていて、可愛らしくて良いと思いました。

すごい!と思ったポイント

水のように動いている写真とホバーで波打つ写真

TOPページの丸でくり抜かれている写真や丸型のグラデーションは、雫のような動きをしています。また、下層ページの写真は、ホバーすると波打つようなアニメーションになっています。

こちらもWEBサイト全体の世界観と合っており、素敵だと思いました!

まとめ

全体的に水を感じるアニメーションで統一されており、とても綺麗な印象のWEBサイトでした。
色づかいも素敵なサイトなので、ぜひ実際に見てみてください!

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

0

関連記事

  • 2021.07.09

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

    サイトレビュー

  • 2021.07.08

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

    サイトレビュー

  • 2021.07.02

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

    サイトレビュー

おすすめ記事

  • 2021.05.11

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

    CSS

    HTML5

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.06.08

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

    CSS

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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