出典：fragsburg.com ↗ 確認日 2026.10.27
Editor's note
編集部の視点
予約・問い合わせ・ギフト券の3つを画面の右に縦に並べ、期間限定のプランを料金つきで見せる、南チロルの20室のホテル。
イタリア・南チロルのメラーノの上の丘に建つホテル Castel Fragsburg のサイト。ファーストビューは左半分に森のブランコの写真、右にロゴと小さな写真、「20 unique suites nestled on a private hill（私有の丘に20のスイート）」の一文。画面の右端には「BOOK（予約）」「ENQUIRE（問い合わせ）」「VOUCHER（ギフト券）」と言語の切り替えが縦に並ぶ。続いてスイート・城の歴史・料理・スパ・庭・結婚式の6つの話題を写真で切り替え、期間限定のプランを料金つきで載せる。メニューを開くと、問い合わせフォームと電話番号も出てくる。
- 01 予約・問い合わせ・ギフト券の3つを画面の右端に縦に並べ、いつでも押せるようにする
- 02 「20のスイート」と部屋数を最初の一文に入れ、小さな宿であることを伝える
- 03 期間限定のプランを、日付と「415€から」の料金つきで見せる
Conversion
集客の工夫
- 予約の導線 （あり） 右端に BOOK・ENQUIRE・VOUCHER を縦に並べる
- 料金の目安 （あり） 期間限定のプランに「415€から」（2泊・1人あたり、2026年10月時点）
- ギフト券 （あり） VOUCHER の入口をファーストビューに
- 問い合わせフォーム （あり） メニューの中にフォームと電話番号
- 電話・メール （あり） tel:リンク 4か所・住所とメールを明記
- 言語の切り替え （あり） ドイツ語・イタリア語・英語
- 第三者の評価 （あり） 写真に Relais & Châteaux のマーク
- アクセシビリティ （あり） 画面左下に文字の大きさなどを変えるメニュー
3つのボタンを、画面の右端に縦に並べる
ファーストビューの右端には 「BOOK（予約）」「ENQUIRE（問い合わせ）」「VOUCHER（ギフト券）」が縦に並んでいます。すぐ泊まりたい人、相談したい人、誰かに贈りたい人と、目的の違う3つの入口を同じ重さで置いています。メニューを開くと各ページへのリンクに加えて、問い合わせフォームと電話番号も出てきます。
部屋数を、最初の一文に入れる
写真の横の一文は「20 unique suites nestled on a private hill（私有の丘に20のスイート）」です。部屋数と立地を最初に伝えることで、大きなホテルではない静かな宿だと分かります。続いてスイート・城の歴史・料理・スパ・庭・結婚式の6つの話題を、写真で順に切り替えて見せています。
プランは、日付と料金つきで見せる
トップには期間限定のプランが1つあり、割引の内容と期間、「415€から（2泊・1人あたり）」の料金 をそのまま書き、「Details & booking（詳細と予約）」につないでいます。高級な宿でも料金の目安が分かることで、予約を考える人が次の一歩を踏み出しやすくなります。
チェック項目は 2026.10.27 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #313130 見出し・本文・ナビ
- #EAE7E2 紹介文とプランの面（淡いベージュ）
- #8E8E8E 補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（すべて） | New Baskerville（Roman・Italic） | Libre Baskerville |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | — | — | 17px / 400 |
| h3 | — | — | 15px / 400 |
| 本文（p） | 19px / 400 | 1.63 | 15px / 400 |
| ボタン | 15px / 400 | 1.40 | — |
実測値（PC 1440px・SP 375px、2026.10.27 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー PC は左にメニューボタン、中央にロゴ、右端に予約・問い合わせ・ギフト券・言語を縦に。メニューを開くと各ページと問い合わせフォーム。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 左半分に森のブランコの写真、右にロゴと小さな写真、「私有の丘に20のスイート」の一文。 ファーストビュー／文字＋画像の左右分割型
- 03 ホテルの紹介 「Luxury hideaway and soul retreat.」と、メラーノを見下ろす丘と5万平方メートルの庭の説明。 コンセプト／写真＋メッセージ型
- 04 6つの話題 スイート・城の歴史・料理・スパ・庭・結婚式を写真で切り替える。 入口／カテゴリ別スライド型
- 05 料理 自家菜園 Fragsburg Soul Garden で採れた食材を使う料理。 コンセプト／写真＋メッセージ型
- 06 スパ ハーブの知恵をもとにしたスパ Castellum Natura。 コンセプト／写真＋メッセージ型
- 07 期間限定のプラン 日付・割引・「415€から」の料金と、「詳細と予約」「すべてのプラン」。 行動喚起／ボタン帯型
- 08 ホテルの考え方 癒やし・夢・喜びの3つの言葉と、ホテルの考え方への入口。 コンセプト／写真＋メッセージ型
- 09 フッター 住所・電話・メール、会社概要と個人情報の方針。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 予約・問い合わせ・ギフト券など、目的の違うボタンを並べて常に見せる
- 02 部屋数や立地など、小さな宿の特徴を最初の一文に入れる
- 03 期間限定のプランは、日付と料金を書いてそのまま予約につなぐ
- 04 部屋・料理・スパ・庭など、泊まる理由を写真で順に見せる
FAQ
よくある質問
Castel Fragsburg のサイトで使われているフォントは？
見出しから本文、ボタンまで New Baskerville の Roman と Italic で組んでいます。有料書体なので、無料で近づけるなら Libre Baskerville が候補です。
宿のサイトに、ギフト券の入口は必要ですか？
Castel Fragsburg は予約・問い合わせと並べて、ギフト券の入口を最初の画面に置いています。泊まる本人だけでなく、贈りたい人にも入口を用意することで、予約とは別の売り上げの道ができます。
どんな業種の参考になりますか？
部屋数の少ない旅館やオーベルジュ、料理やスパに力を入れた宿、結婚式を受ける宿泊施設に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はCastel Fragsburgおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
