その他

2022.07.20

【サイトレビュー#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デザインに関する項目が特に高く評価されています!

真似したいポイント

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

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

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

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

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

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

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

まとめ

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

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

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

[card url=”http://note.spiqa.design/wp/review46/”]

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2020.12.05

    【コピペで簡単】JavascriptとCSSでハンバーガーメニューを実装する

    その他

  • 2021.05.19

    【CSS】英単語の間隔を調整できるword-spacing

    その他

  • 2019.08.29

    初心者向け!コピペで簡単に実装できるjQuery4選

    その他

TAG

×