ワイヤーDL雲仙みかどホテル
金色の「宿泊予約」ボタンと空室検索の帯、スマホの下の固定メニューで、どこからでも予約に進めるホテルのサイト。
webcan analyze yama-niwa.jp
HOTEL & TRAVEL · 長野県 · PICKED 2026.10.22
yama-niwa宿泊・観光のホームページデザイン参考 — ホステル・廃校活用・緑の三角形
出典：yama-niwa.jp ↗確認日 2026.10.21
EDITOR'S NOTE編集部の視点
元中学校を再生した宿の5つの機能を、緑の三角形のモチーフと写真のカードで整理して見せる。
長野県塩尻市・奈良井宿のほとりにある、元中学校の校舎を活用した宿泊・ベーカリー・サウナ・アウトドアショップの複合施設のサイト。ファーストビューは焼きたてのパンや元校舎の館内を映した映像に、「木曽路の旅を深める。過去からの応答、現代の宿場。」のコピーを重ねている。ロゴと同じ緑の三角形を見出しの背景にくり返し使い、空室検索、5つの機能、施設の案内、お知らせ・読み物、団体向けの研修、アクセス、2つのインスタグラムと続く。
- 01ロゴの緑の三角形を、見出しの背景や施設の案内に大きくくり返し使っている
- 02宿・焚き火・パン・サウナ・買い物の5つを、写真・日本語の見出し・英字の副題をそろえたカードで並べている
- 03白とベージュの背景に、緑1色を差し色として使っている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
✓SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
宿泊とサウナの予約を分けて常に出す
PCではヘッダーの右上に緑の「Stay booking」「Sauna booking」の2つのボタンを置き、スマホでは画面の下に同じ2つを固定している。泊まりたい人とサウナだけ使いたい人が、それぞれの予約にすぐ進める。
ファーストビューの下で空室を検索させる
ファーストビューの下にチェックイン・チェックアウトの日付と「空室を検索する」ボタンを置き、「公式サイトからのご予約が、いちばんお得です。」と添えている。予約サイトではなく公式サイトから予約してもらう理由を、その場で伝えている。
泊まらない人の入口も用意する
施設の案内で、ベーカリー・アウトドアショップ・展示を「泊まらなくても開かれた、山の入り口」と紹介し、団体向けの研修や、ベーカリー専用のインスタグラムも案内している。宿泊以外の目的で来る人も取りこぼさない。
チェック項目は 2026.10.21 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#5BB543ロゴ・三角形・ボタン・研修の帯 · グリーン
#F7F4EF予約欄・カードの背景 · ベージュ
#FCE7CFベーカリーのインスタグラムの背景 · ペールオレンジ
#000000本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文（見出し・本文）
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字（ナビ・ボタン・副題）
- 使用フォント
- Libre Franklin
- 無料で近いもの
- Libre Franklin
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 40px / 700 | 1.50 | 19.2px / 700 |
| h2 | 32px / 700 | 1.70 | 25px / 700 |
| 本文（p） | 16px / 400 | 1.80 | 12.5px / 400 |
| ボタン | 16px / 700 | — | 15.4px / 400 |
実測値（PC 1440px・SP 375px、2026.10.21 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.21 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01ロゴの形を見出しや背景にくり返し使い、サイト全体の印象をそろえる
- 02施設の機能が多いときは、同じ型のカードに並べて全体像を見せる
- 03予約の種類が複数あるときは、ボタンを分けて常に見える場所に置く
- 04公式サイトから予約する利点を、予約欄のそばに書く
FAQよくある質問
yama-niwaのサイトで使われているフォントは？
和文は Noto Sans JP、英字のナビやボタンは Libre Franklin です。どちらも Google Fonts で無料で使えます。
宿泊とほかのサービスを両方持つ施設のサイトは、どうまとめるとよいですか？
このサイトのように、機能ごとに同じ型のカードで並べ、予約もサービスごとにボタンを分けると、目的の違う人がそれぞれ迷わずに進めます。
どんな業種の参考になりますか？
ゲストハウスや小さなホテルのほか、廃校や古民家を活用した複合施設、サウナ施設、キャンプ場など、宿泊以外の体験もあわせて案内したい施設に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はyama-niwaおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの宿泊・観光の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の宿泊・観光施設のサイトを。
「yama-niwaのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。