静止画のイメージとパーティクルを複合的に用いた表現が新しい境地をひらく Dgrees のウェブサイト

doxas : 2023-06-21 13:23:12

静止画に動く要素を追加する変わった表現

今回ご紹介するのは、Dgrees というスタジオのウェブサイトです。

以前から WebGL を使ったコーポレートサイトを公開されていたのですが、今回のサイトはリニューアルされたもののようです。リニューアルに際しても、WebGL を使った部分が含まれた構成になっています。

静止画のような動かないイメージに対して、あとからパーティクルで動くものを追加するという一風変わった演出が行われています。

今回のサイトでは、直接的な 3D 表現がされているわけではないのですが、擬似的な立体表現や、立体的にも見えるパーティクルの表現が実装されています。

これがまた非常によくできているのですが、トップページのイントロ演出では、まだその片鱗はうかがえません。

パーティクル的な表現が出てくるのは下層ページに入ったあとです。

これ…… 静止画ではほとんど伝わらないと思います。精一杯文章を付け加えて説明するとしたら、背景に映っている女性の閉じたまぶたや唇など、色が金色になっている部分の周囲にパーティクルが流れるように出てきます。

最初に見たときは、もしかしたらパーティクルが流れ出る様子をレンダリングした動画を重ねているだけかなとも感じましたが、マウスカーソルの位置に応じたインタラクティブな軌道の変化なども起こるようになっており、WebGL ならではのリアルタイムなインタラクティブ演出となっています。

よく観察すると、女性の姿全体も、擬似立体表現が行われるようになっており、カーソルを動かすとほんの少しだけ視差がずれるような効果が見て取れると思います。

また、これも静止画でご紹介するのが非常に難しい部分なのですが……

特定のページでは水彩絵の具がサッと広がっていくような、独特なページ遷移演出が発生します。正確にはページというよりセクション間の移動の際に発生するエフェクトですね。

このエフェクトも非常にインパクトが強く、実際にどういうふうに実装しているのか細かいところまで見てはいませんがいろいろなところで使える汎用性の高い演出方法だと思います。

まるで一瞬で水彩画が描かれているかのような演出。

今回のサイトでは、パーティクルを用いて静止画の上にエフェクトを乗せてまったく別次元のビジュアルに仕上げてしまっている、という点に個人的にはすごく驚きました。

実際には、擬似的な立体表現と組み合わせているので完全な静止画ではありませんが、それでも静止画＋パーティクルというアプローチはあまり見ない組み合わせのように感じます。