
/zeroz Brand Site
大塚製薬の新ブランド /zeroz のサイト。3DCGの章が順に開いていく構成を、Astro の静的ビルドの上に WebGL で載せている。
- サイトURL
- https://otsuka-air.jp/
- クレジット
- SHIFTBRAIN
- 使用技術
- Three.jsWebGLBlenderAstroスクロール連動
大塚製薬が2026年2月に発売したセルフコンディショニングフード「/zeroz(ゼロズ)」のブランドサイト。からだ本来の力を呼び覚ますという Active Inner Resource の思想と、酸素を活かす植物由来成分ケンフェロールを軸に、About(コンセプト、酸素とエネルギー)、Science & Technology、Product、Interview という章立てで構成されています。制作は SHIFTBRAIN。
Awwwards のタグは WebGL / Three.js / Blender で、エントリーの説明も、章が3DCGと没入的なWebGLで展開していく、と明示しています。ビルド側は Astro で、OGP画像のパスが /_astro/ogp.CSVrUM2_.jpg というハッシュ付きのアセットパスになっている点から確認できます。Blender で作った3DCGを Three.js で動かし、Astro の静的ページに載せるという分担です。
【参考になるポイント】
・Astro のアセットハッシュがそのままOGPのURLに出ている(/_astro/ogp.CSVrUM2_.jpg)。静的サイトジェネレータの上に重いWebGL層を載せる構成の実例
・章ごとにURLが切られており(/about/、/science_technology/、/product/zeroz/)、1枚ものではなくマルチページで3D演出を持たせている
・2026年7月18日に Developer Award と Honorable Mention。スコアは8.29(23票中15票)
・※シーンの実装詳細(モデル形式、シェーダ、ページ間での3D状態の引き継ぎ)は未確認。下層の /about/ はリダイレクトが循環して取得できなかった
