まるで水面のような揺らめく表現を上手に活用したイタリアのファッションブランド Furla のウェブサイト

doxas : 2021-03-12 13:37:07

統一感のあるエフェクトが心地よい

今回ご紹介するのは、イタリアで主に革製品を展開しているファッションブランド、Furla（フルラ）のスペシャルサイトです。

たぶん、EC サイトというよりは特設サイトなんだろうなと思うのですが、水が揺らめくようなエフェクトを随所に利用しており、ビジュアルにこだわった作りのサイトとなっています。

全体的な演出の方向性がきちんと統一されていて、コンセプトのわかりやすいサイトとなっています。

今回のサイトで使われている水のような表現は、波紋が広がるようなものとは少し風合いが異なり、どちらかというと水面のゆらぎのような感じですね。

円形の波紋模様が伝搬していくというよりは、より広い範囲が一気に歪むような感じと言ったらいいでしょうか……

基本的にマウスカーソルを動かしたときには常にそのようなエフェクトが発生するようになっていて、歪む量も結構大きく視覚効果の強い演出となっています。

これを見るとなんとなくわかるかと思いますが、今回のサイトではほとんどすべての文字・画像・動画は HTML 要素ではなく WebGL で描かれます。

すべてが Canvas 上に WebGL によって描かれる CG だからこそ、マウスカーソルを動かすことであらゆる対象にエフェクトが発生するという状況が実現できているわけですね。

個人的には、動画とかは普通に再生すればよかったんじゃないかな～とも思いますが、今回のサイトではきっちり WebGL で描画されるように実装されています。

以下の画像ではちょっとわかりにくいかもしれないですが、動画が再生されているときもやはり水のような揺らぐ演出が絶えず継続して発生しています。

また、製品の１つ１つを細かくプレビューしていくフェーズでは、スクロール操作を行ってやるたびに画面の奥の方から順番に製品が登場してはフェードアウトしていく、という演出が行われます。

この場面では、手前と奥とで最大２つの製品が同時に画面上に表示されるのですが……

手前にあるほうは特に水のゆらぎのようなエフェクトが自然発生せず、しっかりと形が見えるように表示されるのに対し、奥にあるほうの製品は半透明で描かれると同時にゆらぎエフェクトも掛かっています。

ユーザーに注目してもらいたい部分はくっきりと、後ろ側に控えているものについてはうっすらと描画するようになっていて、いろいろ工夫されているなと思いました。

今回のサイトでは WebGL で描画されるものが多く、また絶えず揺らぐようなエフェクトがどこかしらで発生している形なので、視覚的に得られる情報量がすごく多いサイトとなっています。

ブランドや、あるいはその時々のコンセプトにもよるとは思いますが、今回のケースは演出重視でビジュアルがかなり派手目に作られていますね。

蝶が飛んでいたり、それらが画面下に映り込んで表示されていたり、CG 的にはやっていること自体はそれほど難しいことではないのですが、ファッションブランドらしい良い意味で主張の強いウェブサイトだなと感じました。