UNIT9 所属の凄腕クリエイティブデベロッパー Luis Henrique Bizarro さんのポートフォリオサイトがかっこよすぎる
黒を基調にしたクールなビジュアルが素敵
今回ご紹介するのは、世界的にも有名な制作会社である UNIT9 所属のブラジル人のクリエイティブデベロッパー、Luis Henrique Bizarro さんのポートフォリオサイトです。
UNIT9 は WebGL を利用したウェブサイトの制作事例も結構多くあるのですが、それらにも関わっている方なんでしょうね。
ポートフォリオサイトを見ても、その技術力やセンスの高さをうかがわせるたくさんの工夫が見られます。
特に、各シーンがシームレスに繋がっていく遷移アニメーションは、その演出としての面白さも含めて、非常に素晴らしい出来栄えとなっています。
平面的表現と立体的表現が不思議な調和を見せる
今回のサイトはいわゆる SPA として実装されており、動的にコンテンツが変化します。全体の構成としてはシンプルで、トップページと About ページ、そして Work のページが用意されています。
トップページ部分では、最初に訪れた際のローディングが完了すると同時に、背景から浮き上がるようにワイヤーフレームのオブジェクトが出現します。
このワイヤーフレームのドーナツのような形状が、トップページでは一貫して用いられます。
ロード直後の出現演出の際は少しばらけたような感じですが、完全に表示が完了すると、きれいに整列した状態になります。
上の画像はそのロード直後の様子。少し、ワイヤーフレームの部分がバラけているのがわかると思います。完全に表示が完了すると、バラけていたワイヤーがキレイに整列するのですが、実はこのワイヤーフレーム部分、サウンドビジュアライザの役割も果たすようになっています。
若干文字が小さいので見つけにくいかもしれませんが、画面の下のところを見てみると、SoundCloud から楽曲を読み込むことができるようになっています。
試しに再生アイコンをクリックしてみればわかるかと思いますが、一度楽曲の再生が始まると、ドーナツ型に配置されたワイヤーフレームが楽曲の音の状態に応じて動くようになっています。
さらに、これはキャプチャ画像ではわかりにくいかと思いますが、このドーナツ型のワイヤーフレームの背景には、絶えず点が明滅するような景色が見えています。
この背景部分は、About ページでは床面に敷き詰められたような位置に移動するのですが、この遷移アニメーションが迫力があってとてもいい感じです。
他にも、事例を紹介している Work のページでも、やはり WebGL を用いた表現がなされていますね。
こちらはスワイプする要領で左右にスクロールさせることができるページになっていますが、フォーカスが当たっている要素に対してシェーダエフェクトが掛かるようになっており、あまり見かけない珍しい表現だなと感じました。
紹介されている事例も、どれもレベルが高くてすごいですね……
当サイトでは最近、個人のポートフォリオサイトを紹介するケースが多いような気がします。
この時期ってみんなポートフォリオサイトを刷新するタイミングなのかな……とか考えてしまうのですが、ただ単にたまたま時期が重なっただけのことなのかもしれません。
今回のサイトは二次元的な表現に見えたものが、実は別のアングルから見てみたら立体的に配置されていたものだった、というような、見る人をちょっとだけ驚かせるような演出がたくさんあり、とても工夫された構成になっているように思います。
また、サウンドビジュアライザとしての機能も持っているトップ部分のドーナツ状のワイヤーフレームなど、見た目もすごく洗練されていてかっこいいですね。
WebGL だけでなく、DOM 操作等をうまく利用した演出も随所に見受けられます。
ぜひチェックしてみてください。