
妥協のない高品質の演出が盛りだくさんすぎて驚きが止まらない Raphael Segerman さんのポートフォリオ
どこを見ても驚きがある
今回ご紹介するのは Raphael Segerman さんというクリエイティブデベロッパーさんのポートフォリオサイトです。
Awwwards などでの受賞歴もあるようなので、すでにその名前を知っている、という人も結構いらっしゃるかもしれませんね。
今回のサイトは WebGL を用いた演出が随所にあり、ビジュアル的にもインタラクティブ表現的にも非常に力の入った事例となっています。
リンク:
Raphael Segerman | Creative Developer
モーションにも妥協なし
今回のサイトは、もういろいろすごいところが多くありすぎるので、わたしが言葉を尽くしてなにかを言うよりも、実際に見てもらったほうが早いという感じはします。
たまにこういう異次元に行っちゃってるやつがあるんですよね……
いやほんとに、見れば見るほど驚きます。
トップページ部分を中心に、流体を用いた表現がベースとして用いられています。

白い背景に、画面の右側に並んだサムネイル画像がモノクロで表示されたビューがあり、そこにカーソルを動かすと流体が発生する…… 言葉で説明するとそういうことなんですが、まあ良くできていますね。
流体が発生した部分だけはモノクロからカラーに変化して表示されるようになっていて、スクロール操作ではサムネイルが変形するようになっており、より反応をユーザーにしっかりと返すような設計になっています。
モーションもすごく自然な感じで、完成度が高いです。

また、ここでは主に白い背景の状態をスクリーンショットで掲載していますが、画面上にあるインターフェースからダークモードへの移行ができるようになっています。
すごいのは、このダークモードがまるで全然別世界のような大幅なビジュアルの転換を伴うことです。
暗い宇宙に巨大な惑星が浮かんでいるような世界観が突如として現れる様子は圧巻です。
全然違う世界観がライトモードとダークモードで描かれるのですが、演出には統一感があってこれはこれで不自然じゃないと感じさせられるのが不思議です。

スクリーンショットでは語りきれない、さまざまな細かい手触り、質感があります。
ぜひ、実際に見てみることをおすすめしますね。
特に、これから先 WebGL で自分なりに表現を追求していきたいぞ、というクリエイティブデベロッパーさんであれば、かなり参考にできる点が多いのではないでしょうか。
最近は AI でなんでも作れる時代になりつつあると感じますが、こういうのはさすがに AI に全部実装してもらうのは難しそうな気がします。
また、どんなにすごい実装を AI が作ってくれるとしても、そこになにか一貫性のある意図や、統一感を持たせるための工夫は、やっぱり人間が調整する必要があるとも思うんですよね。
今回のサイトでは、まさにそれが実現できているように感じました。
ぜひチェックしてみてください。