DESIGN.md — 朱赤×青緑×漆黒の和風夏祭りイベント LP（Japanese Summer Night Festival Event LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 和風、力強い・インパクト、情報量多め・訴求型、ラグジュアリー・ダーク
• キーワード: 夏祭り・提灯・夜・和モダン・二部構成・スケジュール表
• 地の質感: 赤と青緑の背景に、和紙や漆喰のような粗い粒子のテクスチャを敷く。カードは無地の生成り。
• 形: 角丸が小さめのカード、直角の日付ラベル、提灯型の部番号バッジ、ピル型の購入ボタン
• 温度感: 暖色の朱赤と寒色の青緑で企画を対比させる。全体は夜の暗さで締め、夏の夜らしい熱気を出す。

Colors

• 企画は 2 つの色で区別する。第一部は朱赤、第二部は青緑。セクション地も、FV 内のカードも同じ色分けにする。
• 共通の情報（縁日・グッズ）は漆黒地に置く。実務的な情報（料金・アクセス）は薄灰地のカードにまとめる。
• 詳細情報は必ず生成りか白のカードに載せ、色地の上で読ませない。
• 日付ラベル・表のヘッダー・開閉ボタンは濃臙脂で統一する。
• 黄はヘッダーのチケットボタンだけに使う。購入ボタンは黒地に白文字。
• 色地の上では白の明朝体を使い、本文は中央揃えか左揃えにする。

Typography

• 見出しから本文まで明朝体で通し、和の格調を出す。
• 企画名の下に、小さな英字のサブタイトルを添える。
• 日付ラベルは「数字＋小文字の曜日英字」の形にする。
• 表のラベルは小さめのゴシック体か太字にして、本文と区別する。
• 注釈は ※ を付け、ぶら下げインデントで組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカード内で画像を左、テキストを右に置く 2 カラム。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 色地の上に、左右 24px 程度の余白をとってカードを縦に積む。
• カード同士の間隔は 16px。
• 日程表は「日程｜内容」の 2 列で、SP では行を縦に並べる。
• 詳細情報は「ラベル行（灰地）＋値行（白地）」の交互の表にする。
• セクション冒頭に、部番号バッジ・大見出し・英字サブタイトル・本文・暗色の概要ボックスを順に置く。

Elevation & Depth

• 影はほとんど使わない。地とカードの色差で階層を見せる。
• カードはフラットにして、角丸だけを付ける。

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: カード幅いっぱいの長方形。角丸なし。
• セクション境界: 直線で背景色を切り替える。
• カードの角丸は 8〜12px。
• 日付ラベルと表は直角。
• 購入ボタンは黒のピル型。
• 部番号は提灯型の白いバッジで示す。

Components

• チケットボタン（header-ticket-button）: 右上に固定する黄色のピル型ボタン。チケットのアイコンを付ける。
• 提灯型の部番号バッジ（chapter-badge）: 提灯の形をした白地に、部番号を縦書きで入れる。
• 企画概要カード（chapter-card）: 赤または緑の角丸カード。企画名と、生成りの日付ボックスを入れる。
• 日付ラベル（date-tag）: 濃臙脂地に白文字の小さな矩形を横に並べる。
• イベント詳細カード（event-card）: 生成り地に、写真・日付・名称・本文・情報表・注釈を順に入れる。
• 日程表（schedule-table）: 濃臙脂のヘッダーを付けた 2 列の表。開催日には提灯のマークを付ける。
• 開閉ボタン（accordion-button）: 濃臙脂地の角丸ボタン。右端に＋を置く。
• 購入ボタン（button-primary）: 黒のピル型。左に矢印アイコン、右に外部リンクアイコンを付ける。
• 番号丸（number-circle）: チケットの種類を示す黒丸の番号。

Do's and Don'ts

Do - 企画ごとに固有のテーマ色を決め、セクション地とカードで同じ色を繰り返す。 - 見出しは明朝体にし、英字サブタイトルを添える。 - 情報はラベルと値の表に分けて整理する。 - 背景に和紙のような粒子テクスチャを敷く。 - 日付は小さなラベルにして横に並べる。

Don't - 丸ゴシックやポップな書体を使わない。 - 色地の上に長い本文を直接置かない。 - グラデーションのボタンや強い影を使わない。 - 朱赤・青緑・黒以外の地色を増やさない。 - パステル調の配色にしない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（祭りの世界観とタイトルを伝える）: 夜空・提灯・群衆の合成写真の上に、和文ロゴと二部構成のタイトルを載せる。
2. 開催概要（二部の日程と時間を示す）: 黒地に赤と緑のカードを縦に並べる。続けて大きな時刻表示と、中央揃えの紹介文を置く。
3. 第一部の紹介（企画の内容を説明する）: 粗い質感の朱赤地に、提灯バッジ・見出し・本文・臙脂の概要ボックスを置く。
4. 日程表（日ごとの出演を示す）: 月別の 2 列表にする。PC ではカレンダー形式にする。
5. イベント詳細（各ゲスト企画を紹介する）: 生成りのカードを積み、写真・日付ラベル・説明・情報表を入れる。
6. キャラクター企画（子供向け企画を訴求する）: 白文字の見出しの下にカードを並べ、開閉ボタンを付ける。
7. 第二部の紹介（もう一方の企画を説明する）: 青緑の質感地で、第一部と同じ構成をとる。
8. 縁日・フォトスポット・ラジオ（その他のコンテンツを紹介する）: 黒地の上の薄灰カード内に、下線付きの見出しと表を置く。
9. グッズ（物販を紹介する）: 黒地に写真・商品名・価格・黒ラベルの販売場所を並べる。
10. インフォメーション・チケット（料金と購入への導線を示す）: 英字の大見出しの下に薄灰の大きなカードを置く。番号付きのチケットと黒のピル型ボタンを入れる。
11. アクセス（場所を案内する）: 地図の埋め込みと、白丸付きの交通手段リストを置く。
12. 協賛・フッター（協賛と権利表記を示す）: クリーム地に協賛を置き、黒地のフッターにクレジットを入れる。

Imagery

• 夜空の下で提灯が灯る、祭りの群衆の写真を使う。彩度は高めにする。
• 着物・舞妓・時代劇などの人物写真は、自然光か夜間のライトアップで撮る。
• 赤い提灯のモチーフを、バッジやアイコンにも繰り返し使う。
• 背景には和紙のような粒子のノイズを重ねる。
• グッズは明るい背景の上で手に持たせて撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、FV の写真を横長にしてロゴを中央に置く。二部のタイトルは写真の下に帯状に並べる。
• PC では、日程表を曜日 7 列のカレンダーに変える。
• PC では、イベントカードを「画像を左、テキストを右」の 2 カラムにする。
• PC では、グッズを画像とテキストが左右に入れ替わるジグザグ配置にする。
• PC では、コンテンツ幅を約 80% にして余白を広げる。

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 行書くと起動時に読み込まれる。