透明なガラスを通して見ているようなディストーションがおもしろいミュージアムタワー京橋のウェブサイト
WORK と ART の共存
今回ご紹介するのは、ミュージアムタワー京橋のウェブサイトです。
今回のサイトは特に、WORK with ART というプロジェクトにフォーカスしたウェブサイトのようで、プロジェクトの詳細やその背景にある思想などがたっぷりと語られています。
WebGL はかなりいろいろな箇所に、ときには大胆に、時には小さく控えめに配置されており、その一貫したビジュアルでサイトの雰囲気づくりに大きく貢献しています。
リンク：
ディストーションにもいろんなバリエーションが
今回のサイトの WebGL 演出は、基本的に同じような質感を持っているものが多いです。
それは簡潔に言えば「透明なガラス越しになにかを見ているときのような歪み」の表現です。
イメージが歪むという場面ももちろんあるのですが、文字に対してそれが適用されている場合もあり、バリエーションはかなり豊富です。
ウェブサイトがロードされた直後のイントロ演出では、動画素材のビジュアルが大きくディストーションします。
ただしこのイントロのディストーションエフェクトはあくまでも導入の際だけ発生するようで、カーソルをホバーさせたりしても再度エフェクトが発生することはありません。
こういったインタラクティブ性を一部意図的に排除している部分があったりして WebGL 使いとしては見ていて興味深いところがいろいろありますね。
静止画ではちょっとわかりにくいかもしれませんが、この上の画像を見ると「Activities.」の文字が歪んでいるのがわかるでしょうか。
この文字に対する歪みは時間の経過やスクロール操作、あるいはカーソルがホバーしたかどうかなどを契機にしてディストーションの状態が変化します。
WebGL をバリバリ使っている部分もあれば、WebGL なしでエフェクトが組み立てられている部分もあり、下層ページについてもすごく丁寧に作り込まれています。
仕事の空間に ART を融合させる…… そんなプロジェクトだからこそのこのウェブサイトなんだろうなと、すごく納得させられるような気持ちになりました。
演出一辺倒というわけでもなく、かといって、ただ落ち着いた雰囲気だけがサイトを満たしているわけでもなく、それらが複雑に入り混じった独特な空気感がウェブサイトとして見事に構築されています。
WebGL を使っていない部分の完成度も高いので、隅々まで観察してみても参考になりそうです。
ぜひチェックしてみてください。
