--- version: alpha name: Nocturnal Shrine Festival Mincho LP description: 夜の神社のライトアップ写真と水墨風イラストを全幅で交互に置く、和風の夜祭りイベント LP。地は明るいグレーで、文字は明朝体を中央揃えにする。黒い角ボタンで各演目の詳細ページへ誘導する、静かで幻想的な構成。 colors: background: '#F5F5F5' surface: '#FCFCFC' background-alt: '#FFFFFF' primary: '#020102' cta: '#020102' on-cta: '#FFFFFF' text: '#18171A' text-body: '#333333' line: '#E2E3DE' dark-section: '#010101' accent-1: '#CE1103' tint-1: '#F6F2E3' typography: display: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 17px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.03em headline-sm: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 9px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 8px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em label-button: fontFamily: Noto Serif JP fontSize: 8px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Yuji Syuku fontSize: 28px fontWeight: 400 lineHeight: 1.2 rounded: sm: 0px md: 4px lg: 6px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 24px photo-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 160px hero-title-box: textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 110px vertical-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 100px event-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 150px access-box: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 500px faq-toggle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 46px pagetop: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' height: 28px --- # DESIGN.md — 闇夜と灯りの和風夜祭りイベント LP（Nocturnal Shrine Festival Mincho LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 和風、上品・高級、シンプル・ミニマル、ラグジュアリー・ダーク - **キーワード**: 夜の神社・提灯の灯り・明朝体の縦書き・全幅写真・静寂・幻想 - **地の質感**: 平らな明るいグレー地に、暗い夜景写真を全幅で挟む。写真のもつ光と闇のコントラストが質感の中心になる - **形**: ほぼ角丸なしの矩形。カードだけごく小さな角丸と細い枠線 - **温度感**: 地は冷たいグレー、写真は青紫と朱・提灯の暖色が混ざる夜の色温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F5F5F5` | テキストセクションの地色 | 30% | 画素の実測 | | `surface` | `#FCFCFC` | カード・アクセス情報枠の地 | 12% | 画素の実測 | | `background-alt` | `#FFFFFF` | 演奏予定セクションの白地 | 6% | 画素の実測 | | `primary` | `#020102` | ブランド色の漆黒（ボタン・帯） | 10% | 画素の実測 | | `cta` | `#020102` | 詳細誘導ボタンの地 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#18171A` | 見出し・日時の濃い文字 | 1% | 画素の実測 | | `text-body` | `#333333` | 本文の文字 | 2% | 推定 | | `line` | `#E2E3DE` | 小見出し下線・カード枠 | 0% | 画素の主要色に補正 | | `dark-section` | `#010101` | フッター最下部コピーライト帯 | 1% | 画素の実測 | | `accent-1` | `#CE1103` | ページトップボタンの朱赤 | 0% | 画素の実測 | | `tint-1` | `#F6F2E3` | カード画像の生成り和紙地 | 3% | 画素の実測 | - 地は明るいグレー一色で、色は写真に任せる - テキストは黒〜濃グレーのみで有彩色の文字を使わない - ボタンは黒地に白文字で統一する - 朱赤はページトップボタンなど極小の面だけに使う - 写真セクションは暗い夜景で、テキスト地とのコントラストでリズムを作る - カード画像には生成り色の和紙調の地を使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | コンセプトの縦書き大見出し | 明朝 | Shippori Mincho | 700 | 20px | 1.3 | 0.1em | | `headline-lg` | 写真上の演目名 | 明朝 | Shippori Mincho | 600 | 17px | 1.4 | 0.05em | | `headline-md` | 日時・開催情報の強調 | 明朝 | Noto Serif JP | 700 | 15px | 1.8 | 0.03em | | `headline-sm` | アクセス情報の小見出し | 明朝 | Noto Serif JP | 400 | 13px | 1.6 | 0.05em | | `body-md` | 中央揃えの本文 | 明朝 | Noto Serif JP | 400 | 9px | 2 | 0.05em | | `note` | ※注釈 | 明朝 | Noto Serif JP | 400 | 8px | 1.8 | 0.02em | | `label-button` | 黒ボタンの文字 | 明朝 | Noto Serif JP | 400 | 8px | 1.4 | 0.1em | | `accent` | ロゴ風の毛筆タイトル | 手書き・筆 | Yuji Syuku | 400 | 28px | 1.2 | 0em | - 全文を明朝体で組み、ゴシック体を使わない - コンセプト見出しとフッターナビは縦書きにする - 本文は中央揃えにして、短い行で改行する - 本文は小さめにして行間を 2.0 前後と広く取る - 日時は太字の明朝で 3 行に分けて組む - 項目名は【】で囲んで見出し代わりにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。演奏予定カードは 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 写真セクションは左右余白なしで全幅にする - テキストセクションは上下に 40〜60px の余白を取る - 演目写真は高さ約 160px で縦に連続して並べる - 写真の中央に演目名と黒ボタンを重ねる - アクセス情報は 1 枚の枠付きカードにまとめる - 地図は余白付きの全幅埋め込みにする ## Elevation & Depth - 影は使わずフラットにする - カードは 1px の薄いグレー枠で区切る - 写真上の文字は写真の暗さで読ませる。必要なら薄い暗幕を重ねる ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の横長矩形。角丸なし - **セクション境界**: 直線で切り替える。グレー地と暗い写真の境目がそのまま区切りになる - ボタンは角丸なしの黒い矩形にする - カードと情報枠だけ 4〜6px の角丸にする - 斜め・波形の区切りは使わない ## Components - **詳細誘導ボタン**（`button-primary`）: 写真中央に置く黒い角形の小ボタン。白い明朝文字で書く - **演目写真バナー**（`photo-banner`）: 全幅の夜景写真に、白い演目名とボタンを中央で重ねる - **FV タイトル枠**（`hero-title-box`）: 写真上部の細い白線の縦長枠に、毛筆ロゴと短いキャッチを入れる - **縦書き見出し**（`vertical-heading`）: 2 行の縦書き明朝見出しを中央に置く - **演奏予定カード**（`event-card`）: 生成り地の画像の下に、日付と回数を小さく置く枠付きカード - **アクセス情報枠**（`access-box`）: 交通手段ごとに小見出しと下線を付け、中央揃えで経路を並べる - **FAQ 開閉**（`faq-toggle`）: 三角記号と【】付きの見出しを置く枠付きアコーディオン - **ページトップボタン**（`pagetop`）: フッター右端に置く朱赤の正方形。白い山形矢印を入れる ## Do's and Don'ts **Do** - 夜の写真と明るいグレー地を交互に配置する - 文字はすべて明朝体で中央揃えにする - ボタンは黒の角形で統一する - 本文は短い行に分け、余白を広く取る - 見出しやナビに縦書きを取り入れる **Don't** - 鮮やかな色のボタンやバッジを使わない - 丸ゴシック・ポップ書体を使わない - 影やグラデーションの装飾を足さない - 写真に枠や角丸を付けない - 朱赤を大きな面で使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと言語切替・メニュー）: 白地の細い帯。左に小さなロゴ、右にハンバーガーを置く 2. **ファーストビュー**（夜の世界観を一目で伝える）: ライトアップした社殿の全幅写真。上部に細線枠の毛筆タイトルを置き、下に下向き矢印を付ける 3. **コンセプト**（イベントの物語を伝える）: グレー地に縦書きの見出しを置き、中央揃えの短文を 5 行ほど続ける 4. **イメージイラスト**（世界観を補強する）: 水墨風の全幅イラストを 1 枚置く 5. **開催概要**（日時・料金・支払い方法を伝える）: 太字の日時を 3 行で組み、【】見出しで料金と注意事項を中央揃えにする 6. **導入写真と案内文**（見どころへの期待を高める）: 全幅の夜景写真のあと、グレー地に中央揃えの長めの誘い文を置く 7. **演目紹介**（各コンテンツへ誘導する）: 全幅写真のバナー 4 枚を連続させ、それぞれに演目名と黒ボタンを置く 8. **スケジュール**（演奏日程を知らせる）: 白地に明朝の見出しを置き、2 列のカードで日程を並べる 9. **体験プラン**（オプション体験へ誘導する）: 暗い夜景写真に白い見出しと黒ボタンを重ねる 10. **アクセス**（会場と交通手段を案内する）: 枠付きカードで交通手段別に下線付き小見出しを付け、その下に地図を埋め込む 11. **よくある質問**（疑問を解消する）: 枠付きアコーディオンを 1 つ置く 12. **フッター**（ナビと連絡先）: グレー地に縦書きのナビを横に並べ、明朝のタイトルと住所・SNS を置く。最下部に黒いコピーライト帯を付ける ## Imagery - 夜の社殿を青紫と朱のライトアップで撮った、暗部の多い写真 - 提灯や行灯の暖色の点光源を入れる - 和装の人物は後ろ姿やシルエット中心で、情緒的に撮る - 狐をモチーフにした水墨・淡彩風の和風イラストを使う - 狐面などの小物を大胆に寄りで撮る - 毛筆のロゴ文字を生成りの和紙調の地に置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC も 1 カラムの縦積みで、写真は全幅のまま高さを広げる - PC のコンセプトは見出しと本文の両方を縦書きにする - 演奏予定カードは PC で 4 列にする - アクセス枠と FAQ は PC で幅約 65% の中央寄せにする - PC のヘッダーはタイトル枠を左上に重ね、ハンバーガーを省く ## 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-29533d5e`（元 LP の URL から採番） - **元 LP**: https://yutoku-night.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-18、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。