写真作品を主役に WebGL によるインタラクティブな演出にもこだわった Lecamus Jocelyn さんのポートフォリオ
写真のためのポートフォリオ
今回ご紹介するのは Lecamus Jocelyn さんの写真作品を集めたポートフォリオサイトです。
Lecamus Jocelyn さんは写真だけを専門にしたプロということではなく、UX デザインを手掛けるデザイナーでもあり、またウェブの開発者でもあります。
今現在は日本の企業 ZIZO で働いているらしいです…… もしかしたら、親日家でもあるのかもしれませんね。
今回のサイトはあくまでも写真作品だけを集めたポートフォリオサイトとなっていて、写真をいかに印象的に見せるのかということにこだわって作られています。
リンク：
Tismes - Travel is an infinite sum of memories
あらゆる変化が滑らかで迫力がある
今回のサイトには写真が多く登場し、文章として用意されているコンテンツはそれほど多くありません。
また、一部の文章が出てくる部分も WebGL によるエフェクトを掛けられるようにあえて画像として読み込んでいるパターンが見られます。
その効果は絶大で、写真にも画像にも同様のエフェクトが掛かることによって統一感のある仕上がりになっています。
たとえば、サイト上でスクロール操作を行った際には、画面の奥に向かってまるで向かい合わせの鏡のように、エフェクトの掛かった写真たちが並びます。
個々の写真はそれぞれ写真作品の「カテゴリー」を表していて、動物を撮影したもの、人々の生活を撮影したもの、というように作品が分類されています。
いずれかのカテゴリを選択した際には、画面の奥に向かってフェードアウトしていくような演出が発生するのですが、これもまた迫力がありますね……
非常に勢いのある演出で、吸い込まれるような不思議な感覚を味わうことができます。
また、今回のサイトで最も特徴的な他ではあまり見かけないエフェクトとして、擬似的な深度マップを利用した波紋エフェクトがあります。
これは静止画でその特徴を伝えるのが非常に難しいので、ぜひ実際にサイトに訪れて確認してみてほしいのですが……
各画像にマウスカーソルをホバーさせた際、水がにじむように波紋が広がるエフェクトが発生します。この波紋の広がり方がそれぞれの写真作品ごとに異なっており、写真に写っている空間の奥のほうと手前のほうとで波の広がりに差が生まれるようになっています。
このようなエフェクトを実現するには深度マップのような別の情報が必要になるので、恐らくそれらの画像をテクスチャとしてシェーダに渡してエフェクトを実行しているのでしょうね。
サイト全体の雰囲気としては背景が黒ですし余白が広く取られているので、一見するとクラシカルなレイアウトなのですが……
一方でエフェクトに関してはどれも派手というか、視覚的に印象が強く残るような内容のものが多く、またそれぞれのエフェクトの発生する速度、収束するまでの時間など、とにかくよく考えられています。
エフェクトの内容についても、深度マップ的な情報を活用し独特の質感を再現するなど、とにかくレベルが高いです。
WebGL の実装としても非常に驚きましたし、写真作品もプロの写真家かと思うようなものばかりで、それについてもびっくりです……
ぜひチェックしてみてください。
