イタリアのハウスウェアメーカー Alessi のウェブサイト The Five Seasons がすごい！
高品質なモデルがたくさん登場！
今回ご紹介するのは、イタリアで独自のデザイン・インテリアやキッチン用品などを販売している Alessi というメーカーの特設サイトです。
今回のサイトは数ある商品群の中から特に、芳香剤や香水などの匂いに関連したアイテムを取り揃えた一連のシリーズのために、特別に作られたものみたいです。
日本にもショップがある結構有名なメーカーみたいなのですが、今回のサイトの完成度はかなり高くて、見ているだけでも楽しいですし、単純にフロントエンドの実装としての技術も非常に高いレベルにあると思います。
テーマごとに多彩なインタラクションや演出が用意されている
今回のサイトは、ページのロードが終わった直後のシーンから、迫力のある WebGL の実装が目を楽しませてくれる、そんな作りになっています。
まるで水滴のような形をしたオブジェクトが浮かんでいるトップページでは、半透明なオブジェクトの質感を活かしつつ、テクスチャ座標をずらすようにしてゆったりとしたアニメーションを演出しています。
パーティクルや文字が漂うように作られているシーン全体が、まるで水の中を再現しているかのようでどこか幻想的な雰囲気です。
これらの浮かんでいる水滴の形をしたオブジェクトは、サイトの名前にもある通り 5 つの季節を表しているようで、選択してやるとその季節に合わせた個別のページへと移動することができます。
季節ごとの個別ページでは、そのページごとに独自のインタラクションを備えたデモを見ることができます。
日本の四季にそのまま当てはめるのはちょっと難しい表現のものもありますが、秋や冬などがなんとなく想像できるようなシーンづくりがされています。
興味深いのは、それぞれのページごとに異なる多彩なインタラクション。
マウスカーソルをホバーするだけで反応を示すようなものもあれば、ホールドしたままにしておくことで、初めて変化が起こるものもあります。
これだけたくさんのモデルデータやテクスチャを使っているのに、あまりロード時間も含めて重さを感じないのがなんともすごいです。
商品を説明する詳細ページなどへのシーン遷移等も非常に丁寧に作られていて、サイト全体の動線がなめらかにつながっているような印象を受けます。
白い花がマウスホバーで凍りついたり、マウスボタンのホールドでブラックホールが突然現れたりと、様々な面白い演出が盛り込まれていて見ていて本当に感心してしまいます。
Alessi というメーカーは、調理器具やインテリアなどの他の製品を見てみても、独特なデザインが一風変わった雰囲気を醸し出しています。
今回のサイトも、芳香剤などの「香り」がテーマの製品のための特設サイトですが、一種独特な、イタリア製品が持つユニークでお洒落な雰囲気をしっかり表現しているような気がします。
ページ遷移やメニューの表示など、様々な部分で WebGL とそれ以外の部品が違和感なく一体になっているのも素晴らしいです。
ぜひチェックしてみてください。
