ワイヤーDL古民家宿るうふ
焚き火を囲む写真の直下に空室検索を置き、宿は目的とエリアから探させる。
webcan analyze bluesquare-echizen.com
HOTEL & TRAVEL · 福井県 · PICKED 2026.11.08
BLUE SQUARE宿泊・観光のホームページデザイン参考 — 海の写真・大きな欧文ロゴ・縦書き
出典：bluesquare-echizen.com ↗確認日 2026.11.08
EDITOR'S NOTE編集部の視点
海の写真1枚と大きな欧文ロゴで見せ、予約ボタンは画面の右下に固定する。
福井県の越前海岸にある海沿いのヴィラのサイト。ファーストビューは海とテラスの写真の上に白い大きな欧文ロゴと縦書きのコピーを重ね、左下にお知らせ、右下に「ご予約はこちらから」を置いている。下に進むと、立地・眺め・サウナ・プライベートの4つの特徴、周辺の楽しみ方、3タイプの客室の紹介、設備の一覧が続く。
- 01ファーストビューの全面に海の写真を敷き、白い大きな欧文ロゴ「BLUE SQUARE」と縦書きのコピーを重ねている
- 02「ご予約はこちらから」をPC・スマホとも画面の下に固定している
- 03客室を BONDI・PALM・MANLY の3タイプに分け、それぞれ写真のスライドと「空室状況を確認する」ボタンをつけている
3 VIEWPOINTS3つの視点で見る
デザインの視点
ファーストビューの全面に海の写真を敷き、白い大きな欧文ロゴを重ねている。右下の「ご予約はこちらから」と左下のお知らせの帯は小さく控えめにして、写真を邪魔しない。写真1枚で宿の魅力を伝え、予約ボタンの位置を固定する作りが真似できる。
集客の視点
ヘッダーに電話のリンクがあり、PC・スマホとも画面の下に「ご予約はこちらから」を固定している。ファーストビューのお知らせ欄で旅行メディアでの紹介を知らせ、客室ごとに「空室状況を確認する」を置く。写真と予約の入口を両立させる作りが参考になる。
Webディレクターの視点
ファーストビューの下端にお知らせと予約ボタンを置き、特徴4項目、客室3タイプ、設備の一覧の順に見せている。客室ごとに紹介を分ける構成は真似しやすい一方、写真の点数が多いので撮影の準備が必要になる。
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線ご予約はこちらから / 宿泊のご予約
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
予約ボタンを常に見せる
PCでは画面右下、スマホでは画面下の全幅に「ご予約はこちらから」を固定している。写真を見ている途中でも、すぐに予約に進める。
客室ごとに空室確認へつなぐ
3つの客室タイプそれぞれに、写真と紹介文、「空室状況を確認する」ボタンを置いている。気に入った部屋から直接空室を調べられる。
メディア掲載をファーストビューで知らせる
ファーストビューの左下のお知らせ欄に、旅行メディアで紹介されたことを日付つきで出している。初めて見る人に、第三者からの紹介を最初に伝えられる。
チェック項目は 2026.11.08 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景・ロゴ
#F2F3F4セクション背景 · ライトグレー
#113E70予約ボタン · ネイビー
#2A5A8Eスライドの矢印・差し色 · ブルー
#212123本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 欧文ロゴ・見出し
- 使用フォント
- Cetra Display Pro
- 無料で近いもの
- Cormorant / Marcellus
- 用途
- 和文見出し・本文
- 使用フォント
- 秀英角ゴシック銀（Adobe Fonts）
- 無料で近いもの
- Noto Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 30px / 500 | 1.03 | 25px / 500 |
| h2 | 72px / 400 | 1.00 | 44px / 400 |
| h3 | 28px / 500 | 1.15 | 20px / 500 |
| 本文（p） | 15px / 400 | 1.68 | 12px / 400 |
| ボタン | 14px / 400 | 1.50 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.11.08 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
FAQ よくある質問
よくある質問／アコーディオン型 - 08
ACCESS アクセス
アクセス／地図＋時間表型 - 09
NEWS お知らせ
お知らせ／お知らせ一覧型 - 10
- 11
フッター
フッター／店舗情報＋ナビ型 - 12
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.08 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01ファーストビューは景色の写真1枚と大きなロゴで見せ、予約ボタンは画面の下に固定する
- 02宿の特徴を4つに絞り、写真と短い見出しで1つずつ見せる
- 03客室タイプごとに写真と空室確認のボタンをつける
- 04設備と備品をリストで一覧にして、問い合わせを減らす
FAQよくある質問
BLUE SQUARE のサイトで使われているフォントは？
欧文のロゴと見出しに Cetra Display Pro、和文に Adobe Fonts の秀英角ゴシック銀を使っています。無料で近づけるなら、欧文に Marcellus や Cormorant、和文に Noto Sans JP が使えます。
宿のサイトで、予約ボタンはどこに置けばよいですか？
BLUE SQUARE はPCでは画面右下、スマホでは画面下の全幅に「ご予約はこちらから」を固定し、さらに客室ごとに「空室状況を確認する」を置いています。写真を見て気持ちが動いたときに、すぐ押せる位置にあることが大切です。
どんな業種の参考になりますか？
一棟貸しの宿・グランピング・貸別荘のほか、景色や空間そのものが売りになるカフェやレンタルスペースなどに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はBLUE SQUAREおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの宿泊・観光の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の宿泊・観光施設のサイトを。
「BLUE SQUAREのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。