mont 野沢温泉

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になっている。

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

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

検出された技術:LenisWordPressGoogle FontsAdobe Fonts

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

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