シンプルだけど圧倒的なビジュアルで見るものを魅了する Dorian Lods さんのポートフォリオサイト
ビジュアルとしての完成度の高さ
今回ご紹介するのは Dorian Lods さんというデザインエンジニアの方のウェブサイトです。
Gobelins 出身で、WebGL を用いた事例を多く手掛ける Dog Studio に所属されている方のようで、それもうなずけるような見事な完成度のウェブサイトに仕上がっています。
とにかくシンプルなのにビジュアルの圧がすごいです。
リンク：
インタラクティブ性もたっぷり
今回のウェブサイトは、情報量という意味ではそれほど多くないと言いますか、あまりたくさんの文字情報が用意されている感じではありません。
それにデザイン的にもどちらかというとシンプルな印象で、余白が多く、黒っぽい背景を基調とした構図は一見するとどこかあっさりとした雰囲気にも感じます。
ただ、用意されている WebGL の実装のレベルが非常に高くて、その存在感がすごいです。
WebGL を用いた表現としては、大きく２つの種類があります。
１つは、ドミノのような薄いブロック状のオブジェクトが組み合わさった、透明感のある 3D オブジェクトです。
こちらはクリスタルのような質感で、状況によっては DOM として配置されているテキストにマウスカーソルをホバーさせるとその質感が次々と変化したりもします。
いずれの場面でも、その美しい質感には本当に驚かされます。
そしてもう１つ WebGL を用いた演出があって、それはテキストに対するインタラクティブな演出となっています。
これは言葉で説明するのが難しいタイプの演出なのですが、カーソルが通り過ぎた軌跡の部分に、スリット状のディストーションが発生するようになっています。
あまり大きく派手に変化するという感じでもないのですが、3D オブジェクトに付与されているクリスタルのような質感に、どこか通じるところのあるディストーションエフェクトになっていて、こちらもすごくかっこよく仕上がっています。
印象的なフォント、そして整然とレイアウトされたテキストに、さらにインタラクティブなディストーションエフェクトや 3D 表現が組み合わされた、すごくレベルの高い実装例だと思います。
スクリーンショットではほとんどわからないと思いますが、ごくわずかに背景の暗い部分にもカーソルからのインタラクティブな変化が発生するようになっていて、そういった演出の温度感の強弱にも深い考察と意図が感じられます。
ほんとこういうの作れるひとって頭のなかどうなってるんでしょうね……
感嘆のため息が思わず漏れてしまう、そんなウェブサイトだと思います。
ぜひチェックしてみてください。
