音と映像の相乗効果が揺るぎない独自の世界観を描き出す Fit Song のウェブサイト

doxas : 2024-06-14 12:43:55

心を落ち着けてじっくり味わう

今回ご紹介するのは、Scrollable Lyric Video と題された、ウェブブラウザ上で体験できる Fit Song のウェブサイトです。

なんか久しぶりに…… 本当に驚いたウェブサイトで、簡単に言うとミュージックビデオなのですが、その実態はものすごいこだわりの詰まった WebGL 実装となっています。

スクロールとの連動など、ウェブだからこそできる表現も盛り込まれた素晴らしい事例となっています。

今回のサイトでは、３つのユニットがコラボレーションして作られた楽曲を視聴することができます。

視聴、とあえて書きましたが、文字通りただ曲を聴くだけではなく目でも楽しめる内容となっていて、しかもそれが単なる動画ではなくリアルタイムにレンダリングされる WebGL の実装として楽しめます。

ウェブサイトの冒頭に、窓枠越しに見える風景の写真（画像）とともにボタンが配置されており、クリックすることで WebGL 製のインタラクティブな Lyric Video を見ることができます。

再生が開始される直前、まず最初にカーテンを開くような演出があってそこから外の風景を眺めているような導入シーンが描かれます。

夜の街を眺める視点にうまく誘導するような導入シーンで、もう最初から雰囲気満点です。

Lyric Video という謳い文句のとおり、今回のコンテンツではシーンのなかに歌詞が同時に表示されます。しかし、ただ字幕として画面の下に文字が出るのではなく、なんと 3D シーンのなかにダイレクトに文字が配置されるという面白い仕組みになっています。

雨のアスファルトに映り込む歌詞がこれまたなんとも言えない雰囲気を演出しています。

また今回のサイトの大きな特徴として、スクロール操作が可能である、ということが言えると思います。

これはなんというか…… 言葉ではどうしても野暮ったい説明しかできないのですが、まるでテープが強制的に早回しになったり巻き戻ったりするかのように、スクロールを行うことで時間軸を前後に移動できるようになっています。

巻き戻しや早送りの操作を行うと、画面にはノイズが発生するなどのエフェクトが発生すると同時に音声にも変化が起こるようになっていて、これがまたおもしろい質感と体験を生んでいます。

ウェブならではの、プリレンダリングされたものでは表現できない世界が見事に体現されています。

今回のサイトは株式会社切札の、@_arikata さんが実装を担当されているということなのですが、X にポストしてくださっている内容を拝見すると、負荷を抑えるために AudioWorkletProcessor を利用するなど、ユーザー体験の向上のために様々な工夫が凝らされています。

単純に、ビジュアルとしての心地よさ、音楽との一体感など、感覚的な部分の良さを感じられることはもちろんですが、スクロールとの連動や WebGL 実装による水滴の表現など、技術面でも注目すべきポイントが無数に存在する素晴らしい事例だと思います。