
壮大なストーリーを連想させる効果音や BGM が雰囲気を盛り上げる Emotion のウェブサイト
精細さは控えめだが雰囲気満点
今回ご紹介するのは Emotion というデジタルプロダクションのウェブサイトです。
3D シーンをかなり活用したウェブサイトであり、またそれ以上に、サウンド面でかなり演出を行っているウェブサイトだと感じます。
音楽と効果音でウェブサイトの雰囲気をかなり重厚な味付けで演出していて、3D 表現はややポリゴン数を抑えた軽快さを優先した作りになっている気がします。
リンク:
Emotion — Cutting Edge Frontend Solutions
スクロールするとストーリーが展開する作り
今回のサイトは基本的にスクロール操作だけでサイト全体を閲覧できるようになっています。
画面の上部にヘッダが表示されて、一応各セクションにダイレクトにアクセスすることも可能な作りになっていますが、スクロール操作を続けているだけでもそれらを順番に巡っていくような感じにすべてがつながっています。
冒頭にも書いたように 3D 表現は比較的ローポリゴンなものが多く、ポストエフェクトなどもあまり用いられていないように見えます。
ポストエフェクトこそあまり掛かってない感じがするものの、演出がシンプルかというとそういう感じでもないんですよね。
ノイズを活用した複雑な模様をマッピングしてみたり、DOM で表示されているアイテムが別のものに切り替わる際のトランジションが 3D シーンともしっかり連動していたり……
手が込んだ実装がたくさんあり、軽快さのために 3D シーンはあえて頂点数を控えているのかなという感じがしました。
事例を紹介するセクションは特に凝っていて、各事例のスクリーンショットの色味に、地形のトーンが連動するようになっています。
また、ユーザーの操作やカーソルの動きに対してこれでもかと効果音が割当てされており、またその雰囲気が妙に荘厳というか、迫力のあるトーンになっています。
3D シーンがかなりシンプルなので、ちょっと全体としてのビジュアルとサウンドの味付けのチグハグ感が出てしまっているような気がしないでもありません。
重くなってしまっては元も子もないので、難しいところです。
今回のサイトの場合、3D バリバリということよりも効果音だいぶこだわってるな~という印象を強く持ちました。
なんかスクロール操作だけでどんどん進んでいけるので、まるでちょっとした映画のトレイラー映像というか、ものすごく壮大ななにかを見せられているような気持ちにちょっとだけなるんですよね。
惜しむらくは、ビジュアル面がもう少し効果音や BGM にマッチしたものだったら体験がより良いものになったような気もします。
全体として、なかなかこだわって作られた事例だと思います。
ぜひチェックしてみてください。