丁寧に味付けされたモーションが見事なクリエイティブデベロッパー Cyd Stumpel さんのポートフォリオ

doxas : 2022-11-29 12:30:07

3D 表現を上手に取り入れたポートフォリオ

今回ご紹介するのは、クリエイティブデベロッパー Cyd Stumpel さんのポートフォリオサイトで、WebGL を使ったキービジュアルがそのまま事例の一覧にもなっている、3D 表現をうまく活用したウェブサイトです。

スクロール操作に連動して 3D シーンが変化していくのですが、マウスカーソルのホバーなどのその他のインタラクティブ性のある要素についても、全体的にモーションにかなり丁寧な仕込みがされている感じがします。

今回のサイトでは WebGL を使って立体的な構造を作り出しています。

その構造や、3D 表現の種類としては、そこまで物珍しい感じではありません。どちらかというと、まあ比較的よく見かけるような、それほど奇をてらった見せ方ではないと思います。

しかし冒頭から書いているように、モーションの付け方に独特な個性が感じられ、とても丁寧に作り込まれた動きが特徴かなと思います。

スクロール操作を行うと、螺旋状に並べられたサムネイルがくるくると回転しながら縦方向にせり上がっていきます。

直感通りの動きをするので、触っていてどう操作したらいいのか迷ったりすることはないと思います。そのあたりも、シンプルですごくいいんですよね。

また、カーソルをサムネイルに重ねると、ユーザーに見えやすい角度に微妙に傾斜が変化するなど、見やすさや操作しやすさにも気を配っている感じが伝わってきます。

全体的にアニメーションはゆっくりめというか……

なんというか余韻が長めになっている、というほうが適切かもしれないです。

操作した瞬間のレスポンスの早さは遅延することなく、しかし動き出したらその余韻が長く残るような、そんなモーションが多い気がします。

触っていてすごく心地よく感じるアニメーションだなと思いました。

色使いにも、同様の傾向があるような感じがします。

ウェブサイトの雰囲気って、フォントや色使いでも大きく変わってくると思いますが、現代のウェブにおいてはトランジション・インタラクションの部分でもかなり個性を表現している場合が多いですよね。

今回のサイトも 3D 的な表現が中心に据えられているというよりは、どちらかというと手触り感に対する作り込みのほうに重点が置かれているような感じがします。

どういうものを気持ち良いと感じるかは個人差があるものだと思いますが、それでもこのサイトに見られるモーションの心地よさみたいな部分は参考になるのではないでしょうか。