まるで有機物のようにぬるりと動く壁紙の表現が面白い Wonderwall Studio のウェブサイト
手法としては定番だが……
今回ご紹介するのは、壁紙をメインの商材として扱っている Wonderwall Studio というスタジオのウェブサイトです。
どうやらポーランドにある企業みたいなのですが、英語版のページも用意されていて、今回はそちらの英語版のページをキャプチャしたスクリーンショットを使っています。
壁紙という製品をいかに魅力的に見せるか、ということをかなりじっくり検討したんだろうなという感じがします。
リンク：
Wonderwall Studio – Beautifull Wallpapers
結構大きなディストーション
今回のサイトでは、いわゆる擬似的な立体表現が行われています。
WebGL の表現方法のひとつとして結構前から比較的いろいろなサイトで使われている、深度マップを用いた擬似立体表現が用いられています。
手法としては結構枯れているというか、そこまで珍しい技術ではないのですがディストーションの掛かり方がかなり強めなので、ダイナミックな視覚効果が表れています。
この手のエフェクトは、静止画だとまったくその魅力を伝えられないのが紹介するときに難しいところですね……
こういった擬似立体表現はそのディストーションする量の調整が結構難しくて、もちろん使う深度マップによっても、どの程度のディストーションを掛けるのがちょうどいいかはバランスの取り方が変わってきます。
今回のサイトの場合は先にも書いたようにディストーションがかなり大きく掛かるので、マウスカーソルをちょっとでも動かすといい意味で大きな驚きがあります。
壁紙を商材として扱っている場面で、どうやってその魅力をウェブサイト上で表現すればよいのか…… これちょっと想像してみると結構難しい問題だなと感じます。
接写した解像度の高い写真を使ってその質感をサイト上でも感じられるようにする、みたいなのが定石かもしれませんが、今回のサイトはそういうアプローチよりもビジュアルの面白さやミステリアスな雰囲気を重視した感じなのかなと想像します。
モデルさんの存在感もかなり強いですし、こういうプロモーションは日本では採用されない感じもします。
海外ならではのおもしろい見せ方だなと思いました。
こういう擬似立体表現は WebGL の用途としてはそれほど珍しくないので、技術的に特異な部分があるということはありません。
ただ、ディストーションを掛ける量や、どのような深度マップを使って動かして見せるかなど、変数となる部分って結構いろいろあるんですよね。
今回のサイトはかなり大きな変化が表れるため、観ていて単純に面白いです。やや大味な感じもしますが、そもそもこういった壁紙をバーンとインテリアに設定するような趣味趣向の人たちには、むしろこういう見せ方が響くんじゃないかなとも思います。
ぜひチェックしてみてください。
