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