奈良監獄ミュージアム by 星野リゾート

1. 01

   サイドバー＋ヒーロー

   左に固定の白いサイドバー（明朝のキャッチ、本日開館と営業時間、チケット予約、MENU、言語切替）。右に青空と旧監獄の屋根を下端に配した写真、上に鍵マークと英字・和文ロゴ。

2. 02

   本日のミュージアム・お知らせ

   枠線で囲んだ当日の運営情報ボックスと、日付＋タイトルのお知らせ3件、「View More」リンク。

3. 03

   イントロ

   中央揃えのステートメント。キーワードを黒ベタの反転文字で強調する。

4. 04

   みどころ（3章）

   ①赤レンガの建築、②監獄近代化、③「自由って何だろう」の3章。各章に番号・カギ括弧付きの見出し、大判の写真スライダー、中央揃えの解説文。

5. 05

   Directors・監獄とアート

   アートディレクターらの名前とプロフィール開閉リンク。グレー地の横長カードで展示作品を写真と解説で紹介する。

6. 06

   Activities & Events・Cafe & Shop

   ガイドツアーやナイトミュージアムを写真カードで並べ、カフェとショップを写真2枚と短いコピーで紹介。

7. 07

   More Stories

   動画・インタビュー記事を写真とタイトルで並べる。

8. 08

   旅ガイド・来館案内・フッター

   なら旅ガイド、きたまちさんぽ、営業時間・アクセスの来館案内とフッター。9000px以降のため抽出データの見出しのみで確認。

• PCではFVの間は左サイドバーに情報を集約し、スクロール後は上部に横長の固定ヘッダー（ロゴ・開館状況・チケット予約・言語・MENU）が現れる。IntersectionObserver でヒーロー通過を検知して切り替えると再現できる
• みどころの写真は左右の矢印とドットで送るスライダー。Swiper などで実装できるが、抽出データの stack では特定できなかった
• SPではサイドバーの内容をヒーロー直下に移し、チケット予約ボタンをオレンジの塗りボタンとして大きく配置している

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

検出された技術:WordPress

• 01キービジュアルは空を単色の青に置き換え、建築を画面下端に寄せて上部をロゴのための余白にする
• 02ロゴ・英字は幅の狭い極太サンセリフの大文字で積み、和文ロゴも同じ太さで揃える
• 03オレンジはチケット予約と開館表示だけに使い、予約導線を画面内で一番目立たせる
• 04解説文は中央揃えで短く区切り、写真との交互配置でリズムをつくる

1---
2title: "奈良監獄ミュージアム by 星野リゾート 再現用デザイン仕様書"
3source: https://hoshinoresorts.com/nara-prison-museum/ja/
4katapick: https://katapick.com/sites/hoshinoresorts-nara-prison-museum
5category: ブランド
6region: 国内 (JP)
7tags: [写真主体, 大胆なタイポ, ブルー基調, 余白, カルーセル, 固定ナビ]
8launched: 2026-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 16
13generator: Katapick
14---
15 
16# 奈良監獄ミュージアム by 星野リゾート — 再現用デザイン仕様書
17 
18> 空を青ベタで塗って、監獄をぐっと明るく見せてる。星野リゾートが手がける「奈良監獄ミュージアム」の施設サイトは、旧監獄の屋根から上をムラのない青で塗り、重い来歴を持つ建物をポスターの明るさで差し出している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22