3D 空間であることを活用した多様な演出に思わず釘付けになる！ Les Animals の 2019 年賀コンテンツ
奥行き感があればこその演出がすごい
今回ご紹介するのは、Les Animals というデジタル・クリエイティブスタジオの 2019 年の新年を祝うコンテンツです。
Les Animals は、自社サイトも Pixi.js ベースで実装されていて、流れるようなアニメーションがなんとも素敵なんですけれども、今回のサイトもアニメーションや 3D のビューなどにすごくこだわりが感じられる仕上がりになっています。
特に、奥行きを表現できる 3D ならではの特徴を活かしながらも、トリッキーで楽しい演出が仕込まれていて、本当に見ていて驚きと感動が同時に味わえるサイトとなっています。
じっくり細かい部分まで楽しみたい
今回のサイトでは、全体で５つのフェーズに分かれています。
シーンごとに、3D のビューが用意されているところとメッセージのみのところがありますが、3D のビューが用意されているフェーズは本当にすごいです。
シーンの移動は、スペースキーの長押し（ホールド）です。
シーン内での操作については、マウスでドラッグ操作を行って制御します。
画面全体を使った大胆な演出が使われていて、まるで四角い通路か、あるいは奥行きのある窓のような部分から、壁の向こう側の世界を見ているかのようなビューが展開されます。
上のふたつの画像、背景の色も、窓から見えている景色も全然違うように見えるかもしれませんが、特に上段の画像の景色の中に、ネオンが映り込んでいるのがわかりますでしょうか？
このように、3D ビューでは窓のような部分をドラッグ操作で左右に動かすことができるようになっていて、左半分と右半分では、まったく異なる風景が見えるようになっています。
この演出が本当にすごくて、何度もぐいぐいとマウスを動かしてしまいます。
窓のような部分から見える景色の 3D シーンも、すごく丁寧に作られています。
ジオメトリ自体は恐らく結構シンプルな、ローポリゴンなモデルを使っていると思うのですが、テクスチャ用の素材がすごく丁寧な手書き風イラストになっているので、質感の高いシーンがレンダリングできていると思います。
また、テクスチャだけに頼るのではなく、シェーダを使って水面のゆらぎを表現している部分があったりと、技術的にもいろいろと表現のために工夫が凝らされています。
いやー、これ本当にすごいです……
今回のサイトは特に販促とか製品の告知とかではなく、いわゆる年賀ページだと思うのですが、それにしてもすごく手が込んでます。
若干ネタバレっぽくなってしまうので詳細は書かないですが、タブレット端末が描画されるシーンのところ、すごくダイナミックなカメラワークで本当に素晴らしいですね……
驚きました。
利用されている素材もよく、カメラワークや 3D ならではの工夫も手が込んでいて、技術面でも申し分ない、大変素晴らしいサイトになっています。
ぜひチェックしてみてください。
