シームレスかつ大胆に変化するレイアウトやコントラストがおもしろい BMSG FES のウェブサイト
モノクロのなかに表情を作る
今回ご紹介するのは BMSG FES のウェブサイトです。
東京はお台場で９月末に開催予定の BMSG FES のスペシャルサイトで、WebGL を用いたキービジュアルを中心にしたいい意味でコンセプチュアルな感じのするウェブサイトですね。
基本になっているのはモノクロのトーンですが、要所では色彩を用いた表現なども見ることができます。
リンク：
シームレスに変化するウェブ
今回のサイトでは、キービジュアルが表示されるトップ部分では特にスクロールなどの操作ではビューが切り替わりません。
画面の右上にあるメニューを開くと各種下層ページへのリンクなどが展開される感じで、キービジュアル部分を単体で見せるところになにか意図が感じられます。
キービジュアルを見せている段階ではシーンは完全なほぼ完全なモノクロの状態ですが、カーソルを動かすことで背景部分のぼんやりとした明るい部分が動き、そこに隠されたメッセージが浮かび上がります。
静止画で見てもわからないと思うのですが、画面の中央に浮かんでいるロゴの部分は立体的な構造を持っていて、プログラム的にはおそらく光源（ライト）を動かしているんですかね？
微妙な陰影の変化があることで、より立体感が際立っている感じがします。
このロゴが浮かんでいる 3D 空間は下層ページへ移動した際には背景として機能するようになっています。
今回のサイトを見ていて個人的にすごいなと思ったのが、各ページを移動する際のシームレスな場面転換です。
DOM が優しく動き、あるいは浮かび上がったり消えたりしながら、ゆるっとページが切り替わります。
すごく野暮なことだな～とは自覚しつつもスクリーンショットを撮ったのが以下のキャプチャなのですが、3D シーンにも一瞬エフェクトが発生するようになっていたりして、場面転換の際にも目が離せないウェブサイトとなっています。
下層ページにもいろいろな仕込みがあり、また随所に見られるモーションやイージングの味付けもなかなか統一感と奇抜さの両方があっておもしろいです。
WebGL でモノクロのシーンを作る場合、いわゆる明暗という意味でのコントラストやグラデーションでなにかを表現することになるわけですが、そのあたりもすごく工夫されているなと感じました。
ぜひチェックしてみてください。
