DESIGN.md — 赤紫×黄金色の食フェス・イベント LP（Festive Sweet Potato Food Expo LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、力強い・インパクト
• キーワード: 食フェス・赤紫・黄金色・水彩テクスチャ・カード一覧・祭り感
• 地の質感: 黄色の水彩にじみ背景と、赤紫の菱形グラデーション帯。白カードに軽い影
• 形: 角丸カード、ピル型の見出し帯とボタン、丸い番号バッジ
• 温度感: 暖色中心で温かく、にぎやか

Colors

• 地は黄金色の水彩テクスチャを基本に、情報系は生成りに切り替える
• セクション見出しは赤紫グラデーションのピル帯に白文字
• 出店カテゴリごとに帯色を赤紫・緑・青で塗り分ける
• 価格は赤系、サブボタンはオレンジで統一
• 強調語は黄色やピンクのマーカー下線を敷く
• 導入部のみ臙脂の濃い地に白とピンクの大見出し
• button-sub は文字 #FFFFFE × 背景 #FD9202 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AC6301、4.62:1）を使う。
• tag-badge は文字 #FFFFFE × 背景 #FD9202 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AC6301、4.62:1）を使う。
• number-badge は文字 #FFFFFE × 背景 #FD9202 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AC6301、4.62:1）を使う。

Typography

• 見出しは極太ゴシックで、導入部は白縁取り＋影
• 強調語だけ文字を大きくし色を変える
• 本文は小さめ12px前後で情報を詰める
• 価格は赤の太字で目立たせる
• 表彰系のみ明朝で格式を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は出店カード 2 カラム、その他 1 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 10px（375px 幅換算）
• 出店カードは2列で等幅に並べる
• カテゴリ帯は画面幅いっぱいに近く配置
• チケットは A/B/C のラベル付き枠で区切る
• 表は日付ごとに色分けした見出し行
• カード下にサブボタンを中央配置

Elevation & Depth

• カードは下方向に柔らかい影
• 導入部のポイントカードも軽い影
• ボタンは下に濃色の影で立体感

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の矩形、一部は円形の料理写真
• セクション境界: 直線切替。導入部は写真背景の矩形
• 見出し帯は両端丸のピル型
• 番号は円形バッジ
• チケット枠は太い黄色やオレンジの線で角丸
• カードは小さめ角丸

Components

• ピル型見出し帯（section-pill-heading）: 赤紫グラデーションに菱形模様、白太字。右に半透明アイコン
• カテゴリ帯（category-band）: 幅広の帯に白文字、右端にイラストがはみ出す。色はカテゴリ別
• 出店者カード（shop-card）: 上部に色帯の店名、紹介文、区切り線、商品名・価格・写真
• メニューを見るボタン（button-sub）: オレンジのピル型小ボタン、アイコン付き
• 購入CTA（button-primary）: 赤のピル型ボタン、白太字
• 参加商品タグ（tag-badge）: オレンジや黄色の小さなラベル
• 番号バッジ（number-badge）: オレンジ円に白数字のポイント番号
• 追従購入バナー（floating-cta）: 左右下隅にキャラ付き購入ボタンを固定

Do's and Don'ts

Do - 黄金色の水彩背景で温かい祭り感を出す - カテゴリごとに帯色を変えて一覧を整理する - 料理写真は大きく角丸で見せる - 強調語には色・サイズ・マーカーを重ねる - 購入導線をページ内と追従の両方に置く

Don't - 寒色を主役にしない - カードの構成を店ごとに変えない - 見出し帯を角ばらせない - 余白を広げすぎて情報密度を下げない - 細い書体で見出しを組まない

Page Structure

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

1. ファーストビュー（イベント名と日程・会場を伝える）: ジオラマ風の料理写真に縦書きコピー、右に告知バッジ、下にロゴと日程
2. 協賛ロゴ（信頼感の付与）: 白い角丸パネルに赤紫ラベルとロゴを並べる
3. 目次（ページ内遷移）: オレンジ枠のアイコンボタンを横に7つ並べる
4. イベント紹介（規模と新しさを訴求）: 臙脂の写真地に縁取り大見出し、本文と会場写真
5. 注目ポイント（魅力を4つに整理）: 番号バッジ付きカードを2×2で並べる
6. コンテスト紹介（参加型企画の訴求）: エンブレム、来場者写真の円形配置、吹き出し、額縁風の歴代表
7. 出店一覧（出店者と商品を紹介）: カテゴリ帯ごとに2列のカードを大量に並べる
8. 生産者表彰（品質の裏付け）: 写真背景に勲章アイコンと白カード
9. チケット情報（券種と料金を説明し購入へ）: A/B/C ラベル枠、料金表、赤い購入ボタン
10. 入場方法・注意事項（ルール説明）: 灰地の表と注釈リスト、赤字で重要事項
11. ステージイベント（体験企画の告知）: 赤紫の枠線カードに日時ラベルと写真2枚、青ボタン
12. 過去動画（雰囲気を伝える）: 動画サムネイルを2つ並べる
13. アクセス・SNS（来場案内と情報発信）: 地図と交通アイコンリスト、SNSアイコン、主催情報

Imagery

• 焼き芋や芋スイーツを断面や湯気が見える寄りで撮る
• 来場者が笑顔で食べる会場写真を円形や角丸で散らす
• ジオラマ風の遊び心あるメインビジュアル
• 芋やキャラクターのイラストを帯の端に添える
• 背景は黄色の水彩にじみテクスチャ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央にSP幅程度のコンテンツを置き、左右を赤紫で塗る
• PC の出店カードは3列に増やす
• 協賛ロゴは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 行書くと起動時に読み込まれる。