まるでガラスや鏡が組み合わさって作られているかのようなエフェクトが面白い Leviev Group のウェブサイト

doxas : 2018-04-12 14:08:03

美しい素材をより美しく見せる

今回ご紹介するのは、Leviev Group のウェブサイトです。

この企業はインテリアデザインなどを行っている組織のようですが、彼らの持つ美意識みたいなものがウェブサイトからも感じられる、どこか洗練されたイメージのサイトとなっています。

使われている写真がどれも美しいものばかりということもあって、WebGL の演出を抜きにしても、存分にその世界を堪能できるようなサイトになっていますね。そこに WebGL の演出が加わることで、一つ上の表現を得ているようにも感じられます。

若干リソースが多いのでそれだけ注意

最初に書いておくと、環境のせいもあるかもしれないのですが、今回のサイトは高品質な画像などのリソースが結構たくさん使われているので、どうしても読み込みに時間が掛かる場合が多いようです。

リソースの取得がうまくいかないと、ページの遷移などにも影響が出る場合があるようで、そこがちょっと実装面では残念な感じもします。

ただロードが終わってしまえば、非常にキレイに動いてはいますので、ここでは WebGL が使われている演出面を中心に見ていこうと思います。

まず最初のトップページ部分です。こちらは一見すると真っ白な背景のシンプルなデザインのようにも見えるのですが、カーソルを動かしてやると、まるで背景が透けて見えているかのように、ワイヤーフレームで作られた 3D シーンが見えるようになっています。

とは言え、このワイヤーフレームで描かれているシーンそのものは WebGL のリアルタイムレンダリングではなく画像を元にしたものだと思います。それでも、雰囲気はすごくいいですね。

これ、上の画像を見てわかりますかね?

赤いサークルのようなものがカーソルに追従するように動くのですが、この赤いサークル部分だけ白い模様が透けたようになり、後ろにある背景画像が見えるようになっています。

またこのトップページでクリック&ホールドの操作を行うと、まるで霧が晴れるかのように一気に背景が見えるようになるのですが、こういったフェードインエフェクトが今回のサイトではいたるところで使われています。

以下の画像は、黒い背景からカラフルな画像のシーンへの遷移の様子ですが、ここも同様のフェードインエフェクトですね。

その他に、このサイトでもうひとつ特徴的な演出になっているのが、まるでガラスや鏡を組み合わせたかのようなインタラクティブ演出です。

カーソルで画像の上をなぞるように滑らせてやると、そこだけ微妙にテクスチャの UV がずれるような演出が行われます。

ほとんど全ての画像に対してこの演出が使われていると言っても過言ではなく、かなり存在感の強い演出として使われています。

特に、いくつかのシーンをカーソルの位置によって大胆に切り替える場面(以下の画像でいうと下段のほう)はかなり迫力があって、これはなかなか見ごたえがあります。

画像が全部完全にロードされていないと正しく動作しないのがちょっとだけ悲しい……

海外のサイトだと、どうしてもローディングに時間がかかってしまうケースというのが避けられない場合もあるのですが、今回のサイトは、純粋に使っているリソースがとてもリッチなこともあり、それで時間を要する場合が多いようです。

比較的高級な路線のブランドサイトなどに多いのですが、リソースがリッチなだけに、ロードに時間が掛かってユーザー体験を損なっているのはちょっともったいないなと思いました。

とは言え、WebGL を使った UV ずらしの演出は、それ単体ではそれほど珍しいものではないのですけれども、これだけ徹底して使われていると結構インパクトが強いですね。

カーソルの動きに合わせて、シーン遷移にうまく盛り込んでいくと、こんなふうに見えるのだなあというのは、個人的には一種の新しい発見でした。

何事も、見せ方ひとつで良くも悪くもなるのですね。とても勉強になりました。

非常にリッチな印象の、とても美しいサイトです。

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

リンク:

Leviev Group

share

follow us in feedly

search

search

sponsor

social