WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 宿泊・観光
  4. 古民家宿るうふ

webcan analyze loof-inn.com

HOTEL & TRAVEL · 山梨県 · PICKED 2026.11.03

古民家宿るうふ宿泊・観光のホームページデザイン参考 — ダーク・明朝体・古民家

古民家宿るうふのトップページ（PC）
PC（1440px）
古民家宿るうふのトップページ（スマホ）
スマホ（375px）
出典：loof-inn.com ↗確認日 2026.11.03
古民家宿るうふ宿泊・観光 · 山梨県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

焚き火を囲む写真の直下に空室検索を置き、宿は目的とエリアから探させる。

山梨県笛吹市に拠点を置く、一棟貸しの古民家宿のサイト。ファーストビューは夜の古民家の前で焚き火を囲む人たちの写真と「時を超える宿へ」のコピーで、すぐ下に日程・人数・施設の検索バーを置いている。山梨・千葉・群馬の宿23件を一覧にして、家族旅や愛犬旅などの目的と、エリアで探せるようにしている。

  1. 01夜の焚き火の写真と大きな明朝体のコピーで、泊まったときの時間をファーストビューで見せている
  2. 02ファーストビューの直下に、日程・人数・施設を選ぶ検索バーを置いている（スマホは「日付から空室を検索する」ボタン）
  3. 03各宿にひとことのコピーと「#囲炉裏料理」「#築120年」などのタグを付けて、違いを文字で比べられるようにしている

3 VIEWPOINTS3つの視点で見る

デザインの視点

夜の古民家で焚き火を囲む写真を全面に使い、白い明朝体で「時を超える宿へ」と載せたファーストビューを真似したい。配色は焦げ茶（#2C1B1E）と淡いグレーに絞り、英字の見出しと明朝体を組み合わせている。

集客の視点

PCは右下に「予約する 当サイトがもっともお得」を固定し、スマホはファーストビューの直下に「日付から空室を検索する」ボタンを置いて、予約への入口をどの画面でも見せている。宿23件を目的別・エリア別で探せる作りも参考になる。

Webディレクターの視点

検索バー、TOPICS、Time of LOOF、Experience、宿の一覧、News、Reservationの順で、知ってから予約するまでを一本の流れにしている。拠点が複数ある会社なら、目的別とエリア別で絞り込める一覧の型を使える。

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線ご予約 / 予約する当サイトがもっともお得
✓LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内

公式サイトで予約する理由を書く

PCの右下に固定した予約ボタンにも、フッターの予約リンクにも「当サイトがもっともお得」と添えている。予約サイトと比べている人に、公式サイトから予約する理由を伝えている。

目的別の入口を用意する

家族旅・3世代旅・大人の仲間旅・愛犬旅・サウナ・露天風呂・企業合宿の丸いボタンと、山梨県・千葉県・群馬県のボタンで絞り込める。宿の名前を知らない人でも探し始められる。

季節の企画をTOPICSに出す

検索バーの次にTOPICSを置き、秋冬限定のサウナ入り放題の早期予約キャンペーンや、ワインのペアリングプランなどを写真つきで並べている。

チェック項目は 2026.11.03 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#2C1B1Eボタン・文字・フッター · ダークブラウン
#F3EEEEセクション背景
#E1E1E1検索バーの背景
#FFFFFF背景
#968C82補助の文字

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文（見出し・本文）
使用フォント
A1明朝
無料で近いもの
Noto Serif JP
用途
英字見出し
使用フォント
cormorant-garamond
無料で近いもの
Cormorant Garamond
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h172.1px / 1001.3064px / 100
h215px / 7001.3315px / 700
h325.2px / 1001.2022.5px / 100
本文（p）14.4px / 5002.5512px / 500
ボタン11.5px / 5002.00—

実測値（PC 1440px・SP 375px、2026.11.03 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    左にロゴとメニューボタン、右にナビと「ご予約」。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    夜の古民家の前で焚き火を囲む写真と「時を超える宿へ」。

    ファーストビュー／全面写真＋コピー型
  3. 03

    空室検索

    宿泊日・人数・施設を選んで検索。スマホは検索ボタン1つ。

    インフォメーション／診療時間・休業日バー型
  4. 04
  5. 05

    Time Of LOOF（古民家宿るうふについて）

    縦書きの英字と文章、のれんの写真。

    コンセプト／写真＋メッセージ型
  6. 06

    Experience of LOOF（るうふでの体験）

    客室・お食事・お風呂とサウナ・おもてなし・体験。

    メニュー・サービス／アイコン／写真グリッド型
  7. 07

    旅の目的・エリアから探す

    目的の丸いボタン8つと、エリアのボタン3つ。

    記事・メディア／カテゴリナビ＋検索型
  8. 08

    LOOF Hotels（宿一覧）

    ひとことのコピー・都道府県・宿名・タグ。

    事例・実績／写真グリッド型
  9. 09
  10. 10

    Reservation（ご予約）

    「当サイトが最もお得です」と案内する。

    行動喚起／電話＋Web予約の2ボタン帯型
  11. 11

    フッター

    ナビ・予約・電話とメール・SNS・言語の切り替え。

    フッター／店舗情報＋ナビ型
古民家宿るうふの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
古民家宿るうふのファーストビュー（PC）PC
古民家宿るうふのファーストビュー（スマホ）SP
03空室検索インフォメーション／診療時間・休業日バー型
古民家宿るうふの空室検索（PC）PC
古民家宿るうふの空室検索（スマホ）SP
04TOPICS記事・メディア／記事カードグリッド型
古民家宿るうふのTOPICS（PC）PC
古民家宿るうふのTOPICS（スマホ）SP
06Experience of LOOF（るうふでの体験）メニュー・サービス／アイコン／写真グリッド型
古民家宿るうふのExperience of LOOF（るうふでの体験）（PC）PC
古民家宿るうふのExperience of LOOF（るうふでの体験）（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.03 以降に撮影したもので、現在の表示とは異なる場合があります。

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01泊まった時間が伝わる写真を1枚選び、ファーストビューの全面に使う
  2. 02ファーストビューの直下に検索バーを置く
  3. 03宿や商品ごとに、ひとことのコピーとタグを付ける
  4. 04公式サイトで申し込む利点を、予約ボタンの近くに書く

FAQよくある質問

古民家宿るうふのサイトで使われているフォントは？

実測では、和文の見出しと本文が A1明朝、英字の見出しが cormorant-garamond です。無料で近づけるなら Noto Serif JP と Cormorant Garamond が代わりになります。

宿が1軒だけでも参考になりますか？

検索バーと一覧は複数の宿があるからこその作りですが、ファーストビューの写真の選び方、公式サイトで予約する理由の書き方、タグで特徴を伝える方法は1軒でも使えます。

どんな業種の参考になりますか？

旅館・貸別荘・グランピングのほか、複数の店舗や施設を持つ事業者で、目的やエリアから選んでもらいたいサイトに応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は古民家宿るうふおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの宿泊・観光の参考サイト

宿泊・観光のすべてを見る8件
webcan design --sitemap loof-inn.com

古民家宿るうふのサイトマップ

  • 251ページ
  • 1ページ内セクション
  • トップページ/
    • るうふでの体験/#featureページ内
  • 古民家宿るうふについて/about-loof/
  • 宿一覧/hotels/
    • 企業合宿/hotels/hotel_theme/company/
    • 家族旅/hotels/hotel_theme/family/
    • 大人の仲間旅/hotels/hotel_theme/friend/
    • 露天風呂/hotels/hotel_theme/open-air/
    • 愛犬旅/hotels/hotel_theme/pet/
    • サウナ/hotels/hotel_theme/sauna/
    • 3世代旅/hotels/hotel_theme/three/
    • 千葉県/hotels/hotels_cat/chiba/
    • 群馬県/hotels/hotels_cat/gunma/
    • 山梨県/hotels/hotels_cat/yamanashi/
  • お知らせ/news/
    • 記事ページ/news/<各ページ>/228件
  • よくある質問/qa/
  • お問い合わせ/contact/
  • 宿泊約款/notice/
  • experience/experience/
    • about/experience/about/
    • bath/experience/bath/
    • food/experience/food/
    • omotenashi/experience/omotenashi/
    • rooms/experience/rooms/

外部リンクInstagram・Facebook・X（旧Twitter）・LINE

2026.11.03 に公開中の sitemap.xmlと、トップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の宿泊・観光施設のサイトを。

「古民家宿るうふのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら