その他

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デザインに関する項目が特に高く評価されています!

真似したいポイント

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

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

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

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

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

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

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

まとめ

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

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

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2024.02.02

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

    デザイン

    その他

おすすめ記事

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

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

    2022.06.01

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

    デザイン

    制作

×