さりげない WebGL の利用でセンスを引き立てる！カナダにあるお洒落オブジェを販売するブティックのウェブサイト

doxas : 2017-08-31 14:03:55

とてもさりげないけれど大きな役割を担う WebGL

今回ご紹介するのは、カナダにあるとあるブティックのウェブサイトです。

そもそもブティックってなんだっけ……というしょうもない疑問を抱いて調べてみたら、Wikipedia 曰く「（女性用の）衣服・装身具などを売る小規模な専門店」とのこと。

そう言われて見てみると、なるほど今回のサイトで紹介されている商品はどれも可愛らしい独特なデザインが映える、そんなアイテムばかりという感じがします。

そんなショップの雰囲気にもぴったりの、さりげない WebGL の演出が見事な仕上がりになっています。

今回のサイトにおける WebGL の位置付けは、サイトのイントロ部分を飾る演出の立役者、といった感じ。

最近は特に感じるのですが、こういったシンプルなデザインのサイトで、トップページの最上部に一点ものの WebGL デモが置かれているパターンが件数としてはかなり多いのではないでしょうか。

大きく取られた余白と、自然と目の行くところに置かれたちょっとだけ不思議な動きをする WebGL デモという組み合わせは、いかにもモダンな印象になるので、アクセントとして採用されるケースが多いのでしょうね。

これは静止画ではまあわからんと思うのですが……

上のキャプチャされた画面の、中央背景に置かれている大きめの画像に見える部分、これが WebGL によってレンダリングされている部分になります。

人間の目というのは不思議なもので、アニメーションしている様子を見ているときは些細な違いに気がつくのですが、こうして静止画になってしまうとまったくどういった効果が与えられたものなのか、わからないですね（笑）

アニメーションの効果としては、波紋が広がるような、割とよく見る演出が使われています。

びっくりするぐらい、ほんと静止画ではわからないですね……

実物は、結構しっかりはっきり動いている様子がわかります。

また、この画像の部分はマウスカーソルのホバーによってカラーになったり、ほかのメニューや画面遷移を伴う部分では、よりダイナミックに動きます。

上の画像をよく見てみると、すこし傾いたようになっているのがわかるでしょうか。

単にアルファブレンディングで少しずつ透明にしていくなどのフェードアウトだけでなく、物理的にも、中心から離れていくような、そんな外見的変化が起こるようになっています。

最近ではこういった動きも普通に CSS で実現できますので、上手に組み合わせて使いたいところです。

ちなみに今回のサイト、WebGL よりもむしろこういった CSS テクニックのほうが圧倒的に凄みを感じさせる内容になってます。

商品ページのカーソルホバーアニメーションとかマジでやばすぎだろこれ……

こちらもぜひ実物を見てみてほしい、そんな出来栄え。静止画だとまったく魅力が伝わらない（笑）

WebGL の実装には Pixi.js が利用されていますが、立体的、あるいは立体的に感じるような動きを CSS で実現するなど、WebGL を利用しているとは言っても 3D に固執しない柔軟な使われ方がなされているのがいいですね。

WebGL ではピクセルレベルでフィルタを掛けたり、あるいは立体的に複雑な動きをさせたりなど、大量の演算を必要とする処理が非常にスムーズに実行できるメリットがあります。

WebGL を利用したら、それが即ちグラフィックスをリッチにする、ということでは無いので、適材適所、WebGL で実装することに向いた内容に限定して利用していくのが正しい用法だと個人的には思っています。

そういった視点で見てみると、今回のサイトは技術の正しい使い分けがなされていて、バランスにも優れた非常に素晴らしい実装になっているなと感じました。