美しくたゆたうグラデーションが優しく温かい雰囲気を演出する Renxa 株式会社リクルートサイト

doxas : 2023-10-24 12:31:10

美しく混ざり合い溶け合う色彩

今回ご紹介するのは、Renxa 株式会社のリクルートサイトです。

リクルートサイトという性質上、もしかしたら一時的にしか見ることができないサイトなのかもしれませんが、丁寧に実装された完成度の高いウェブサイトとなっています。

WebGL の実装は 2D 的な表現が中心です。一部、3D 的な演出を盛り込んでいる部分もありすごく凝った演出が実装されています。

今回のサイトは WebGL 実装であるという以前に、単純にウェブサイトとして非常に高い完成度が高いなと感じる部分が多くあります。

たとえば、最初のローディング表示の部分もすごく凝った作りになっていて、これはあえてスクリーンショットは載せませんが、最初からこのウェブサイトがなにかワクワクするものであることを期待させてくれます。

サイトに入った最初の瞬間、イントロの演出から WebGL が印象的に使われています。

グラデーションが一気に広がるアニメーションは迫力がありますね。

いわゆるノイズを活用したグラデーションが、背景一面に描かれます。

何色、と具体的に示すのが難しいですが、複雑に色が混ざり合う様子はなんとも見事で、絶えずゆっくりとアニメーションしています。

結構淡い色のグラデーションなのですが、白い文字が重なってもその文字が読みにくいということもなく、このあたりのトーンはすごく慎重に調整されているような感じがしました。

グラデーションの手前に画像が重なるような場面もあり、すごく個性的な仕上がりです。

今回のサイトを見ていて感じたのですが、トップページの上から下までスクロールしていく体験そのものが、一種のストーリー仕立てになっているような感じなんですよね。

リクルートサイトという性質上、こういうストーリー性のあるような構成は見る人の心に強く働きかけるように思いますし、いろいろな見せ方、いろいろな動きを駆使して、企業の魅力を存分に表現していると思いました。

この暖色と寒色が混ざりあったような色にどんな意味があるのか不思議だったのですが、サイトをじっくり見ていくとその答えらしきものが明示される演出もあり、すごくよくできているなと感じました。

途中には 3D オブジェクトが出てくる場面も。

WebGL を使うとき、3D 的な演出と 2D 的な演出を同時に盛り込むのって、単純に実装の手間という視点から考えると結構考えないといけないことが多くなりがちだと個人的には感じます。

今回のサイトはシェーダを使った平面的な表現だけでなく、立体的な表現も手を抜くこと無くしっかりと演出されていて、実装したひと大変だったろうなと思いました。