出典：tandjungsarihotel.com ↗ 確認日 2026.11.01
Editor's note
編集部の視点
「客室の予約」と「席の予約」の2つのボタンを常に見せ、食事の予約は WhatsApp で受けるバリ島サヌールの家族経営のホテル。
バリ島サヌールのビーチ沿いにあるホテル Tandjung Sari のサイト。ファーストビューはバリの建築のロビーの写真に「Our Story」の文字だけ。PC は右上、スマホは画面の下に「BOOK ROOM（客室を予約）」と「BOOK TABLE（席を予約）」が常に出る。客室は到着日・出発日・大人・子どもを入れて「CHECK RATES」で自社の予約ページへ進み、席の予約は WhatsApp で受ける。トップは1960年代からの物語で、創業者一家が1962年に友人のために4棟のバンガローを持ったこと、1987年に設立した財団が地域の子どもに舞踊を教えていること、今も Wawo-Runtu 家が営んでいることを順に語る。
- 01 「客室を予約」と「席を予約」を分けて常に表示し、泊まる人と食べに来る人の両方に入口を用意する
- 02 客室は日付と人数を入れて自社の予約ページへ、席の予約は WhatsApp で受けると、手段を使い分ける
- 03 創業からの歩み・家族経営・地域の舞踊の継承を、トップで物語として順に語る
Conversion
集客の工夫
- 予約ボタンの常設 （あり） PC は右上、スマホは画面下に「BOOK ROOM」「BOOK TABLE」
- 直接予約 （あり） 到着日・出発日・大人・子どもを入れて「CHECK RATES」
- 食事の予約 （あり） 「BOOK TABLE」は WhatsApp につながる
- WhatsApp （あり） PC は左の縦帯に「WHATSAPP」
- 客室タイプ （あり） メニューに6種類のバンガロー
- アクセス （あり） Getting Here に住所・空港まで16km・ウブドなどへの所要時間
- 電話・メール （あり） Getting Here に電話とメール（トップは mailto 1か所）
- メール登録 （あり） 下層ページの下に「JOIN US」
「泊まる」と「食べる」の入口を分ける
PC では右上に、スマホでは画面の下に 「BOOK ROOM（客室を予約）」と「BOOK TABLE（席を予約）」 が常に出ています。宿泊する人と、レストランだけを使う人の両方に、それぞれの入口があります。どこまで読み進めても、予約のボタンは画面から消えません。
予約の手段を、目的で使い分ける
「BOOK ROOM」を押すと到着日・出発日・大人・子どもを選ぶパネルが開き、「CHECK RATES」で自社の予約ページへ進みます。一方「BOOK TABLE」は WhatsApp につながり、メッセージで席を予約します。客室は空き状況と料金を確かめたい、食事は気軽に聞きたい、という違いに合わせた作りです。PC の左の縦帯にも「WHATSAPP」があります。
歴史と家族経営を、物語として語る
トップは「Our Story」の物語です。創業者一家が1962年に友人のための4棟のバンガローを持ったこと、1987年に設立した財団が 地域の子どもに舞踊を教え、月2回の公演を続けている こと、今も Wawo-Runtu 家が営んでいることが、年号つきで順に語られます。設備の説明より先に、この宿がどんな場所かを伝えています。
チェック項目は 2026.11.01 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F1ECDE 背景（生成り）
- #93836C 左の縦帯・予約パネルのボタン（灰茶）
- #A62A23 ロゴ・予約ボタンの文字（赤）
- #544F45 本文
- #FFFBF2 予約ボタンの面
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し | Adobe Caslon Pro | Libre Caslon Text |
| 本文・ボタン | Helvetica | Arimo |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 40px / 400 | 1.20 | 29px / 400 |
| h2 | 44px / 400 | 1.15 | 29px / 400 |
| h3 | 35px / 400 | 1.28 | 27px / 400 |
| 本文（p） | 17px / 400 | 1.60 | 12px / 400 |
実測値（PC 1440px・SP 375px、2026.11.01 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー PC は左の縦帯にロゴ・メニュー・WHATSAPP、右上に予約の2ボタン。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー バリの建築のロビーの写真に「Our Story」の文字だけ。 ファーストビュー／全面写真＋コピー型
- 03 客室の予約パネル 「BOOK ROOM」で開く。到着日・出発日・大人・子どもを入れて「CHECK RATES」。 行動喚起／ボタン帯型
- 04 1960年代からの物語 ロゴの由来、サヌールの観光の始まり、1962年に4棟のバンガローから始まったこと。 コンセプト／写真＋メッセージ型
- 05 考え方の一文 「訪れる人はバリとの親しさを求めていた」と大きく。 メッセージ／大きな一文型
- 06 文化と財団 1987年設立の財団、地域の子どもへの舞踊のレッスンと月2回の公演。 コンセプト／写真＋メッセージ型
- 07 その後の歩み 改装、50周年の本、55周年のドキュメンタリー、今も家族で営んでいること。 コンセプト／写真＋メッセージ型
- 08 バンガローへ 次のページ「Our Bungalows」へ続く。 一覧／カード並び型
- 09 予約ボタン（スマホ） 画面下に「BOOK ROOM」「BOOK TABLE」を常に表示。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 宿泊と食事の両方を受ける宿は、予約ボタンを2つに分けて常に表示する
- 02 客室は日付と人数から料金を見られる自社の予約ページへ、食事は電話や LINE など気軽な手段へ、と使い分ける
- 03 創業の経緯・家族経営・地域との関わりは、年号を入れて物語として順に書く
- 04 アクセスのページには、空港や主な観光地までの距離と所要時間を並べる
FAQ
よくある質問
Tandjung Sari のサイトで使われているフォントは？
見出しは Adobe Caslon Pro、本文とボタンは Helvetica です。無料で近づけるなら、見出しに Libre Caslon Text、本文に Arimo が候補です。
予約サイト（OTA）があるのに、自社の予約ボタンは必要ですか？
Tandjung Sari は「BOOK ROOM」から日付と人数を入れて、自社の予約ページで料金を確かめられるようにしています。自社サイトに来た人をそのまま予約まで進ませる入口として、ボタンを常に見える場所に置いています。
どんな業種の参考になりますか？
旅館・ホテル・オーベルジュなど、宿泊とレストランの両方を持つ宿に向きます。歴史のある家族経営の店が、創業からの歩みを伝える作りとしても参考になります。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はTandjung Sariおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
