
Ducati Superleggera V4
ドゥカティ創業100周年記念モデルの特設サイト。3Dタグ付きだが、実体はスクロールに同期する動画シーケンスで組まれた一本道のスクロールテリング。
- クレジット
- Craq Design Studio
- 使用技術
- Next.jsGSAPSass動画シーケンススクロールテリング
ドゥカティの限定車 Superleggera V4 Centenario(創業100周年記念モデル)の特設サイトです。制作は Craq Design Studio。量産二輪車で世界初となる3つの技術を紹介するという主題で、スペック表を読ませるのではなく、上から下へ一本道でスクロールさせながら車体を見せていく構成になっています。
Awwwardsでは3Dカテゴリのタグが付いていますが、HTMLから確認できる範囲では、リアルタイムWebGLではなく assetv24b.com 上に置かれた動画アセットをスクロールに同期させる方式です。ページ本体はNext.jsで、静止画は _next/image を通した最適化配信。演出のタイムラインはGSAP、スタイルはSassという構成がAwwwards側のタグに挙げられています。実装として参考になるのは、3Dをブラウザで回すのではなく事前レンダリング済みの映像に寄せた場合の、品質と重さの落としどころです。
【参考になるポイント】
・動画をメインドメインではなく assetv24b.com という別ホストから配信している。CDN分離とキャッシュ設計の実例
・Next.js の _next/image を静止画に使い、動きの部分は動画に振り分ける二段構え
・配色は黒とドゥカティレッド(#E3001E)のみで、車体の赤に画面全体を寄せている
・2026年7月4日 Honorable Mention(平均約8.9)
・※Three.js / WebGL / .glb の痕跡は、WebFetchで取得したHTMLからは見つからなかった。下位ページのどこかにリアルタイム3Dが存在する可能性は否定できないが、確認できていない
