--- version: alpha name: Editorial Blue & Brick Museum LP description: 鮮やかな青のファーストビューと、白・薄グレーを基調にした余白の多い編集型レイアウトの文化施設 LP。建築写真を大きく見せ、細い下線見出しとオレンジのチケットボタンで静かに導線を作る。 colors: primary: '#0081DF' on-primary: '#FDFEFC' background: '#FFFFFF' background-alt: '#F2F2F0' cta: '#D26D2F' on-cta: '#FFFFFF' accent-1: '#D2652A' text: '#110C0A' text-muted: '#89928F' line: '#D7E0E7' accent-2: '#8A4A35' dark-section: '#040403' surface: '#FFFFFF' cta-accessible: '#B65E27' text-muted-accessible: '#6E7774' accent-1-accessible: '#BB5A25' typography: display: fontFamily: Barlow Condensed fontSize: 44px fontWeight: 700 lineHeight: 1.05 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-md: fontFamily: Inter fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Shippori Mincho fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 32px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.label-button}' height: 32px heading-underline: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px number-circle: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 16px tag: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 16px status-bar: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 44px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 34px marker-highlight: backgroundColor: '{colors.text}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 20px slider-arrows: textColor: '{colors.text}' height: 320px --- # DESIGN.md — 青空ブルーと赤レンガの文化施設 LP（Editorial Blue & Brick Museum LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: シンプル・ミニマル、上品・高級、クール・先進的 - **キーワード**: 編集デザイン・建築写真・余白・細い罫線・下線見出し・水彩イラスト - **地の質感**: フラットな白地と薄グレー地。影なし、細い罫線で区切る - **形**: 角丸ほぼなしの矩形。ボタンも四角で細い枠線 - **温度感**: 白とグレー主体のやや冷たい地に、赤レンガ写真とオレンジの CTA で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0081DF` | ファーストビューの青空ブルー | 6% | 画素の実測 | | `on-primary` | `#FDFEFC` | 青地上のロゴ・英字タイトル | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 45% | 画素の実測 | | `background-alt` | `#F2F2F0` | アート・来館案内セクションの薄グレー地 | 12% | 画素の実測 | | `cta` | `#D26D2F` | チケット予約ボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#D2652A` | 本日開館などの強調文字 | 0% | 推定 | | `text` | `#110C0A` | 見出し・本文の濃色 | 4% | 画素の主要色に補正 | | `text-muted` | `#89928F` | サブコピー・ボタン文字のグレージュ | 0% | 画素の実測 | | `line` | `#D7E0E7` | セクション区切り・枠線 | 1% | 画素の主要色に補正 | | `accent-2` | `#8A4A35` | 写真内の赤レンガ色 | 3% | 推定 | | `dark-section` | `#040403` | 建築写真スライダーの暗部 | 5% | 画素の実測 | | `surface` | `#FFFFFF` | グレー地上の白ボタン・地図 | 1% | 画素の実測 | | `cta-accessible` | `#B65E27` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#6E7774` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#BB5A25` | AA を満たす補正値（計算） | | 計算 | - 地は白が基本。案内・アート紹介は薄グレー地で帯として区切る - ブランド色の青はファーストビューの面にだけ使い、下層では使わない - オレンジはチケット予約 CTA と開館状況の強調だけに使う - サブコピーとサブボタンの文字はグレージュで控えめにする - 色数は抑え、写真の赤レンガと空の青で彩りを出す - キーワード強調は黒ベタ地に白文字のマーカーにする - `button-primary` は文字 `#FFFFFF` × 背景 `#D26D2F` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B65E27`、4.55:1）を使う。 - `button-secondary` は文字 `#89928F` × 背景 `#FFFFFF` のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#6E7774`、4.61:1）を使う。 - `status-bar` は文字 `#D2652A` × 背景 `#FFFFFF` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BB5A25`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの英字タイトル | 欧文サンセリフ | Barlow Condensed | 700 | 44px | 1.05 | 0.02em | | `headline-lg` | 見どころ見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.1em | | `headline-md` | 英字・和文のセクション見出し（下線付き） | 欧文サンセリフ | Inter | 600 | 16px | 1.4 | 0.02em | | `headline-sm` | カードタイトル・小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.02em | | `accent` | タグラインの明朝 | 明朝 | Shippori Mincho | 500 | 17px | 1.5 | 0.1em | | `note` | 日付・タグ・注釈 | ゴシック | Noto Sans JP | 500 | 9px | 1.5 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.05em | - 見出しは中央揃えで、文字幅だけの短い黒下線を付ける - セクション見出しは英字と和文を混在させ、下にグレージュの和文サブコピー - 本文は小さめ太めのゴシックで行間広め - 番号は細線の丸囲み数字を見出しの上に置く - 明朝はタグライン 1 か所だけに使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。一覧はサムネイル左＋テキスト右の 2 列 - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - 写真は画面幅いっぱい、または左右 12px 余白で大きく配置 - セクション見出しの下に全幅の細い罫線を引く - 見どころは番号＋見出し＋全幅写真スライダー＋本文の繰り返し - 一覧は大カード 1 枚＋小カード横並びで強弱を付ける - セクション間は広い余白で区切る ## Elevation & Depth - 影は使わない。区切りは罫線と地色の切り替えだけ - ボタンは細い灰色の 1px 枠線だけ - 地図の情報カードにだけ軽い影がある ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。横長 3:2 から縦長 3:4 まで - **セクション境界**: 直線の細罫線と地色の帯の切り替え - ボタン・タグ・カードはすべて角なしの矩形 - ボタンの右端に小さな三角か斜め矢印を置く - タグは細枠の小さな矩形 ## Components - **チケット予約ボタン**（`button-primary`）: オレンジ塗りの四角ボタン。左寄せの白文字と右端の斜め矢印。SP では画面右下に固定 - **View More ボタン**（`button-secondary`）: 白地に細い灰枠、グレージュ文字、右端に三角 - **下線付きセクション見出し**（`heading-underline`）: 中央の見出しに文字幅の黒下線。その下に全幅のグレー罫線 - **丸囲み番号**（`number-circle`）: 細線の丸の中に数字。見どころ見出しの上に置く - **カテゴリタグ**（`tag`）: 細枠の小矩形タグ。カード下に並べる - **本日の開館状況バー**（`status-bar`）: 左にオレンジの開館表示、右に時間を縦罫線で 2 分割。下に枠付きのお知らせボックス - **お知らせリスト**（`news-list`）: グレージュの日付と太字タイトルを罫線で区切る - **黒ベタ強調**（`marker-highlight`）: キーワードを黒地白文字で反転させる - **写真スライダー**（`slider-arrows`）: 全幅写真の左右端に小さな三角、下に小さなドット ## Do's and Don'ts **Do** - 写真を主役にして大きく見せ、文字は控えめにする - 見出しには必ず短い下線を付けて中央に揃える - 余白をたっぷり取り、罫線でリズムを作る - CTA の色はオレンジ 1 色に限る - 末尾に手描き水彩イラストを置き、余韻を残す **Don't** - ボタンを角丸やピル型にしない - 影・グラデーション・立体表現を使わない - 青を下層の背景やボタンに広げない - 派手なバッジや装飾アイコンを増やさない - 本文を大きくしすぎて余白を詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（施設の印象を一目で伝える）: 青空の面に白いロゴと大きな英字タイトルを左上に。下部に建築写真を空の青となじませて配置 2. **開館状況・お知らせ**（当日の実用情報を伝える）: 明朝のタグライン、開館状況の 2 分割バー、枠付き案内ボックス、日付付きのお知らせリスト 3. **コンセプト**（体験の価値を言葉で示す）: 全幅の建築写真の下に、中央揃えの太字 2 段落。キーワードを黒ベタで反転 4. **見どころ**（魅力を 3 つに分けて伝える）: 丸囲み番号＋見出し＋全幅スライダー＋短い本文を罫線で区切って 3 回繰り返す 5. **監修者紹介**（信頼性を示す）: 下線見出しと説明文。肩書きの下に名前を下線付きで並べ、プロフィールリンクを添える 6. **アート展示**（展示内容を紹介する）: 薄グレー帯の中に写真スライダー、作品名、作家名、枠線ボタン 7. **体験・イベント**（ツアーや催しを案内する）: 大きな写真カード 1 枚と、小さなサムネイルカードを横並び。タグ付き 8. **カフェ・ショップ**（付帯施設を紹介する）: 大きな物撮り写真、見出し、営業時間、View More ボタン 9. **読み物**（人物や小話で親しみを出す）: 大カード 1 枚＋サムネイル左・テキスト右のリスト。日付・下線タイトル・タグ 10. **周辺ガイド**（旅の計画を広げる）: 縦長写真 1 枚と短い紹介文、下線タイトル 11. **来館案内・アクセス**（予約と来館へ導く）: 薄グレー帯に営業時間、オレンジの予約 CTA、アクセス文、地図埋め込み 12. **フッター**（余韻と回遊を作る）: 水彩イラストと手書き英字。グレーのロゴ、中央揃えのリンク群、言語切替 ## Imagery - 建築は晴天の下、正面や真上から撮ったシンメトリー構図 - 廊下や展示室は一点透視で奥行きを強調 - 人物は自然光でレンガ壁を背景にした立ち姿 - 物撮りは暗めの背景にスポット光を当て、質感を出す - 手描き水彩の建物パーツに手書き英字を添える - ロゴは鍵を組み合わせたシンプルなシルエット - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は左に固定の縦サイドバー（タグライン・開館状況・予約・メニュー）、右にメインを置く - PC のファーストビューはメイン幅いっぱいの青ビジュアル - PC のお知らせ・監修者・案内は見出し左・内容右の 2 カラム - PC の読み物はテキストと写真を左右交互に配置 - PC の来館案内は営業時間とアクセスを縦罫線で 2 カラムに分ける - SP の予約ボタンは画面右下に固定する ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-ddca5076`（元 LP の URL から採番） - **元 LP**: https://hoshinoresorts.com/nara-prison-museum/ja/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。