CSS Design Awards の 2016 年度版ウェブサイト！ 背景のメタボールが面白い一作
老舗アワードのサイトも WebGL！
今回ご紹介するのは、フロントエンドエンジニアには馴染みの深いアワードである「CSS Design Awards」のウェブサイトです。
このアワードについては特に説明は不要かと思いますが、CSS Design とはタイトルにこそあるものの、特に CSS のみにはこだわらずにウェブサイトのデザインなど全般を対象にしたアワードとなっています。
ノミネートされているウェブサイトはどれも品質の高いサイトばかり。当然ながら、当サイトでも紹介したような、WebGL をバリバリ使ったサイトもたくさん掲載されています。
今回は、2016 年度の CSS Design Awards の特設サイトのほうを中心にご紹介します。
パーティクルと頂点アニメーションが美しい
今回のサイトは、一点ものと言いますか、ずっと同じ WebGL 製のデモが実行されるだけなので、複数の 3D シーンを楽しめるという作りにはなっていません。
それでも、このサイトの本来の意味である「アワードのサイト」だということを考えれば、あえてそのアワードサイト自身がド派手すぎるというのも違う気がしますし、ウェブコンテンツとしてのバランスをしっかりと意識した作りなのかなとも思います。
そんなわけで動いている WebGL デモはひとつだけですが、これがなかなか凝った作りになっています。
サイトのロードが終わると、青っぽい、薄暗い水中のようなシーンになるのですが、その中心でメタボールのような物体がうごめいている様子が描画されます。
静止画ではわかりにくいかと思いますが、水中っぽい表現を高いレベルで再現するために、いくつかテクニックが使われていますね。
まずは水中を漂っているパーティクル。これが、マウスカーソルの動きに合わせてゆっくりと浮遊しながら動くので、空中というよりもいかにも水中と言った感じの、少しだけ粘度のある空間を演出しています。
そして、ポストエフェクトとしてビネット（スクリーンの周辺だけが暗くなるエフェクトの通称）や、ブラーといったいくつかのエフェクトが加えられています。
個人的にすごく感心したのが、スクロールしたときのブラーの掛かり具合の動的なアニメーション。
これは iOS のメニューを開くときなどにも使われている表現ですが、上層にくるコンテンツを目立たせつつも、背景がぼんやりと見えている、印象的な演出が施されています。
少しスクロールしたときの様子。
ブラーが掛かっている状態であれ、そうでないときであれ、常にマウスからのインタラクションを検出するようになっていて、中央に浮かんでいるメタボールが、カーソルに追従する光源によって照らされています。
全体に青が基調になったシーンの色調ですが、ライトによって照らされた部分の赤系のハイライトが、とてもいいアクセントになっていますね。
このような背景の上に並べられたノミネート作品たちのパーツも、ホバーによって変化するアニメーションなど、細かいところまで見事に作り込まれています。
WebGL だけでなく、いろいろな部分を参考にできそうなウェブサイトに仕上がっているなと感じました。
近年では、ウェブのコンテンツをアワードとして表彰する文化がすっかり定着しました。
CSS Design Awards はその名前からして CSS に限定したアワードなのかと勘違いされてしまいがちですが、けしてそんなことはありません。
掲載されているサイトのレベルも高いですし、2016 年のトレンドを振り返るという意味でも、活用しがいのあるウェブサイトかなと思います。
ウェブサイト上の WebGL のデモはひとつだけですが、ブラーの効果的な使い方など、なかなか面白いと思います。
ぜひチェックしてみてください。
