BrandOverseas / FRPicked 2026.09.26

KUBE Saint-Tropez

ブランドのWebデザイン参考 — ホテル・リゾート

出典: kubehotel-saint-tropez.com

Editor's note — 編集部の視点

色を持つのは、ライム色の予約ボタンだけ。

サントロペの5つ星ホテルKUBE Saint-Tropezの公式サイトは、映像と写真を生成りの余白で包み、細いセリフ体の大文字で語りながら、差し色を予約の導線だけに絞っている。

LunaType & Whitespace

FAQまで大文字の見出しで組んで、罫線の間隔もゆったり。問い合わせの前に読むだけの場所なのに、手を抜いてない。本文のInterは小さく控えめで、そこも分かってる。……いいね！！

1見出しはすべて細いセリフ体の大文字。写真がどれだけ華やかでも、文字の品で全体を締める
2客室は3タイプを全幅の写真で見せ、名前は写真に直接重ねる。比べる前に、泊まる気分にさせる
3アクティビティは罫線で区切った文字だけのリスト。写真の連打のあとに、読む間をはさむ

Color

KUBE Saint-Tropezの配色

Typography

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

見出し

Aa あア

使用: Saphion
代替: Marcellus

本文・ナビ・ラベル

Aa あア

使用: Inter Variable
代替: Inter

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

特大見出しKatapick 型43px · — · 300
見出しKatapick 型43px · — · 300
小見出しKatapick 型14px · — · 500
本文The quick brown fox — 参考を型にする14px · 1.5 · 300
ボタンKatapick 型14px · 1.5 · 300

Structure

ページ構成（上から順）

01
ヘッダー
左に言語切替、中央に KUBE のロゴ、右に「RÉSERVER」と丸いメニューボタン。スクロール後は生成りの帯になり、メニューボタンがライム色になる。
02
ヒーロー
フルスクリーンの映像に「WELLNESS - POOL - ROOFTOP」と「LE GOLFE POUR SEUL HORIZON」、ライム色の「Réserver」ボタン。
03
UN LUXE EXPÉRIENTIEL
縦の細い線から中央揃えの見出しと紹介文、「À PROPOS」のリンク、ホテル全景の空撮写真へ続く。
04
客室
「TROIS UNIVERS, UNE MÊME EXPÉRIENCE」の下に、Wood Room と Ibiza Room を左右2分割、Natural Room を全幅の写真で見せる。
05
VIVRE CHAQUE INSTANT
スパ・ルーフトップ・ビーチ・プールの4枚の縦長写真を横に並べ、写真の上に名前を置く。
06
アクティビティ
左に短い説明と写真、右に罫線で区切ったリスト（PISCINES / SALLE DE FITNESS / APÉRO PÉTANQUE など）。
07
予約誘導
プールの全幅写真に「VOTRE SÉJOUR COMMENCE ICI」と「Réserver maintenant」を重ねる。
08
貸切・FAQ
左テキスト＋右写真で法人・個人の貸切イベントを案内し、ライム色の＋アイコンで開閉するよくある質問を続ける。
09
フッター
「VIVRE L'EXPÉRIENCE DÈS MAINTENANT」と予約ボタン、サイトマップ、ロゴ、SNS、住所と地図リンク。

Interaction

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

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

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

検出された技術:GSAPLenisSwiperWebflow

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

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

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

kube-saint-tropez.katapick.md

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-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# KUBE Saint-Tropez — 再現用デザイン仕様書
17 
18> 色を持つのは、ライム色の予約ボタンだけ。サントロペの5つ星ホテルKUBE Saint-Tropezの公式サイトは、映像と写真を生成りの余白で包み、細いセリフ体の大文字で語りながら、差し色を予約の導線だけに絞っている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22