その他

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

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

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

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

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

まとめ

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

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

この記事をシェアする

関連記事

  • 2022.09.15

    【チャレンジ企画】あの某アーティストのジャケ写再現してみた

    その他

    デザイン

  • 2022.09.08

    【動画編集時短術】プレミアプロに用意されているトランジションテンプレートのおすすめ15種類を紹介!

    その他

    制作

    動画

  • 2022.08.26

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

    その他

    デザイン

    制作

おすすめ記事

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 2022.06.15

    スキルを上げたきゃ数をこなせ!1ヶ月毎日ロゴを作った話

    デザイン

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

×