流体表現と 3D ジオメトリによる表現とがうまく組み合わされた Advanced Team のコーポレートサイト
比較的シンプルなデザイン
今回ご紹介するのは、ウクライナのデジタル・エージェンシー Advanced Team のウェブサイトです。
WebGL を利用して流体表現が行われているので、すごくビジュアルの印象が強いウェブサイトになっています。
とは言え、派手さにステータスを全振りした「だけ」ということはなく、しっかりと細部まで丁寧に作り込まれていてとても完成度が高いですね。
リンク：
スクロールに連動したアニメーションなども実装されている
今回のサイトはコーポレートサイトなので、手掛けてきた事例の紹介や、所属するスタッフの紹介などが一通りそろっています。
トップページはアルファベットの A の形をした巨大な 3D オブジェクトが画面中央に鎮座し、なんとも言えない存在感を放っています。
今回のサイトでは背景が一見すると真っ黒のように見えますが、どのようなタイミングでも常に流体的なエフェクトがマウスカーソルを動かすことで発生するようになっています。
スクロール操作に対するインタラクティブなシーン遷移がなかなか見事で、トップページからスクロール操作を行うと、A の文字に空いた隙間というか穴の部分に、カメラがスッと動いてくぐっていくような演出があったりもします。
手前にある DOM のレイヤーがスクロールに連動して自然と動いていくのに合わせて、3D シーンもなんらかの形で追従するようになっており、これがとても自然なんですよね。
違和感を感じないように作られているところが本当にすごいと思います。
事例紹介のページでは、各事例のスクリーンショットの部分にホバーエフェクトが実装されています。
このホバーエフェクトがこれまた結構面白くて、ズームブラーをうまく活用して、漫画的というか映像作品的というか……
まるでドクンと心臓が鼓動するかのような、独特の雰囲気を演出しています。
画面の背景に流体実装がされているので派手さ一辺倒の見た目重視な案件なのかなと思われてしまいがちかもしれませんが、かなり細部にまで丁寧に実装がなされており、すごく完成度が高いと思いました。
WebGL の流体実装って、自分でしっかり原理を理解して手作業で実装するのはかなり骨ですが、反面、インポートするだけで手軽に使える実装とかもあるので、流体表現がある＝レベル高い、とは言い切れない部分があると思います。
そういった事情があるためか、個人的にも、流体表現が導入されているだけではあまり驚きは感じないことが多いです。
一方、今回のサイトは流体表現を使ってはいるものの、実際にはかなり丁寧で細かい仕込みがたくさんあり、またその１つ１つがすごくレベルが高いように感じます。
DOM を使って描画されている文字と WebGL を使って描画されている文字が混在していて、エンドユーザーにそれらの違いを意識させないほど自然に一体となっているのも素晴らしいと思います。
ぜひチェックしてみてください。
