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

こんにちは!

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

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

ご紹介Webサイト「Madame Chantal Thomass」

https://www.madamechantalthomass.com/

今回ご紹介するWebサイトは、フランスのファッションデザイナー、シャンタルトーマスの紹介サイト「Madame Chantal Thomass」です。
こちらのWebサイトは、CSS Design AwardsとAwwwardsどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/madame-chantal-thomass/39276/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/madame-chantal-thomass

各項目の得点を見てみると、UIデザインに関する項目が特に高く評価されています!

真似したいポイント

こだわりを感じるカーソルデザイン

通常は二重の丸、トップやメニューでコンテンツにホバーした時には唇の形、下層ページでコンテンツをホバーした時には目の形にカーソルが変わるようになっています。
カーソルデザインをいくつも取り入れ、細かい部分までこだわっているのは、さすがデザイナーさん!すごい!と思うと同時に、真似してみたいと思いました。

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

他では見ないアクセスからトップまでの動き

サイトにアクセスすると、まず黒い画面の中央に唇が縁取られたモチーフが置いてあるページが開かれます。
その時のカーソルは唇の形になっており、中央の縁取られたモチーフにカーソルを合わせてクリックをすることでトップページを開くことができるようになっています。
クリックをしないと入れないような仕掛けになっているサイトはあまり見たことがなく、すごいと感じました!

斬新な動きが入ったメニュー

メニューのコンテンツ部分をホバーすると、カーソルが唇の形に変わり、テキストの後ろに丸い形で動画が表示されます。
コンテンツをクリックすると丸い形だった動画が全画面に拡大され、読み込みが終わるとフェードアウトで消えて次のページに切り替わるようになっています。
こちらの部分も他ではあまり見たことのない見せ方で、面白いと思いました!
また、メニューの背景は常に動くようになっており、私たちも取り入れていきたいと思いました!

まとめ

「さすがデザイナーさん!すごい!」と感じるこだわりが多く盛り込まれたサイトでした。
こだわりや作り込みが多いサイトは隅々まで見てみたくなりますよね!

前回ご紹介したサイトも細かい作り込みが多い面白いサイトだったので、ぜひ他の記事のサイトも見てみてください!

前回のレビューはこちら!

0

関連記事

  • 2021.07.09

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

    サイトレビュー

  • 2021.07.02

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

    サイトレビュー

  • 2021.07.01

    【サイトレビュー#45】 色や図形を上手に使ってカメラの撮り方を解説するWebサイト

    サイトレビュー

おすすめ記事

  • 2021.06.08

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

    CSS

    WordPress

  • 2021.05.24

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

    JavaScript

  • 2021.06.30

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

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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