【勝手にWEBサイトレビュー #03】トップページで農園探索ができる!ワイナリーのコーポレートサイト

こんにちは。
Webデザインアワードで入賞をしているWebサイトのご紹介第3回です。

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

ご紹介Webサイト「Chartogne-Taillet」

https://chartogne-taillet.com/

今回ご紹介するのはフランスのワイナリーであるChartogne-Tailletさんのコーポレートサイトです。
CSS Design Awards、Awwwardsのどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/chartogne-taillet/38328/

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

真似したいポイント

このWebサイトを見て真似したい、参考にしたいと感じたポイントをご紹介致します。

スクロール不要のすっきりとした商品紹介ページ

よく見かける商品紹介のページは、商品の情報を縦に積んでいき、見たい商品を見るためにはスクロールが必要になることが多い印象があります。
こちらのWebサイトでは1つの商品だけを表示しており、他の商品を見るには商品名の一覧からクリックをするか、スクロールをすることで切り替えることができます。
すっきりとしたデザインで、1つ1つの商品もとても見やすいです!

pdfの中身まで世界観を活かす

商品紹介のページには最低限の情報のみを掲載し、詳細は別ページではなくpdfにまとめられています。
pdfの中身もサイトの世界観に合わせたデザインになっているため、ずっとサイトの中を見ているような気分になれます!

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

アクセス時のアニメーションと音楽

サイトにアクセスした時にじわじわと切り替わるアニメーションに合わせて音楽も流れ始めます。
いきなり流れるのではなく、動きに合わせて音楽もフェードインしているため、サイトの世界観の中へ入り込むことができます。
音楽も合わせてあるととても印象にも残りますね!

探索することができるトップページ

トップページがスクロールやホバー、クリックなどの動きに合わせて農園を探索できるように作り込まれています。
動きもスクロールをすると上から見た地図のようになったり、クリックをするとその場所へ飛んでいくことができるため、サイトの中を楽しく探索しながらコンテンツを見ることができます!

スクロールのアニメーションに合わせてページ遷移

先ほどご紹介したトップページのコンテンツに近づきスクロールをすると、アニメーションを挟んでそのコンテンツの詳細ページへと遷移します。
サイト全体の色味やデザインが揃っているため、ページ遷移をしたのではなくスクロールをして詳細を見ている気分になれます。

まとめ

面白い動きが多いため、いつまでも飽きることなくWebサイトの中を探索したくなる素敵なWebサイトでした!
サイト全体だけではなく、pdfの中までデザインが統一されているのも、その会社、商品のイメージがしやすくてとても良いと思いました。

トップページで流れる音楽も素敵なので、ぜひ音楽も合わせて見てみてください!

0

関連記事

  • 2021.07.09

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

    サイトレビュー

  • 2021.07.08

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

    サイトレビュー

  • 2021.07.02

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

    サイトレビュー

おすすめ記事

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.06.30

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

    CSS

  • 2021.06.08

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

    CSS

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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