出典：lingers.it ↗ 確認日 2026.10.22
Editor's note
編集部の視点
16室だけのブドウ畑の宿。客室ごとに広さ・人数・朝食込みの料金と予約ボタンを並べ、日付つきの予約欄を画面の隅に残し続ける南チロルのホテル。
イタリア北部・南チロルのブドウ畑の中に建つ、スイートとアパートメント16室だけの B&B「Lingers Suites & Residence」のサイト。ファーストビューは客室・ラウンジ・テラスの写真を全面で切り替えるだけで、文字はロゴのみ。スクロールすると画面の左下に到着日・出発日と「ENQUIRE（問い合わせ）」「BOOK（予約）」の欄が残り続ける。トップには「Best price guarantee for direct bookings（直接予約の最安値保証）」を置き、客室は広さ・人数・朝食込みの1人あたり料金を書いたうえで、部屋ごとに問い合わせと予約のボタンをつけている。
- 01 到着日・出発日を入れる予約欄を画面の隅に固定し、どこを読んでいても日付から空室を探せる
- 02 「直接予約の最安値保証」を掲げ、予約サイトではなく自社サイトで予約する理由をつくる
- 03 客室ごとに広さ・人数・朝食込みの料金と、問い合わせ・予約の2つのボタンを並べる
Conversion
集客の工夫
- 直接予約の特典 （あり） 「Best price guarantee for direct bookings」をトップに
- 日付つきの予約欄 （あり） 画面左下に到着日・出発日と ENQUIRE / BOOK を固定
- 客室ごとの料金 （あり） 朝食込み1人あたり €115〜€159 を3タイプで
- 客室ごとのボタン （あり） 各客室に ENQUIRE と BOOK
- 気軽な問い合わせ （あり） 「MAKE A NON-BINDING ENQUIRY（拘束力のない問い合わせ）」
- 電話の受付時間 （あり） 毎日8時〜19時と明記、tel:リンク 4か所
- 言語の切り替え （あり） ドイツ語・イタリア語・英語
- 地図 （なし） トップは住所のみ（Location & arrival のページへ）
日付から探せる予約欄を、画面に残し続ける
ファーストビューは客室やテラスの写真を全面で切り替えるだけで、文字はロゴしかありません。そのかわり、スクロールすると画面の左下に 到着日・出発日と「ENQUIRE（問い合わせ）」「BOOK（予約）」の欄が固定されます。食事やプールの紹介を読んでいる途中でも、日付を選んでそのまま空室を探せる作りです。
自社サイトで予約する理由を、最初に書く
トップには「Best price guarantee for direct bookings（直接予約の最安値保証）」の一文があります。予約サイトで見つけて公式サイトを確かめに来た人に、ここで予約すれば一番安いと伝えることで、手数料のかからない直接予約へ誘導しています。
部屋ごとに、料金とボタンまで並べる
客室の欄では、3つのタイプを「約29〜32㎡・1〜2名・朝食込み1人あたり€115〜」のように、広さ・人数・料金まで書いて並べています。各カードには問い合わせと予約の2つのボタンがあり、さらに下には「拘束力のない問い合わせ」の入口も用意されています。すぐ予約したい人と、まず聞いてみたい人の両方に道があります。電話は毎日8時〜19時の受付と明記されています。
チェック項目は 2026.10.22 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F7F7F7 背景
- #777162 見出し・本文・問い合わせボタン
- #C4BFB6 予約ボタン
- #FFFFFF 写真の上の文字・ロゴ
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し（大文字）・ロゴまわり | Cinzel | Cinzel（Google Fonts） |
| 本文・ボタン | Cormorant Garamond | Cormorant Garamond（Google Fonts） |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 9px / 400 | 1.20 | 10px / 400 |
| h2 | 9px / 400 | 1.00 | 10px / 400 |
| 本文（p） | 22px / 400 | 1.40 | 16px / 400 |
| ボタン | 10px / 400 | 1.40 | 8px / 400 |
実測値（PC 1440px・SP 375px、2026.10.22 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左にメニュー、中央にロゴ、右に電話などのアイコンと言語切替。上部に固定。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 客室・ラウンジ・テラス・ブドウ畑の写真を全面で切り替える。文字はロゴだけ。 ファーストビュー／全面写真＋コピー型
- 03 私たちについて 「Linger a little longer」と、ブドウ畑の中の16室の B&B であること。直接予約の最安値保証もここに。 コンセプト／写真＋メッセージ型
- 04 食事 ゆっくり食べる朝食と、宿泊者だけの昼のバー。夜は近くのレストランへ。 コンセプト／写真＋メッセージ型
- 05 周辺での過ごし方 ハイキング・自転車・南チロルのワイン・地元の祭り。 コンセプト／写真＋メッセージ型
- 06 雑誌での紹介 「RECOMMENDED BY」として、雑誌で新しい宿として選ばれたことを引用つきで。 信頼／ロゴ帯型
- 07 ウェルネス 屋外プール・ジャグジー・庭。ブドウ畑と山を望む。 コンセプト／写真＋メッセージ型
- 08 客室 3タイプを広さ・人数・朝食込みの1人あたり料金つきで。各カードに問い合わせと予約のボタン。 一覧／カード並び型
- 09 オーナーの言葉 経営者 Peter Linger のひと言。 メッセージ／大きな一文型
- 10 問い合わせ 「拘束力のない問い合わせ」へのボタン。 行動喚起／ボタン帯型
- 11 写真ギャラリー 館内と周辺の写真。 入口／カテゴリ別スライド型
- 12 メール登録 敬称・名前・メールで登録するニュースレター。 行動喚起／メール登録型
- 13 フッター 住所・電話の受付時間・メール・付加価値税番号・言語切替。 フッター／ナビ＋会社情報型
- 14 予約欄（常時表示） 画面の左下に到着日・出発日と、問い合わせ・予約のボタンが残り続ける。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 宿や予約制の店は、日付を選べる予約欄を画面の隅に固定し、どのページからでも空きを探せるようにする
- 02 予約サイト経由より自社サイトで予約する利点（最安値・特典）を、トップではっきり書く
- 03 部屋やプランごとに広さ・人数・料金を書き、その場で問い合わせ・予約できるボタンをつける
- 04 「まだ決めていない人」向けに、気軽に送れる問い合わせの入口を予約ボタンと並べて置く
FAQ
よくある質問
Lingers のサイトで使われているフォントは？
見出しは大文字のローマン体 Cinzel、本文とボタンは Cormorant Garamond です。どちらも Google Fonts で無料で使えます。
宿のサイトで「直接予約の特典」を書く意味は？
予約サイトで宿を見つけた人も、公式サイトを確かめに来ることがよくあります。Lingers はそこで「直接予約の最安値保証」を示し、公式サイトで予約する理由をはっきりさせています。手数料のかからない直接予約を増やすための一言です。
どんな業種の参考になりますか？
旅館・民宿・ペンション・一棟貸しの宿など、部屋数が少なく直接予約を増やしたい宿泊施設に向きます。日付つきの予約欄は、予約制の体験やレンタルスペースにも使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はLingersおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
