
LUCERRÁ
「映画として演出されたデジタル体験」を掲げるスタジオ。ページ遷移を光の転換として設計している。
- サイトURL
- https://www.lucerra.co/
- クレジット
- LUCERRÁ
- 使用技術
- Three.jsWebGLサウンドスクロール連動ページ遷移
Digital experiences, directed as cinema(映画として演出されるデジタル体験)を掲げる、イマーシブ体験スタジオ LUCERRÁ のサイト。ストーリーテリング、モーション、サウンド、インタラクション、テクノロジーを組み合わせて「人が本当に感じて記憶に残る瞬間」を作る、という立て付けです。
Awwwards には14個の要素が登録されており、spatial context(空間的な文脈)、light transitions(光による転換)、ナビゲーションメニュー、3Dスクロール、インタラクティブなケーススタディが挙がっています。技術タグは Three.js と WebGL。ショーリールの動画は自前サーバーではなく DigitalOcean Spaces から配信されています。
【参考になるポイント】
・要素の名前が「シーン遷移」ではなく light transitions になっている。ページの切り替えをライティングの変化として設計する考え方は、3Dサイトの遷移設計として参考になる
・ケーススタディ自体をインタラクティブにしている。スタジオサイトで実績ページまで3Dを引っ張ると、ページ数ぶんシーンを作る覚悟が要る
・重いショーリール動画を DigitalOcean Spaces に逃がしている。WebGLのバンドル配信と動画配信を分離する構成
・※Three.js のバージョン、.glb や .hdr などのアセットの有無は未確認。サーバーから返るHTMLにバンドルの手掛かりが出ていない
・※2026年8月19日時点で Nominee
