DESIGN.md — 芥子色格子×朱赤のレトロ和祭りイベントLP（Retro Japanese Festival Pop Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 和風、ポップ・元気、レトロ、情報量多め・訴求型
• キーワード: 和柄パターン・縁日・レトロポップ・白カード・朱赤明朝・手描きイラスト
• 地の質感: 格子・菊・チェックの和柄を地全面に敷き詰め、その上に影のないフラットな白カードを重ねる。
• 形: カードは大きめの角丸。セクションの境目は波線で区切る。ボタンはピル型。
• 温度感: 暖色寄りの賑やかさ。若草色の地が全体のトーンを和らげる。

Colors

• 背景はセクションごとに柄つきの色地に切り替え、同じ地を隣り合わせない。
• 内容は必ず白カードに載せ、柄の上に直接文字を置かない。
• 朱赤は見出し・主ボタン・リンク・強調の価格に限って使う。
• 一般とVIPの区別は若草色と朱系の淡い色で示す。
• 販売終了したボタンは無彩色のグレーにする。
• フッターはサーモン地にし、最下部を藤色チェックの帯で締める。
• button-disabled は文字 #FFFFFF × 背景 #8A8A8A のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 見出しから本文までをほぼ明朝体でそろえ、レトロな和の雰囲気を出す。
• セクション見出しは朱赤で字間を広くとり、中央に置く。
• ボタンだけはゴシック体にして視認性を確保する。
• カード内の見出しの下に、藤色の短い下線を引く。
• FAQではQを朱赤、Aを黄土色の記号にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（時間割だけ 2 列）
• 本文ブロックの幅: 画面幅の約 72%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面幅の約72%で中央に置き、左右には柄の地を広く見せる。
• カード同士の間隔は16px前後。
• 各セクションは扇子付きの見出しから始める。
• カードの上辺に松と水引の飾りを重ねる。
• 時間割は左に時刻、右に一般・VIPの2列を置く。

Elevation & Depth

• 影はほぼ使わず、地の柄と白の色差でカードを浮かせる。
• 装飾イラストはカードの角からはみ出させて立体感を出す。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: カード上部いっぱいに写真を置き、上の角だけ角丸にする。
• セクション境界: 波線で区切るほか、柄の切り替えで直線的に区切る。
• カードは大きめの角丸の白。
• ボタンは全幅に近いピル型。
• 時間割のセルは角丸のチェック柄タイルにする。
• 吹き出しは角丸に朱の細い枠をつける。

Components

• 朱赤ピルボタン（button-primary）: 白文字で、右端に白丸の矢印アイコンを置く。
• 販売終了ボタン（button-disabled）: グレーのピル型。左上に完売バッジを斜めに載せる。
• 扇子付き見出し（section-heading-fan）: 朱赤の明朝見出しの左右に紅白の扇子アイコンを置く。
• 白コンテンツカード（card-white）: 柄の地の上に置く角丸の白カード。上辺に松と水引の飾りを載せる。
• 芥子色見出し帯付き情報カード（info-card-header）: 上部に芥子色の格子帯と小さな紋章、項目名を置き、下に白い本文欄を続ける。
• 2列時間割（timetable）: 点線の時刻罫線の上に、一般は若草、VIPは朱系のチェック柄タイルを並べる。
• 料金カード（price-card）: 丸い区分バッジと券名を並べ、仕切り線の下に朱赤の大きな価格を中央揃えで置く。
• Q&Aカード（faq-item）: 白カードに朱のQと黄土色のAを置き、本文はぶら下げインデントにする。
• キャラクター吹き出し（speech-bubble）: だるまキャラの横に、朱の枠で囲んだ白い吹き出しを置く。
• お知らせカード（news-card）: 白カードの上に日付、下に本文を並べる。

Do's and Don'ts

Do - 背景はセクションごとに異なる和柄（格子・菊・チェック）で敷き詰める。 - 内容はすべて白い角丸カードに入れる。 - 見出しの左右には扇子を飾る。 - だるま・提灯・花・松などのイラストをカードの縁からはみ出させて散らす。 - 本文も明朝体にしてレトロな和の印象を統一する。

Don't - 無地の単色背景だけで構成しない。 - 朱赤を本文の広い範囲に使わない。 - 角の立った四角いカードやボタンを使わない。 - 現代的なサンセリフを見出しに使わない。 - 柄の上に直接本文を置かない。 - 濃い影やグラデーションの立体表現を使わない。

Page Structure

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

1. ファーストビュー（祭りの世界観を一目で伝える）: 芥子色の格子地の中央に、ロゴ・だるま・虎・提灯の密なイラストを置く。左右は縁飾りの柱で挟み、下に朱赤のショップ帯ボタンを置く。
2. コンセプト紹介（イベントの趣旨を伝える）: サーモン地の上に白カードを置き、だるまを左右に添えた見出しの下に本文を続ける。続けて動画枠と会場イメージ写真を並べる。
3. イベント概要（日時・会場・入場方法を伝える）: 若草色の菊柄の地に、芥子色の見出し帯付き情報カードを3枚縦に並べる。
4. チケット（券種と時間割、価格を示す）: 芥子色の格子地に吹き出しと2列時間割、料金カード2枚を置き、最後に申込ボタンを配置する。
5. 限定グッズ（物販を案内する）: 白カードに商品の切り抜き写真をグリッド状に並べ、説明文とボタン、販売期間を続ける。
6. 協賛企画（個人スポンサーを募集する）: 放射状の光を背負った提灯イラストを中央に置き、下に説明文とボタンを続ける。
7. イベントガイド（会場の各エリアを紹介する）: 若草色の地に、写真を上に載せたカードを縦に並べ、エリア名と本文を入れる。
8. よくある質問（不安を解消する）: 藤色チェックの地にQ&Aカードを並べ、最後に朱赤ボタンを置く。
9. お知らせ（更新情報を伝える）: 若草色の地に、日付と本文を入れた白カードを並べる。
10. フッター（リンクと運営情報を示す）: 波線の下をサーモン地にしてロゴと提灯を置く。リンクは縦線で区切り、半透明の白枠にクレジットを入れる。最下部は藤色チェックの帯で締める。

Imagery

• 昭和レトロ調の手描きイラスト（だるま、虎、蛸、提灯、招き猫、扇子）を使う。
• 椿・菊・百合などの花のイラストを、カードの角に添える。
• 紅白の水引と松を、カード上辺の飾りとして使う。
• 写真は縁日の屋台や夜のやぐらなど、暖色の照明が入った情景にする。
• グッズは白背景の切り抜きで、色違いを横に並べる。
• 未定の枠はドット地にキャラクターと大きな文字で予告する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを横長にし、左右の柱装飾を残す。
• PCのコンテンツ幅は約65%で、中央に置く。
• 概要カードはPCでは左に項目名、右に内容の横並びにする。
• ガイドカードはPCでは左に本文、右に写真の2カラムにする。
• グッズはPCでは横に多列で並べる。
• ボタンは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 行書くと起動時に読み込まれる。