CIAO ENERGY - LAUNCH WEBSITE

フランスのエナジードリンク Ciao Energy の新レンジ（Double Litchi、Coco Citron Vert、Kiwi Concombre、Pêche Blanche、Pomme Rhubarbe、Abricot Framboise の6フレーバー）のローンチサイトです。糖類11g、コーヒー由来のカフェインとガラナ、ステビアといった中身の説明をFAQまで含めて載せる、ミニマルな縦1本の構成。制作はデザインスタジオ Skaald。 Awwwards の説明どおり、Webflow のサイトに Three.js を載せて缶の3Dオブジェクトを中心に据えています。ヒーローはループする無限スクロールで、缶が回りながらフレーバーが切り替わる導線。サウンドデザインも組み込まれています。製品カットには .webm 動画も併用されており、3Dと動画を使い分ける構成です。 【参考になるポイント】 ・Webflow（cdn.prod.website-files.com 配信、meta generator も Webflow）の上にカスタムJSで Three.js を差し込むパターン。ノーコードのCMSと重い3Dを共存させている ・スクロールは Lenis を使っており、Lenis 公式のショーケースにも掲載されている。GSAP との併用も外部ギャラリーで確認できる ・配色は #EEEEEE と #191917 の2色のみ。3Dの缶の色以外を落として製品を目立たせている ・Site of the Day（2026年7月30日、総合7.22）に加えて Developer Award 7.49 を獲得。ただしこのバッチでは featured 枠を Noomo Showcase に譲っている ・※取得できた HTML からは Three.js のバンドル名やモデルファイル名までは特定できず、3D実装の詳細は Awwwards の掲載文が根拠