ダイナミックなスクロールエフェクトで自分たちのビジョンを力強く示した Analytica Alimentaria のウェブサイト
食品の安全性を検査する会社？
今回ご紹介するのは Analytica Alimentaria という企業のウェブサイトです。
たぶん、食品の安全性を検査したり、安全性に関するアドバイスをしたり、といった事業を展開してる企業だと思うのですが、ウェブサイトのテイストはなんとなく食品・バイオ系というよりはサービス系っぽい感じの見た目になっていますね。
スクロール操作に応じてインタラクティブに変化するシーンが、なんとも迫力があって面白いです。
リンク：
スクロール速度によってエフェクトも変化
今回のサイトではロード直後から 3D のシーンが展開されます。
白っぽい色合いの仮想空間に、まるでミルクかなにかのような波打つ液体が描かれます。
そこにリボン状のオブジェクトが登場して、以降はこのリボンが１本の道のような感じでシーンが遷移していくようになります。
スクロール操作を行うたびに、リボンの表面を撫でるようにカメラが動いていく感じですね。
リボンの上をスクロールで進んでいくと、途中でメッセージが表れたり、あるいはイラストが表れたりといったことが起こります。
このとき表示されるメッセージは 3D 空間に置かれたオブジェクトなので、DOM などで描かれるものとは異なり、さらに歪んだようなエフェクトが掛かったりすることもあります。
具体的には、勢いよくスクロール操作を行うほど歪む量が大きくなるように設定されているようで、ぐいぐいスクロール操作を行っていくとなかなか迫力のあるビジュアルを見ることができます。
一方で、描かれるイラストのほうは特徴のある抽象画っぽい感じのキャラクターなのですが、こちらは波打つように歪むだけではなく……
ノイズを利用してマダラに浮かび上がってくるようなエフェクトが加えられています。
これは静止画では伝えるのがちょっと難しいので、実際にサイトに行って動く様子を見てもらえたらと思いますが、徐々に浮き上がってくる様子は味わい深い印象で見た目にも面白いですね。
今回のサイトでリボン状のオブジェクトの上に並べられているイラストやメッセージは、別途 About ページのほうにも同様の内容の記載があります。
About ページ内の Our Values の項目で、６つのバリューの一覧を見ることができる感じですね。
たぶん、今回のサイトを制作するにあたり、クライアントから６つのバリューを中心に表現したいという要望があった、あるいはディレクションで６つのバリューを軸に据える形で制作が行われた、ということなんだろうなと想像します。
印象的な見せ方で、サイトに訪れた人にしっかりとメッセージを伝えることができているのではないでしょうか。
ぜひチェックしてみてください。
