BrandJapanPicked 2026.09.26

yama-niwa

ブランドのWebデザイン参考 — 宿泊施設・ホステル

出典: yama-niwa.jp

Editor's note — 編集部の視点

細い緑の線が、山道みたいにページを案内する。

中山道・奈良井宿の元中学校を再生したホステル「yama-niwa」のサイトは、写真の間を蛇行する1本の線で文章をつなぎ、校舎をたどる旅を先に体験させている。

LeoMotion & Direction

校庭の航空写真のあと、とんでもなく長いピン留めセクションが控えてるの、ここで来る！空撮から校舎へ寄っていく長回しっぽくて、映画のオープニングみたい。鳥肌！

1ロゴは緑の三角形に「yama-niwa」を収めた山の記号。どの写真の上でも一目で見つかる
2FV直下に茶色の予約パネルを重ねる。コンセプトより先に、泊まる導線を差し出す
3教室の机、黒板、校庭の航空写真。学校の記憶を小道具にし、宿の由来を説明なしで伝える

Color

yama-niwaの配色

Typography

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

和文見出し・本文

Aa あア

使用: Noto Sans JP Variable
代替: Noto Sans JP

英字ナビ・日付・OPEN表記

Aa あア

使用: Libre Franklin Variable
代替: Libre Franklin

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

見出しKatapick 型32px · 1.6 · 500
小見出しKatapick 型16px · — · 600
本文The quick brown fox — 参考を型にする16px · 1.8 · 700
ボタンKatapick 型16px · 1.8 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左に緑の三角形ロゴ「yama-niwa 山庭」、中央に3列の英字ナビ（Home / yama-niwa-INN / Philosophy / The Cycle of Stay / Craft / Location）と Instagram・note・Recruit、右に「Stay booking」ボタン。スクロール後はロゴが小さな三角形になる。
02
ヒーロー
校舎の外観や館内のパースを全面に敷き、右下に「木曽路の旅を深める。過去からの応答、現代の宿場。」と大きな「Oct, 2026 OPEN」。
03
宿泊予約
茶色のパネルに予約受付開始日と yama-niwa—INN のロゴ、客室写真と説明文、「Stay booking」ボタン、Private Room / Dormitory / Sauna の切り替えタブを収める。
04
Philosophy
緑の太いコピー「山で遊び、山で働き、山に学ぶ。」と、教室・黒板・紅葉の窓などの写真を左右交互に配置。写真の間を細い緑の曲線が蛇行し、文章をつないでいく。
05
施設全景
旧楢川中学校の航空写真から始まる、縦に長いピン留めのセクション。
06
The Cycle of Stay・Craft
「旅人が山中に学ぶ、現代の宿場としての4つの機能」と、yama-niwa での木材の営みを紹介する。
07
Location・Access
隣接する宿場町・奈良井宿の紹介と、アクセス情報。
08
フッター
サイト内リンクと各種SNSで締める。

Interaction

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

Lenis による慣性スクロール。施設全景は縦に非常に長いセクションで、スクロールに合わせて航空写真から施設へ寄っていくピン留め演出と思われる。position: sticky とスクロール進捗に応じた scale で再現可能
写真の間をつなぐ緑の曲線は SVG の path。stroke-dashoffset をスクロール量に合わせて減らせば、線が伸びていく表現を再現できる
Lottie が読み込まれており、ロゴやアイコンまわりのアニメーションに使われていると思われる
ヘッダーは固定。FVの画像は外観と館内で切り替わるスライドショーと思われる

スクロールのコマ撮りLenis · 200–1000ms

検出された技術:LenisAstroLottie

Reproduce

再現するときのポイント

01色はロゴの緑 #5bb543 と木の茶 #3d3331 の2色に絞り、背景は白〜アイボリーで写真を主役にする
02蛇行する線は1本のSVGで描き、テキストと写真の間を通るようにレイアウトから逆算する
03英字は Libre Franklin、和文は Noto Sans JP。コピーだけを太く大きくし、本文は緑の小さめの文字で軽く見せる
04FV直下に予約パネルを重ね、タブで客室タイプを切り替えられるようにする

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

yama-niwa.katapick.md

1---
2title: "yama-niwa 再現用デザイン仕様書"
3source: https://yama-niwa.jp/
4katapick: https://katapick.com/sites/yama-niwa
5category: ブランド
6region: 国内 (JP)
7tags: [写真主体, スクロール演出, 余白, ロングページ, 固定ナビ]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# yama-niwa — 再現用デザイン仕様書
17 
18> 細い緑の線が、山道みたいにページを案内する。中山道・奈良井宿の元中学校を再生したホステル「yama-niwa」のサイトは、写真の間を蛇行する1本の線で文章をつなぎ、校舎をたどる旅を先に体験させている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22