白骨温泉

1. 01

   ヘッダー / ファーストビュー

   和紙のような地に、左端の縦書きキャッチ「静寂と四季の彩り、湯に浸り 人は本来の姿に還る」、中央の筆文字ロゴ「白骨温泉」と「還る場所、しらほね」、右の縦組みナビ（白骨物語・宿・施設について・湯について ほか）。下半分に湯の花がこびりついた岩と苔の接写を敷き、小さな写真の窓を重ねる。

2. 02

   写真スライド

   渓流や紅葉の写真を横長に見せるスライド。

3. 03

   白骨物語

   縦書き本文の白いカード「白骨物語」と、「守る人」「語る人」「集う人」の3つの読み物への入口を写真付きで並べる。

4. 04

   湯について

   湯けむりの写真の下に、縦組みの見出し「湯について」と「三日入れば、三年風邪をひかない。」などの縦書き本文、「詳しく見る」。

5. 05

   宿・施設について

   谷あいの温泉街の俯瞰写真と縦書きの紹介文に続き、宿や店を小さな写真・キャッチ・名前のリストで2列に並べる。

6. 06

   周辺散策・近隣観光

   左に紅葉や滝の写真グリッド、右にグレージュの地で『大菩薩峠』の一節を引いた縦書きの紹介文。

7. 07

   お知らせ

   日付とタイトルのリストの右に、縦書きの見出し「お知らせ」。

8. 08

   交通アクセス

   墨で塗ったような質感の地図にピンを立て、観光案内所の住所と行き方をカードで重ねる。

9. 09

   フッター

   木造の旅館の写真を背景にした締め。

• 見出し・本文・ナビは writing-mode: vertical-rl で縦に組み、「詳しく見る」のリンクまで縦に置く
• 大きな写真の角に別の写真を小さく重ねる構成で、スクロールでずれる視差が付いていると思われる。transform: translateY をスクロール量に連動させて再現可能
• スライドの section に splide の id があり、写真のスライドには Splide が使われていると思われる
• 右端の二本線のメニューボタンは固定表示。背景の和紙の質感は、ノイズ入りの画像を background に敷くと近づけられる

スクロールのコマ撮り300–3000ms

検出された技術:WordPressGoogle Fonts

• 01背景は #f2f2f0 に紙の繊維のようなテクスチャを重ね、白いカードとの差で面を作る
• 02見出しと本文は細い明朝の縦組みにして、字間と行間を広めに取る
• 03写真は画面幅いっぱいの横長で切り、角に小さな別写真を重ねてリズムを作る
• 04ロゴだけを筆文字にして、それ以外の書体は明朝に絞る

1---
2title: "白骨温泉 再現用デザイン仕様書"
3source: https://www.shirahone.org/
4katapick: https://katapick.com/sites/shirahone-onsen
5category: メディア
6region: 国内 (JP)
7tags: [縦書き, セリフ体, 写真主体, 余白, 手書き文字]
8launched: 2026-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 26
13generator: Katapick
14---
15 
16# 白骨温泉 — 再現用デザイン仕様書
17 
18> ナビも本文も縦書きで、温泉地を一冊の本にしてる。長野・松本の温泉地、白骨温泉の公式サイトは、筆文字のロゴと明朝の縦組みを和紙のような地に置き、湯や渓谷の写真を挟んで、ページをめくるように土地を案内する。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22