雰囲気満点の WebGL 実装を高い質感でウェブサイトに取り込んだ Franky Hung のポートフォリオ
美しいシーンで盛り上げる
今回ご紹介するのは Franky Hung さんのポートフォリオサイトです。
WebGL を効果的に利用しつつ、コンテンツの背景に絶えずそれを描画する構成でビジュアル的にはなかなか凝った作りのポートフォリオとなっています。
サイト全体の構造自体はシンプルなので、サクッと閲覧できるボリューム感となっています。
リンク：
実験作の数々にも注目
今回のサイトでは、トップページのキービジュアルがかなり存在感のある扱いになっていて、いわゆるスクロール系の操作ではビューが切り替わったりはしません。
カーソルの位置に応じて視点が微妙に動くようにはなっていて、おそらく意図としては、このキービジュアルをしっかりと見せたいという感じなんでしょうね。
水面の映り込みなど、かなり丁寧に作られている感じがします。
画面の中央に浮かんでいる球体の表面は、絶えず模様が変化し続けます。
静止画で見ても質感が感じられると思うのですが、ゆっくりと模様が変化していく様子はなかなか美しいです。
また、画面の右上あたりに他のページへと遷移するためのリンクがあるのですが、このリンクをクリックした際には中央の球体がパーティクルの集合となり、すっと動いて背景の一部になります。
背景に配置された球体は、事例の並んだ上のスクリーンショットのような状態になると、カーソルを動かしても反応しなくなります。
これも想像ですが、そうすることで背景に意識が持っていかれるのを避け、コンテンツに集中させるという意図があるんでしょうね。
ウェブサイトの構造という意味では全体的にシンプルなのですが、デザインとしての工夫も含め、かなりしっかりと考えた上で意図を持って作られている感じがあり、CG の質感も高くて見応えがあります。
three.js の作例集も凝ったものが多い
日本人にも、実装とデザインと両方をこなすクリエイターさんが時折いらっしゃいますが、今回のサイトの主である Franky Hung さんもまさにそういう方なのかもしれません。
ウェブサイト上の WebGL の質感も、見様見真似でちょっとやってみましたみたいな感じではなくて、しっかりと仕組みを理解しつつ作っている感じがあります。
実際、サイト上に掲載されている事例を見ても、それが感じられるのではないでしょうか。
とてもレベルの高い、見事な完成度のウェブサイトです。
ぜひチェックしてみてください。
