# Tandjung Sari｜ブランドのWebデザイン参考

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

- URL: https://www.tandjungsarihotel.com/
- 解説ページ: https://katapick.com/sites/tandjung-sari
- カテゴリ: ブランド / 地域: 海外（ID）/ 業種: ホテル（ブティックホテル）
- テイスト: 横スクロール、写真主体、セリフ体、くすみカラー、固定ナビ、固定CTA
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

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

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

## 配色
- #f1ecde Coral Sand（背景）
- #93836c Driftwood（縦ナビ背景）
- #a62a23 Lacquer Red（予約ボタンの文字 / 色面）
- #544f45 Warm Umber（テキスト）
- #fffbf2 Frangipani White（ボタン背景）
- #7a1d31 Deep Maroon（アクセント）

## フォント
- 見出し: Adobe Caslon Pro（代替: Libre Caslon Text）
- 本文・ボタン: Helvetica（代替: Inter）
- 補助テキスト: Optima（代替: Belleza）

## よくある質問
### Tandjung Sariのサイトで使われているフォントは？
見出しに Adobe Caslon Pro、本文とボタンに Helvetica、補助的に Optima が使われています。無料で近づけるなら Libre Caslon Text、Inter、Belleza の組み合わせがおすすめです。

### ホテルのサイトで横スクロールの物語ページを作るには？
セクションを横一列に並べたラッパーを画面に固定し、縦スクロール量を translateX に変換します。Lenis などの慣性スクロールを組み合わせ、SPでは縦並びに戻すと読みやすくなります。

### どんな業種の参考になる？
ブティックホテル、旅館、老舗のレストランや酒蔵など、歴史や物語そのものを価値として伝えたい宿泊・観光系のブランドサイトの参考になります。

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