出典：maisonlesgrandschenes.com ↗ 確認日 2026.10.24
Editor's note
編集部の視点
丸い「予約」ボタンを画面に浮かべ続け、4部屋・周辺の観光地までの距離・くつろぎの設備を短い文で伝える、フランスの民宿。
フランス南西部ペリゴール・ノワールの森の中にある、家族経営の民宿 Les Grands Chênes のサイト。ファーストビューは中央の手書き風のロゴと、森に建つ平屋の写真。右上には茶色の丸い「Réserver（予約）」ボタンがあり、スクロールしても画面に残る。トップは森・家・部屋・周辺の発見・くつろぎの5つの話を短い文で続け、ラスコー洞窟まで7km、サルラまで20kmと距離で場所を伝える。部屋のページでは2種類の部屋の広さ・ベッド・設備を並べ、部屋ごとに予約ボタンがある。
- 01 丸い予約ボタンを画面に浮かべ続け、どこまで読んでもすぐ予約に進めるようにする
- 02 有名な観光地までの距離を数字で書き、場所の分かりにくさを解消する
- 03 部屋のページで広さ・ベッドの大きさ・設備を並べ、部屋ごとに予約の入口を置く
Conversion
集客の工夫
- 予約ボタンの固定 （あり） PC・SP とも丸い「Réserver」が画面に残る
- 予約の仕組み （あり） 外部の予約システム（Reservit）につながる
- 部屋の情報 （あり） 4部屋、17㎡と25㎡の2種類、設備の一覧
- 周辺の案内 （あり） ラスコー洞窟7km・サルラ20km・レゼジー17km
- くつろぎの設備 （あり） プール・トリートメント・ヨガ・自転車の貸出
- 言語の切り替え （あり） FR / EN
- 連絡先 （あり） フッターに住所・電話・メール
- 料金の表示 （なし） トップと部屋のページにはなし
予約ボタンを、ずっと画面に浮かべておく
右上の 茶色の丸い「Réserver（予約）」ボタンは、PC でもスマホでもスクロールしても画面に残ります。生成りの背景の上で目立つ茶色で、押すと外部の予約システムにつながります。
場所を、観光地までの距離で伝える
「ペリゴール・ノワールの森の中」と言われても、行ったことのない人には場所が分かりません。トップの「発見」の段落では、ユネスコの世界遺産に登録された谷にあること、ラスコー洞窟まで7km、サルラまで20km、レゼジーまで17km と、知られた場所からの距離で伝えています。住所より先に旅の計画が立てやすくなる書き方です。
部屋の違いを、数字で並べる
部屋のページには「クラシック」17㎡・ベッド160×200と「スーペリア」25㎡・ベッド180×200の2種類が並び、庭への出入口・エアコン・コーヒーと紅茶などの設備が一覧になっています。部屋ごとに「この部屋を予約」のボタン があり、比べたらそのまま予約に進めます。朝食は地元の有機食材でつくると書かれています。
チェック項目は 2026.10.24 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F0ECE6 背景（生成り）
- #343636 見出し・本文
- #E0D4C4 淡いベージュの面
- #A69481 写真まわりの中間色
- #704E32 予約ボタン（茶）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 紹介文・見出しの本文 | EB Garamond | EB Garamond（Google Fonts） |
| ナビ・小見出し・ラベル（大文字） | Courier | Courier Prime |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 12px / 400 | 1.38 | 12px / 400 |
| h2 | 12px / 400 | 1.38 | 12px / 400 |
| 本文（p） | 12px / 400 | 1.38 | 12px / 400 |
実測値（PC 1440px・SP 375px、2026.10.24 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 中央にナビ3つ、右に FR / EN。その下に手書き風の大きなロゴと「家族経営の民宿」の一文。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 森の中の平屋の写真に、宿を紹介する一文を重ねる。 ファーストビュー／全面写真＋コピー型
- 03 森 樫の樹皮の線画を添えて、森についての短い文。 メッセージ／大きな一文型
- 04 家 自然と調和する建物の紹介。 コンセプト／写真＋メッセージ型
- 05 部屋 森と草原に開いた4つの部屋。 コンセプト／写真＋メッセージ型
- 06 周辺の発見 ユネスコの世界遺産の谷にあり、ラスコー洞窟まで7km、サルラまで20km。 コンセプト／写真＋メッセージ型
- 07 くつろぎ プール・トリートメント・ヨガ・自転車。 コンセプト／写真＋メッセージ型
- 08 フッター 住所・電話・メール・Instagram と、制作者のクレジット。 フッター／ナビ＋会社情報型
- 09 予約ボタン（常時表示） 右上の茶色の丸い「Réserver」がスクロールしても残る。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 宿や店の予約ボタンは、スクロールしても画面に残るようにする
- 02 場所は住所だけでなく、有名な観光地や駅からの距離で書く
- 03 部屋や席の種類ごとに、広さ・定員・設備を並べて予約の入口を置く
- 04 小さな宿は伝えることを絞り、短い文と写真を交互に並べる
FAQ
よくある質問
Les Grands Chênes のサイトで使われているフォントは？
紹介文や見出しの本文に EB Garamond、ナビやラベルにタイプライター風の Courier を使っています。EB Garamond は Google Fonts で無料、Courier の代わりには無料の Courier Prime が使えます。
小さな宿のサイトに、予約ボタンの固定は必要ですか？
宿のサイトは写真や文章を読み進めるうちに泊まりたくなる人が多いため、その時に予約ボタンが見えていることが大切です。Les Grands Chênes は丸いボタンを画面の右上に浮かべ続け、どこからでも予約に進めるようにしています。
どんな業種の参考になりますか？
民宿・旅館・一棟貸しの宿、グランピング施設、郊外のレストランなど、場所の魅力で選ばれ、予約が来店の入口になる事業に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はLes Grands Chênesおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
