ワイヤーDL雲仙みかどホテル
金色の「宿泊予約」ボタンと空室検索の帯、スマホの下の固定メニューで、どこからでも予約に進めるホテルのサイト。
webcan analyze sumomonorikura.com
HOTEL & TRAVEL · 長野県 · PICKED 2026.10.27
乗鞍すもも荘宿泊・観光のホームページデザイン参考 — コリビング・長期滞在・不定形の写真
出典：sumomonorikura.com ↗確認日 2026.10.27
EDITOR'S NOTE編集部の視点
不定形に切り抜いた写真と滞在者の声で、「住む」でも「泊まる」でもない“すこし暮らす”を具体的に想像させる。
長野県松本市・乗鞍高原にあるコリビングハウスのサイト。ファーストビューは丸みのある不定形に切り抜いた写真と縦書きのコピー「すこし暮らすと、見えること。」で、周りに筆で描いたような色の点や線を散らしている。コンセプト・4つの特徴・利用者の声・ご滞在までの流れと進み、オンライン相談・見学の申し込みと、ショートステイ／ロングステイのプランへの入口を並べている。
- 01写真を丸みのある不定形に切り抜き、筆で描いたような点や線を周りに散らしている
- 02利用者の声に、滞在の種類（ショートステイ・ロングステイ）や家族構成・職業のタグ、居住地と年代を添えている
- 03ご滞在までの流れを「オンライン相談 or 現地見学」から「滞在開始」までの5段階で示している
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / 滞在のご相談・申し込み
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
最初の一歩を「オンライン相談・見学」にする
ヘッダー右上の緑のボタンは「滞在のご相談・申し込み」。流れの説明のあとにも「オンライン相談・見学のお申し込みはこちら」の大きなバナーを置き、いきなり予約ではなく相談から始められるようにしている。
滞在の長さでプランの入口を分ける
「1週間から滞在のショートステイプラン」と「1ヶ月から滞在のロングステイプラン」を並べたバナーに、それぞれ向いている人（はじめての方・松本デュアルスクールなど）を書き添えている。自分に合う方を選んで進める。
利用者の声をタグで探しやすくする
声のカードに「ショートステイ」「家族」「リモートワーク」「創作活動」などのタグと、居住地・年代・職業を載せている。似た立場の人の体験談を見つけやすく、自分の滞在を想像しやすい。
チェック項目は 2026.10.27 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F2EEEA背景 · ベージュ
#779B78申し込みボタン・CONTACT帯 · グリーン
#C69C6B差し色 · オークル
#B88383差し色 · くすみピンク
#3E3D35本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Zen Kaku Gothic New
- 無料で近いもの
- Zen Kaku Gothic New
- 用途
- 英数字
- 使用フォント
- Roboto / Lato
- 無料で近いもの
- Roboto / Lato
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 24px / 700 | 2.00 | — |
| h2 | 20px / 500 | 1.40 | 18px / 500 |
| 本文（p） | 13px / 500 | 1.40 | 13px / 500 |
| ボタン | 16px / 400 | 1.00 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.27 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
FLOW（ご滞在までの流れ）
流れ／ステップ型 - 08
- 09
NEWS（新着情報）
記事・メディア／記事カードグリッド型 - 10
- 11
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.27 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01写真を不定形に切り抜き、手描き風の点や線を添えて、宿泊施設らしくない「暮らし」の空気を出す
- 02予約の前に「オンライン相談・見学」の入口を用意し、迷っている人が質問から始められるようにする
- 03プランを滞在の長さで分け、それぞれ向いている人を一言添える
- 04利用者の声に滞在の種類・家族構成・職業のタグを付ける
FAQよくある質問
乗鞍すもも荘のサイトで使われているフォントは？
見出しと本文は Zen Kaku Gothic New、英数字には Roboto と Lato が読み込まれています。いずれも Google Fonts で無料で使えます。
写真を不定形に切り抜くと、情報が伝わりにくくなりませんか？
このサイトでは、切り抜いた写真の横に短い文章を添え、文章側で内容を説明しています。写真は雰囲気を伝える役、文章は中身を伝える役と分けると、柔らかい見た目と分かりやすさを両立しやすくなります。
どんな業種の参考になりますか？
シェアハウスやゲストハウス、お試し移住の施設、長期滞在向けの宿など、「どんな暮らしになるか」を想像してもらいたい施設に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は乗鞍すもも荘および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの宿泊・観光の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の宿泊・観光施設のサイトを。
「乗鞍すもも荘のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。