# 白骨温泉｜メディアのWebデザイン参考

> ナビも本文も縦書きで、温泉地を一冊の本にしてる。長野・松本の温泉地、白骨温泉の公式サイトは、筆文字のロゴと明朝の縦組みを和紙のような地に置き、湯や渓谷の写真を挟んで、ページをめくるように土地を案内する。

- URL: https://www.shirahone.org/
- 解説ページ: https://katapick.com/sites/shirahone-onsen
- カテゴリ: メディア / 地域: 国内（JP）/ 業種: 温泉地・観光
- テイスト: 縦書き、セリフ体、写真主体、余白、手書き文字
- 公開・リニューアル: 2026-04 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 26 時間）

## 編集部のひとこと（Luna）
明朝を2書体使い分けてるっぽいけど、どっちも細め。だから筆文字ロゴの太さだけがちゃんと際立つ。引き算がわかってる組み方。……いいね！！

## デザインの見どころ
- FVは上3分の1だけが和紙の地で、下は湯の花と苔の接写。景色より先に、湯の質感を見せる
- 宿や店は同じ大きさの写真付きリストで2列に並べる。公式として、どこか1軒を推しすぎない
- 大きな写真の角に、別の写真の小窓を重ねる。1枚の風景に、奥行きと時間の層が生まれる

## 配色
- #f2f2f0 Washi Gray（背景）
- #ffffff Snow White（カード背景）
- #272727 Sumi Ink（テキスト / ロゴ）
- #b8b7ab Stone Beige（周辺観光セクションの背景）
- #56704a Moss Green（写真の主調（苔・山））

## フォント
- 本文・ナビ: Zen Old Mincho（代替: Zen Old Mincho）
- 見出し・キャッチ: Hina Mincho（代替: Hina Mincho）

## よくある質問
### 白骨温泉の公式サイトで使われているフォントは？
本文とナビに Zen Old Mincho、見出しやキャッチに Hina Mincho が使われていると思われます。どちらも Google Fonts で無料で利用できます。筆文字のロゴは画像です。

### 縦書きのナビや本文はどう作る？
CSS の writing-mode: vertical-rl を指定します。数字や英字は text-combine-upright や text-orientation で向きを調整し、行の並びは右から左になる点に注意して配置します。

### どんな業種の参考になる？
温泉地や観光協会、旅館、和の工芸品ブランドなど、静けさや歴史を伝えたい地域・観光サイトの参考になります。

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