Brand日本Japan

mont 野沢温泉

ブランドのWebデザイン参考 — ホテル・温泉宿

サイトを見るmont-nozawaonsen.com

Editor's note — 編集部の視点

トップに置くのは、筆で描いた輪っかだけ。

野沢温泉の宿montの公式サイトは、暗く沈めた雪山や森の写真に白い手描きのシンボルを1つ浮かべ、「火と水が巡る」という宿のコンセプトを説明抜きで手渡してくる。

BrunoStructure & IA
ナビは About から FAQ まで7項目を横一列、予約だけ右下の角丸ボタンに分けてる。トップで何も読ませないぶん、行き先の選び方はちゃんと親切。泊まりたい人は迷わず右下へ行ける。
  • 14本の筆のストロークが輪をつくるシンボル。“火と水が巡る”というコンセプトを、形そのもので伝える
  • 2トップはスクロールしない1画面。写真とナビ、予約ボタンだけに絞り、下層ページへまっすぐ送り出す
  • 3写真は暗いトーンに沈め、文字はアイボリーのセリフ体だけ。夜の山あいのような静けさが保たれる

Color

mont 野沢温泉の配色

Typography

使用フォントと無料の代替

ロゴ

Aa あア

使用
mont(オリジナル)
代替
Young Serif

英字ナビ・ボタン

Aa あア

使用
Ancizar Serif
代替
Ancizar Serif

和文の約物(明朝系)

Aa あア

使用
YakuHanMP
代替
YakuHanMP

実測タイプスケール1440px幅 · 2026-09-26 計測

  • ボタンKatapick 型16px · 1.5 · 400

Structure

ページ構成(上から順)

  1. 01

    ヘッダー

    左にロゴ「mont」、中央に About / Access / Room / Dine / Outdoor / HARVESTLONGTABLE / FAQ を横一列、右に Ja / En の切替と Menu。SPでは言語切替と Menu だけを残す。

  2. 02

    背景スライドショー

    雲海の山並みや雪の森など、暗いトーンに沈めた写真を全画面で切り替える。

  3. 03

    シンボル

    画面中央に、筆で描いた4つのストロークが円を描く白いシンボルを1つだけ置く。

  4. 04

    スライドインジケーター

    左下に7つのドット。現在のスライドだけ白く光らせる。

  5. 05

    予約ボタン

    右下に細い枠線の角丸ボタン「Reservation」。トップで唯一のCTAになっている。

Interaction

アニメーション・インタラクション

  • 背景写真はドットと連動して自動で切り替わる。opacity のクロスフェードで再現可能
  • 技術スタックに Lenis があり、下層ページの慣性スクロールに使われていると思われる
  • シンボルは SVG で置くと、stroke アニメーションやマスクで筆跡が描かれていく演出も作れる
  • Menu を押すと全画面のナビゲーションが開く構成と思われる(見出しに Navigation がある)

スクロールのコマ撮りLenis · 300–240000ms

mont 野沢温泉をスクロールしたときのフレーム1
01

検出された技術:LenisWordPressGoogle FontsAdobe Fonts

Reproduce

再現するときのポイント

  • 01写真の上に暗い青緑のオーバーレイ(#223d40 前後を半透明で)を重ね、全スライドのトーンを揃える
  • 02中央に置くのはシンボル1つだけ。キャッチコピーも置かず、余白を写真に任せる
  • 03文字は純白ではなく #fffdf8 のアイボリーにし、英字は細めのセリフ体で小さく組む
  • 04CTAは予約ボタン1つに絞り、画面の右下に固定する

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全5セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい? →
mont-nozawaonsen.katapick.md
1---
2title: "mont 野沢温泉 デザイン分析書"
3source: https://mont-nozawaonsen.com/
4katapick: https://katapick.com/sites/mont-nozawaonsen
5category: ブランド
6region: 国内 (JP)
7tags: [ダーク, 写真主体, ミニマル, セリフ体, カルーセル]
8launched: 2026-05
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14
15# mont 野沢温泉 — デザイン分析書
16
17> トップに置くのは、筆で描いた輪っかだけ。野沢温泉の宿montの公式サイトは、暗く沈めた雪山や森の写真に白い手描きのシンボルを1つ浮かべ、「火と水が巡る」という宿のコンセプトを説明抜きで手渡してくる。
18
19このファイルは Katapick(https://katapick.com)が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です(2026-09-26 計測)。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ(紫のグラデーション、同じ形の3列カードなど)を消すルールと、盗作を避けるための指示も入っています。
22

mont 野沢温泉についてよくある質問

mont 野沢温泉のサイトで使われているフォントは?

英字のナビやボタンに Ancizar Serif、和文の約物に YakuHanMP が使われ、ロゴはオリジナルの書体と思われます。Ancizar Serif と YakuHanMP はどちらも無料で使えます。

montのような1画面だけのトップページはどう作る?

height: 100svh のコンテナに背景写真を重ねてクロスフェードで切り替え、中央にシンボル、四隅にナビ・ドット・予約ボタンを position: absolute で配置します。

montのデザインはどんなサイトの参考になる?

旅館・ホテル、グランピング、山あいのレストランなど、言葉より風景と空気感で選ばれたい宿泊・観光施設のサイトの参考になります。

安心してお使いいただくために

引用の範囲で掲載
ファーストビューなどの画面を縮小して、解説と実測値に添えています。出典と元サイトへのリンクを必ず表示します。
コードや素材は配布しません
元サイトのコード・画像・文章は提供していません。
MDは数値と構造だけ
デザイン分析MDに、元サイトの文章・画像・コードは含みません。差し替え必須のものも明記しています。
公開されたページだけ
ログインが必要なページや非公開のページは扱いません。robots.txt に従って取得しています。

著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する

出典: Katapick編集部(2026年10月26日 確認)。掲載サイトのデザイン・文章・画像の権利は各権利者に帰属します。 権利者・制作者の方からの 掲載の取り下げ・修正のご依頼は、原則2営業日以内に対応します。AI・LLM 向けの要約は Markdown 版 を参照してください。