複雑なレイヤー構造を絶妙なバランスで組み合わせた Josiah さんの個性派ポートフォリオ
インタラクティブ性を重視した作り
今回ご紹介するのは、クリエイティブデベロッパーとして活動している Josiah さんのポートフォリオサイトです。
About を見ると自らを HASHIRA と称していて、これは鬼滅の刃に登場する柱の概念を指しているのでしょうか。
ウェブサイトの方は WebGL も上手に活用しながら、複雑なレイヤー構造を制御する仕組みになっています。インタラクティブ性もかなり高くて、工夫が凝らされています。
リンク：
JoBenEtuk — Independent Creative Developer
ノイズを利用した模様と変形を活用
今回のサイトでは、共通する演出の方向性としてノイズを使ったもやもやとした模様の描画がうまく機能しています。
カーソルの周辺に常にこのもやもやとしたエリアが追従してくるようになっており、かつ、その部分だけ色がモノクロではなくカラーになります。
カーソルをホバーすると、カーソルのすぐそばに案件のタイトルが文字でも表示されるようになっていたり、動きの多いサイトですね。
最初のビューでは、短冊状に縦長のサムネイル画像が並んだ状態になっており、左右に掴んでスワイプするような操作を行うこともできます。
このトップビューだけでなく各事例の下層ページなども同様ですが、勢いよく操作をすると画像がたわんだように変形するようになっていますね。
こういった演出の仕方にもどこか一貫性のようなものが感じられ、派手にしたくてなんでもかんでも突っ込んでしまっているというような、ややもすると陥ってしまう雑な建付けの印象はあまり受けません。
そういう一貫性があるなかでもおもしろい仕込みがいくつかあって、特にトップビューに関しては実は２種類の見せ方が切り替えられるようになっています。
画面の下の部分に配置されたトグルスイッチのようなボタンをクリックすると、画面全体に事例のイメージが投影されるモードに切り替えることができます。
この画面全体を覆い尽くすビューの場合、サムネイル画像の部分にカーソルをホバーさせるとノイズを使った歪みのエフェクトが一瞬だけ発生しながらトランジションします。
これはなかなか迫力がありますね。
今回のサイトでは、トップビューもそうですし下層ページもそうなのですが、レイヤー構造が演出的にうまく盛り込まれています。
サイト内の演出は基本的に平面的なものなのですが、DOM が重なり合うように動いたりする擬似的な奥行きが上手に表現されており、なんとも技巧的な感じに仕上がっていますね。
画面の左下にある LAB と書かれたリンクを踏むと、同氏がこれまでに作ってきた実験作の動画を見ることができるのですが、実際に動作するデモにリンクされているものは無いようで、ちょっと残念でした。でも、動画で動きを見ているだけでもおもしろいですね。
気になる方は、ぜひチェックしてみてください。
