VFX に込められた並々ならぬ思いを作例と共に見事に体現した Space&Co. のウェブサイト

doxas : 2022-11-11 13:25:42

事例の映像を引き立てる演出

今回ご紹介するのは、いわゆる VFX と呼ばれる映像制作の分野で多彩な実績を持つ VISUAL EFFECTS COMPANY、Spade&Co. のウェブサイトです。

映画が好きな人ならまず間違いなく、そうでないという人でも恐らくきっと、彼らが手掛けた映像をスクリーンやテレビなどで目にしていると思います。

本格的な CG を活用した映像表現は WebGL などのリアルタイム系の CG とはまったく異なる世界ですが、その映像としての美しさや迫力を損なわないように工夫された、見事な WebGL を使った演出が実装されています。

今回のサイトは全体的にやや暗めの背景を採用していて、比較的ハッキリしたコントラストのカラーリングがなんとも言えない重厚な迫力を演出していますね。

今回の場合 WebGL は動画や画像を表示するために使われていたり、あるいは背景の部分のグラデーション模様を描画したりといった感じですが、見せ方のバリエーションがいろいろあって面白いです。

静止画にしてしまうとどうしてもわかりにくいのですが、トップページではこの上の画像にあるように複数のレイヤーが後ろから前に向かって押し出されるような、立体的なアニメーションで表示されます。

もともと映像のほうが主役なので、こういうシンプルな立体表現に抑えておくほうが、むしろちょうどいい温度感になっているように感じます。

また、どんどんスクロールしていくと現れる文字が大きめに描画されるセクションでは、マウスカーソルでなぞってやるとまるで液体が引き伸ばされるかのような特徴的なインタラクティブエフェクトを見ることができます。

完全な流体表現ともまた違う、不思議な感触の演出ですね……

その他、さらにスクロールしていくと今度は事例を紹介するセクションなども出てくるのですが、ここでは各事例が風に舞うポスターのように動いたり、螺旋階段のようにキレイに並んだりと、やはりここでも立体的な表現を上手にコンテンツに取り入れています。

手掛けている事例の量も半端ではなく、ほんとにサイトを見ているだけでいろんな意味で驚かされます。

背景のノイズを使って描かれるグラデーション部分も、技術面では比較的よく見かけるタイプのものでそこまで珍しい実装というわけではないのですが、カラーリングが絶妙ですよね。

サイト全体のデザインのテイストがかなりしっかりテーマ化されている感じがして、アニメーションやトランジションもその路線にマッチするように調整されています。

ビジュアルやグラフィックスにこだわりのある企業のウェブサイトなので、下手に中途半端な立体表現を入れてしまうと逆にチグハグな印象になりかねない気がしますが、今回のサイトはバランスが見事で違和感はありません。