日本のとあるインディーズ音楽ユニットのサイトにさりげなく仕込まれた Create.js 製の WebGL エフェクト

doxas : 2015-12-31 12:55:04

パーティクルを使った表現で魅せる

今回ご紹介するのは、とあるインディーズの、日本で活動している音楽ユニットのサイトです。

音楽やイラストの世界って、プログラムや数学とは違い、必ずしも答えが定まらない難しい世界だと思っています。ウェブデザインなんかも、ある意味ではそうですよね。

表現のひとつとして、今回はこのサイトで使われているさりげない WebGL 実装をご紹介したいと思います。派手さはありませんが、逆にそのさり気なさがとてもいいと思います。

最近様々なところで言っているような気がしますが、WebGL を使っているサイトというと、エンターテイメント性の高いものや、ド派手なプロモーションサイトなどがどうしても目立ちます。

パッと記憶を振り返ってみても、浮かんでくるのってやっぱりそういうサイトばかりですよね。

作る側も、どうしてもそういうものを意識してしまいがちだなって個人的には思いますが、今回のサイトでは非常にさり気なく、とても控えめな範囲で、しかし WebGL らしい実装を行っています。

最近は、こういったさり気ない WebGL 実装にとても注目しています。

以下は、サイトのトップページの様子。ここでは WebGL はまだ動いていません。

sugermosaic というユニットのサイトですね。

サイト内のコンテンツを見ると、年末に新しいアルバムをリリースする予定のようです。

「ENTER」などをクリックしてサイト内に入ると一面の雪景色と共に彼らの楽曲が流れ出し、画面内を多数のパーティクルが埋め尽くしていきます。

縮小されているキャプチャ画像ではわかりにくいと思いますが、粉雪のような、きらめくパーティクルがとても美しく表現できていると思います。

その他には、曲が切り替わることで背景が変化するような趣向も取り入れられています。

違う曲の背景シーンでは、雨と、その雨がぶつかった窓のような、水滴を模した表現を行っているところもありますね。

こちらは若干重い感じもしますが、サイトの背景画像との雰囲気の親和性も高く、いい演出だなと思います。

はい、これもキャプチャ画像では小さすぎてよくわからないと思いますが、ぜひサイトに実際に訪れてご覧になってみていただければと思います。

WebGL の実装としては非常に単純なもので、create.js を利用した WebGL 実装となっています。私の観測範囲内では、実は意外なほどに見かけない create.js ですが、こういうシンプルな実装にはすごく向いているのかもしれないですね。

こういったシンプルかつさり気ない形で WebGL をサイトのデザインに取り入れている事案は、どんどんこれから紹介していければなと思っています。