ノイズを使ったトランジションエフェクトとドット模様が可愛らしい Baptiste Bacon さんのポートフォリオサイト
シンプルかつ個性的に
今回ご紹介するのは、ウェブのフロントエンドのデベロッパーとして活動されている Baptiste Bacon さんのポートフォリオサイトです。
WebGL を使ってシンプルかつ個性的にウェブサイトが構築されており、ものすごく技術的にすごいとか、見た目がすごく凝っているとかではないのですが、とてもバランスよく整っています。
ドット模様の質感も楽しい感じで、見ていてなんか落ち着きます（謎）
リンク：
ウェブサイトの持つテーマ性
今回のサイトでは、たぶん、タコの足だと思うのですが、これが象徴的な感じで 3D で表現されています。
そしてそこに思いが至ったとき、このトランジションエフェクトってもしかしてタコの墨を模したものなのかなと感じました。
こういうなにか、１つテーマを決めて破綻なくまとめているデザインやインタラクションってすごくかっこいいですよね。
最初にページがロードされた直後、あるいは下層ページへと遷移する瞬間などに、この上の画像にあるようなトランジションエフェクトが発生します。
どことなく、墨が徐々に霧消していくような感じでなんともいい風合いになっています。
背景部分には、タコの足を連想させるような 3D モデルが螺旋構造を描いています。
表面の質感がなんともかっこいいですよね。
ドットの大きさで陰影を表現している感じで、ありそうであまり見ないおもしろいビジュアルです。
その他、カーソルが各事例のリンクにホバーしたときには、小さなサムネイル画像が出てくるのですが、そのサムネイル部分に墨が流れるようなノイズ由来の模様が描かれるようになっていますね。
必要最低限の演出を上手に組み合わせつつ、派手になりすぎない、ちょうどいい温度感のエフェクトで見事にウェブサイト上を演出しています。
下層ページも用意されており、そちらでは画像がスクロールに連動して歪むようなエフェクトも見ることができます。
全体的に WebGL を上手に活用はしていますが、かといって、それ頼みになっていないという感じがあってそれがバランス感の良さにつながっているのかもしれません。
テーマカラーもシンプルですし、動きもスイスイと滑らかで触っていて心地よいです。
ぜひチェックしてみてください。
