まるで粉末のように飛び散るパーティクルが面白いデジタルプロダクション Salt & Pepper のウェブサイト
シンプルで飽きのこないデザイン
今回ご紹介するのはドイツのデジタルプロダクション、Salt & Pepper のコーポレートサイトです。
WebGL のデモはイントロ部分のひとつだけですが、いかにもシンプルで、ほんの少しだけ刺激を感じさせるデザインとインタラクションが、なんとも言えず組織の名前である Salt & Pepper という響きにマッチしているように感じます。
WebGL の使い方っていろいろなものが考えられますが、こういうのもひとつの正解だなと思わず納得してしまうような、そんな説得力を感じるサイトになっています。
クリック＆ホールドで弾けるパーティクル
今回のサイトは、先にも書いたとおりで WebGL の実装としてはかなりシンプルなものになっています。
ページのロードが完了した直後に表示される WebGL のデモは、マウスカーソルの位置に応じて若干オブジェクトが動くような、割とよく見かけるような動作になっています。
一見して、余白を大きく取ったシンプルな構成なのに、妙にまとまった感じがするから不思議です。
画面の中心に浮かんでいるパーティクルは、そのままの状態だと、一定の時間ごとに少しずつ形を変えながらアニメーションするようになっています。
面の貼られていない、パーティクル（粒子）の集合体のような形ですが、実はここからもう一段階、別の形状変化が起こる仕組みが実装されています。
画面内の様々な部分にカーソルを動かしてみるとわかるかと思うのですが、このパーティクルのシルエットに重なる部分でのみ、カーソルの形状がリンク文字にホバーさせたときのように手のアイコンに変わるようになっています。
このリンク文字のホバーのような状態になっているときにマウスボタンを押したままホールドすると、ほんの少しの間を置いて、パーティクルがブルブルと振動し始めます。
そのままホールドし続けると……
と、ご覧のようにパーティクルが一気に弾けて画面全体を覆うような感じになるんですね。
どういう意図を持ってこのような演出がなされているのかはわからないのですが、日本語に直訳すれば「塩コショウ」となる企業の名前と、今回のサイトのようなシンプルなデザイン、シンプルな WebGL 実装は、すごくいい意味で親和性が感じられるような気がしました。
冒頭にも書いたことなんですが、最近本当によく感じるのは、WebGL の使われ方がどんどんシンプルな方向性に寄ってきているなということ。
一部の 3D 数学や 3D の実装に慣れた開発者が、野心的に WebGL を使ってなにかを表現するというフェーズは、既に過去のものになったと感じます。もちろんそういう意味ですごいサイトもいまだにありますけども……
今回のサイトのような、気軽で、シンプルで、しかしどこか静的なウェブサイトにはないちょっと目を引く演出のひとつとして、WebGL がどんどん活用されるようになっていくのは素晴らしいことだと思います。
WebGL 以外の部分も、本当に丁寧に作られていてレベルの非常に高いサイトになっていると思います。
ぜひチェックしてみてください。
