# Ciao Energy｜LPのWebデザイン参考

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

- URL: https://www.ciaoenergy.com/
- 解説ページ: https://katapick.com/sites/ciao-energy
- カテゴリ: LP / 地域: 海外（FR）/ 業種: 飲料・エナジードリンク
- テイスト: ダーク、3D/WebGL、スクロール演出、大胆なタイポ、ミニマル
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 5/5（目安 50 時間）

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

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

## 配色
- #000000 Black（背景）
- #ffffff White（テキスト / CONTACTボタン）
- #0f0528 Midnight Violet（3D空間の陰影（スクショから採色））
- #8b7bdd Lavender Glow（特徴セクションの光・背景（スクショから採色））
- #2faac9 Cyan（フレーバースライダーのグラデーション（スクショから採色））
- #e38ec7 Orchid Pink（フレーバースライダーのグラデーション（スクショから採色））

## フォント
- 見出し（斜体・太字）: Franklin Gothic ATF（代替: Archivo）
- 本文・ナビ・ボタン: Geist（代替: Geist）
- 補助テキスト: Roboto（代替: Roboto）

## よくある質問
### Ciao Energyのサイトで使われているフォントは？
見出しに Franklin Gothic ATF の斜体・太字、本文に Geist、補助に Roboto を使っています。無料で近づけるなら見出しに Archivo の Black Italic、本文に Geist が使えます。

### Ciao Energyのような3Dの缶はどう作る？
Blender などで缶のモデルを作ってglTFで書き出し、Three.js で読み込みます。ラベルはテクスチャとして貼り、GSAP ScrollTrigger でスクロール量に合わせて回転や位置を動かします。

### このサイトはどんな業種の参考になる？
飲料、コスメ、ガジェットなど、1つの商品の形やパッケージを主役にしたい新商品のローンチLPの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/ciao-energy からダウンロードできます。
出典: Katapick（https://katapick.com）