WebGL が織りなす歴史の螺旋！ 2020 年に開業を予定しているビルボードライブ横浜のティザーサイト！
ライブを見ながら食事を楽しめる施設
今回ご紹介するのは、Billboard Japan が運営しているライブ会場とレストランが融合した施設、Billboard Live 横浜のティザーサイトです。
Billboard Live は東京などにもお店があるのですが、2020 年に横浜に新規開業するということで、その専用サイトがお披露目になった形かなと思います。
ウェブサイト上では、横浜とビルボードジャパンのそれぞれの歴史が螺旋のように組み合わされて表現されています。
リンク：
世界標準のクラブ＆レストランBillboard Live(ビルボードライブ)横浜のオフィシャルサイト
星空のように壮大なスケールで紡ぐ歴史の旅
今回のサイトは、株式会社スタジオディテイルズ（STUDIO DETAILS INC.）さんが制作されたもの。
そのスタジオディテイルズさんからのサイト公開時のメッセージを引用します。
創刊100年以上を超える歴史を保有するBillboard、市制100年以上の歴史を保有する横浜。
2つの歴史を辿る2つの螺旋をモチーフに、重厚感のあるグラフィカルなサイトを目指しました。
ビルボードジャパンの歴史と、横浜の歴史、それぞれの 100 年を振り返るなかなか壮大なテーマですね……
サイト内には、ふたつの歴史が織りなす世界を表現する意味で、螺旋のような動きや演出がたくさん盛り込まれています。
キャプチャ画像ではちょっと見えにくいのですが、ロゴマークが風になびくように動いたり、画面の背景に螺旋のようなラインが描き出されたりする、トップページ部分。
サイトの構造はここから縦方向にスクロールしていくことで、次々とシーンが切り替わっていくような作りです。
各シーンには、ビルボードや横浜の歴史をイメージさせる画像や説明文が用意されていて、西暦で年代も同時に表示されるようになっています。
「READ MORE」と書かれた文字の部分をクリックすると、ポスターや写真が広がるようにアニメーションするのですが、滑らかな動きがなんとも心地よいです。
また、今回のサイトは一番下の方まで行くと「2020 OPEN IN SPRING」と書かれたロゴが表示されるところにたどり着くのですが……
このシーンで、画面の右上にある「HALL RENTAL & MEMBER SHIP」のリンクをクリックしたときに、独特のトランジション演出が見られるようになっていますね……
私はたまたまいろいろな部分を注視しながらポチポチとクリックしていたので気がついたのですが、もしかしたらユーザーによっては閲覧しないかもしれない部分にまで、こんな演出が仕込んであるというのがなんとも驚きです……
マウスカーソルを動かした際の、柔らかなインタラクション。あるいはスクロールに連動して動く各種パーツの滑らかなアニメーションなど……
今回のサイトでは、肌触り……と言ってはちょっと語弊があるかもしれませんが、すごく柔らかな印象の演出がたくさん使われているのがよいですね。
本当に細かい部分にまでこだわりがたくさん詰まっており、演出のひとつひとつに意図が感じられる、そんなサイトに仕上がっていると思います。
ぜひチェックしてみてください。
