BrandOverseas / IDPicked 2026.09.26

Tandjung Sari

ブランドのWebデザイン参考 — ホテル（ブティックホテル）

出典: tandjungsarihotel.com

Editor's note — 編集部の視点

ホテルの歴史を、横に流れる絵巻で読ませる。

バリ島サヌールの老舗ホテルTandjung Sariの公式サイトは、1960年代からの物語を写真と文章の横スクロールで綴り、予約より先に宿の時間を伝える。

LeoMotion & Direction

物語のラストに「NEXT PAGE」「KEEP SCROLL」が出て、そのまま次の章へ。映画のエンドロールのあとに続編の予告が流れる感じ！スクロールする手を止めさせない幕引き、最高！

1トップはいきなり「Our Story」。客室の紹介より先に、1960年代からの宿の来歴を読ませる
2左端の細い縦バーにロゴ・メニュー・WhatsAppを集約。写真の面を最大限に残している
3予約ボタンは生成りの地に赤い文字の2つだけ。静かな画面の中で、行き先がはっきり見える

Color

Tandjung Sariの配色

Typography

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

見出し

Aa あア

使用: Adobe Caslon Pro
代替: Libre Caslon Text

本文・ボタン

Aa あア

使用: Helvetica
代替: Inter

補助テキスト

Aa あア

使用: Optima
代替: Belleza

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

特大見出しKatapick 型40px · 1.2 · 400
見出しKatapick 型44px · 1.15 · 400
小見出しKatapick 型35.2px · 1.28 · 400
本文The quick brown fox — 参考を型にする16.5px · 1.6 · 400
ボタンKatapick 型13px · 1 · 400

Structure

ページ構成（上から順）

01
縦ナビ
左端の細い砂色のバーに、珊瑚をかたどったロゴマーク、メニュー、WHATSAPP を縦に配置。SPでは上部のヘッダーに移す。
02
ヒーロー
バリの伝統建築のロビーを写した写真を全面に敷き、中央下に「Our Story」、右上に BOOK ROOM / BOOK TABLE。
03
イントロ
「Initiated in the 1960’s,」の見出しと、珊瑚の写真から生まれたロゴの由来。
04
歴史タイムライン
サヌールの観光の歩みと宿の創業を、写真と短い段落の組で横に並べる。
05
物語の分割レイアウト
写真と文章を左右に分けた面と、写真に文章を重ねた面を交互に置き、文化活動や再生の歴史を綴る。
06
映像
横スクロールの途中に動画を置き、PAUSE / MUTE の操作を添える。
07
NEXT PAGE
最後に「Our Bungalows」への導線と「KEEP SCROLL」の案内を置き、次のページへつなぐ。

Interaction

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

ページ全体が横に並ぶ横スクロール構成（Nuxt + Lenis）。縦ホイールの量を横移動に変換している
末尾の「KEEP SCROLL」は、スクロールし続けると次ページ（Our Bungalows）へ遷移する演出と思われる
BOOK ROOM を押すと、到着日・出発日・人数を選ぶ予約パネルが開く。SPでは予約ボタン2つを画面下に固定
動画は PAUSE / MUTE ボタン付きで、自動再生とミュートを利用者が切り替えられる

スクロールのコマ撮り200–800ms

検出された技術:LenisSwiperNuxt

Reproduce

再現するときのポイント

01見出しは Adobe Caslon Pro（代替 Libre Caslon Text）の細いセリフ、ボタンは Helvetica 系の大文字で字間を広げる
02地は #f1ecde の生成り、ナビは #93836c の砂色、予約の文字は #a62a23 の赤。建物の木と土の色から拾う
03写真の上の文字は、写真全体を少し暗く落として白で乗せる
04横スクロールでも「段落1つ＋写真1枚」を1画面の単位にし、読むリズムを一定に保つ

再現MDに含まれるもの

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

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

tandjung-sari.katapick.md

1---
2title: "Tandjung Sari 再現用デザイン仕様書"
3source: https://www.tandjungsarihotel.com/
4katapick: https://katapick.com/sites/tandjung-sari
5category: ブランド
6region: 海外 (ID)
7tags: [横スクロール, 写真主体, セリフ体, くすみカラー, 固定ナビ, 固定CTA]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# Tandjung Sari — 再現用デザイン仕様書
17 
18> ホテルの歴史を、横に流れる絵巻で読ませる。バリ島サヌールの老舗ホテルTandjung Sariの公式サイトは、1960年代からの物語を写真と文章の横スクロールで綴り、予約より先に宿の時間を伝える。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22