DESIGN.md — 芝生グリーン×珊瑚レッドの野外祭りイベントLP（Festive Green Carnival Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 野外フェス・電飾看板・芝生・ガーランド・お祭り・家族向け
• 地の質感: フラットな塗りが中心。生成りの地に大きなベージュの円形パターンを敷き、雲形・山形のシルエットで場面を切り替える
• 形: ピル型の見出し枠（緑の電飾ドット付き）、大きな角丸カード、上辺がアーチ状の写真、円柱形の台座
• 温度感: 暖かく陽気。夏祭りの昼間のような明るさ

Colors

• 地は生成りベージュで統一し、白は見出し枠とカードの内側にだけ使う
• ブランド面は芝生グリーン。目玉イベントのカードは全面をグリーンで塗る
• 行動ボタンはすべて珊瑚レッドのピル型にし、右端に白丸の矢印アイコンを置く
• 見出し文字は珊瑚レッド、英字のサブは黒の小さい太字にする
• 濃い緑は電飾枠、日付、交通情報のバーなど構造を示す部分に使う
• 黄色と水色はガーランドやラベルの差し色にとどめる
• heading-marquee は文字 #F25550 × 背景 #FEFEFE のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E91811、4.52:1）を使う。
• button-primary は文字 #FFEFE8 × 背景 #FE5451 のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE0501、4.55:1）を使う。
• event-feature-card は文字 #FFEFE8 × 背景 #6EC329 のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#467B1A、4.57:1）を使う。

Typography

• 見出しは極太の角ゴシックで、赤文字を白いピル型の枠に入れる
• 日本語の見出しの下に英字のサブ見出しを小さく添える
• 本文はすべて中央揃えにし、短い文ごとに改行する
• 語尾に「！」「♪」を多めに使い、口語のテンションにする
• 注意書きは「※」で始め、紺色の太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。下位イベントは 3 列の細いカードを並べる
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションの頭にテント形の装飾を置き、その下に電飾枠の見出しを中央に置く
• 目玉イベントは画面幅の約8割の縦長カードにし、写真・番号・タイトル・説明・ボタンの順に並べる
• 下位イベントは 3 列のカードを縦位置をずらして並べ、リズムをつける
• 交通情報は濃い緑のバーの下に、左に駅名・右に所要時間の表を置く
• 協賛ロゴは中央揃えで折り返しながら並べる

Elevation & Depth

• カードには下方向に弱い影をつける（例: 0 2px 6px rgba(0,0,0,.15)）
• 電飾枠の見出しには右下に濃い影をつけ、看板のように立体的に見せる
• ボタンは影なしのフラットにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 目玉イベントは上辺を大きくアーチ状に切った写真、出場者紹介は人物の切り抜き、カードの写真は下端を芝生のシルエットで切る
• セクション境界: 雲形・山形のシルエットとベージュの大きな円で区切る。直線の区切りはほぼ使わない
• 見出しは緑の太枠に黄色いドットを並べた電飾付きのピル型にする
• EVENT番号は左に旗竿と星を付けたフラッグ型ラベルにする
• 募集中を示すラベルは赤い長方形をカード上部の右に少し重ねて置く
• 台座は上面が緑の楕円、側面が茶色の円柱にする

Components

• 電飾看板風の見出し（heading-marquee）: 上にテント形の飾り、緑の太枠に黄色のドット、白い中に赤い日本語と黒い英字
• 珊瑚レッドのピル型ボタン（button-primary）: 白い文字を左に寄せ、右端に白丸の矢印を置く
• 白地に緑枠の大きいリンクボタン（button-outline-link）: 白いピル型に太い緑枠、黒の太字、右に赤丸のアイコン。左上に小旗のラベルを付ける
• 目玉イベントのグリーンカード（event-feature-card）: アーチ型の写真の下に、EVENTフラッグ、白抜きのタイトル、説明、ボタンを並べる
• 3列の小さいイベントカード（event-card）: 白い角丸カード。上に緑のEVENTフラッグと赤い募集ラベル、下端が芝生の写真、色付きのタイトル
• 芝生の台座と切り抜き写真（pedestal-stage）: 円柱形の台座の上に人物の切り抜きを置き、緑枠の吹き出しでタイトルを付ける
• 日付のピル（date-pill）: 1日目は濃い緑、2日目はライムで、大きな数字と小さな曜日を入れる
• 交通手段の見出しバー（access-bar）: 緑の角丸バーに白い乗り物アイコンと白い文字

Do's and Don'ts

Do - 見出しは電飾枠とテントの飾りの組み合わせで統一する - ガーランドや星付きの旗竿など、お祭りの小物を要所に置く - 行動ボタンは赤のピル型に揃え、矢印アイコンを必ず付ける - カードは縦位置をずらし、整列しすぎない楽しさを出す - 写真は昼の屋外で、人が動いている場面を選ぶ

Don't - 暗い背景や寒色中心の配色にしない - 細い明朝体や繊細な書体を使わない - 見出しを装飾のない素の文字にしない - ボタンを角張った四角や赤以外の色にしない - 余白を詰めすぎて情報表を読みにくくしない

Page Structure

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

1. ファーストビュー（開催日・会場・入場無料を一目で伝える）: 空色から緑の丘へ続くイラストに街のランドマークを配し、中央にロゴと日時を置く。下にガーランドと回数の星バッジ
2. 主催者メッセージ（テーマと開催の意義を伝える）: 斜めの緑ラインで挟んだ極太のロゴ文字と、中央揃えの3行の文
3. アーカイブへの導線（過去回への関心を高める）: 小旗のラベル付きで、白地に緑枠のピル型の大きなボタン
4. 出場者募集（参加エントリーを集める）: 2列の台座に切り抜き写真をのせ、吹き出しでタイトル、手書き風の斜め文字で状況を表示し、赤ボタンを置く
5. イベント紹介（目玉）（主要な企画の魅力を伝える）: 日付ピルの下に、アーチ写真付きのグリーンカードを縦に3枚並べる
6. イベント紹介（一覧）（そのほかの企画を一覧で見せる）: 3列の白いカードにEVENT番号と募集ラベルを付け、ずらして並べる
7. エリアマップ（会場内の配置を示す）: 白い角丸の枠に、緑系のフラットなイラスト地図を入れる
8. アクセス（来場方法を案内する）: 路線図のイラストと埋め込み地図を置き、緑のバーごとに駅名と所要時間の表を並べる
9. お問い合わせ（問い合わせへ誘導する）: 雲形のシルエットの上に、オレンジから赤のグラデーション枠のピル型ボタン
10. 開催概要・協賛（信頼性を示し、情報をまとめる）: ロゴと日時を再掲し、オレンジ色の大きな電話番号、主催・協賛のロゴを並べ、最後にSNSアイコン

Imagery

• 写真は晴天の屋外イベント。屋台、ステージ、スポーツ中の子どもなど躍動感のある場面
• 人物は白フチ付きの切り抜きにし、台座やカードからはみ出させる
• イラストは輪郭線の少ない明るいフラット調。街並み、観覧車、屋台車、テントなど
• 装飾として三角旗のガーランド、星、木、カニやフグのような地域のキャラクターを散らす
• 地図もイラスト調で、緑とグレーのフラットな色分けにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで、ファーストビューのイラストはSPとほぼ同じ構図
• PCではヘッダーにメニューと赤い問い合わせボタンを横に並べる
• 目玉イベントはPCで写真と文を左右交互に配置し、グリーンの曲線帯でつなぐ
• 交通情報はPCで3列に並べる
• 協賛ロゴはPCで1行に並ぶ数を増やす

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