掴んで、伸ばして、引っ張って! 空間をまるごと引っ張ったような独特な演出が面白い Cher Ami のウェブサイト
UV 操作を駆使したおもしろエフェクト
今回ご紹介するのは、Cher Ami という制作会社のウェブサイトです。
ウェブのフロントエンドだけでなく、VR などのデジタルコンテンツなども手掛ける組織みたいなのですが、ウェブサイトも非常に凝った作りになっていて面白いですね。
ドラッグ操作を行うことで、まるで空間そのものが引っ張られているかのような、独特なエフェクトを見ることができます。
リンク:
Cher Ami - We craft touching stories
発想ひとつでとても楽しい演出になる好例
今回のサイトでは、テクスチャ座標(UV)を操作することで実現できるエフェクトが使われており、その技術自体は、別になにか新しい技術というわけではないですね。
ただ今回のサイトの場合、そこにユーザーの操作に直感的に結びつくような独特のインタラクションが組み合わさっていて、現実世界の質感にちょっと似たような、不思議な感覚を見る人に与えるエフェクトを実現しています。
ロードが完了したら、画面の上下、あるいは別に左右でもいいのですが、画面内のどこかでマウスをクリックしたままホールドし、ドラッグ操作を行ってみましょう。
さて、これわかりますかね?
トップページの、ロードが完了した直後は、このサイトは背景が真っ白の状態になります。
そこから、下から上に向かってドラッグ操作を行っている最中の画像が、この上のキャプチャ画像です。
下の方から、青いインクが滲み出したような見た目になっていると思うのですが、これが今回のサイトのページ遷移時に発生する共通のエフェクトです。
次のシーンの色が滲み出してくるような感じですね。
この上の2枚の画像を見るとわかりやすいと思うのですが、各ページ間を移動する際は、RGB をずらすようなエフェクトと、UV が伸びたようになるエフェクト、さらに微妙にノイズで波打つようなエフェクトが複雑に合わさったようなビジュアルになります。
これが、上から下、あるいは下から上の方向へのドラッグ操作に絶妙に組み合わされて発生するようになっているので、まるで空間を自分が引っ張って歪めているかのような感触です。
すごく独特で、インパクトの強い演出になっていると思います。
GLSL で RGB をずらしたり、あるいは UV を伸ばしてみたりというのは、比較的よく見かけるというか……
最近は WebGL を使っていたとしても、そういう手軽なエフェクト一辺倒なサイトが多い気がします。
そんな中で今回のサイトのエフェクトを見てみると、複数の効果を組み合わせて複雑で味わい深い演出に見事に仕上げていると感じます。
うまく言語化できないのですが、単に複数の演出を足しているだけではなく、掛け算の要領でエフェクト同士の長所を加速させ新たな表現を生み出している、そんな見事な演出だと思いました。
ぜひチェックしてみてください。