--- version: alpha name: Night Lantern Festival Event LP description: 濃紺〜黒の夜空色を地に、灯りのオレンジ金グラデーションとレモン黄を差し色にした夜のイベントLP。明朝の和の情緒と欧文セリフ見出しを組み合わせ、写真で幻想的な灯りを見せる。チケット部分だけグレー地とクリーム色カードに切り替えて、情報をはっきり読ませる。 colors: primary: '#082F56' background: '#151C2C' dark-section: '#05050F' background-alt: '#C8D0D3' surface: '#FAF7E4' tint-1: '#11203F' cta: '#CD9444' on-cta: '#FBF9E7' accent-1: '#D2D64B' accent-2: '#E8C26A' secondary: '#334D94' marker: '#F1D835' on-dark: '#FBF9E7' text: '#0E141E' line: '#8A93A6' cta-accessible: '#976928' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em headline-lg: fontFamily: Cinzel fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em accent: fontFamily: Playfair Display fontSize: 30px fontWeight: 700 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 24px 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}' rounded: '{rounded.sm}' height: 36px button-ticket: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 36px price-row: textColor: '{colors.text}' typography: '{typography.accent}' height: 44px highlight-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 80px numbered-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 300px outline-pill: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 32px faq-row: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 42px recruit-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 130px venue-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' height: 20px --- # DESIGN.md — 紺夜空×灯り金の夏祭りイベントLP（Night Lantern Festival Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: ラグジュアリー・ダーク、和風、上品・高級、情報量多め・訴求型 - **キーワード**: 夜空・灯り・和モダン・夏祭り・幻想的・チケット訴求 - **地の質感**: フラットな濃紺の面に、暗い写真とぼかした灯りの背景を重ねる。光沢はボタンのグラデーションだけに使う - **形**: 角丸は控えめ。写真カードはやや大きめの角丸、見出しはピル型の枠、チケット見出しは装飾リボン - **温度感**: 背景は冷たい紺。そこに暖かい橙金の灯りを対比させる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#082F56` | セクション地の濃紺 | 25% | 画素の実測 | | `background` | `#151C2C` | 基本の夜色背景 | 25% | 画素の実測 | | `dark-section` | `#05050F` | より暗い帯（ピック・募集枠） | 10% | 画素の実測 | | `background-alt` | `#C8D0D3` | チケットセクションのグレー地 | 12% | 画素の実測 | | `surface` | `#FAF7E4` | コンテンツ一覧のクリームカード | 12% | 画素の実測 | | `tint-1` | `#11203F` | 特長カードの面 | 3% | 画素の実測 | | `cta` | `#CD9444` | 予約ボタンの金橙グラデーション | 1% | 画素の実測 | | `on-cta` | `#FBF9E7` | CTAの上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#D2D64B` | チケット購入ボタン・会場ラベルのレモン黄 | 1% | 画素の実測 | | `accent-2` | `#E8C26A` | 金色の見出し文字・リンク | 0% | 推定 | | `secondary` | `#334D94` | チケット見出しのリボン青 | 0% | 画素の実測 | | `marker` | `#F1D835` | 割引帯・強調ボックスの黄 | 1% | 画素の実測 | | `on-dark` | `#FBF9E7` | 暗い地の上の文字 | 2% | 画素の主要色に補正 | | `text` | `#0E141E` | 明るい地の上の文字 | 1% | 画素の実測 | | `line` | `#8A93A6` | FAQ・概要の区切り線 | 0% | 推定 | | `cta-accessible` | `#976928` | AA を満たす補正値（計算） | | 計算 | - ページの大部分は濃紺と黒紺。セクションごとに明度を少しずつ変えて区切る - チケット情報だけはグレー地にして、昼の明るさで料金を目立たせる - 予約CTAには金橙グラデーションを使い、チケット購入ボタンにはレモン黄を使って、2種類を使い分ける - 暗い地の見出しや募集リンクは金色の文字にする - コンテンツ一覧はクリーム色の大きなカードにまとめ、紺の地から浮かせる - 赤は注意書きの日付や規約リンクだけに使う - `button-primary` は文字 `#FBF9E7` × 背景 `#CD9444` のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#976928`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真の上に置くキャッチ・締めのコピー | 明朝 | Shippori Mincho | 500 | 26px | 1.5 | 0.1em | | `headline-lg` | 欧文のセクション見出し | 欧文セリフ | Cinzel | 400 | 26px | 1.2 | 0.08em | | `headline-md` | 和文の小見出し・募集カードのタイトル | 明朝 | Noto Serif JP | 600 | 17px | 1.5 | 0.08em | | `headline-sm` | 特長カードのタイトル・料金ボックス | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.04em | | `accent` | 料金の数字・連番の数字 | 欧文セリフ | Playfair Display | 700 | 30px | 1.1 | 0.0em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.06em | | `note` | 注釈・小さな日本語の添え字 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.04em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.08em | - セクション見出しは、大きな欧文セリフの下に小さな和文の訳を添える - キャッチや情緒的なコピーは明朝で字間を広く取る。強調語だけ金色にする - 料金の数字は大きな欧文セリフにし、単位は小さめに添える - 本文は小さめのゴシックで、字間をやや広く取る - FAQの質問の頭には、欧文セリフのQを細い線で添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長は写真左＋テキスト右の横長カード - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの上下余白は 56〜80px - コンテンツ一覧はクリームカードの中で、写真→番号→説明を縦に積む - ピック項目は小さな正方形写真と、細い縦線で区切ったテキストの横並びにする - 開催概要は、ラベルと値を水平線で区切った定義リストにする - 画面下部に、イベント名と予約ボタンを並べた固定バーを置く ## Elevation & Depth - 基本はフラットにして、影を使わない - チケット購入ボタンだけは、弱い影と内側のハイライトで立体感を出す - 強調ボックスは黒い太枠で囲み、ステッカー風にする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸16pxの矩形。小さいサムネイルは正方形。帯写真は全幅で裁ち落とす - **セクション境界**: 直線で背景色を切り替える。写真帯は全幅の矩形にする - 予約CTAは角丸4pxの矩形にする - MOREボタンと見出し枠は、細線で囲んだピル型にする - チケット見出しには、下が尖った装飾リボン型を使う - 募集カードは角丸なしで、細い線の枠にする ## Components - **予約CTA**（`button-primary`）: 金から橙へのグラデーションを敷き、白い太字を中央に置く矩形ボタン - **チケット購入ボタン**（`button-ticket`）: レモン黄の大きなボタン。外部リンクのアイコンと影を付ける - **リボン見出し**（`ribbon-heading`）: 青地に白い明朝を載せ、白い縁取りを付けた装飾リボン - **料金行**（`price-row`）: 黒いラベルと大きな数字を並べ、点線で区切る - **特長カード**（`highlight-card`）: 紺の面に、左に写真、右にタイトルと説明を置く横長カード - **連番コンテンツ**（`numbered-item`）: 斜線の飾りを背にした金色の番号と、小さなラベルを写真の下に置く - **細線ピル見出し・MORE**（`outline-pill`）: 細い線で囲んだピル型。写真の上の見出しやMOREボタンに使う - **FAQ行**（`faq-row`）: Qアイコン、質問、右端の＋を一列に並べ、上下を線で区切るアコーディオン - **募集カード**（`recruit-card`）: 細い線の枠の中に、明朝のタイトル、説明、金色の下線付きリンクを置く - **会場ラベル**（`venue-badge`）: レモン黄の小さな矩形ラベル。横に日付を並べる ## Do's and Don'ts **Do** - 暗い紺の地に、暖色の灯りの写真を大きく使う - 欧文セリフと明朝を組み合わせて、和モダンの品を出す - 料金とチケットはグレー地のセクションにまとめ、はっきり読ませる - CTAは複数箇所に置き、下部の固定バーでも予約へ誘導する - 注意書きは小さな文字にして、重要な日付だけ赤にする **Don't** - 白い地を全面に使わない - 原色の派手なグラデーションや、ポップな丸ゴシックを使わない - 金とレモン黄を同じボタンで混ぜない - 重い影やネオン効果を付けない - 写真を明るく補正しすぎて、夜の雰囲気を壊さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（イベント名・日程・会場を一目で伝える）: 灯りの全面写真の中央に、縦組みの和ロゴと日程を置く。右下に割引バッジを付ける 2. **お知らせ帯**（最新情報とSNSへの誘導）: 黒い帯に、欧文の見出しと日付付きの1行ニュースを置く 3. **コンセプト**（情緒的に世界観を伝える）: 全幅の写真に、明朝のキャッチを中央で重ねる 4. **ピックアップ**（魅力を3点で要約する）: サムネイル付きの3行リストの下に、予約CTAを置く 5. **特長**（安心できるポイントを3つ伝える）: 欧文見出しの下に、写真付きの横長紺カードを3枚並べる 6. **チケット料金**（価格と購入方法を示す）: グレー地に、リボン見出し、料金、黄ボタン、条件ボックス、イラスト付き強調枠を順に置く 7. **イベント内容**（楽しみ方を具体的に見せる）: クリームカードの中に、連番付きの写真ブロックを6つとMOREボタンを置く 8. **注目スポット**（目玉の展示を印象付ける）: 全幅の暗い写真に、細線のピル見出しと明朝の名称を重ねる 9. **よくある質問**（不安を解消する）: 線で区切ったアコーディオンを5行並べる 10. **フォトギャラリー**（当日の雰囲気を見せる）: 横にスクロールする写真カルーセル 11. **開催概要**（会場・日時・主催を示す）: 会場ラベルと地図を置き、その下に罫線区切りの定義リストを続ける 12. **クロージングCTA**（最後の予約を後押しする）: 灯りをぼかした背景に、明朝のコピーと金橙のボタンを置く 13. **募集**（出店・協賛などの問い合わせを集める）: 金色の見出しの下に、細線枠のカードを4枚並べる 14. **フッター**（運営情報を示す）: ロゴ、SNSアイコン、会社説明、住所、グレーのピルボタンを置き、固定の予約バーを付ける ## Imagery - 夜空に浮かぶ無数の暖色ランタンを、群衆越しに撮る - 浴衣・縁日・屋台・ステージなど、夏祭りの人物スナップ - 暗部を残したシネマ調の色補正で、灯りの橙を際立たせる - 背景のボケた光を、写真帯やCTA背景に使う - 人物は線画風の簡素なイラストにして、強調枠に添える - 斜線のパターンを、番号や角の飾りに使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは特長カードを3カラムの縦型にする - PCではイベント内容を2カラムのグリッドにする - PCのチケットは、左に料金、右に購入ボタンの2カラムにする - PCの募集カードは2×2のグリッドにする - PCではヘッダーにナビゲーションを横並びで表示する。SPではハンバーガーメニューにする - 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-73bed0ec`（元 LP の URL から採番） - **元 LP**: https://snc-ts.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。