# KUBE Saint-Tropez｜ブランドのWebデザイン参考

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

- URL: https://www.kubehotel-saint-tropez.com/fr
- 解説ページ: https://katapick.com/sites/kube-saint-tropez
- カテゴリ: ブランド / 地域: 海外（FR）/ 業種: ホテル・リゾート
- テイスト: セリフ体、写真主体、映像主体、余白、ライト
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

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

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

## 配色
- #fdf9f4 Riviera Cream（背景）
- #f3f0e8 Sand Linen（セクション背景 / フッター）
- #000000 Black（ロゴ / 見出し）
- #484847 Pebble Gray（本文）
- #daf092 Lime Spritz（予約ボタン / アイコン）
- #7c7c7c Soft Gray（補足テキスト）

## フォント
- 見出し: Saphion（代替: Marcellus）
- 本文・ナビ・ラベル: Inter Variable（代替: Inter）

## よくある質問
### KUBE Saint-Tropezのサイトで使われているフォントは？
見出しに Saphion、本文とナビに Inter Variable が使われています。Saphion の代わりには、細身で大文字が美しい Google Fonts の Marcellus が近い雰囲気です。

### 高級ホテルのサイトで差し色を使うコツは？
KUBE Saint-Tropezのように、背景と文字を生成りと黒に絞り、差し色は予約ボタンやアイコンなど“押してほしい場所”だけに使うと、品を保ったまま導線が目立ちます。

### どんな業種の参考になる？
ホテル・リゾート、旅館、レストラン、スパなど、写真と映像で滞在体験を伝えながら予約につなげたい宿泊・観光系のサイトの参考になります。

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