Ciao Energy

1. 01

   ヒーロー（フレーバー選択）

   黒からグレーのグラデーション空間に3Dの缶を横に並べ、中央の1本を台座の上に浮かべる。下部に斜体の味名、虹色のグラデーションのスライダー、「スクロールで発見」の案内。ヘッダーは左にサウンドのON表示、中央ロゴ、右にMENUと白いCONTACTボタン。

2. 02

   フレーバー詳細

   紫がかった暗い背景で缶を大きく傾けて配置し、左に味名と短い説明、右端に矢印を置く。

3. 03

   特徴1〜4

   糖分控えめ・天然香料・コーヒー豆由来のカフェイン・ステビアの4項目を、1画面ずつ順に表示。缶のラベル上に項目名が浮かび、左に小さなラベル・斜体の大見出し・説明文、右端にアイコンの縦ナビ。

4. 04

   ステートメント

   ラベンダーの光の中に缶を縦に置き、背後に巨大な斜体の「ZERO BULLSHIT」を半透明で敷く。

5. 05

   単品の見せ場

   グレーのグラデーションの中央に缶を1本だけ立てて見せる。

6. 06

   ラインナップ

   色違いの缶を弧を描くように斜めに並べ、全フレーバーを一度に見せる。

7. 07

   FAQ以降

   フルページキャプチャが9000pxで切れているため、以降は抽出データの見出しのみ確認。「FOIRE AUX QUESTIONS」（FAQ）と、見出しのない2つのセクションが続く。

• 抽出データに Three.js / WebGL と canvas 要素があり、缶は1つの3Dシーン上で描画されていると思われる。GSAP ScrollTrigger のスクロール進捗で缶の rotation・position・カメラ位置を補間すると再現できる
• FVの虹色スライダーでフレーバーを切り替える。つまみの位置に応じて缶のテクスチャ（ラベルの色）を差し替える構成と思われる
• 左上の「ON」とイコライザー風のアイコンはサウンドの切り替えで、BGMや効果音を使うサウンドデザインが組み込まれていると思われる（Web Audio API か Howler.js で実装可能）
• 上端の細い線はスクロールの進捗を示すバーと思われる。Lenis の scroll イベントで width を更新すれば再現できる
• 特徴パートの右端のアイコンナビは固定表示で、現在の項目のアイコンだけが強調される

スクロールのコマ撮りLenis · 88–630ms

検出された技術:GSAPThree.jsLenisWebflowWebGL

• 01背景は黒とグレーのグラデーションだけにして、色は缶のラベルと光（紫・ラベンダー）に任せる
• 021画面につき1つの特徴と1つの缶のポーズに絞り、スクロールごとに缶の角度を大きく変える
• 03見出しは斜体の極太サンセリフで、缶のロゴのスピード感と合わせる
• 04四隅のカギ括弧マークや進捗ラインなど、細いUIで3Dの主役を邪魔しない枠をつくる

1---
2title: "Ciao Energy デザイン分析書"
3source: https://www.ciaoenergy.com/
4katapick: https://katapick.com/sites/ciao-energy
5category: LP
6region: 海外 (FR)
7tags: [ダーク, 3D/WebGL, スクロール演出, 大胆なタイポ, ミニマル]
8launched: 2026-07
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 5/5
12generator: Katapick
13---
14 
15# Ciao Energy — デザイン分析書
16 
17> 3Dの缶1本を、全画面でぐるぐる見せる。仏エナジードリンクCiao EnergyのローンチLPは、黒い空間で3Dの缶を回しながら特徴を1画面1項目ずつ見せ、眺める時間そのものを広告に変えた。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22