扱っている製品同様の遊び心あふれるいろいろな仕込みが楽しい Ferro 13 のウェブサイト

doxas : 2021-12-13 13:23:15

様々な表現方法が上手に取り入れられている

今回ご紹介するのは Ferro 13 というイタリアのワイナリーのウェブサイトです。

WebGL を利用した個性的な表現が多く見られ、とても楽しい雰囲気に仕上げられたウェブサイトとなっています。

実際のところ、彼らが扱っているワインの銘柄というんでしょうか、その名前も結構凝ったものが多く、ボトルに貼られたラベルのデザインとかも結構変わったものが多いです。

今回のサイトは、アルコール製品を扱っているので一番最初に入り口ページがあります。

入り口ページをキャプチャしたのがこの記事のトップ画像なのですが、この入り口ページも背景が WebGL で描画されているみたいで、まるで水が波打つような感じでゆらゆらと動いています。

最初の部分からかなりビジュアルに軸足を置いた表現がされているなと感じます。

入り口ページからコンテンツへと移動すると、ここでボトルがたくさん登場するシーンが出てきます。

このボトルの１つ１つは、どうやらその形状で物理演算されるようになっているみたいで……

掴んで投げるようにマウス操作を行ってやると、画面内をボトルが跳ねるように移動します。ワインのサイトを作ろうと思ったときにこの発想が出てくるってやばいですね。

かなり遊び心のある演出だと思います。

なお、WebGL を使っているところは他にもあり、たとえばそのまま画面の下の方までスクロールしていくと、ちょっと変わった RGB ディストーション演出を見ることができます。

大きな円筒形の部屋のなかで、壁にディスプレイが並べられたような外見をしている部分があると思うのですが、ここではドラッグ操作を行う際に RGB ディストーションエフェクトが発生します。

ここでは画面の外側に近い場所ほど大きなディストーションが掛かる様になっている他、いわゆる視野角を操作したときのように、画面の端はかなり大胆に画像が引き伸ばされていますね。

こういった RGB ディストーションのパターンはあまり見かけないので、すごく珍しくて面白い表現だなと個人的には感じました。

また、製品の詳細ページの方でも、背景画像が変化する際にノイズを使ったフェード表現が実装されていたりしますし、本当にいろんな表現方法がたくさん用いられていて見応えがあります。

ワイナリーの写真が一部掲載されていたりするのですが、なんというか……

写真に写っている関係者のみなさんが、童心を忘れない粋なオジサンたち、といった雰囲気です。

製品名、製品に貼られたラベル、さらにはこのウェブサイトも同様に、とにかく面白く賑やかにワインを楽しもうという気概が感じられますよね。