その他

2022.07.27

【サイトレビュー#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とスマートフォンで同じ世界観を表現できているのは良いと思います!

まとめ

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

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

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

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

    その他

おすすめ記事

  • 2021.02.01

    【勝手にWEBサイトレビュー #06】Google Nest Wifiの商品サイト

    その他

  • 2022.01.27

    【CSS1行で解決】iPhoneでフォントサイズが大きくなってしまう問題

    その他

  • 2023.11.10

    Webサイトにおける「動き」と向き合ってみた

    その他

TAG

×