その他

2022.07.27

【勝手にWEBサイトレビュー#19】細かいこだわりが多い歯科用製品のプロモーションサイト

こんにちは。

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

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

ご紹介Webサイト「Swissdent」

https://swissdent.creative-nights.com/

今回ご紹介するWebサイトは、ヨーロッパ大手薬局企業のプレミアム歯科用製品のプロモーションサイトです。

こちらのサイトは、CSS Design Awardsを受賞し、Awwwardsではノミネートされています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/art-of-swissdent/38723/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/art-of-swissdent

真似したいポイント

スクロールで変化するテキスト

トップページの中央に表示される「Art of Swissdent」のテキストがスクロールをしていくと変化するように作られています。
背景色に被る部分に差し掛かると色が変わり、さらにスクロールをするとフェードアウトして消えていきます。
一つのテキストではありますが、2種類の変化を付けて表現にこだわる部分は弊社も真似してみたいなと思いました!

逆に動くテキストと画像

トップページのコンテンツの紹介部分を表示するとテキストは下へ、紹介するコンテンツの画像は上へ動くアニメーションが入っています。
同じ方向に動くのではなく、違う方向に動くと印象が違うのでこのような動きの工夫も取り入れていきたいと思いました。

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

ページ遷移時のローディング画面

ページ遷移のローディング画面で歯ブラシ、歯磨き粉、目のアイコンが表示されて関係する製品のアピールをしています。
数秒の画面ではありますが、製品のアピールをする細かい工夫がすごいと感じました!

トップページの左上のアイコン表示

PCで表示した時、左上に歯ブラシと歯磨き粉のアイコンが表示されるのですが、こちらが歯ブラシの製品を表示している時には歯ブラシのアイコンが、歯磨き粉の製品を表示している時には歯磨き粉のアイコンが濃く見えるようになっています。
今見ているコンテンツがわかりやすくなる気遣いがあると、ページを見やすくなって良いなと思いました!

まとめ

一つのテキストに2種類の動きが入っていたり、細かい部分まで気遣いや動きを取り入れている、とても魅力的なサイトでした!

今回ご紹介した部分以外にも、様々な動きが取り入れられているため、ぜひ見てみてください!

関連記事はこちら

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2024.02.02

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

    デザイン

    その他

おすすめ記事

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

×