その他

2022.07.27

【勝手にWEBサイトレビュー#29】動きに統一感のあるコーポレートサイト

こんにちは!

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

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

https://unisve.it/en/

今回ご紹介するのは、ヴェネチアの美術品の修復を行っているところのコーポレートサイトです。
CSS Design Awardsに入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/unisve/38836/

真似したいポイント

スライダーのページャーの見せ方

サイト内のスライダーのページャーがよく見かけるようなスライダーの下やコンテンツの左右の位置ではなく、片方に縦並びに置かれています。
あまり見ない位置に置いているのは面白いですし、タブレットやスマホの指で押す端末の時に片方に固まっているのは押しやすくて便利だと思いました!

ページ全体の統一感

ホバーの動きはボタン、テキストリンク、ページャーとそれぞれに別の動きを取り入れがちですが、こちらのサイトでは基本的に上下、左右にくるっと回る動きに統一されています。
統一をされていると「この動きの部分は押せる!」と直感的にわかるため真似してみたいなと思いました。

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

アクセス時の動画の見せ方

サイトのトップページにアクセスをすると、小さい動画とテキストが画面の中央に表示され、一定時間後に拡大して全画面表示となりその他のテキストが表示されます。
小さい動画が気になりそのまま見入ってしまう工夫だと思いました。

コンテンツ内のナビの見せ方

修復をしたものを紹介しているページは一見そのページしかないコンテンツに見えますが、FVの画像をよく見ると左下にさり気なくコンテンツ内のナビのボタンが設置されています。
探しにくさはありますが、優先度の低いページへのリンクを設置する方法としては良いと思いました。

まとめ

全体的に動きやデザインの統一感がしっかりとあるため、すっきりとしていて見やすいサイトだと思いました。
シンプルなデザインを作るときこそ統一感を意識していきたいですね!

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

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

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

    その他

おすすめ記事

  • 2023.12.01

    クレイモーフィズムとは?

    その他

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    その他

  • 2022.11.29

    Figmaでテキストを縦書きにする方法

    その他

TAG

×