その他

2022.07.27

【勝手にWEBサイトレビュー #07】イラストが可愛い!ペット健康保険のサイト

こんにちは!

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

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

ご紹介Webサイト「Lemonade Pet Insurance」

https://www.lemonade.com/pet

今回ご紹介するWebサイトは、猫と犬のための健康保険サービスの紹介サイトです。

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

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/lemonade-pet-health/37443/

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

真似したいポイント

ボタンとイラストを組み合わせた動き

ページ下部にある「CHECK OUR PRICES」のボタンがただボタンを設置するだけではなく、犬のイラストと組み合わせてボタンを設置しています。
最初はボタンだけの状態から始まり、ボタンを押し上げるように犬のイラストが飛び出てきて、ボタンを見上げるように動くという遊び心のある動きの要素も入っています。
ボタンに+αの要素を追加するのは真似をしたいと思いました!

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

スクロールで見えてくるイラスト

ファーストビューでは犬と猫のしっぽが揺れているイラストから始まり、下にスクロールをしていくと回転しながら顔や体全体が見えてきて、次のコンテンツに入る頃にはスッと画面の外に消えていきます。
ページの下から上にスクロールをしてファーストビューに戻ると、画面の外から戻ってきて、ページの一番上までスクロールをするとしっぽが揺れる動きに戻ります。

しっぽだけ動いているファーストビューや、くるくる回る動きが入っているのは可愛くて見ていて楽しいですね!

まとめ

ご紹介したポイント以外にもヘッダーのボタンが跳ねるように入ってきたり、評価数の星が出てきた後に囓られたりと、動きに遊び心のある素敵なサイトでした!

サイト内のイラストもとても可愛いので、ぜひ見てみてください。

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2021.04.04

    【勝手にWEBサイトレビュー#24】サイト内を回遊したくなるポートフォリオサイト

    その他

  • 2022.08.26

    写真にたったひと手間加えるだけでオシャレに!?加工テクニック3選

    その他

  • 2021.06.15

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

    その他

TAG

×