ワイヤーDL乗鞍すもも荘
不定形に切り抜いた写真と滞在者の声で、「住む」でも「泊まる」でもない“すこし暮らす”を具体的に想像させる。
webcan analyze www.unzen-mikado.net
HOTEL & TRAVEL · 長崎県 · PICKED 2026.10.30
雲仙みかどホテル宿泊・観光のホームページデザイン参考 — 温泉旅館・金色・予約導線
出典：www.unzen-mikado.net ↗確認日 2026.10.30
EDITOR'S NOTE編集部の視点
金色の「宿泊予約」ボタンと空室検索の帯、スマホの下の固定メニューで、どこからでも予約に進めるホテルのサイト。
長崎県南島原市のホテルのサイト。ファーストビューは料理や温泉の写真を全面に敷き、上部に料理・客室・温泉などのナビと金色の「宿泊予約」ボタンを置いている。新着情報、空室検索の帯、LINE とメルマガの登録のバナー、樹齢約800年の銘木の門の紹介、料理・客室・温泉・サウナの紹介、売店、館内施設・周辺観光・アクセスの3枚のカード、Instagram、おすすめプランの順に続く。
- 01ヘッダーの金色の「宿泊予約」ボタンと、ページ上部の金色の空室検索の帯で、予約の入口をくり返し見せている
- 02料理・客室・温泉・サウナを、大きな写真と縦書きの見出し、金色の頭文字の小見出しの同じ型で並べている
- 03温泉の紹介の中に、入浴をお断りしている項目をアイコンつきで6つ並べている
3 VIEWPOINTS3つの視点で見る
デザインの視点
ファーストビューは写真を全面に敷き、上にナビと金色の「宿泊予約」ボタンを置いている。料理・客室・温泉・サウナを大きな写真と縦書きの見出しで順に見せ、金色を予約の帯と見出しの頭文字にだけ使って、写真の色を引き立てている。
集客の視点
ヘッダーに「宿泊予約」ボタンを置き、ファーストビューには予約サイトとの最安値を比べる「料金比較」の枠を重ねて、そのまま予約へ誘導している。スマホでは画面下に「TOP・TEL・ACCESS・宿泊予約・MENU」の5つが並ぶ固定バーがあり、片手で電話も予約もできる。
Webディレクターの視点
新着情報のすぐ下に空室検索の帯を置いて予約へ進ませ、その後に料理・客室・温泉・サウナを写真つきの同じ型で並べている。LINE とメルマガの登録も帯で案内している。予約の入口を上部に置く点と、章ごとに同じ型を繰り返す構成が真似しやすい。
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 2か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線宿泊予約Reservation / 検索・ご予約
✓LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
スマホは画面の下に予約と電話を固定する
スマホでは画面の下に TOP・TEL・ACCESS・宿泊予約・MENU の5つのボタンを固定している。どこまで読み進めても、電話と予約にすぐ進める。
ページの上部で空室を検索させる
新着情報のすぐ下に、チェックイン日・泊数・人数・部屋数を選んで検索できる帯を置き、航空券付き・新幹線付きなどのプランや予約確認・変更・キャンセルへのリンクも並べている。日程が決まっている人を、すぐに予約へ進ませる。
断ることを先に伝える
温泉の紹介に「ご利用の前に」の枠を設け、タトゥーのある方の入浴や動物の持ち込みなど、お断りしている6つの項目をアイコンで見せている。予約の後の行き違いを、予約の前に防げる。
チェック項目は 2026.10.30 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#B69541予約ボタン・空室検索の帯・見出しの頭文字 · ゴールド
#D0BA83帯・飾りの淡い色 · ライトゴールド
#EEEDEB紹介ブロックの背景 · ベージュグレー
#FFFFFFベースの背景 · ホワイト
#313131本文の文字 · チャコール
#9E1F36スマホのメニューボタン（差し色） · えんじ
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 和文の明朝
- 使用フォント
- Noto Serif JP
- 無料で近いもの
- Noto Serif JP
- 用途
- 英字
- 使用フォント
- Manrope
- 無料で近いもの
- Manrope
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 16px / 400 | 2.00 | 16px / 400 |
| h3 | 28px / 700 | 1.50 | 22px / 700 |
| 本文（p） | 16px / 400 | 1.00 | 16px / 400 |
| ボタン | 0px / 400 | NaN | 0px / 400 |
実測値（PC 1440px・SP 375px、2026.10.30 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
PARTSパーツ別に見る
PC
SP
PC
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.30 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01予約ボタンはブランドの色で塗り、ヘッダーとページ上部の両方に置く
- 02スマホは画面の下に電話・アクセス・予約のボタンを固定する
- 03料理・客室・温泉のように紹介する項目が決まっているなら、同じ型をくり返す
- 04お断りしている事項は、予約の前に読める場所にアイコンつきでまとめる
FAQよくある質問
雲仙みかどホテルのサイトで使われているフォントは？
和文は Noto Sans JP と Noto Serif JP、英字には Manrope が読み込まれています。どれも無料で使えるので、同じ組み合わせで近づけられます。
旅館・ホテルのサイトで予約を増やすには？
このサイトでは、ヘッダーの「宿泊予約」ボタン、ページ上部の空室検索の帯、スマホの画面下の固定メニューと、予約の入口を何か所にも置いています。どこを読んでいても予約に進めるようにしておくのが基本です。
どんな業種の参考になりますか？
温泉旅館・ホテルのほか、日帰り温泉やレストランなど、日時を選んで予約してもらう業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は雲仙みかどホテルおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの宿泊・観光の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の宿泊・観光施設のサイトを。
「雲仙みかどホテルのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。