LUEUR — EAU DE PARFUM N°1

夜の静けさを、一滴に。

ボトルの造形からWebの演出まで、すべてコードから生まれたプロダクトストーリー。

※架空ブランドのLPサンプルです

SCROLL

CRAFT — 01

手に残る、重みの記憶。

キャップは真鍮調のメタル。開け閉めのたびに、指先へ確かな重みを返す。

CRAFT — 02

光を蓄える、厚みの造形。

肩へ向かって絞られる厚いガラスが、琥珀の香料に光を通す。

CRAFT — 03

揺るがない、静かな土台。

低く構えた金属のベースが、細身のシルエットを支える。

ANATOMY

五つのパーツが、ひとつの香りを守る。

  • CAP — 真鍮調キャップ。開閉の所作に重みを。
  • COLLAR — ネックカラー。首元を締める金の環。
  • GLASS — 厚肉ガラス。光と香料を抱く器。
  • PARFUM — 香料。琥珀に澄む夜の記憶。
  • BASE — ベース。全体を支える静かな錘。

VARIATIONS

あなたの夜に、合う色を。

香料の色は3種。ボタンで切り替わります。

まだ存在しない香りのために。

このページは架空ブランドのLPサンプルです。同じ構成で、実在プロダクトの スクロールストーリーテリングを制作できます。

この演出について

説明
Web調査に基づく「Apple型の商品スクロールストーリーテリング」（組み上がった商品 → カメラ回り込みで特徴訴求 → 分解図 → バリエーション → CTA）をBlender→Webパイプラインで実装したサンプル。 generate.py が回転体（bmesh.ops.spin による lathe）で香水ボトルを5パーツ （キャップ/ネックカラー/ガラス/香料/ベース）生成し、frame 0=組立 → frame 60=分解のキーフレームを打って bottle.glb にアニメーションごと焼き込む。Web側は RoomEnvironment + PMREMGenerator の環境IBL （外部HDRI不要）+ ACESFilmicToneMapping + FOV35 の狭角で製品写真的にレンダリングし、 クラフト訴求は CatmullRomCurve3 のキーポイント補間でカメラが3つの停留点（キャップ/ガラス/ベース）を巡る。分解図は GLBのアニメーションを AnimationMixer に載せ、ScrollTrigger進捗 → mixer.setTime() でスクラブする。ガラスは KHR_materials_transmission（Principled BSDFの Transmission）をそのまま使用。カラーバリエーションはスクロール非連動で、ボタンが MatLiquid のマテリアルカラーをGSAPでトゥイーンする簡易コンフィギュレータ。
元ref
Web調査（Apple型商品スクロールストーリーテリング）。特定の参考サイト起点ではなく、 商品LPの定番構成をパイプライン実証を兼ねてサンプル化したもの。
案件への移植メモ
bottle.glb と main.ts の [data-product-scroll] ブロックを案件へ移植する。実案件では generate.py のプロファイル（半径・高さの点列）を実商品のプロポーションに合わせて調整し、 分解オフセットとカメラ停留点（POS_POINTS / LOOK_POINTS）も商品の訴求パーツに 合わせて組み替える。transmission は環境IBLが無いと黒く沈むので RoomEnvironment とセットで移植すること。パフォーマンスが厳しい端末向けには transmission を透明マテリアル（transparent + opacity）に落とす代替がある （PLAYBOOK「3Dアセットパイプライン（Blender）」参照）。
← ギャラリートップへ戻る