質感が統一された 3D 表現でアイデンティティをビジュアルに落とし込んだ Anderson Moss のウェブサイト
インタラクティブ性を上手に活用
今回ご紹介するのは Anderson Moss というクリエイティブエージェンシーのウェブサイトです。
WebGL を普通に 3D 表現として利用しているタイプで、それほど凝ったポストエフェクトやシェーダエフェクトを用いている感じではないのですが、ウェブサイト全体としてのまとまり、デザインとしての統一感がとても優れているように感じます。
WebGL の世界が持つインタラクティブ性がウェブサイトの動的な部分の意味づけにきっちりとハマり、見ている人に印象的な感覚を与えています。
リンク：
たぶん WebGL がなくても成立する
今回のサイトはとにかくフォントの使い方やレイアウト、余白の取り方などがすごく凝っていて、そういう意味でウェブデザインという意味で洗練されている感じがします。（デザイナーではない素人の感想です）
こういったら極端すぎるかもしれませんが、正直このサイトの場合は WebGL が仮に一切表示されなくても、それはそれで成立してしまうのではないかと思うような、そういう堅牢さがあるような気がします。
とは言え、WebGL を含めてインタラクティブ性のある要素は多く盛り込まれていて、それらが醸し出す雰囲気がサイトの印象に大きく寄与していると思います。
スクリーンショットの静止画ではちょっとわかりにくいかと思いますが、シーン上には全身光沢のあるマテリアルに身を包んだ人物のような 3D モデルが描かれます。
どちらかというと、人物というよりマネキンのようなものといったほうが、適切かもしれません。
この人物たちのダイナミックなポーズが特徴的で、特にモーフィングやスキニングが適用されているわけではないのですが、すごく動きのあるウェブサイトのように目に映りますね。
カーソルの動きに応じて若干のインタラクションがあるので、視差が生じて立体的な空間を認識しやすくなっています。
また、これも静止画では伝えるのが難しいのですが……
セクションが変化するその瞬間には、わずかに RGB シフトのようなエフェクトが発生するようになっていますね。
通常のトーンがモノクロに近い色合いなので、一瞬のエフェクトによって発生する RGB シフトの色味が効果的に働いています。
ぜひ実際に、サイトに行って見てみていただけたらと思います。
WebGL を使っていない部分の、DOM と CSS によって演出されている部分もかなり動きや変化がつけられているので、トランジションのタイミングやスピード感さえ調整すれば WebGL なしでも成立するような印象を受けました。
ただそのような骨太な構造はありつつも、カーソルによってわずかに視点が変化する 3D シーンの効果はやっぱり大きくて、サイトの世界観をしっかりと描き出していると感じました。
下層ページはここでは特にキャプチャなど撮りませんでしたが、そつなく、丁寧に作られていて完成度が高いです。
ぜひチェックしてみてください。
