3D から 2D まで様々なテクニックを詰め込んだ演出が盛りだくさん！ベルギーのエージェンシー Nightingale のウェブサイト

doxas : 2020-01-29 14:00:29

羽ばたくように動くラインと流れるパーティクル

今回ご紹介するのは、ベルギーやオランダにオフィスを構えるエージェンシー、Nightingale のウェブサイトです。

彼らのロゴマークは鳥の羽のような形をしているのですが、それにならった 3D 表現を背景に配しつつ、様々な WebGL を利用した演出が盛り込まれています。

結構たくさんのパターンの演出が組み込まれていて、なかなか手の込んだ実装となっています。

今回のサイトでは、背景は基本的に黒になっている場面が多く、そのままその暗い空間が WebGL で立体的に表現されています。

トップページを中心に、まるで鳥が羽ばたいているかのような感じで動き続けるオブジェクトが登場します。

言葉で説明するのがちょっと難しいのですが……

ラインで描かれたシルエットが羽ばたくように動くことと、滝のように流れ落ちるパーティクルが組み合わさった演出になっていて、なんとも言えない独特な風合いになっています。

この背景の部分に浮かんでいる鳥のようなシルエット……

わかりますかね？

ちょっと静止画ではわかりにくいかもしれませんが、大きく羽ばたくアニメーションになっているので、実物はもっとダイナミックな迫力のある様子になっています。

また、この事例を紹介する部分では、マウスカーソルのホバーによってアニメーションが発生するようになっており、スクリーンショットの部分が波打つように動きます。

こういった細かい部分のアニメーションにもしっかり気を配って実装されていますね。

ちょっとわかりにくいかもしれないですが、画像が波打つように変形しているのがわかるでしょうか？

これらの演出以外にも、WebGL を活用した画作りがいろいろなところで登場します。

たとえば円筒の側面に画像を貼り付けたかのようなジオメトリが出てきたり、リンク文字にカーソルをホバーさせるとその部分にスクリーンショットが表示されたり……

いろいろな演出が細かく仕込まれていて、見ていて飽きのこない、楽しいサイトになっています。

動いている様子を見るだけなら数秒の話ですが、個々の実装を見てみると作るのは結構たいへんだったろうなと感じるものが多いですね。マウスイベントの処理とか大変そう……

サイト内には彼らのオフィスの様子を撮影した写真とかも置いてあるのですが、まあとにかくオシャレな空間になっていてすごいですね……

こんな場所で仕事をしてたら、まあそれはそれはいろいろな感性や発想が刺激を受けそうな気がします。

今回のサイトにも、そんな企業風土というか性格がしっかり反映されているように感じました。

ひとつひとつの演出はそれほど大それたものではないのですが、組み合わさって全体としてうまく調和しているのが素晴らしいと思います。