賑やかな和楽器の演奏に合わせて背景がダイナミックに変化! 隅田川道中のウェブサイト

doxas : 2022-09-28 12:57:27

クラウドファンディング実施中

今回ご紹介するのは、花火大会などでも有名な隅田川とその周辺で行われるイベント、隅田川道中のウェブサイトです。

こちらのイベント、渡し船を使った体験型の企画のほか、フリーマーケットのような地域密着型の企画も一緒にバンドルされた結構大規模なイベントになっています。

現時点でもすでに、クラウドファンディングでイベントを応援したり、渡し船を使った企画のチケットを購入したりすることができます。

リンク:

隅田川道中

WebGL とサウンドの一体感

今回のサイトでは、背景部分に WebGL の実装が用いられています。

青い背景の上に細かい凹凸模様のフィルタが掛かったような状態で、画面の中で波紋が広がるようなエフェクトを見ることができます。

画面内に描画される再生アイコンをクリックするとサイトに入場できるような感じのインターフェースになっていて、再生アイコンのクリックと同時に音声(お祭りのお囃子のような和楽器の演奏)が流れます。

再生を開始すると、音声が流れると同時に画面の下から隅田川道中のロゴと言いますか、キービジュアルの白い文字がせり上がってきます。

この文字がせり上がってくるアニメーションは、ここから先、画面をスクロールしていっても背景にずっと描画される形になるのですが、個人的にはここでは先を急がず、しばらくイントロシーンを眺め続けるのをおすすめします。

というのは、今回のサイトは BGM として流れる音声と WebGL のビジュアルが演出的にリンクするようになっていて、お囃子の調子が一段上がるタイミングでそれ専用のエフェクトがグラフィックス側でも発生するからです。

音楽の盛り上がりがそのまま視覚情報にも反映される感じがなんとも気持ちが良いです。

時折画面がスライスされたように崩れたり、あるいは青と白が反転するように見た目が変化したり、単純なようで結構いろんな仕込みがされていますね。

画面を少しスクロールするとそれに連動して音声の音量が小さくなり、よりコンテンツに集中しやすいようになったりするのも、UX をよく考えてデザインされているなと感じました。

実際にこのイベントが開催されるタイミングは10月末なので、まだまだ申し込みやクラウドファンディングによる支援などは間に合います。

実はわたしは隅田川沿いに住んでいるので、なんかすごく身近な話題として普通に興味がわきました。これから開催が近づくにつれ詳細がどんどん公開されていくようなので、気になる方はまたあらためて後日チェックするのもいいかもしれません。

WebGL の実装としてはそこまで奇抜な内容はないのですが、ジオメトリがダイナミックに変形したり、BGM の起伏に合わせてビジュアルが変化したりする様子はなんとも気持ち良いです。

ぜひチェックしてみてください。

リンク:

隅田川道中

share

follow us in feedly

search

search

monthly

sponsor

social