DESIGN.md — 赤×ミント×オレンジのポップな酒イベントLP（Pop Grainy Festival Event LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: フェス・グレインノイズ・ギザギザ吹き出し・チケット型・縦書き英字帯・色面カード
• 地の質感: 面にざらついたノイズ粒子とグラデーションを重ね、シルクスクリーン風の質感にする
• 形: 星形ギザギザ、円、ピル、チケット、ボトルやグラスのシルエットを大胆に配置
• 温度感: 暖色寄りでにぎやか。ミントで爽やかさを足す

Colors

• 地は生成り一色で、色はすべて図形とカードで載せる
• 赤は日本語見出しと価格・ラベル・CTAに集中させる
• 英字サブ見出しはオレンジで小さく添える
• イベント紹介カードはコーラル→ミント→オレンジの順に色面を切り替える
• 色面にはノイズ粒子と同系グラデーションを必ず重ねる
• FAQだけは白カード×金茶文字で落ち着かせる
• side-vertical-band は文字 #F5A3A0 × 背景 #FCF9F4 のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#E21F18、4.5:1）を使う。
• burst-bubble は文字 #FFFFFF × 背景 #F36B6C のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#EA1315、4.56:1）を使う。
• ticket-price は文字 #FFFFFF × 背景 #F24343 のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EA1010、4.59:1）を使う。
• color-event-card は文字 #FFFFFF × 背景 #3BBDAB のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#298376、4.56:1）を使う。
• photo-label は文字 #FFFFFF × 背景 #F36B6C のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#EA1315、4.56:1）を使う。
• faq-accordion は文字 #AB9C7B × 背景 #FEFEFE のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#837454、4.54:1）を使う。

Typography

• 見出しは赤の日本語＋下にオレンジの英字を中央揃えで2段組
• 数字・英字は幾何学的な極太サンセリフ
• 本文は字間広め・行間1.9で軽く読ませる
• 吹き出し内は数字だけ大きくしてサイズ差をつける
• 左右の縦書き英字はアウトラインの極太で連続させる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品画像のみ 3 列グリッド
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右約30pxは縦書き英字帯として常時確保
• 本文ブロックは帯の内側に収める
• 色面カードは本文幅いっぱいに隙間なく縦に積む
• 吹き出し図形は左右交互にずらして配置
• セクション間にボトルやグラスの装飾を端からはみ出させる

Elevation & Depth

• 影はほぼ使わずフラット
• 購入ボタンは赤のずらしベタ影（オフセット4px程度）
• チケット図形に薄いベージュのずらし影
• FAQカードは影なしで白面のみ

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角の写真を細い赤枠で囲み、角に赤ラベルを重ねる。グッズはピル型縦長面に切り抜き
• セクション境界: 直線で切り替え、装飾図形を境目に重ねる
• 吹き出しは星形ギザギザ・円・角丸ブロブを混在
• 価格はミシン目付きチケット形
• CTAは角丸なしの四角枠
• FAQカードは角丸8px

Components

• 縦書き英字帯（side-vertical-band）: 左右端にアウトラインの英字を縦に連続表示
• ギザギザ特長吹き出し（burst-bubble）: 星形・円形のノイズ色面に白文字で数字を大きく入れる
• チケット型価格表示（ticket-price）: 赤チケットに白の大きな価格、下にオレンジのマーカー線
• 購入ボタン（button-primary）: 白地に赤枠・赤文字、ずらし赤影の四角ボタン
• 和英2段見出し（section-title）: 赤の日本語見出し＋オレンジの英字小ラベル
• 色面イベントカード（color-event-card）: ノイズ色面に白見出し・写真・白本文
• 写真角ラベル（photo-label）: 赤枠写真の下角に重ねる赤地白文字ラベル
• FAQアコーディオン（faq-accordion）: 白カードに赤Q・金茶質問・右に＋

Do's and Don'ts

Do - 色面には必ずノイズ粒子を重ねる - 赤・ミント・オレンジの3色を交互に使う - 見出しは和英2段で中央揃え - 装飾シルエットを要所で端からはみ出させる - 数字は大きく、単位は小さく

Don't - フラットな単色ベタだけで面を作らない - 寒色の濃紺や黒を地色に使わない - ボタンをピル型やグラデーションにしない - 縦書き英字帯を途中で消さない - 本文を詰めた字間にしない

Page Structure

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

1. ファーストビュー（イベント名と世界観を一目で伝える）: 酒器シルエットをノイズ色面で重ね、中央に極太ロゴと白帯キャッチ2行
2. 開催概要（日時・会場を提示）: 赤の大きな日付数字と赤ラベル付き部ごとの時間
3. イベント紹介（魅力を数字で訴求）: ギザギザ・円の吹き出しを左右交互に4つ並べる
4. ラインナップ（商品の多彩さを見せる）: 手書き風赤見出し＋短文＋3列×2段の商品画像
5. 価格・CTA（チケット購入へ誘導）: チケット型価格＋赤枠購入ボタン
6. 楽しみ方（仕組みを図解）: 器とチケットのイラストを矢印で交換、下に赤小見出しと注釈
7. イベントブース（企画を紹介）: 色違いの色面カードを縦に連結
8. 体験ブース（体験企画を紹介）: 赤枠写真＋角ラベル＋本文を繰り返す
9. 相談コーナー（サポートを訴求）: ミント色面に思考雲イラストと白文字
10. グッズ（物販紹介）: ピル型オレンジ面のカルーセル、周囲に円形英字
11. 参加者一覧（出展者の信頼感）: 中央揃えで名前を中黒区切りの行リスト
12. アクセス（会場案内）: 中央揃えの住所・駅情報と地図埋め込み
13. 注意事項（ルール周知）: ※始まりの段落を余白広めに並べる
14. よくある質問（不安解消）: ベージュ帯に白アコーディオンカードを縦積み

Imagery

• 酒瓶・グラス・器はシンプルなシルエットイラストにしノイズとグラデーションで塗る
• ゆるいキャラクターを差し色として配置
• 商品写真は明るい単色背景で真上・斜めから撮る
• 体験写真は質感重視の寄りで撮り赤枠で囲む
• 集中線やギザギザ図形でにぎやかさを足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約480px幅のSPレイアウトを表示し左右を地色で埋める案が自然
• 広げる場合は商品グリッドを4〜6列に
• 吹き出しは横並び2×2にする
• 色面カードは写真と本文を左右2カラムに
• 縦書き英字帯は画面端に固定して残す

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