Landing PageOverseas / FRPicked 2026.09.26

Ciao Energy

LPのWebデザイン参考 — 飲料・エナジードリンク

出典: ciaoenergy.com

Editor's note — 編集部の視点

3Dの缶1本を、全画面でぐるぐる見せる。

仏エナジードリンクCiao EnergyのローンチLPは、黒い空間で3Dの缶を回しながら特徴を1画面1項目ずつ見せ、眺める時間そのものを広告に変えた。

LeoMotion & Direction

左上に「ON」のサウンド切替があるの！BGMが鳴る設計っぽくて、ライブの暗転直前みたいなワクワク感！缶が回るのを音つきで浴びたら、たぶん鳥肌！

1FVは並んだ缶のうち中央の1本だけを照らし、虹色のスライダーで味を選ばせる。選ぶ行為から体験が始まる
2四隅のカギ括弧と上端の細い線で画面を縁取る。ファインダー越しに商品を覗くような没入感が生まれる
3斜体の太い見出しを「ZERO BULLSHIT」まで貫く。勢いのある書体が、ブランドの口調そのものになる

Color

Ciao Energyの配色

Typography

使用フォントと無料の代替

見出し（斜体・太字）

Aa あア

使用: Franklin Gothic ATF
代替: Archivo

本文・ナビ・ボタン

Aa あア

使用: Geist
代替: Geist

補助テキスト

Aa あア

使用: Roboto
代替: Roboto

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型108px · 0.8 · 500
本文The quick brown fox — 参考を型にする15.8px · 1.5 · 300
ボタンKatapick 型14px · 1 · 400
注釈The quick brown fox — 参考を型にする12.3px · 1.5 · 500

Structure

ページ構成（上から順）

01
ヒーロー（フレーバー選択）
黒からグレーのグラデーション空間に3Dの缶を横に並べ、中央の1本を台座の上に浮かべる。下部に斜体の味名、虹色のグラデーションのスライダー、「スクロールで発見」の案内。ヘッダーは左にサウンドのON表示、中央ロゴ、右にMENUと白いCONTACTボタン。
02
フレーバー詳細
紫がかった暗い背景で缶を大きく傾けて配置し、左に味名と短い説明、右端に矢印を置く。
03
特徴1〜4
糖分控えめ・天然香料・コーヒー豆由来のカフェイン・ステビアの4項目を、1画面ずつ順に表示。缶のラベル上に項目名が浮かび、左に小さなラベル・斜体の大見出し・説明文、右端にアイコンの縦ナビ。
04
ステートメント
ラベンダーの光の中に缶を縦に置き、背後に巨大な斜体の「ZERO BULLSHIT」を半透明で敷く。
05
単品の見せ場
グレーのグラデーションの中央に缶を1本だけ立てて見せる。
06
ラインナップ
色違いの缶を弧を描くように斜めに並べ、全フレーバーを一度に見せる。
07
FAQ以降
フルページキャプチャが9000pxで切れているため、以降は抽出データの見出しのみ確認。「FOIRE AUX QUESTIONS」（FAQ）と、見出しのない2つのセクションが続く。

Interaction

アニメーション・インタラクション

抽出データに 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

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全7セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

ciao-energy.katapick.md

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-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 5/5
12estimated_hours: 50
13generator: Katapick
14---
15 
16# Ciao Energy — 再現用デザイン仕様書
17 
18> 3Dの缶1本を、全画面でぐるぐる見せる。仏エナジードリンクCiao EnergyのローンチLPは、黒い空間で3Dの缶を回しながら特徴を1画面1項目ずつ見せ、眺める時間そのものを広告に変えた。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22