DESIGN.md — 紺夜空×灯り金の夏祭りイベントLP（Night Lantern Festival Event LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ラグジュアリー・ダーク、和風、上品・高級、情報量多め・訴求型
• キーワード: 夜空・灯り・和モダン・夏祭り・幻想的・チケット訴求
• 地の質感: フラットな濃紺の面に、暗い写真とぼかした灯りの背景を重ねる。光沢はボタンのグラデーションだけに使う
• 形: 角丸は控えめ。写真カードはやや大きめの角丸、見出しはピル型の枠、チケット見出しは装飾リボン
• 温度感: 背景は冷たい紺。そこに暖かい橙金の灯りを対比させる

Colors

• ページの大部分は濃紺と黒紺。セクションごとに明度を少しずつ変えて区切る
• チケット情報だけはグレー地にして、昼の明るさで料金を目立たせる
• 予約CTAには金橙グラデーションを使い、チケット購入ボタンにはレモン黄を使って、2種類を使い分ける
• 暗い地の見出しや募集リンクは金色の文字にする
• コンテンツ一覧はクリーム色の大きなカードにまとめ、紺の地から浮かせる
• 赤は注意書きの日付や規約リンクだけに使う
• button-primary は文字 #FBF9E7 × 背景 #CD9444 のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#976928、4.54:1）を使う。

Typography

• セクション見出しは、大きな欧文セリフの下に小さな和文の訳を添える
• キャッチや情緒的なコピーは明朝で字間を広く取る。強調語だけ金色にする
• 料金の数字は大きな欧文セリフにし、単位は小さめに添える
• 本文は小さめのゴシックで、字間をやや広く取る
• 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。