相変わらずのクオリティでハイエンドなユースケースを示してくれる Lusion のスピーカー製品をテーマにした技術デモ

doxas : 2022-05-16 12:45:58

存在感すごいですがあくまでも技術デモです

今回ご紹介するのは、WebGL を利用したハイエンドな事例を多く手掛ける Lusion の技術デモです。

Lusion はこれまでにも定期的にいくつかの技術デモを世に送り出していて、その一連の作品のなかの１つという位置づけです。

今回の技術デモでは、ポータブルスピーカーの架空の製品をテーマにしたスペシャルサイト風の実装になっていて、主に製品の表面の質感や音質の表現などに様々な工夫が見られます。

繰り返しになりますが、今回のサイトはあくまでも技術デモなので、今回のサイト上で描画されるスピーカーの実製品はこの世に存在しません。

しかし、実際こんな製品が売られていたら欲しくなっちゃうよな～と思わず感じるような、そんな魅力的なウェブサイトに仕上がっていますね。

WebGL を使って表現される光と影、そしてスピーカーの質感が本当に見事です。

全体が暗い雰囲気なので、静止画で見てしまうとちょっと情報量が少なく感じてしまうかもしれません。

実際にフル解像度でリアルタイムに動く様子を見てもらうと、微細な光量の変化やメタリックなボディの質感など、かなり本物志向に仕上げられているのがわかるんじゃないかなと思います。

静止画で見るとただの黒っぽい画像になってしまうのですが、こういうところが WebGL でインタラクティブに動くウェブサイトのまさに強みの部分なんでしょうね。

静止画や写真で伝えるのとはまた違った表現の幅というか、奥行きがあるんだと思います。

この上に掲載した２枚の画像を見ると、スピーカーが音を発している様子を異なるテイストで描いていることがわかりやすいのではないかなと思います。

実際にこういうスピーカーがあるわけではないのであくまでも見せ方のバリエーションをデモしている形だと思うのですが、アイデアがすごいですよね。波紋のような模様になったり、離散的な塊ができたような模様になったり、シームレスに状態が変化するのも面白い部分だと思います。

その他にも、ボディの表面の質感を変化させて、インタラクティブにその違いを可視化するようなセクションもあります。

Lusion の技術デモは、それを制作したスタッフの野心的な興味が元になっている部分はもちろんあると思うのですけれども、こうやって１つの形になったものを見ると、クライアントも想像を膨らませたり、より具体的な要望を持って案件の依頼をしやすいだろうなということを想像してしまいますよね。

直接売上が立つわけではない技術デモに対して、それなりの時間を割いて１つの形に仕上げていくのってなかなか難しいことだと思うのですが、こういうことの積み重ねがより優れたコンテンツを生み出す大きな要因の１つにもなっているのだろうなと考えさせられます。