その他

2022.07.27

【サイトレビュー#36】海のような動きが多い海洋保護専門の団体のサイト

こんにちは!

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

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

ご紹介Webサイト「The Ocean Agency」

https://www.theoceanagency.org/

今回ご紹介するWebサイトは、アメリカの海洋保護を専門とする国際的な非営利団体である「The Ocean Agency」のサイトです。
こちらのWebサイトは、CSS design AwardsとAwwwardsどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/the-ocean-agency/39015/

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

真似したいポイント

FVのスクロールの動き

アクセスした直後のFVは横スクロールで動くのですが、動き終わった後に自動で少し下に動くようになっています。
小さな動きではありますが、横スクロールから縦スクロールへ切り替わることがわかる動きなため、真似してみたいと思いました!

ホバーで出てくるメニュー

FVを過ぎると右端のメニューがハンバーガーメニューになるのですが、そのメニューはクリックではなくホバーで中身が表示がされるようになっています。
ハンバーガーメニューはよくクリックで開くように作られていると思いますが、ホバーで表示される方がユーザーアクションを少し減らせて良いと思いました。

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

FVの一連の動き

トップページを開いた時、複数ある四角が動きながらトリミングされている画像が切り替わり、一通り終わると横スクロールで全体の色が反転するようになっています。
アニメーションの動きもですが、反転させるとインパクトがあり印象にとても強く残るため、すごい!と思いました。

サイト内の細部に付けられている「海」を連想させる動き

トップページでの画像の見せ方やボタンのホバー、ページ遷移時の画面などサイト全体のあらゆるところに入っている動きが波打ったり海を切り取っていたり、「海」を連想できるような動きが多く入っています。
コンテンツ自体はテキストと画像だけが多いシンプルな内容ですが、動きのデザインで「海」を表現しているのは面白いと思いました!

まとめ

シンプルなサイトでも動きの付け方次第で印象が変わるため、とても参考になるサイトでした!
また、専門的なサイトは真面目で硬いイメージがありましたが、遊び心があり親しみやすさがあるのは内容も読んでみたくなるため良いと思いました!

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

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

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

    その他

おすすめ記事

  • 2019.04.09

    【コピペで簡単】jQueryでスクロールに合わせてだんだん不透明になる背景を実装

    その他

  • 2023.11.28

    楽しくする!便利にする!VSCodeの拡張機能

    その他

  • 勝手にWEBサイトレビュー

    2021.02.28

    【勝手にWEBサイトレビュー #14】イラストが可愛らしいギリシャのデザインスタジオのコーポレートサイト

    その他

TAG

×