WebGL 実装じゃないことに逆に驚く！無人の販売機をフランチャイズで展開する Grab＆Go のウェブサイト

doxas : 2024-03-22 12:48:45

WebGL 使ったほうがたぶん軽いんだろうな……

今回ご紹介するのは、ポルトガル（あるいはその周辺も含む？）で展開されている無人販売機のフランチャイズ、Grab&Go のウェブサイトです。

日本人からするとあまりにも生活に溶け込みすぎていて意識しにくい自動販売機ですが、今回の企業が展開しているのはもう少し多様な、ちょっとしたコンビニみたいな感じの販売機みたいですね。

今回のサイトは WebGL は確かに使っているのですが、むしろ WebGL 使ってないところのほうがすごいというか、普通に驚きました。

今回のサイトのトップページ、一見するとイラスト調であまり 3D 感は無いように思う方が多いと思います。

ただ、微妙に庇（ひさし）の部分がカーソルを重ねると動いたりしますし、あれこれもしかして見えているビジュアル全体が WebGL かな？と一瞬感じるところもあるんですよね。

でもビジュアルのほとんどは WebGL ではなく、DOM と CSS を組み合わせて上手に組み立てられています。

では、ほとんどの要素が画像や DOM だとすると、いったいどの部分が WebGL で実装されているのか、この上のスクリーンショットを見てわかるでしょうか？

こんな小さなスクリーンショットの画像じゃわからんよ～という声が聞こえてきそうですが、これ、ディスプレイで等倍で見ていてもたぶんパッと見ただけではわからないと思います。

さて、WebGL が使われている部分がどこかというと……

正解は、左下隅のあたりに描かれている紙コップの部分です！

スクロール操作をしてやると、イラスト風の冒頭のセクションはスクロールしていくのに対し、紙コップの部分だけがスルスルと流れるようにページの手前に転がってきます。

そう、この紙コップの部分が冒頭のシーンのなかで唯一 WebGL によって描画されているオブジェクトだったんですね。

というか、今回のサイトのその他のセクションでも、WebGL を使って描画されているのは紙コップだけで、それ以外の要素はすべて DOM と CSS で演出されているみたいでした。

どうしても紙コップだけは 3D で表現したかったのでしょうか……

冒頭にあるイラスト調のキービジュアルも、すごく雰囲気がいいんですよね。

妙に滑らかに動くから WebGL でスプライトとかをうまく使って描画しているのかと思ったら、実際には紙コップだけが 3D になっており、それ以外の部分は普通に DOM だったので逆にビビりました。

サイト全体にかなりたっぷりと演出が盛り込まれていていろんな要素が（ややうるさく感じるくらいに）動きまくるのですが、それらのほとんどは WebGL ではないものによって演出されています。