透明感のあるデザイン・スタイルにマッチする WebGL 表現が見事な Lo&Behold のウェブサイト
すごく……透けてます
今回ご紹介するのは Lo&Behold というスタジオのウェブサイトです。
白を基調とした非常に透明感のあるデザインになっており、その全体的なスタイルの方向性を WebGL の実装も見事に踏襲しています。
一体感のある、すごく完成度の高い実装例だと思います。
リンク：
WebGL 実装としてはそんなに複雑ではない
今回のサイトの場合、WebGL だけに注目してサイトを見ていってもあまり意味がないと感じます。
というのは、サイト全体のデザインの方向性がかなりしっかりとあるような気がしていて、その方向性ありきで WebGL 実装も取り入れられているように思うからです。
白い背景、広く取った余白、そしてフォントの選定やラインの引き方などを見ても、それを感じますよね。
WebGL 実装は、実はそんなに複雑なことをしているわけではありません。
いわゆるノイズを用いた波打つスフィアが、柔らかいガラスのような…… あるいはシャボン玉のような感じで描かれます。
この WebGL で描かれるスフィアは画面内を動き回りますが、これはいわゆる平面的な画面上での位置の変化でしかないので、WebGL 的に凝ったトランジションやディストーションが実装されている感じではなさそうですね。
そういう意味で、本当にシンプルな実装だと思います。
実は今回のサイトにはそれ以外にも WebGL を使っていると思われる演出というのはあって、こちらは事例の紹介セクションなどで用いられています。
カーソルを動かすと、その軌跡の部分がグイッと引っ張られたような感じで変形します。
これはそのディストーションの仕方というよりは、モーションとしての粘度の付け方がおもしろいですね。時間差でニュッと動くような感じはこれはこれで目を引きます。
何度も同じようなことを書いてしまいますが、今回のサイトの場合はそれぞれの演出や構成要素をバラバラに見ていくより、全体としてそれぞれがどう機能しているかを観察するほうが有益なように感じました。
WebGL 的にはそんなに難しいことや凝ったことをしているわけではありませんが、使い方と、そのビジュアルのトーンがすごくサイトの方向性にマッチしていますよね。
いい意味で、WebGL がウェブにおける表現の一手段として機能している事例だと思いました。
ぜひチェックしてみてください。
