有名ファッションブランド Gucci の WebGL 製ミニゲームを実装した販促サイトがおもしろい

doxas : 2022-01-13 13:57:26

技術解説の記事も必見

今回ご紹介するのは、WebGL を利用したプロモーションがすっかりおなじみになりつつある Gucci のウェブサイトです。

こちらのサイト、公開されたのは少し前みたいなのですが、たまたま私が気がついたのはこのタイミングだったので紹介しようと思います。

恐らく、スニーカーのような製品の販促を行うために制作されたものだと思うのですが、どこにも直接製品にリンクしている部分などがなく、Gucci ともなると販促の仕方もやっぱり変わってるな~ なんて小並な感想をいだきました……

なお、Awwwards で解説記事も公開されているので、そちらも目を通してみるとより楽しめると思います。

リンク:

Gucci Burst

Gucci Burst - A Vintage Video Game Inspired WebGL Experience

操作はかなりシンプルできれいにまとめられている

今回のサイトは、完全にベタ塗りなテイストのビジュアルになっており、下手に陰影などをあえて付けていないマテリアルになっています。

こういうテイストの CG は、一見すると簡単そうというか……

そんなに難しいことを考えなくてもよさそうにも感じられるかもしれないですが、よりデザイン性という意味ではシンプルに寄せた表現なので、かなりバランス取るのが難しそうだなと個人的には感じました。

これは完全に個人的な想像になるのですが、このサイトはたぶんモバイルファーストと言いますか……

モバイルデバイスの縦長のディスプレイで表示したときに一番最適なビジュアルになるように計算されている気がします。ですからたとえばこの上の画像とかを見ると、左右に無駄に余白というか、空間の広がりがあるんですよね。

そのあたりは良い・悪いでは一概には語れないとは思うのですが、PC 版ならではの工夫みたいなのがあったら、より評価されたのかもしれないなと感じました。

とは言え、全体としてのカラーリングとそのバランスの取り方は絶妙だなと感じます。

障害物にぶつかってしまった際に表示されるリザルト画面や、ステージを遷移する際のアニメーションなども見事で、陰影の一切ないベタ塗り風のマテリアルを使いながらもオブジェクトが埋没しないようにすごく工夫されていますね。

これ、同じ条件で CG を作ってくれという依頼をされた場合を考えると、こんなにきれいにまとめられる気がしないです……

ポップで可愛らしい雰囲気に、シンプルな操作のミニゲームを組み合わせた完成度の高いウェブサイトだと思います。

販促サイトのはずなのに、販促する商品がどこにも掲載されておらず、導線すらないというのは本当にある意味すごいですよね。ブランディングの奥深さを感じさせてくれる、そんなサイトとも言えるのかもしれません。

WebGL でこういうテイストの表現でしかも 3D というのは結構珍しいと思います。

ぜひチェックしてみてください。

リンク:

Gucci Burst

Gucci Burst - A Vintage Video Game Inspired WebGL Experience

share

follow us in feedly

search

search

monthly

sponsor

social