全編 3D シーンで構成されスクロール操作でスイスイ閲覧できる Arthur Engel さんのポートフォリオ

doxas : 2023-03-20 13:18:22

描画負荷も比較的抑えられている

今回ご紹介するのは Arthur Engel さんのポートフォリオサイトです。

クリエイティブ・デベロッパーとして活動されている方のようで、サイト内に掲載されている事例を見ても 3D 表現などビジュアルを重視したさまざまな事例を手掛けているみたいです。

今回のポートフォリオサイトもサイト全体が 3D シーンによって構成されています。

リンク:

Creative Developer Portfolio - AE

スクロールのみで最後まで閲覧可能

今回のサイトは、最初にやや長いロードが入ります。

とは言え、途方もなく長い待ち時間というほどではなく、描画される 3D シーンの様子から考えれば、十分に短い時間でロードが終わっているとも言えるかもしれません。

ロード画面が消えると、宇宙船の内部のような空間が現れます。

サイト内には人の姿をしたキャラクターやオブジェクトはなく、ロボットが画面の中央に立っている状態で場面が進みます。

カーソルの位置を追従するような小さなロボットもいて、インタラクションの良いアクセントになっていると思います。

スクロール操作をしてやると、カメラが自動で水平方向に移動していき、それに連動してロボットたちも移動するような感じですね。

宇宙船内の区分けされた部屋を次々と巡っていくような感じでストーリー性を感じる構成になっています。

スクロール操作を続けていると、この上の画像にあるように、突如床が抜けて縦方向にカメラが動くような場面もあります。

この唐突な縦方向のカメラワークが、単調になりがちなシーンにほどよい刺激となっており、思わず画面内に視線を戻させる効果があるなと思いました。すごくよく工夫されていますね。

3D シーン内には直接クリックできるいわゆるリンクのような要素もあり、事例を紹介しているセクションからは各事例にジャンプすることもできます。

比較的メタリックな表現が多く、CG 的にはどちらかというとスタンダードな質感表現が多いと思います。

しかしだからこそ見た目の迫力に対してとても軽快に動作するようになっていて、負荷の高くなる技術を無理に使って質感を上げるのではなく、閲覧性やそのスムーズさなどユーザーの体験をしっかり考慮しているようにも感じました。

目を見張るようなハイエンドな技術を使っているわけではありませんが、すごくバランスよく組み立てられていると思います。

ぜひチェックしてみてください。

リンク:

Creative Developer Portfolio - AE

share

follow us in feedly

search

search

monthly

sponsor

social