有名ファッションブランド Gucci の WebGL 製ミニゲームを実装した販促サイトがおもしろい
技術解説の記事も必見
今回ご紹介するのは、WebGL を利用したプロモーションがすっかりおなじみになりつつある Gucci のウェブサイトです。
こちらのサイト、公開されたのは少し前みたいなのですが、たまたま私が気がついたのはこのタイミングだったので紹介しようと思います。
恐らく、スニーカーのような製品の販促を行うために制作されたものだと思うのですが、どこにも直接製品にリンクしている部分などがなく、Gucci ともなると販促の仕方もやっぱり変わってるな~ なんて小並な感想をいだきました……
なお、Awwwards で解説記事も公開されているので、そちらも目を通してみるとより楽しめると思います。
リンク:
Gucci Burst - A Vintage Video Game Inspired WebGL Experience
操作はかなりシンプルできれいにまとめられている
今回のサイトは、完全にベタ塗りなテイストのビジュアルになっており、下手に陰影などをあえて付けていないマテリアルになっています。
こういうテイストの CG は、一見すると簡単そうというか……
そんなに難しいことを考えなくてもよさそうにも感じられるかもしれないですが、よりデザイン性という意味ではシンプルに寄せた表現なので、かなりバランス取るのが難しそうだなと個人的には感じました。
これは完全に個人的な想像になるのですが、このサイトはたぶんモバイルファーストと言いますか……
モバイルデバイスの縦長のディスプレイで表示したときに一番最適なビジュアルになるように計算されている気がします。ですからたとえばこの上の画像とかを見ると、左右に無駄に余白というか、空間の広がりがあるんですよね。
そのあたりは良い・悪いでは一概には語れないとは思うのですが、PC 版ならではの工夫みたいなのがあったら、より評価されたのかもしれないなと感じました。
とは言え、全体としてのカラーリングとそのバランスの取り方は絶妙だなと感じます。
障害物にぶつかってしまった際に表示されるリザルト画面や、ステージを遷移する際のアニメーションなども見事で、陰影の一切ないベタ塗り風のマテリアルを使いながらもオブジェクトが埋没しないようにすごく工夫されていますね。
これ、同じ条件で CG を作ってくれという依頼をされた場合を考えると、こんなにきれいにまとめられる気がしないです……
ポップで可愛らしい雰囲気に、シンプルな操作のミニゲームを組み合わせた完成度の高いウェブサイトだと思います。
販促サイトのはずなのに、販促する商品がどこにも掲載されておらず、導線すらないというのは本当にある意味すごいですよね。ブランディングの奥深さを感じさせてくれる、そんなサイトとも言えるのかもしれません。
WebGL でこういうテイストの表現でしかも 3D というのは結構珍しいと思います。
ぜひチェックしてみてください。
リンク:
Gucci Burst - A Vintage Video Game Inspired WebGL Experience