BrandOverseas / ITPicked 2026.09.26

Palazzo Sogni

ブランドのWebデザイン参考 — ホテル・宿泊

出典: palazzosogni.com

Editor's note — 編集部の視点

章が進むと、背景がベージュから桃色、水色へ移ろう。

フィレンツェ中心部のブティックホテル「Palazzo Sogni」の公式サイトは、フレスコ画と筆記体の見出し、アーチ形の写真で、館内を巡る気分をページの色に託している。

IrisColor & Brand

文字色が黒じゃなくて、焦げ茶なのがいい。フレスコ画の顔料みたいな色で、淡い背景の上でもきつくならない感じ。古い壁の手紙を読んでるみたいで、すき。

1写真はアーチ形の窓枠で切り抜く。宮殿の窓から覗くような視点が、客室紹介を物語にする
2筆記体の「Welcome」「Dining」に刷毛の跡を添える。大文字のセリフ体と並べ、格式と手ざわりを同居させる
3BOOK NOW は角を切り欠いた青いボタン。固定ヘッダーに常駐し、どの章からでも予約に戻れる

Color

Palazzo Sogniの配色

Typography

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

見出し・リード・本文

Aa あア

使用: Sogo
代替: Cormorant Garamond

ナビ・ボタン・ラベル

Aa あア

使用: Montserrat
代替: Montserrat

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

見出しKatapick 型20.2px · 1.29 · 400
小見出しKatapick 型15.8px · 1.73 · 700
本文The quick brown fox — 参考を型にする15.8px · 1.73 · 400
ボタンKatapick 型12px · — · 350

Structure

ページ構成（上から順）

01
ヘッダー
左に THE PALACE / ROOMS & SUITES / DINING / SPA、中央にセリフ体のロゴ「PALAZZO SOGNI FIRENZE」、右に CONTACTS、ITA / ENG の切り替え、角を切り欠いた青い BOOK NOW ボタン。スクロール中も固定表示。
02
ヒーロー
フレスコ画の天井や大理石のバスルームなど館内の映像・写真を全画面で見せ、中央下に円形の矢印と SCROLL DOWN。
03
イントロ・Welcome
大文字のセリフ体で「Palazzo Sogni is a luxury boutique hotel...」のリード、筆記体の「Welcome」と刷毛跡、アーチ形の写真と紹介文。
04
ロケーション
Via de' Martelli の立地を大きめのセリフ体で語る文章と、夜の外観写真を左右に並べる。
05
Rooms and Suites
桃色がかった背景に筆記体の見出しと植物の線画、アーチ形の写真。続いて「An authentic hospitality experience」と、MAJESTIC SUITE などの客室カードを並べた横スライダー。
06
ルーフトップ
ドゥオーモを望む夕景のテラス写真を全幅で見せる。
07
Dining
淡い青の背景に筆記体の「Dining」、金色の「SEGRETO」ロゴ、レストランや音楽室の写真と説明を左右交互に配置する。
08
Spa・サービス・フォーム
Wellness Rituals と Exclusive services の紹介、問い合わせフォーム、フッター。

Interaction

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

Lenis による慣性スクロール。背景色は章ごとにベージュ→桃→水色へと移ろい、スクロール進捗に合わせて background-color を補間すると再現できる
Three.js が読み込まれており、画像のトランジションなどに WebGL を使っていると思われる
客室は写真カードの横スライダーで、ページ送りのドットを添える
アーチ形の写真は上辺だけ大きな border-radius を付けるか、clip-path で再現可能

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

検出された技術:Three.jsLenisWordPress

Reproduce

再現するときのポイント

01背景は純白を避け、#f2f1e5 のパーチメントから章ごとに桃（#eedfd8）、淡い水色へと色温度を移す
02見出しは大文字のライトなセリフ体、アクセントに筆記体を1語だけ。書体の種類をそれ以上増やさない
03写真はアーチ形と角丸長方形の2種類に絞り、植物の線画を背景に薄く敷く
04BOOK NOW をブランドの青で塗って固定ヘッダーに置き、どの章でも予約導線を見失わせない

再現MDに含まれるもの

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

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

palazzo-sogni.katapick.md

1---
2title: "Palazzo Sogni 再現用デザイン仕様書"
3source: https://www.palazzosogni.com/
4katapick: https://katapick.com/sites/palazzo-sogni
5category: ブランド
6region: 海外 (IT)
7tags: [セリフ体, 写真主体, くすみカラー, 余白, 固定ナビ]
8launched: 2026-06
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# Palazzo Sogni — 再現用デザイン仕様書
17 
18> 章が進むと、背景がベージュから桃色、水色へ移ろう。フィレンツェ中心部のブティックホテル「Palazzo Sogni」の公式サイトは、フレスコ画と筆記体の見出し、アーチ形の写真で、館内を巡る気分をページの色に託している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22