立体的な表現も擬似立体表現もいずれも丁寧に実装された BOTANIST ROOTH のウェブサイト

doxas : 2023-11-24 12:31:47

見た目のシンプルさとは正反対の実装力

今回ご紹介するのは BOTANIST ROOTH というヘアケア製品のウェブサイトです。

スパイスを贅沢に使っているということが最大の特徴になっているようで、それを連想させる WebGL を活用した表現がリッチな質感を演出しています。

WebGL を使っている部分もそうでない部分も非常に丁寧に実装されており、全体的な完成度がすごく高く仕上がっています。

※今回たまたまこのタイミングで見つけたのですが、サイト自体は１年ほど前から公開されているものみたいです

今回のサイトでは、一見するといかにもわかりやすい WebGL を利用した 3D 表現が出てきます。

しかし、WebGL の実装経験がそれなりにある人間であれば思わずびっくりするような、非常に凝った仕込みがたくさん見つかります。

描画時のパフォーマンスを考慮してのことだったり、あるいはリソースの容量を抑えるためであったりするのでしょうが、そのあたりすごくうまく調整されていますね。

画面の右側に透明なボトルの製品が描かれています。

このボトルは WebGL で描画されている 3D モデルで、液体によってボトルの中身が歪んで描画されているのが見て取れます。

こういった光学的な歪みは WebGL で表現するのが難しいものの１つですが、今回のサイトの実装ではすごく自然にそれが実現されています。

また、周辺を舞うように動いているスパイスたちがボトルの裏側に隠れると、ボトルの後ろにあるスパイスが透けて見えるようになっています。

これも現実世界では当たり前のように起こる現象ですが、WebGL で再現するとなると非常に手間の掛かる表現なので、ここまで見事に実装されているというのは単純に驚きます。

その他、スパイスのスプライトが被写界深度エフェクトのようにぼやけて描かれたりするのも芸が細かいです。

ほんとに見れば見るほど良く出来てるな……

どのような業界、職種でも、素人が見てもすごさがわからないものって多くあると思うのですが、今回のサイトは WebGL 実装経験がないと「あらゆることがあまりに自然すぎるが故に」そのすごさがわからない可能性があるなと感じました。

また今回のサイトの実装の本当に優れた点は、物理的に正しく CG を実装しているとかそういうことではまったくなくて、いかに軽量さを損なわずにリッチに見せるか、ということをとことん突き詰めていることだと思います。

ウェブサイト全体のデザインも質感高く、製品の魅力を存分に表現している完成度の高いウェブサイトだと思います。