大量の画像とインタラクティブな演出が滑らかにつながった Springs のウェブサイト
疑似立体表現と流体エフェクト
今回ご紹介するのは、Springs という都市計画や建築関係の事業を想像させるウェブサイトなのですが、たぶん現実のプロジェクトではなくデモサイトとして作られたものみたいです。
というのは、すごく情報量は多いのですが具体的な住所であるとか物件の価格であるとかそういうものは掲載されておらず、制作した企業のウェブサイトを見ても作例として実装されたものみたいでした。
WebGL は平面的なエフェクトのみですが、擬似的に立体っぽく見せるようなシーンもあったりしますね。
リンク：
すごく…… 気持ち悪いです……
いきなりこんなことを書くのは正直どうなんだとも思いますが、今回のサイトは見ていて心地よいかと言われると、あくまでも自分個人としてはそういう感覚にはなりませんでした。
なんと表現したらいいのか適切な言葉がうまく浮かばないのですが、これたぶん Windows 環境下で見ているからなのかな？ スクロールがすごく嫌な感じなんですよね。
一定の位置に自動的に収束するようなスクロールで、ちょっとスクロールしすぎたり、あるいはスクロールがちょっと足りなかったりすると、既定の位置にヌルっと戻るようなトランジションが起こります。
これがどうしても個人的には気持ち悪く感じてしまいました。
トップページからどんどんスクロールしていくことで物語が展開していくような構造なのですが、途中のセクションでは WebGL を用いている場所がチラホラあります。
この上のスクリーンショットなんかは、静止画で見ても全然伝わらないと思うのですが、擬似的な立体表現が盛り込まれていて人物の部分と背景の部分がカーソルに対して異なる反応を返してきます。
初めて見たときは、カーソルを動かすとちょっと驚くのではないでしょうか。
またカーソルの位置に波紋のような、ちょっとした流体エフェクトのような演出が入っています。
この演出の味付けは、やりたいことが明確に出ている感じがしてすごく優しい味付けのエフェクトになっていますね。
流れる水、というよりはゆったり流れる池や水たまりのような流体表現という感じですごく雰囲気にあった演出という感じがします。
今回のサイトって、大量の画像を使っているにもかかわらず全体的にすごくモーションやトランジションが滑らかでスムーズです。
スルスルと流れるように反応が返ってくるのでそこはすごく気持ちがいいんですよね。なのにスクロールに変な反発があってそれがどうしても気持ち悪く感じてしまうような気がします。いや、あくまでも個人の意見ですけれども。
こういうのってデザイナーさんとかモーションを扱っているひとはどう感じるんだろう。すごく興味があります。わたしが単に、感覚がズレてるだけの可能性も十分ありそうですね。
ぜひチェックしてみてください。
