出典：coquelicots.nl ↗ 確認日 2026.10.20
Editor's note
編集部の視点
オーナー夫婦の顔と25件の宿泊者レビューを見せ、トップページのカレンダーから日付を選んで予約を始められる、フランス・ドルドーニュの貸別荘。
フランス南西部ドルドーニュのボーモン＝デュ＝ペリゴールにある一棟貸しの別荘を、オランダの Noteboom 家が紹介するオランダ語のサイト。ファーストビューは家と庭、プールを映した映像（上空からの眺めを含む）で、ヘッダーには「ようこそ。気軽に見て、質問があれば連絡を」という一文と「Boeken（予約）」「Menu」のボタンが常に表示される。続いて「フランスのドルドーニュに恋をした」という見出しとオーナー夫婦の写真、家を買った経緯。宿泊者のレビュー25件を点数・名前・滞在した月つきで並べ、最後に「ここで直接予約」として2か月分のカレンダーを置く。
- 01 予約ボタンをヘッダーに固定し、トップページの中にカレンダーを置いて、日付選びから予約を始められるようにする
- 02 オーナー夫婦の写真と「この土地に恋をした」という経緯で、誰の家に泊まるのかを先に伝える
- 03 宿泊者のレビューを25件、点数・名前・滞在した月つきでそのまま見せる
Conversion
集客の工夫
- 予約ボタンの常設 （あり） ヘッダーに「Boeken（予約）」（PC・SP）
- ページ内の予約カレンダー （あり） 日付の選択・情報の入力・確認の3段階
- 宿泊者のレビュー （あり） 25件（点数・名前・滞在した月）
- オーナーの紹介 （あり） 夫婦の写真と、家を買った経緯
- 所在地の明記 （あり） メニュー内に住所（Rue des Arbrisseaux 557）
- SNS （あり） メニューに Instagram
- 電話・メールのリンク （なし） トップにはなし（Contact へ）
- 言語の切り替え （なし） オランダ語のみ
誰の家に泊まるのかを、先に見せる
ファーストビューの映像のすぐ下は、オーナー夫婦の写真と「フランスのドルドーニュに恋をした」という見出しです。家族でフランスを旅するうちに家を買うことにした、という経緯が短い文章で続きます。一棟貸しの宿は、建物と同じくらい「誰が貸しているのか」が気になるものです。顔と経緯を先に見せることで、知らない家に泊まる不安を減らしています。
口コミを、点数と時期つきで全部見せる
レビューは 25件を、名前・滞在した月・点数つきで並べ、矢印で送って読む作りです。「プールが良かった」「スーパーが歩いて行ける」「2家族でも泊まれる」など、宿泊者の言葉がそのまま設備や立地の説明になっています。2020年から2025年まで時期が書かれているので、続けて人が泊まっていることも伝わります。
読み終えた場所に、カレンダーを置く
ページの最後は「ここで直接予約」として、2か月分のカレンダーと「日付の選択・情報の入力・確認」の3段階を見せています。ヘッダーの「Boeken（予約）」ボタンも常に表示されているので、途中で決めた人も、最後まで読んだ人も、同じページの中で日付選びに進めます。
チェック項目は 2026.10.20 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FDF8F5 背景
- #121D5E ロゴ・予約ボタン（紺）
- #B4CDF0 メニューボタン（水色）
- #ADD5C0 レビュー・予約の背景（ミント）
- #1C402D 見出し・選択内容の欄（深緑）
- #F0E87E 「Alle informatie」ボタン（黄）
- #E8C4BF カレンダーの日付（ピンク）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン | Laca | Nunito Sans |
| 小見出しのラベル（斜体） | Cormorant Garamond | Cormorant Garamond（Google Fonts） |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 70px / 400 | 0.85 | 42px / 400 |
| 本文（p） | 18px / 300 | 1.50 | 16px / 300 |
実測値（PC 1440px・SP 375px、2026.10.20 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー ロゴ、ようこその一文、「予約」と「メニュー」の2つのボタン。上部に固定。メニューを開くと情報・写真・レビュー・連絡先と住所、Instagram。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 家と庭、プールの映像（上空からの眺めを含む）を、角丸の枠いっぱいに。 ファーストビュー／全面動画＋コピー型
- 03 オーナーの紹介 「Familie Noteboom」のラベル、「フランスのドルドーニュに恋をした」の見出しと夫婦の写真、家を買った経緯。 コンセプト／写真＋メッセージ型
- 04 写真 庭・家・プールまわりの写真を不定形の枠で3枚。 一覧／カード並び型
- 05 宿泊者の声 「宿泊者の感想」。名前・滞在した月・点数つきのカードを25件、矢印で送る。 推薦／利用者の声型
- 06 予約 「ここで直接予約」。日付の選択・情報の入力・確認の3段階を示し、2か月分のカレンダーと「選択内容」の欄を並べる。 進め方／番号つきステップ型
- 07 フッター ヒナゲシの絵と大きな屋号、情報・写真・レビュー・連絡先のリンク。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 予約を受ける宿は、予約ボタンをヘッダーに固定し、トップページの中にも日付選びの入口を置く
- 02 誰が運営しているかを、写真と短い経緯で見せる（小さな宿ほど効く）
- 03 口コミは点数・名前・時期を添えて、件数ごと見せる
- 04 予約の流れは「日付→入力→確認」のように段階で示し、今どこにいるかを分かるようにする
FAQ
よくある質問
Coquelicots のサイトで使われているフォントは？
見出しから本文、ボタンまで Laca を使い、「Familie Noteboom」「Onze reviews」などの小さなラベルだけ Cormorant Garamond の斜体にしています。Laca は有料書体なので、無料で近づけるなら Nunito Sans が候補です。Cormorant Garamond は Google Fonts で無料で使えます。
小さな貸別荘でも、サイトに予約の仕組みは要りますか？
Coquelicots はトップページの中にカレンダーを置き、「日付を選ぶ→情報を入力→確認」の順で予約を始められるようにしています。予約サイトに載せている宿でも、自社サイトに日付を選べる入口があると、写真やレビューを見て気持ちが動いたその場で次に進めます。
どんな業種の参考になりますか？
一棟貸しの別荘・民泊・小さな旅館やペンション・グランピングなど、オーナーの顔が見えることが選ばれる理由になる宿泊施設に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はVakantiehuis Coquelicotsおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
