出典：vanderhotel.com ↗ 確認日 2026.10.19
Editor's note
編集部の視点
「公式サイトからの予約が最安値」と画面最上部に常に掲げ、客室・食事・催しの3本柱にそれぞれ予約の入口を置いたリュブリャナのホテル。
スロベニアの首都リュブリャナの中心にあるホテル Vander Hotel（Vander Urbani Resort）のサイト。画面最上部には「公式サイトからの予約なら最安値を保証、特典がつくことも」という帯が常に表示され、その下のヘッダーにホテル・食事・会議と催し・予約・読みもの・私たちの話と「BOOK A ROOM」。ファーストビューは「In the heart of the city」の手書き文字と「WHERE COMFORT MEETS CULTURE」の大見出しに、手描きの楕円で囲んだ「BOOK A ROOM」と、散らばる小さな写真。続いて 01 客室、02 レストラン、03 会議と催しの3つが番号つきで並び、メール登録、屋上テラス・ヨガ・マッサージ、部門ごとの連絡先と営業時間で締める。
- 01 「公式サイトからの予約が最安値」の帯を画面最上部に固定し、予約サイトより直接予約を選ばせる
- 02 客室・レストラン・催しの3つを番号つきで並べ、それぞれに予約・問い合わせのボタンを置く
- 03 ホテル・朝食・レストラン・バー・プールの営業時間を、フッターに施設ごとに書く
Conversion
集客の工夫
- 直接予約の訴求 （あり） 最上部の帯に「Best price is guaranteed when booking directly!」（常に表示）
- 予約ボタンの常設 （あり） 固定ヘッダーに「BOOK A ROOM」（PC）
- 用途別の入口 （あり） 客室・レストラン・会議と催しの3つ（番号つき）
- 部門ごとの予約・問い合わせ （あり） BOOK A ROOM・BOOK A TABLE・SEND INQUIRY
- 営業時間の明記 （あり） ホテル・朝食・レストラン・バー・プールの時間をフッターに
- 電話・メール （あり） tel:リンク 6か所・mailto:リンク 5か所（部門ごと）
- 会社情報 （あり） 運営会社名・住所・登録番号をフッターに
- メール登録のポップアップ （なし） 開いて数秒で、画面を覆うように表示される
公式サイトから予約する理由を、最上部に
画面のいちばん上には「Best price is guaranteed when booking directly! Choosing this option may also include special perks and surprises.（公式サイトからの予約なら最安値を保証、特典がつくことも）」の帯が、スクロールしても消えずに表示されます。予約サイトと比べている人に、公式サイトから予約する理由を料金と特典の両方で示しています。その下のヘッダーにも「BOOK A ROOM」が固定されています。
3つの柱に、それぞれの予約ボタン
ファーストビューの下は「01 客室」「02 レストラン」「03 会議と催し」の3つが番号つきで並びます。客室には「客室を見る」「客室を予約」、レストランには「メニューを見る」「席を予約」、催しには「開催できる催し」「問い合わせる」。泊まる人・食べに来る人・催しを開きたい人が、それぞれ自分の入口で行動できます。ボタンは手描きの楕円で囲まれ、ホテルの気さくな雰囲気と合わせています。
営業時間と連絡先を、施設ごとに
フッターには、ホテル・レストラン・催し・バーの部門ごとに電話とメールが並び、ホテル・朝食・レストラン・バー・プール（夏季）の営業時間が施設ごとに書かれています。運営会社名と住所、登録番号も明記されています。一方、開いて数秒でメール登録のポップアップが画面を覆うように出るため、予約しに来た人の手を止めない出し方（スクロール後に出す、小さく出すなど）を考える余地があります。
チェック項目は 2026.10.19 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F4F2F1 背景
- #353230 見出し・本文・最上部の帯
- #967850 予約・問い合わせパネルの文字（ブラウン）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ナビ（すべて） | Söhne | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 112px / 400 | 1.20 | 61px / 400 |
| h2 | 80px / 400 | 1.00 | 45px / 400 |
| 本文（p） | 17px / 400 | 1.40 | 15px / 400 |
実測値（PC 1440px・SP 375px、2026.10.19 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 直接予約の帯 「公式サイトからの予約なら最安値を保証、特典がつくことも」。画面最上部に固定。 行動喚起／ボタン帯型
- 02 ヘッダー ホテル・食事・会議と催し・予約・読みもの・私たちの話、「BOOK A ROOM」、SNS。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 03 ファーストビュー 手書きの「In the heart of the city」と大見出し、一文の説明、手描きの楕円で囲んだ「BOOK A ROOM」。周りに小さな写真が散らばる。 ファーストビュー／大きな文字型
- 04 01 客室 客室の種類と、中心部の立地・ウェルカムドリンク・アーリーチェックイン／レイトチェックアウト・24時間出入り可の4つ。「客室を見る」「客室を予約」。 機能・強み／左右交互型
- 05 02 レストラン カジュアルな HAUS とアラカルトの2つの店。「メニューを見る」「席を予約」。 機能・強み／左右交互型
- 06 03 会議と催し 誕生日会から商談まで。「開催できる催し」「問い合わせる」。 機能・強み／左右交互型
- 07 メール登録 「JOIN OUR MAILING LIST」。 行動喚起／メール登録型
- 08 屋上テラス・ヨガ・マッサージ 館内の過ごし方と、Instagram のハッシュタグ。 一覧／カード並び型
- 09 フッター ホテル・レストラン・催し・バーの部門ごとの電話とメール、施設ごとの営業時間、運営会社の情報。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 予約サイトにも出している宿は、公式サイトから予約する利点を画面の最上部に書く
- 02 客室・食事・宴会など収入の柱ごとに、専用の予約・問い合わせボタンを置く
- 03 朝食・レストラン・バーなど、施設ごとの営業時間をフッターにまとめる
- 04 問い合わせ先を部門ごとに分けて、電話とメールのリンクを並べる
FAQ
よくある質問
Vander Hotel のサイトで使われているフォントは？
見出しから本文、ナビまで Söhne 1書体で、大見出しはすべて大文字にしています。「In the heart of the city」の手書き文字は画像です。Söhne は有料なので、無料で近づけるなら Inter が候補です。
宿のサイトで、予約サイトより公式サイトから予約してもらうには？
Vander Hotel は「公式サイトからの予約なら最安値を保証、特典がつくことも」という一文を、画面最上部の帯に常に表示しています。料金と特典の両方で直接予約の理由を示すのが要点です。日本の宿でも、公式サイト限定の特典や価格を最初の画面で伝えると効果的です。
どんな業種の参考になりますか？
レストランや宴会場を併設したホテル・旅館、結婚式場など、宿泊・食事・催しの複数の売り上げの柱を持つ施設に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はVander Hotelおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
