DESIGN.md — 朱赤×生成りの和柄イベント告知 LP（Japanese Shrine Festival Event LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 和風、上品・高級、親しみ・手作り感
• キーワード: 和柄・朱赤・生成り・雲の装飾・神社・祭事
• 地の質感: 和紙のような生成り地に、紗綾形・麻の葉・亀甲の柄を薄く敷く
• 形: 四角い写真ブロックに、横長の雲形装飾を角に重ねる。日時は大きな白い円で囲む
• 温度感: 暖色寄り。朱赤と金茶で温かく格式を出す

Colors

• 地は生成りと白を交互に使い、柄地のセクションで区切る
• 朱赤は見出し文字・紗綾形の帯・フッター・送信ボタンに絞る
• 金茶は日時情報と雲の装飾に使い、高級感を足す
• サーモンピンクは挨拶カードの外枠と雲の装飾に限る
• 本文はダークグレーで、強調語だけ朱赤にする
• date-circle-band は文字 #A8823C × 背景 #900606 のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 見出しは中央揃えで朱赤の明朝・装飾系を使う
• 本文は小さめで字間を広く、行間は2.0
• 日時情報は大きめの金茶文字で一行ずつ並べる
• 小見出しは「＼ ／」や「〜 〜」で囲む装飾を使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。思い出セクションは PC で 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出し→写真→本文の順で縦に積む
• 写真は横幅いっぱいか、左右に少し余白をとる
• 日時は帯の中央に大きな白い円を置く
• 地図はページ幅いっぱいに置く

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• 挨拶カードだけ外枠の色面で浮かせる
• スケジュール枠は二重線と奥にずらした板で立体感を出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いまま。雲の装飾を角に重ねる
• セクション境界: 直線で区切る。柄地の帯や雲の装飾で切り替えを示す
• ボタンは角張った長方形にする
• 日時は円形の白抜きで囲む
• 雲形はなめらかな横長の段々の形にする

Components

• 日付の丸バッジ（fv-date-badge）: FVの左に置く白い円。朱赤の細い線で囲み、日付・時間・場所を入れる
• 挨拶カード（message-card）: サーモン色の枠の中に白いカードを置き、中に挨拶文と動画を入れる
• 紗綾形帯の日時円（date-circle-band）: 朱赤の紗綾形の帯に大きな白い円を置き、金茶で日時を書く
• 雲の装飾（cloud-ornament）: 金茶・朱色・サーモン色の横長の雲を、写真の角やセクションの境目に置く
• スケジュール枠（schedule-frame）: 麻の葉柄の地に、朱赤の縦線で囲んだ白い枠を置き、番号付きで進行を並べる
• 地図リンクボタン（button-outline）: 白地に黒の細い枠線を引いた四角いボタン
• 下線マーカー（underline-marker）: 朱赤の文字の下に金茶の太い下線を引く
• 問い合わせフォーム（contact-form）: 薄い枠線の入力欄。【必須】は赤い小さな文字。朱赤の送信ボタンを中央に置く
• 送信ボタン（button-primary）: 朱赤の四角いボタンに白い太字

Do's and Don'ts

Do - 地は生成りにして、朱赤・金茶・サーモン色だけでまとめる - 和柄を薄く敷いた地や帯でセクションの調子を変える - 写真の角に雲の装飾を重ねて和の雰囲気を出す - 見出しは中央揃えにして、字間を広くとる

Don't - 青や緑などの寒色を装飾に使わない（地図は除く） - ピル型ボタンや強い影は使わない - 派手なグラデーションを使わない - 本文を太いゴシックで詰めて組まない

Page Structure

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

1. ファーストビュー（イベントの世界観と開催情報を見せる）: 縦長のコラージュイラストを中央に置き、和柄と雲を散らす。下に手書き風のロゴ、左に日付の丸バッジを置く
2. お知らせ・挨拶（開催の報告と動画を見せる）: サーモン色の枠に白いカードを入れ、中に挨拶文と埋め込み動画を置く
3. 会場紹介（会場の由来を伝える）: 朱赤の見出しの下に写真を置き、雲の装飾を重ねる。続けて本文
4. 開催日時（日時・場所・参加費を伝える）: 紗綾形の朱赤の帯に白い円を置き、金茶で情報を書く。注意書きに下線マーカーを引く
5. 見どころ（会場の体験要素を紹介する）: 写真・小見出し・本文を縦に並べる。PCでは2カラム
6. スケジュール（進行を伝える）: 麻の葉柄の地に縦線で囲んだ白い枠を置き、番号付きリストで並べる
7. ルート（順路を示す）: 見出し・説明・枠線ボタンの下に、幅いっぱいの地図を置く
8. 関連会合の紹介（背景にある取り組みを伝える）: 生成り地に二行の見出し、写真、本文を並べる
9. 後援（協力団体を示す）: 白地に見出しと団体名を中央揃えで並べる
10. 問い合わせ（問い合わせを受け付ける）: 生成り地に縦並びのフォームと朱赤の送信ボタンを置く
11. フッター（ロゴとSNSを置く）: 朱赤の地に白抜きのロゴ、SNSアイコン、リンクを中央に置く

Imagery

• FVは鳥居・森・水しぶきを組み合わせた和風コラージュイラストにする
• 和柄は紗綾形・麻の葉・亀甲を、薄い色かはっきりした朱赤で使う
• 雲の装飾は単色フラットな段々形で、金茶・朱・サーモン色の3色にする
• 写真は神社や体験の様子を明るい自然光で撮る
• 背景に桜の花びらのような淡いピンクの点を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文を中央の約60%幅に収め、和柄の装飾を左右に広げる
• 会場紹介はPCで写真左・本文右の2カラムにする
• 見どころはPCで2カラムのカードにする
• 地図と柄の帯はPCでも画面幅いっぱいにする
• フォームはPCで幅を約50%に狭める

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