シンプルな演出ながらインタラクティブ性の高い動きのあるデザインが面白い Victor Costa さんのポートフォリオ
ユーモアも感じさせる不思議なポートフォリオ
今回ご紹介するのは Victor Costa さんというクリエイティブデベロッパーのポートフォリオサイトです。
デザインや、高いインタラクティブ性が非常に面白いサイトになっているのですが、おしゃれな感じとユーモアな感じが同居していて、なんかとても個性的なサイトになっています。
なんかこう、余白を大きく取ったおしゃれなポートフォリオって結構よく見かけると思うのですが、ユーモアな雰囲気を併せ持つというのは珍しいような気もしますね。
遊び心が散りばめられた楽しいポートフォリオ
今回のサイトでは、WebGL の使い方としては比較的シンプルな形で実装がなされています。
どちらかというと、WebGL というよりは、サイト全体の CSS などを駆使したインタラクティブなアニメーション演出のほうが主体っぽい感じですね。
フォントの部分がややディレイを掛けたような感じで登場してきたり、DOM がダイナミックにスクロールしたりする様子は、なかなか見応えがあります。
一見、ただ画像が置いてあるかのように見えるかもしれませんが、この写真の部分が WebGL でレンダリングされていますね。
画像の右下あたりに「See Project」の文字が書かれたリンクがあるのですが、そこにマウスカーソルをホバーさせたり、あるいはスクロール操作を行ったりすると、写真の部分が大きく波打つような演出を見ることができます。
スクロールするときには下からせり上がってくる写真のほうも同様の演出が加えられるようになっています。
これちょっとわかりにくいかもしれない画像で恐縮なんですが、女性の顔が写りこんでいた写真と、その下からせり上がってきている足を撮影した写真とが、いずれも歪んだように曲がっているのがわかると思います。
この波打つような演出が、事例紹介の work のページでは随所で使われています。
結構ゆっくり目のアニメーションなので、うまく言葉で表現するのが難しいのですがちょっとタメを作った感じの、柔らかなアニメーション処理になっていますね。
マウス操作やホイール操作など、ユーザーのアクションに連動しているので、すごく自然な印象に仕上がっていると思いました。
About のページとかを見てみると、このポートフォリオの持ち主である Victor Costa さんの明るくユーモアのある性格が見えてくるかのように思えます。
キーワードにマウスをホバーしたときにだけ出てくるアニメーション GIF があったり、アワードを受賞したときの様子を撮影した GIF が置かれていたりして、ほんとに見ているこちらまで楽しい気持ちになっちゃいます。
そういったパーソナリティというか、彼の性格をわかった上で再度サイト全体を見てみると、なんかフォントの違いや色使いの違いなどにも、実は随所にそういう彼の遊び心みたいなものが表現されているのかなと感じました。
非常に楽しいサイトになっています。
ぜひチェックしてみてください。
