【サイトレビュー#38】様々なホバーアクションが面白いクリエイティブスタジオのコーポレートサイト

こんにちは!

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

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

ご紹介Webサイト「Craie Craie

https://craiecraie.com/

今回ご紹介するWebサイトは、フランスのクリエイティブスタジオのコーポレートサイトです。
こちらのWebサイトは、CSS design AwardとAwwwardsどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/craie-craie/39131/

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

真似したいポイント

細やかなホバーアクション

こちらのサイトでは、ホバーアクションに様々な動きが取り入れられており、ホバーしてみるのが楽しくなります。
特に、ロゴのホバーでは、「craic.craic」の真ん中の「 . 」のみが動く仕様になっています。ホバーする要素全体を動かしたり、色を変えたりすることが多いので、このように要素の一部を動かすのは面白いと思いました。

メニューの表示アニメーション

こちらのサイトでは、左上にメニューボタンがあり、そちらをクリックすると、下からメニューが開きます。上からや右からのサイトが多い印象なので、珍しく感じました。

閉じる時はメニュー要素が順番に消えて、画面全体フェードアウトしていきます。メニューを閉じる時は、開いた時の逆アニメーションを行うことが多いので、開く時と閉じる時で異なるアニメーションを入れるのはアイデアとして良いなと思いました。

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

文字が動くカーソル

TOPの写真をホバーすると、カーソルの形が変わります。カーソルは、形が変わるだけでなく、カーソルに表示されている文字もアニメーションしています。

細かいですが、カーソルを動かすことが楽しくなるので良い仕掛けだと思います。

ホバーに合わせて表示される画像

「projects」ページでは、文字が箇条書きしてあり、ホバーすることで該当の画像が表示されます。

画像に対応している文字は画像の上に表示され、それ以外の文字は画像の下に表示されるようになっています。こちらも見やすい仕掛けだと思いました。

こちらは、スマートフォンでも同じように実装されていて、ユーザーのスクロールに合わせて表示する画像が変わる仕組みになっています。マウスのないスマートフォンでの見せ方を悩むことはよくありますが、PCとスマートフォンで同じ世界観を表現できているのは良いと思います!

まとめ

今回は、ホバーアクションに様々な仕掛けのあるサイトをご紹介しました。
珍しい仕掛けもあるので、是非ご覧になってみてください!

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

関連記事

  • 2021.07.23

    世界のすごいWebサイトをレビュー(まとめ)#4

    サイトレビュー

  • 2021.07.22

    世界のすごいWebサイトをレビュー(まとめ)#3

    サイトレビュー

  • 2021.07.21

    世界のすごいWebサイトをレビュー(まとめ)#2

    サイトレビュー

おすすめ記事

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    その他

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    JavaScript

  • 2021.06.30

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

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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