フランスのウィンタースポーツ用品を扱う企業 Wed'ze の今冬シーズン特設サイト
平面と凹凸の変化を上手に利用した演出
今回ご紹介するのは、フランスでウィンタースポーツ関連商品を扱っている Wed'ze という企業のウェブサイトです。
日本ではあまり耳にしないブランドですが、フランスでは結構有名な企業なのですかね……少なくとも、今回紹介するサイトは、今シーズンの新商品をたくさん掲載している販促サイトという感じでとても良くできていますね。
シームレスに起伏の変化するシーンや、商品の写真に加えられている演出なども含めて、見どころの多いサイトとなっています。
全体に WebGL を利用したリッチな実装
今回のサイトは、DOM で演出されているものよりも、WebGL ベースで描かれているもののほうが多いのではないかなと感じさせる、とてもリッチな実装になっています。
最初にページがロードされた直後から、WebGL の立体感ある山脈のようなオブジェクトが出てきます。
アニメーションして登場してくるので、最初からしっかり見ていればわかるかと思いますが、今回のサイトでは平坦な地面が急に山のように盛り上がってきたり、逆に山の形から急に平坦な状態に戻ったりという、とてもダイナミックなシーン遷移が行われます。
この山のシーンでは、奥の方はフォグが掛かっていて霞んで見えるようになっている他、画面の端に近づくほど暗くなるような演出が施されており、壮大な広い空間をイメージさせるような絵作りがなされていますね。
シーンそのものは、テクスチャも貼られておらずローポリゴンなオブジェクトによって描かれているのですが、統一感のある雰囲気に徹しているためか、まったく安っぽく見えないのが素晴らしいなと思います。
山肌の部分には、その標高に応じてアイコンのようなものが置かれているのですが、これがそのまま、彼らの製品のコンセプトと関連するようになっています。
要するに、標高が高いところほど、よりプロフェッショナルな製品構成を紹介するようにし、標高が低いところは、エントリーモデルな製品を紹介するようにしているわけですね。
下の画像は、そんないくつかあるアイコンのうちの、ちょうど中間あたりを選択した時の様子なのですが、山肌がローディング状態に合わせて徐々に色を変えていくのはなかなか興味深いローディング演出だと思いました。
ロードが進むほど、山に色が広く塗られていく。
ロードが完全に終了すると、今まで山の形をしていたオブジェクトがスーッと均されるような感じで、徐々に平坦になっていきます。
そして間隔を空けずに、今度はコンセプトに沿った製品紹介のページが出てきます。
この部分も背景の部分は WebGL でシーンが作られていて、スクロールしてやると出てくる製品写真なども、スクロールの操作に応じて跳ねるように動いたり(跳ねる動きは CSS かな?)と、かなり手の込んだ作りとなっていますね。
全てがシームレスに遷移するようになっており、多少のロード待ち時間はあるにしても、コンテンツとしては全てが隙間なくきれいに繋がってる感じがして非常に見事だなと感じました。
フランス発のフロントエンド実装は、いろんな意味で存在感の強いものが多いと個人的には思います。
WebGL の実装例も、その数、品質共に、異常に高いレベルでしのぎを削っているイメージがあります。
それだけに、今回のサイトもウィンタースポーツに関連した製品用の、一時的な特設サイトとしてはかなり手が込んでいる印象で、本当に細かいところまで WebGL も含めて制御されていてなかなかすごいです。
適切に CSS 等で処理されている部分と WebGL で処理されている部分が分けられており、非常に丁寧に作られていますので参考になる部分も多いと思います。
ぜひチェックしてみてください。