その他

2022.07.27

【勝手にWEBサイトレビュー#31】映像の見せ方が多用な映像制作会社のコーポレートサイト

こんにちは!

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

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

ご紹介Webサイト「myriad」

https://myriad.video/

今回ご紹介するWebサイトは、スウェーデンの映像制作会社のコーポレートサイトです。

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

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

真似したいポイント

ロゴのホバーアニメーション

Webサイトの左上のロゴをホバーすると「 MIRIAD 」の「 I 」の部分の「 ! 」のマークが様々な形に変わります。

ホバーアクションとして、文字の1箇所が変わるアニメーションは珍しく、面白いと感じました。

コンタクトへの導線

こちらのWebサイトは、下までスクロールしていくと、画面の最後に色とりどりの付箋のようなカードが見切れています。
こちらをクリックすると該当のカードが上に出てきて、カードごとに異なるメッセージが書かれています。
カードの下の部分の「Let’s talk about it」部分をクリックすることで、カードに記載されていたメッセージが件名に入ったメールが作成される仕組みになっています。

このようなコンタクトの仕組みは初めて見たので、最初は戸惑いましたが、興味をそそられ、ついクリックしてしまいそうだと思いました。

シックでありつつも可愛らしさもある色味

こちらのWebサイトは、FVから全体的に黒ベースでとてもシックに感じられます。一方、アクセントカラーのビビットピンクのほか、カード部分には明るめの原色が多数使用されており、可愛らしさを感じます。個人的にとても惹き込まれる色味だと思いました。

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

映像の見せ方

こちらのWebサイトは映像会社のコーポレートサイトなので、映像が多く配置されています。

FV下の「Selected Work」部分では、画面が縦4分割され4つの映像が配置されています。
さらに下の「Myriad Originals」部分では、映像は画面幅いっぱいで再生されますが、縦4分割の線が入っており、どこをホバーするかによって流れる映像が変わります。
映像の見せ方が複数あることは、ユーザーに飽きさせない工夫だと感じました。

また、いずれもホバーを解除すると映像が止まる(または変わる)仕様になっていますが、再度ホバーすると先程止まった場所から画像が再生されます。
細かい点ではありますが、ユーザーにとってストレスのかからない仕様だと思いました。

まとめ

映像制作会社ならではの映像の見せ方の工夫がとても魅力的なWebサイトでした。
ぜひみなさんもWebサイトをご覧になってみてください!

前回のレビューはこちら

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

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

    その他

おすすめ記事

  • 2021.06.29

    簡単にWordpressでログインしてないと見れないサイトを作る方法

    その他

  • 2021.03.17

    ACFでカテゴリーにカスタムフィールドを紐づける方法【WordPress】

    その他

  • 2021.09.14

    【似顔絵実績】イラストショップSPIQA&ARTで作成した似顔絵イラストをご紹介します!

    その他

TAG

×