パーティクルがウェブサイトの状況に応じて変幻自在に姿を変える Quantum のウェブサイト

doxas : 2023-10-30 12:40:55

ナレーション付きの豪華なつくり

今回ご紹介するのは Quantum というプロジェクトのウェブサイトです。

なんとなく、サイト内に書かれていることを見るに梱包用の素材、またはその材料が Quantum と呼ばれているみたいですね。

サイト上ではパーティクルを用いた演出が多数用意されており、さまざまな形状や質感を、パーティクルだけでうまく表現しています。

今回のサイトは、まずロードが完了した直後にイントロページがあり、そのイントロページ上にある Enter ボタンを押すことで本編が始まります。

わざわざイントロページが用意されているのは、おそらく効果音や BGM を活用した演出をしたいためなのでしょう。

効果音の使い方も上手ですが、途中でナレーションなども入りますし、音声がサイト上の表現において重要な意味を持っています。

3D シーンの上で重要な位置づけになっているのはパーティクルです。

小さな、まさに粒子のようなパーティクルが寄せ集まり、なんらかの形を作って状況に応じた視覚的な演出を担います。

小さな群れになっているパーティクルの他にも、少し大きめのサイズで発光しながら漂っているパーティクルもあり、こちらはちょっとしたグレア効果のようなものが付与されています。

グレアの光芒の形が四角っぽい感じなのがちょっと変わっていますね。

おそらくですが、今回のサイトで文脈の中心にあるのが梱包素材のようなものだと思うのですが、それを抽象的に表現したような演出がいくつも用意されています。

パーティクルがときに平面のようになったり、あるいはスフィアなどの周辺を囲うように配置されたり、梱包資材のウェブサイトだなと思って演出を眺めてみると納得感があると思います。

全体的に霞が掛かったようなポストエフェクトが適用されているので、ちょっと幻想的な感じにも見えますね。

効果音を鳴らしたいときに、まず Enter ボタンの置かれたイントロページを用意するというのは割りと常套手段だと思うのですが、今回のサイトは効果音やナレーションの質が高く、こういう手法を取ったことが正解だと感じます。

単なる賑やかしではなく、きちんと意味のある音声演出であるという点は、個人的にはすごく好感が持てます。

WebGL も、別に動画で良かったんじゃないかとか、重くて体験を阻害しているだけだとかって言われやすいタイプの技術だと思うのですが、ウェブにおける音声もどちらかというとそちらに分類されやすいと思います。その点、今回のサイトは絵作りにも音声の使い方にもしっかりとしたこだわりが感じられますね。