自然素材由来でありながら抗酸化の効果も高いコーヒーカプセル Zero Impact のウェブサイト

doxas : 2021-07-19 14:29:03

自然環境にも配慮したカプセル

今回ご紹介するのは Capsul'in というメーカーのウェブサイトです。

こちらのメーカーは、日本でもポピュラーなネスプレッソコーヒーマシン用のカプセルを製造しているメーカーのようですね。

自然由来の素材のみで製造されているのに、酸素をしっかりとバリアすることでカプセルの中身の酸化を防ぐという謳い文句で、様々な目線からカプセルの優位性を説明しています。

サイトの見た目的にも非常に凝った作りになっています。

今回のサイトでは、WebGL を使って様々な表現がなされています。

通常、WebGL で何かを実装するのって見た目以上に作業的・時間的コストが掛かるため、WebGL で表現する対象をある程度絞って、限定されたパターンで実装する、使いまわしつつサイトを構成するという場合が多いと思います。

一方で今回のサイトでは、質感が異なる様々な表現が試みられていて視覚的に楽しめる要素が無数に存在しています。

しかもそれらがきれいにまとめられていて、技術力の高さを感じますね……

3D モデルを「普通に」描画する部分というのはあまり無く、スプライト的な表現や、ブラーによるぼかし、ノイズなどを使ったシェーダによるエフェクト表現などなど……

用途に応じていろいろな見せ方が用意されていますね。

2D 的な表現だけでなく 3D 的なモデルが出てくる部分ももちろん一部にはありまして、こちらは線画風の描画になっています。

一般的なライティングを適用した 3D モデルではなく、あえて線画風にしているところがなんとも芸が細かいです。

カップの形がまるで漫画のような線画で描画されているのがわかると思います。

こういった表現は見た目以上に実装が面倒で、あえて狙ってやっているのでしょうが、見ていてとても面白いですし参考になりますね。※余談ですが three.js にはこういうことが簡単にできる機能があります

2D と 3D をバランスよく組み合わせて、さらに要所要所で必要に応じた演出が行われており、最初から最後まで同じようなエフェクトがほとんど重複しないのですごく見応えがあります。

世界的に、特に欧米諸国で顕著なのでしょうが、環境問題に対する意識は年々高まる一方でこういった自然由来の素材を使っていることが大きなアドバンテージになる時代ですよね。

今回はコーヒーカプセルでしたが、バイオ産業などの環境問題と切っても切れない関係性の業態だと、ウェブサイトでもそれをしっかりとアピールすることが必要なのだと想像します。

今回のサイトでは WebGL を使っているものも含め、かなり多様な表現が使われていて……

その手間の掛け方に個人的にはすごく驚きました。

カップの模様のカスタマイズなんかもサイト上で擬似的に行うことができ、本当にいろんな工夫がされているなと思いました。