自作の 3D 空間を上手に利用した表現やパズルのような仕掛けがおもしろい Emilie Gauvin さんのポートフォリオ
他に見たことのないおもしろギミック
今回ご紹介するのは Emilie Gauvin さんのポートフォリオサイトです。
積み木を同じ形のシルエットをした穴に通す、というようなオモチャがありますが、あれを想起させるような独特で他では見たことのないギミックが実装されています。
自作の 3D モデルを使った表現などもあり、ギミックだけで終わらない面白さがあります。
リンク：
ピタッとハマるインタラクションがおもしろい
今回のサイトのトップページは、なにも考えずに見ていると、最初なにをしたらいいのかがわかりにくいかもしれません。
しかし、実際には背景の様子と 3D のメッシュをじっくり見てみれば、まったく難しいことはありません。
要は、積み木のようなメッシュを背景のイラストの同じ図形の上に重ねてやればいいわけです。
積み木を重ねる作業を行うときは、まず積み木の上にカーソルを持っていき、クリックしたままホールドします。
ホールドすると、まるで積み木をつかんだような感じで移動させることができますので、同じ形のシェイプの上に持っていきましょう。
シェイプの近くまで持っていくと、ある程度の距離まで近づけた時点でスッと自動的にハマってくれるようになっていますので、操作そのものは難しくありません。
About などの下層ページに移動する際には、3D 的なシーン遷移が発生するようになっています。
これスクリーンショットを撮って静止画で見てもあまりうまくニュアンスが伝わらないと思うので実際にサイトに行ってぜひ見てみてもらいたいのですが、すごく個性的な演出になっていますね。
下層ページの背景は、一見すると写真のように見えるかもしれませんが、これは 3D シーンです。
どうやら自作した 3D モデルを使っているようで、多彩な才能をお持ちの方であることが想像できます。
個人的にすごく驚きだったのが、下層ページへとシーン遷移する際の 3D 的な演出です。
3D 空間がまるでシームレスにつながっているかのような地続き感は、結構ユニークな表現だなと感じます。
自分で作った 3D モデルを上手に演出に取り入れるためにという観点から思いついた手法なのかもしれないですが、アイデア次第でいろんな表現に使えそうなアプローチだなと感じました。
ぜひチェックしてみてください。
