ぐいぐい「動く」楽しいインタラクションがすごい！ クリスマスにちなんだ Resn からの贈り物
インタラクティブの優れた技巧が満載
今回ご紹介するのはクリスマスにちなんだウェブサイトで、制作したのはフロントエンドに身を置いていれば確実にその作品を目にしたことがあるであろう、Resn というクリエイティブ・エージェンシーです。
基本的に、画面にはほとんどの場合 Canvas だけが見える状態になっていて、テキストとしてのコンテンツはほとんど置かれていません。
マウスを使ってグイグイと操作することができるのですが、その多くがホイール操作よりも、ボタンをホールドした状態でのドラッグ操作になっているのが特徴的です。
とにかくグイグイと動きまくる、すごく楽しいサイトになっています。
とにかく刺激的でインパクトのある動きに注目
今回のサイトは、個人的には本当にその「動き」にすごい驚かされました。
スクロールに連動して画面の端から要素が滑るように画面に入ってくる実装とか、今年かなり流行しましたよね。アニメーションのテクニックがウェブサイトを構成する大切な要素になり、動きに対する様々なアプローチが見られた年だったようにも感じます。
そんななかでも、今回のサイトの動きはある種の異常さを感じさせるほど大胆な感じで、それらの多くが、ホイールスクロールではなくドラッグ操作に割り当てられていることが面白いです。
たとえば、ロード完了後のタイトル画面も、普通にスクロール操作で次に繋がるのかと思いきや、画面全体を下にグイッとドラッグするような操作をしてやることで、次のシーンへ進むことができます。
よーく見ると、タイトルロゴの部分が微妙にたわんだようになっているのがわかるでしょうか。
このロゴひとつ取ってもそうなのですが、慣性を考慮した揺れるような動きがロゴに対して掛けられていて、本当に細かい様々な工夫がひとつひとつのアクションに対して割り当てられている感じです。
木々をかき分けてシーンが進んでいくと、山小屋のようなものが見えてきます。
ここでは、画面をクリックしたままホールドしてやることで一気に山小屋に近づいていくような演出を見ることができます。
この部分のアニメーションをよーく観察していればわかると思うのですが、シーン自体はイラストのように見えますがしっかりと 3D のオブジェクトとしてレンダリングされたものですね。
そして、この操作を行ったことで山小屋が 3D モデルとしてレンダリングされていることがわかった上で、さらに画面の左右の端へとカーソルを持っていってみましょう。
すると、画面全体が歪んだようになり、画面の左右からそれぞれ引っ張り出すような感じで別のシーンを表示させることができます。
そして、このとき中心に残っている先程の山小屋のシーンをよーく見てみると、三次元のレンダリング結果として描画されていたはずの景色も、やっぱり二次元的な歪みエフェクトの影響を受けていることがわかると思います。
このように、3D と 2D を不規則に移動しながらも、アニメーションやユーザーの操作に応じて適切に絵を描画していく作りになっているのが本当にすごいですね。
描画されるほとんどのパーツは WebGL によってレンダリングされており、ウェブ上の DOM としてのパーツは最小限に制限されています。
Resn という名前を聞いてもあまりピンとこないという人もいらっしゃるかもしれませんが、彼らのポートフォリオサイトや、ポートフォリオサイトで見ることができる事例集を見れば、その並々ならぬインタラクションに対するこだわりを感じることができるはずです。
美しく滑らかなアニメーションと、それをユーザーのインタラクティブな操作に紐付ける見事な手腕が、今回のサイトでもしっかりと発揮されていると言えるでしょう。
こういうサイトを作れるのって本当にすごいですが、ただ技術がすごいだけでなく、こんなトリッキーな構成なのにサイトとしてまとまっていることがすごいですね。
本当に驚きです。
ぜひチェックしてみてください。
