ワイヤーDL雲仙みかどホテル
金色の「宿泊予約」ボタンと空室検索の帯、スマホの下の固定メニューで、どこからでも予約に進めるホテルのサイト。
webcan analyze nikko-jicon.jp
HOTEL & TRAVEL · 栃木県 · PICKED 2026.10.19
日光松原の宿 而今 -jicon-宿泊・観光のホームページデザイン参考 — 一棟貸しの宿・縦書き・モノトーン
出典：nikko-jicon.jp ↗確認日 2026.10.19
EDITOR'S NOTE編集部の視点
夕暮れの路地や月の写真に縦書きの宿名を重ね、白とグレーの余白の多い紙面で、一日一組の宿の静けさを伝える。
栃木県日光市、東武日光駅から歩いて行ける一日一組限定の一棟貸しの宿のサイト。ファーストビューは夕暮れの路地や月の写真に、縦書きの「而今」の宿名を重ねている。白と淡いグレーの背景に明朝体の縦書きの文章を置き、宿の考え方、客室、宿泊の案内、レンタル着物付きの宿泊プラン、おすすめの食事処、お知らせとInstagram、アクセス、周辺スポットと続く。
- 01ファーストビューは、夕暮れの路地や月の写真に、縦書きの宿名と英字を重ねている
- 02本文は明朝体の縦書きで、写真と文章を左右に振りながら並べ、余白を大きくとっている
- 03色は白・淡いグレー・黒だけに絞り、客室の木の色と灯りを写真で見せている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 4か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線プランのご予約へ / RESERVATION(宿泊のご予約)
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
素泊まりの不安を食事処の紹介で解く
素泊まりの宿であることを伝えたうえで、歩いて行けるおすすめの食事処を写真と説明つきで紹介している。夕食をどうするかという、予約前の迷いに先回りして答えている。
宿泊プランの入口をファーストビューに置く
ファーストビューの左下に「着物で日光を歩く旅。」のレンタル着物付き宿泊プランのバナーを置き、ページの中ほどにもプランの説明と「プランのご予約へ」のボタンを置いている。
設備とアメニティを一覧で示す
宿泊の案内では、主な設備とアメニティ、キッチン設備がないこと、室内禁煙・ペット不可を一覧で載せている。一棟貸しで気になる点を予約の前に確かめられる。
チェック項目は 2026.10.19 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#EFEFEFセクション背景 · ライトグレー
#333333ボタン・線
#000000本文テキスト
#595757補足テキスト · グレー
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文（見出し・本文・ナビ）
- 使用フォント
- Noto Serif JP
- 無料で近いもの
- Noto Serif JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 14px / 700 | 2.50 | 14px / 700 |
| h2 | 14px / 700 | 1.30 | 12px / 700 |
| 本文（p） | 14px / 400 | 2.50 | 12px / 400 |
| ボタン | 9px / 400 | 3.89 | 8px / 400 |
実測値（PC 1440px・SP 375px、2026.10.19 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
PARTSパーツ別に見る
PC
SP
PC
SP
SP
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.19 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01宿の外観や周りの景色の写真に、縦書きの宿名だけを重ねて静かなファーストビューをつくる
- 02色を白・グレー・黒に絞り、木や灯りの色は写真に任せる
- 03素泊まりの宿なら、近くの食事処を写真つきで紹介して夕食の不安を解く
- 04設備・アメニティ・禁止事項は一覧にして、予約の前に確かめられるようにする
FAQよくある質問
而今のサイトで使われているフォントは？
見出し・本文・ナビとも Noto Serif JP です。Google Fonts で無料で使えます。
一棟貸しの宿のサイトでは、何を載せるとよいですか？
雰囲気を伝える写真に加えて、定員、部屋の構成、設備とアメニティ、食事の有無、駐車場を載せておくと、予約前の問い合わせが減ります。このサイトは素泊まりであることを書いたうえで、近くの食事処も紹介しています。
どんな業種の参考になりますか？
一棟貸しの宿や古民家の宿、民泊、小さな旅館など、少ない客室で静かな滞在を売りにする宿泊施設に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は日光松原の宿 而今 -jicon-および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの宿泊・観光の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の宿泊・観光施設のサイトを。
「日光松原の宿 而今 -jicon-のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。