【勝手に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サイトをご覧になってみてください!

前回のレビューはこちら

0

関連記事

  • 2021.05.04

    【勝手にWEBサイトレビュー#32】建築とWebのデザインが調和している!ポルトガルの建築デザインスタジオのWeb……

    サイトレビュー

  • 2021.04.23

    【勝手にWEBサイトレビュー#30】スタイリッシュかつ見やすい!ギリシャにあるオープンスペースの紹介サイト

    サイトレビュー

  • 2021.04.22

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

    サイトレビュー

おすすめ記事

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!