【勝手に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分割の線が入っており、どこをホバーするかによって流れる映像が変わります。
映像の見せ方が複数あることは、ユーザーに飽きさせない工夫だと感じました。

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