BrandOverseas / SIPicked 2026.09.26

Vander Urbani Resort

ブランドのWebデザイン参考 — デザインホテル・レストラン

出典: vanderhotel.com

Editor's note — 編集部の視点

ホテルなのに、FVの写真は切手サイズ。

リュブリャナのデザインホテルVander Urbani Resortの公式サイトは、大文字の見出しに筆記体の一言を添え、小さな写真を散らすことで、客室の広さより街の空気で選ばせている。

LunaType & Whitespace

見出しを「01」と一緒にわざと段差でずらして置く。揃えない勇気がある。大文字のSöhneも字間を詰めすぎないから、大きくても圧が強すぎない。……悪くない。いや、いいね！！

1大文字のSöhneに、筆記体の一言を重ねる。整った都会らしさと手の温度が、1つの見出しに同居する
2上部に直接予約の特典バー、右上に下線付きの「BOOK A ROOM」。どこを読んでいても予約に戻れる
3CTAは手描きの楕円で囲むだけ。ボタンらしさを消して、手書きロゴの筆致とトーンを揃える

Color

Vander Urbani Resortの配色

Typography

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

見出し（大文字）・ナビ・本文

Aa あア

使用: Söhne Buch
代替: Hanken Grotesk

「In the heart of the city」などのアクセントコピー

Aa あア

使用: 筆記体スクリプト（書体名未特定）
代替: Mrs Saint Delafield

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

特大見出しKatapick 型112px · 1.2 · 400
見出しKatapick 型80px · 1 · 400
本文The quick brown fox — 参考を型にする17px · 1.4 · 400

Structure

ページ構成（上から順）

01
告知バー・ヘッダー
最上部にダークブラウンの帯で「Best price is guaranteed when booking directly!」。その下に手書きロゴ「VANDER」、HOTEL / FOOD & DRINK / MEETINGS & EVENTS / BOOK NOW / JOURNAL / OUR STORY、下線付きの「BOOK A ROOM」とSNS。
02
ヒーロー
筆記体の「In the heart of the city」と大文字の「WHERE COMFORT MEETS CULTURE」を中央に置き、周囲に小さな写真を4枚散らす。手描きの楕円で囲んだ「BOOK A ROOM」。
03
01 客室
「WAKE UP IN VANDERLAND」を番号「01」と段差で組み、客室写真と紹介文、チェックリスト（Central location / Welcome drink など）。
04
02 レストラン
ダーク背景に筆記体の「Michelin 2021」と「EXPERIENCE LOCAL FLAVOURS」、モノクロの料理写真。EXPLORE MENUS / BOOK A TABLE の導線。
05
03 イベント
筆記体の「Think Big」と「YOUR EVENT OUR EXPERTISE」を段差で組み、料理写真と説明文、EVENTS WE HOST / SEND INQUIRY。
06
メーリングリスト
「JOIN OUR MAILING LIST」と筆記体の「Special Deals」、メールアドレスの入力欄。
07
施設紹介
「ROOFTOP TERRACE & YOGA & MASSAGE」を画面幅いっぱいに左右へ振り分けて組み、#VanderVibe の写真を横一列に並べる。
08
フッター
ホテル・レストラン・イベントの連絡先、営業時間、メーリングリスト登録、法人情報。

Interaction

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

FVに散らした小さな写真は、スクロールやカーソルに合わせて少しずつ動くパララックスと思われる。GSAP で y 方向の移動量を写真ごとに変えると再現可能
大見出しは段差で組まれており、スクロールに合わせて行ごとに表示される演出と思われる。GSAP ScrollTrigger で再現できる
ヘッダーと告知バーはスクロール中も固定表示され、予約導線が常に見える
CTAの手描きの楕円は SVG のパスで描かれていると思われる。ホバー時に stroke-dashoffset で描き直す演出にも応用できる

スクロールのコマ撮り300–900ms

Vander Urbani Resortをスクロールしたときのフレーム1 — 01

Vander Urbani Resortをスクロールしたときのフレーム2 — 02

Vander Urbani Resortをスクロールしたときのフレーム3 — 03

Vander Urbani Resortをスクロールしたときのフレーム4 — 04

Vander Urbani Resortをスクロールしたときのフレーム5 — 05

Vander Urbani Resortをスクロールしたときのフレーム6 — 06

検出された技術:GSAPWebflow

Reproduce

再現するときのポイント

01見出しは大文字のサンセリフで大きく、そこに筆記体の短いコピーを1行だけ添える
02FVの写真はあえて小さくし、余白の中に散らして雑誌の切り抜きのように見せる
03色はオフホワイトとダークブラウン、差し色のブロンズの3色に絞る
04予約導線は告知バー・ヘッダー・FVのCTAと、1画面に複数置いて常に見える状態にする

再現MDに含まれるもの

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

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

vander-urbani-resort.katapick.md

1---
2title: "Vander Urbani Resort 再現用デザイン仕様書"
3source: https://www.vanderhotel.com/
4katapick: https://katapick.com/sites/vander-urbani-resort
5category: ブランド
6region: 海外 (SI)
7tags: [手書き文字, 大胆なタイポ, 余白, 写真主体, 固定ナビ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# Vander Urbani Resort — 再現用デザイン仕様書
17 
18> ホテルなのに、FVの写真は切手サイズ。リュブリャナのデザインホテルVander Urbani Resortの公式サイトは、大文字の見出しに筆記体の一言を添え、小さな写真を散らすことで、客室の広さより街の空気で選ばせている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22