単なるバウンス演出ではないちょっとした工夫がおもしろい！ オツモ株式会社のコーポレートサイト
シンプルだけど、ちょっとオシャレ
今回ご紹介するのは、オツモ株式会社のコーポレートサイトです。
アパレル製品や雑貨を扱うブランドショップ、あとは飲食店なんかも運営されている会社さんみたいですが、今回のサイトからもすごく個性というか、この組織が持っている独特な雰囲気が伝わってきます。
WebGL の演出は派手な感じではないのですが、少しだけ普通と違う演出が盛り込まれていて、やっぱりおしゃれな雰囲気に仕上がっていると思います。
リンク：
インタラクティブで大胆な動きでポップなテイストに
今回のサイトでは、WebGL を使っている部分はトップページの冒頭部分のみ、だと思います。たぶん……
でも、この冒頭部分の WebGL 演出が、実にポップで可愛らしく、また印象的にサイトの雰囲気を彩っています。
いくつかのスクリーンショットが組み合わせられたような感じで、一定のペースで写真が切り替わるアニメーション演出が発生します。
静止画で見ると、単にタイル状に画像が並べられただけのものみたいに見えると思うのですが、実際には、これらの画像が登場する際にはバウンドするようなアニメーションが発生します。
それまで表示されていた画像が消えると同時に、画面の奥から新しい画像たちが飛び出してくるような感じの動きで、スピード感のある気持ちの良いイージングが掛けられています。
そして、このバウンドするようなアニメーションの際に、よーく観察しているとわかると思うのですが画像が微妙に歪んでいるのですよね。
単に湾曲している、というだけでなく「画像のなかで深度マップによる局所的な歪み」が発生するようになっていて、ほんの少しの僅かな違和感が見て取れるんじゃないかなと思います。
この僅かな違和感、というのが結構演出上大きなウェイトを占めていると個人的には感じます。
単に拡大縮小するだけの演出と、今回のケースのような「湾曲＋深度マップ的な演出」では、感じ方がかなり違うと思います。
同時に起こるマウスカーソルの位置に対するインタラクションもあって、結構動きが（距離的な意味で）大きいんですよね。カーソルとかも変わった感じで、面白いです。
この大きな動きもやっぱりどこかポップな雰囲気につながっているような気がして、シンプルながら完成度の高いウェブサイトだなと個人的には感じました。
私個人は、あまりおしゃれな雑貨とかはどうしても縁遠いと言いますか……
あまりそういう文化についてうまく言葉で説明することができないのですが、今回のサイトからはとても自然にそういう楽しげな雰囲気がじんわりと伝わってきて、本当にすごいと思います。
WebGL の作り手の目線としては、深度マップを使っているかのような歪みを発生させようとすると、リソースを準備するのが結構大変だったりもするんですよね。
そのあたりにも注目しつつ、ゆったり眺めてみるのがおすすめです。
ぜひチェックしてみてください。
