オーストリアの若きデザイナー Daniel Spatzek さんのウェブサイトには秘密がいっぱい！
インタラクションの宝石箱やあぁ
今回ご紹介するのは、オーストリア在住のデザイナーさんのウェブサイトです。
WebGL は Pixi.js を使った平面的な表現に利用されている感じで、3D バリバリのサイトというわけではありません。しかし、そのサイトの随所に仕込まれている多彩なインタラクションは、ウェブ表現のひとつの極致のような、精巧なバランスによって見事に組み立てられています。
どちらかというと WebGL の事例というよりは、サイト全体をじっくりと眺めてみるのがおすすめなポートフォリオサイトとなっています。
脇役ではないが主張しすぎない WebGL の利用例
今回のサイトは Pixi.js を使うことで、かなりリッチなグラフィックス表現を行っていますが、かといって、それが主役になっているということはありません。
あくまでも、表現したいものが先にあって、それを実現する手段として適切であったからこそ WebGL を採用しているに過ぎない、そんな印象の WebGL の使い方がなされています。
トップページの部分は、まず最初にポートフォリオサイトらしく彼自身が自分について表現しているのですが、あるときはフクロウのように、そしてあるときは開発者である……といったように、いくつかのシーンが時間の経過と共に切り替わるようになっていますね。
ちょっと野暮ですが、切り替わる瞬間をキャプチャしたのが上の画像の様子。
このグリッチノイズのような表現で画像が揺らぐという描写が、サイト内に結構たくさん使われています。
また、よく見てみるとわかるのですが、これらのイラストや写真を利用したシーンには、ホワイトノイズ（砂嵐のような模様）がさりげなく重ねられていて、どこかデジタルのような……あるいはアナログのような……ふしぎな質感に仕上がっています。
About ページなんか見てみると、彼自身の姿を見ることもできるのですが……
これだけの感性を持っていながら、そのうえイケメンですね！
かっこいい！
また、彼の手掛けてきた事例を紹介する Projects のページなどを見ると、ここでは画像が切り分けられて、ほんの少しだけズレて配置されたような、そんなコンテンツが出てきます。
この分割された画像の部分にマウスカーソルを合わせてやると、画像がスルスルと動いてひとつに合わさり、本来の長方形の形に戻るような演出を見ることができます。
この事例紹介のページに限らず、彼のサイトにはあらゆるところに精密なインタラクションやアニメーションが仕込まれていて、どこをどう操作しても、そのセンスの一端を嫌というほど感じさせてくれるそんなサイトですね。
まるで宝探しをするような気持ちで、画面内のいろんなところに触れてみたり、クリックしてみたりするのがとても楽しい、そんなサイトになっていると思いました。
この画像の部分をクリックすると、これまたすごい演出を見ることができます。本物をぜひご覧になってみてください。
アワードの受賞歴も多くあるようですが、そのような数字を見なくとも、このサイトひとつで彼の持つ素晴らしい才能を十分に堪能できます。溢れる才能と、自らの表現に対する自信と、様々なものを感じるとても完成度の高いポートフォリオサイトだと感じました。
WebGL は 3D 表現を行うことができるくらいグラフィックス処理に高いポテンシャルを持っていますが、それを 2D 的に利用してはいけないなんてことはありません。むしろ今回のサイトのように、その高い性能を 2D の世界で引き出して使っていくこともまた、WebGL の有用な利用方法のひとつだと思います。
色や、余白の取り方もそうですが、アニメーションやインタラクションがとても優れたサイトだと思います。
ぜひチェックしてみてください。
