ロゴに込められた思いやコンテキストを WebGL を用いて見事に可視化した Vlag yokohama のウェブサイト
要所要所で WebGL を効果的に
今回ご紹介するのは、Vlag yokohama（フラグヨコハマ）という施設のウェブサイトです。
オフィスやカフェなどが入った複合施設みたいなのですが、横浜という立地も相まってすごくおしゃれな空間となっています。
今回のサイトでは演出をなんでもかんでも WebGL で処理しているわけではなく、必要な部分で目的に応じて WebGL を取り入れているという感じがします。
リンク：
ロゴが動くことの背景にある意味
今回のサイトでは、トップページのキービジュアル部分の背景と、そこに表示されるロゴマークに WebGL が用いられているようです。
キービジュアルの背景部分は、いくつかの写真を短冊状にして並べたような感じになっているのですが、一定時間ごとにその内容が切り替わるようになっており、その切り替わりの瞬間のトランジションを見るとノイズを使った演出が施されているのがわかります。
このような水面の揺らぎのような雰囲気は、ロゴマークに施された揺らぎともどこか通ずるものがあります。
写真で構成された背景部分の上に、アルファベットの V が歪んだような感じのロゴマークが表示されているのですが、このロゴマーク自体もゆらゆらと絶えず動いています。
なにか、水面へ映り込んだ風景みたいな感じで、不規則に揺れているロゴマークはすごく存在感もありますし、視覚効果も大きいですね。
どうやら、もともとのロゴマーク自体が（静止画の状態でも）曲線を取り入れた歪んだシルエットをしているのですが、ウェブサイト上ではそれをさらにアニメーションさせることでより印象深いものとして見せているみたいです。
About のページを見ると、このロゴマークにどのようなコンテキストや思いが込められているのか、ということが語られているセクションがあります。
それを読んだ上でトップページのキービジュアルを見てみると、なるほどと思わず納得してしまうようなところがありますね。
なぜこのロゴデザインなのか。なぜこの WebGL 演出が必要だったのか。
いろいろなことを考えさせられる見事なデザインだと思いました。
今回のサイトの WebGL 実装はアクセントの１つとして大きな存在感を放っていますが、かといって、サイト上の演出のすべてが WebGL によって構成されているわけではありません。
むしろ WebGL を使っていない部分のほうが実際には手が込んでいたりしますし、サイト全体としての実装のレベルもすごく高い次元に達していると感じました。
普段、自分自身はロゴのデザインとかすることもほとんどないのですが、こういう形でロゴになにかしらの思いや背景が詰め込まれており、それを WebGL がより効果的に可視化しているというのはすごく奥の深い、おもしろい世界だなと思いました。
ぜひチェックしてみてください。
