# yama-niwa｜ブランドのWebデザイン参考

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

- URL: https://yama-niwa.jp/
- 解説ページ: https://katapick.com/sites/yama-niwa
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: 宿泊施設・ホステル
- テイスト: 写真主体、スクロール演出、余白、ロングページ、固定ナビ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

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

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

## 配色
- #ffffff White（背景）
- #fffef9 Ivory（セクション背景）
- #5bb543 Trail Green（ロゴ / ナビ / コピー / 曲線）
- #3d3331 Chestnut Brown（予約パネル / ボタン）
- #2f2523 Dark Walnut（濃色テキスト / 面）
- #d2c7b3 Oak Beige（サブテキスト / 罫線）

## フォント
- 和文見出し・本文: Noto Sans JP Variable（代替: Noto Sans JP）
- 英字ナビ・日付・OPEN表記: Libre Franklin Variable（代替: Libre Franklin）

## よくある質問
### yama-niwaのサイトで使われているフォントは？
和文に Noto Sans JP、英字に Libre Franklin（いずれも可変フォント版）が使われています。どちらも Google Fonts で無料で利用できます。

### yama-niwaのサイトは何で作られている？
Astro で構築され、慣性スクロールに Lenis、アニメーションに Lottie が使われています。

### yama-niwaのデザインはどんな業種の参考になる？
古い建物を再生した宿泊施設、ホステルやゲストハウス、地域の複合施設など、建物の由来や土地の物語を写真で伝えたいサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/yama-niwa からダウンロードできます。
出典: Katapick（https://katapick.com）