KUBE Saint-Tropez

1. 01

   ヘッダー

   左に言語切替、中央に KUBE のロゴ、右に「RÉSERVER」と丸いメニューボタン。スクロール後は生成りの帯になり、メニューボタンがライム色になる。

2. 02

   ヒーロー

   フルスクリーンの映像に「WELLNESS - POOL - ROOFTOP」と「LE GOLFE POUR SEUL HORIZON」、ライム色の「Réserver」ボタン。

3. 03

   UN LUXE EXPÉRIENTIEL

   縦の細い線から中央揃えの見出しと紹介文、「À PROPOS」のリンク、ホテル全景の空撮写真へ続く。

4. 04

   客室

   「TROIS UNIVERS, UNE MÊME EXPÉRIENCE」の下に、Wood Room と Ibiza Room を左右2分割、Natural Room を全幅の写真で見せる。

5. 05

   VIVRE CHAQUE INSTANT

   スパ・ルーフトップ・ビーチ・プールの4枚の縦長写真を横に並べ、写真の上に名前を置く。

6. 06

   アクティビティ

   左に短い説明と写真、右に罫線で区切ったリスト（PISCINES / SALLE DE FITNESS / APÉRO PÉTANQUE など）。

7. 07

   予約誘導

   プールの全幅写真に「VOTRE SÉJOUR COMMENCE ICI」と「Réserver maintenant」を重ねる。

8. 08

   貸切・FAQ

   左テキスト＋右写真で法人・個人の貸切イベントを案内し、ライム色の＋アイコンで開閉するよくある質問を続ける。

9. 09

   フッター

   「VIVRE L'EXPÉRIENCE DÈS MAINTENANT」と予約ボタン、サイトマップ、ロゴ、SNS、住所と地図リンク。

• ヒーローはフルスクリーンの背景動画
• Lenis の慣性スクロールと GSAP で、見出しや写真がフェード・スライドで現れると思われる
• FAQ はアコーディオン。ライム色の丸い＋アイコンが、開くと−に切り替わる
• Swiper が読み込まれており、客室や体験の写真のスライダーに使われていると思われる

スクロールのコマ撮りLenis · 100–600ms

検出された技術:GSAPLenisSwiperWebflow

• 01見出しは細身のセリフ体の大文字（Marcellus など）で、字間を少し広げて中央揃えにする
• 02背景は純白ではなく #fdf9f4 の生成りにし、差し色のライム #daf092 は予約ボタンとアイコンだけに使う
• 03写真は余白なしの全幅・2分割・4分割で大きく見せ、文字だけのセクションと交互に置いてリズムを作る
• 04予約ボタンはヘッダー・ヒーロー・中盤・フッターに同じ見た目で繰り返す

1---
2title: "KUBE Saint-Tropez デザイン分析書"
3source: https://www.kubehotel-saint-tropez.com/fr
4katapick: https://katapick.com/sites/kube-saint-tropez
5category: ブランド
6region: 海外 (FR)
7tags: [セリフ体, 写真主体, 映像主体, 余白, ライト]
8launched: 2026-08
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# KUBE Saint-Tropez — デザイン分析書
16 
17> 色を持つのは、ライム色の予約ボタンだけ。サントロペの5つ星ホテルKUBE Saint-Tropezの公式サイトは、映像と写真を生成りの余白で包み、細いセリフ体の大文字で語りながら、差し色を予約の導線だけに絞っている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22