アブストラクトな表現が特徴的なカナダにあるクリエイティブスタジオのウェブサイト!
なんと形容したらいいのか迷うような世界観
今回ご紹介するのは、カナダにある企業のウェブサイトです。
冒頭からいきなり WebGL 全開で主張してくるような作りにいなっていますが、抽象的な雰囲気がなかなかかっこいいですね。
冒頭のシーンだけでなく、Work のページにも雰囲気の少し違うデモが設置されています。
いずれのデモページも、しばらくぼんやり眺めていられるような、不思議な世界観になっています。
透けて見える背景や鏡面反射効果が面白い
今回のサイトは、一応企業のポートフォリオのような役割のサイトなので、アイコンをクリックするなどしていけば、こちらの企業が手掛けたウェブサイトなどを見ることができます。
しかしそれよりも、やっぱりまずは全画面で背景に描画される WebGL 表現のほうに目が行ってしまいますね。
トップページのデモは、トンネルのようなところをずーっと奥に向かって進んでいくだけの構成なのですが、色が変化したり、時折カーブのような軌跡を描く部分があったりと、変化に富んだ表現になっています。
非常にカラフルなシーンがとてもキレイですね。
背景が透けて見えていて、トンネル状の通路が意外にもかなり入り組んでいるのが壁越しに見て取れます。
また、マウスカーソルを動かすと視線を操作することができるのですが、よーく見ると、トンネルの内側の壁面は、鏡面反射のようなエフェクトが掛かっている部分もあるんですね。
不思議な奥行き感のある、かっこいい仕上がりになっています。
画面の中央にはバーガーアイコンが置いてあり、これがメニューになっています。クリックすると周囲にアイコンが飛び出してくるようになっていて、この企業の Twitter アカウントを参照したり、彼らの仕事の一覧ページへ移動したりできます。
Works のページには、先ほどまでとは打って変わって、一見ちょっと暗いような色合いのシーンが出てきます。
こちらもやはり全体的に抽象的な形状のオブジェクトが表現の主体になっていて、これはこれで、かなりセンスを感じさせる表現になっています。
これはたぶん、静止画で見てもよくわからないかと思うのですが、なかなかカオスっぽくていい感じです。
また、バーガーメニューが同じように設置されているのですが、このメニューの開閉時に、よーくアイコンを観察していると、まるでメタボールのようにアイコン同士が結合しているような演出になっているのがわかります。
細かいところまで、しっかり作ってありますね。
全体の印象として、WebGL だけに限らず、あまりに突飛なとんでもない技術を駆使しているという感じではありません。
割りと基本に忠実な感じの実装が多いのですが、そのひとつひとつがしっかりと効果的に機能しているために、全体的に非常によくまとまっているように見えますね。
潔くリンク先は新しいウィンドウで開いてしまうという UI なんかも、これはこれで、ありなのかもしれませんね。
あんまりスペックの高くないマシンだと、ちょっと表現的に重く感じる部分もあるかもしれませんが、シンプルながら面白い表現は、きっと参考にできる部分も多いと思います。
ぜひチェックしてみてください。