心のうちをインタラクティブなウェブコンテンツとして表した不思議な作品 DIRECTIONLESS
個人制作のウェブコンテンツ
今回ご紹介するのは、デザイナーの AIZI さんが webflow を用いて制作したウェブサイトです。
細かいニュアンスがわからないのですが、ご自身の心のうちにある思いをウェブという媒体を使って表現した作品のようですね。
こういった特になにか販促や広告、あるいはコーポレートのような文脈を含まない個人サイトってなにか固有の呼称ってあるんですかね？ AI の台頭とともに、こういうウェブサイトは今後増えていきそうな気もします。
リンク：
DIRECTIONLESS | An ode to those who feel ...
不思議なホバーエフェクト
今回のサイトには WebGL を用いたエフェクトとして、カーソルの位置に発生するユニークな表現が実装されています。
これ、なんと形容したらいいのかわからないのでホバーエフェクトと書きましたが、いわゆる HTML 要素の上にカーソルが乗ったときに起こるホバーエフェクトとは少し違います。
WebGL 実装ではよくある、カーソルの軌跡の位置にエフェクトが発生するような感じですね。
ちょっと静止画で見てもわかりにくいのですが、カーソルの重なっている部分にだけ万華鏡のレンズを通して世界を見ているような……
複雑な屈折のようなエフェクトが発生するようになっています。
これ結構個性的な見た目をしていて、なかなか新しい表現だなと感じました。
いくつかのシーンでそのホバーエフェクトがアクセントとして使われています。
ホバーエフェクトは一見すると「ただ像が歪んでいるだけ」のように見えるかもしれないですが、場所によっては、微妙に色が変化するような演出が加えられている部分もあります。
またウェブサイト全体を通じて言えることなのですが動く要素やシーン全体の変化が大きい場面が多く、ビジュアルを使ってさまざまな表現がなされているのが今回のサイトの特徴だと思います。
結構ビジュアルとしてのインパクトが強いので、若干面食らってしまうひともいるかもしれないです。（ホラーというほどではないですが……ちょっと怖いと感じるひとがいそうなシーンもあります）
冒頭にも書いたのですが、こういった個人制作のウェブサイトってどういうふうに呼ぶのがいいんでしょうね……
なにか、ひとつ明確で便利な呼び名みたいなのがあると、一気にその概念が広く浸透するみたいなこともありそうに思います。
WebGL を使った作例としては、なにかの要素にカーソルが重なったときだけ発生するタイプのエフェクトがあり、しかもその質感が非常に個性的でおもしろい事例だと思います。
ぜひチェックしてみてください。
