パーティクルを用いた表現と見事なフロントエンド実装が光るデジタルエージェンシー SALT AND PEPPER のウェブサイト
全体としての完成度の高さ
今回ご紹介するのはデジタルエージェンシー SALT AND PEPPER のウェブサイトです。
アワードでの受賞歴もかなりある組織みたいなので、もしかしたら、すでに名前を知っているという人もいらっしゃるかもしれません。
今回のサイトでは WebGL を使った演出が効果的に用いられていることはもちろんですが、全体として見たときの完成度の高さがしっかりと感じられる仕上がりになっています。
パーティクルによるシックな表現
今回のサイトの WebGL 実装は、トップページの冒頭を中心にサイト内の各所で演出に組み込まれています。
個人的には、イントロのシーンがかなり完成度が高いなと感じます。
ローディング画面から、ローディングが完了してトップページに遷移するまでのイントロは、一見の価値があります。
WebGL の実装としてはパーティクルを効果的に用いているタイプで、スクリーンショットではちょっと見えにくいと思いますが、黒い背景に無数のパーティクルが飛び回っています。
カーソルの動きに応じてインタラクティブに動く他、ゆっくりと全体が動き続けるような感じですね。
パーティクルには明るい色をしているものと暗い色をしているものがあり、それぞれに異なる制御によって動いている感じがあって見た目にもおもしろいです。
冒頭にも書いたのですが、今回のサイトの場合は WebGL を使っていることはもちろんなのですが、それ以外のウェブのフロントエンドの実装としてのレベルの高さが目立ちます。
非常に動きのあるウェブサイトになっていて、単にオブジェクトが上下左右に動くというだけに留まらず、さまざまな形で視覚的な変化をつけています。
色が変化したり、あるいは奥行きがあるかのように演出されていたり、すごく丁寧に実装されている感じがしてレベルが高いです。
CSS を用いて多彩な演出を作っていくのって、ある意味では、WebGL で同等の演出を作るのと比べてむしろ難しいことってあったりしますよね。
そういう意味では、今回のサイトの場合は WebGL 以外の部分にもかなり大胆な動きや演出が盛り込まれており、いろんな意味で驚かされるなと感じました。
ウェブサイトとしての完成度が高く、興味深い事例だと思います。
ぜひチェックしてみてください。
