機能性も兼ね備えた美しいデザインに WebGL のエフェクトが映える Alexander Lokasasmita さんのポートフォリオ
とってもスタイリッシュ
今回ご紹介するのは、おそらく学生さんのポートフォリオサイトだと思うのですが、開発もデザインも手掛けるクリエイター Alexander Lokasasmita さんのウェブサイトです。
WebGL が主体のウェブサイトというわけではなくて、どちらかというとサイト全体としての完成度の高さが光る事例だと感じます。
どうやら CMS 的な機能もあるみたいで、ブログの記事なども見ることができます。
リンク：
奇しくも連日同じタイプ
今回のサイトでは、キービジュアル部分と各種事例の詳細ビューに WebGL の実装と思われるエフェクトが使われています。
トップページはスクロール操作を行っても変化が起きないため、思わず誰もが咄嗟にカーソルを動かすことになると思うのですが、カーソルをひとたび動かすと大きな文字が一気に歪むように変化します。
このエフェクトがなんか絶妙なディレイやイージングが掛かっていておもしろいですね。
スクリーンショットで見ても、大きな歪みが発生しているのがわかると思います。
実は昨日の記事で紹介した事例でも似たようなエフェクトが使われていたのですが、やっていることはほとんど同じでも、見え方や触った感触は全然違うのがおもしろいですよね。
手触り感で言うなら、ちょっとディレイが掛かっているというかカーソルの動きに少し遅れてディストーションが発生するみたいな感じがあって、それが独特な質感に繋がっているのだと思います。
冒頭にも書いたように、今回のサイトの場合は演出がおもしろいというのはもちろんなのですが、ウェブサイトとしての、あるいはもっと解釈を大きく広げてシステムとしての完成度みたいなものが見え隠れしています。
ページ遷移のかんじとか、works で事例をどんなふうに見せているかとか、いろいろおもしろいアイデアが盛り込まれていてすごく興味深いです。
各種事例の詳細ページでも、ディストーションするエフェクトを見ることができるようになっています。
たぶん学生さんのポートフォリオサイトだと思うのですが、インターンなどを通じて普通にお仕事としてコードを書いたり、デザインをしたりということを経験しているのかなと想像します。
今回のサイトの完成度は学生さんとは思えない高いレベルにあるように個人的には感じるのですが、みなさんの目にはどういうふうに映ったでしょうか。
WebGL を用いたインタラクティブな演出も、ディレイやイージングの掛け方に独自の工夫が感じられ、ウェブ上での表現に対する試行錯誤があったのだろうなと想像してしまいます。
ぜひチェックしてみてください。
