DESIGN.md — 橙×赤の祭り感あふれるフードフェスLP（Festive Orange Food Festival Poster LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、和風
• キーワード: お祭り・屋台・オレンジ・黒帯ラベル・雷文・週替わり
• 地の質感: アニメ調イラストと料理写真を重ねたポスター感。後半はフラットな白地
• 形: 角が立った四角いカードと、太枠の角丸ボックスを併用
• 温度感: 暖色中心で熱気がある

Colors

• 前半のポスター部はオレンジ→黄の縦グラデーションを地にする
• 週の区切りはピンク地に桜模様の帯を入れる
• 店舗名とメニュー名は黒帯に白文字で固定する
• 後半の情報部は白と淡グレーを交互に使い、静かにする
• 赤は飾り線・日程カード見出し・コラボ強調だけに使う
• 外枠とCTAはオレンジの太線でポスター部とつなげる
• shop-card は文字 #FDFDFD × 背景 #FC7E41 のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF4603、4.56:1）を使う。
• week-band は文字 #DA1415 × 背景 #FFABAB のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#FFEDED、4.54:1）を使う。
• button-detail は文字 #E58D61 × 背景 #FEFEFE のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C05520、4.56:1）を使う。

Typography

• ポスター部の文字は画像として扱い、極太で縁取りを入れる
• 店舗名は1行に収まるよう太く短くする
• 情報部の見出しは中央揃えで下に赤い雷文線を置く
• 本文は左揃えで行間を広めにとる
• 日付は数字を大きく、曜日はかっこ書きで小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP でも店舗カードは 3 列、情報部は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• ポスター部は画像を全幅で縦に積む
• 週ごとにロゴ→日付帯→3×3グリッドの順にする
• 9枠目は会場と日時のまとめ枠にする
• 概要はオレンジ太枠の箱に項目を区切り線で並べる
• 日程カードは4枚を縦に積む

Elevation & Depth

• 影はほとんど使わない
• カードは枠線と色面で区切る
• ポスター内のロゴだけ太い縁取りで浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理写真は真上寄りの四角に切り、器の丸を見せる
• セクション境界: ポスター部はピンクの桜帯で区切り、情報部は色面の直線で切り替える
• 店舗カードは角なしの四角にオレンジ枠
• 概要の箱は角丸大きめのオレンジ太枠
• 日程カードは角丸中で赤枠と赤見出し
• ボタンは角丸小の枠線のみ

Components

• 店舗カード（shop-card）: 上が店名帯、中が料理写真と産地バッジ、下が黒帯のメニュー名と短い紹介文
• 週の日付帯（week-band）: 桜模様の帯に赤地の週ラベルと白地の大きな日付を並べる
• 産地バッジ（origin-badge）: 写真右下に金色の丸で都道府県名を置く
• 会場・日時まとめ枠（info-summary）: グリッドの空き枠に赤ラベル付きで会場と日時を列挙する
• 雷文付き見出し（heading-meander）: 中央の太字見出しの下に赤い雷文の飾り線を置く
• 日程カード（schedule-card）: 赤い見出し帯に回数と日付、本文は店名を区切り線で並べ、最後に赤字の強調枠
• 詳細ボタン（button-detail）: 白地にオレンジ枠とオレンジ文字、右端に矢印
• フッター（site-footer）: 黒地に白の小さなコピーライトと連絡先を中央揃え

Do's and Don'ts

Do - ポスター部は暖色グラデーションと桜で季節の祭り感を出す - 店舗情報は同じ型のカードで揃える - 週ごとに同じ見出しセットを繰り返す - 情報部は白地で落ち着かせ、読みやすくする - 赤い雷文で中華・ラーメンらしさを出す

Don't - 寒色を主役にしない - 店舗カードの構成を週ごとに変えない - 情報部にポスター部の派手な装飾を持ち込まない - ボタンを塗りつぶしの大きなピル型にしない - 写真に強い影や斜め切りを入れない

Page Structure

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

1. ファーストビュー（イベント名・日程・会場を一目で伝える）: 青空と桜の商店街イラストに極太ロゴとキャラを重ね、下に4回の日程と会場、QRを置く
2. 主催・協賛帯（信頼の裏付け）: 白地に主催者の文字と協賛ロゴを横一列に並べる
3. 第1週の出店（出店店舗とメニューを見せる）: ピンク帯にロゴと日付帯、オレンジ地に店舗カード3×3、最後に会場まとめ枠
4. 第2〜4週の出店（週替わりの全店を見せる）: 第1週と同じ型を繰り返す
5. イベント概要（趣旨と基本情報を文章で伝える）: 生成り地にオレンジ太枠の白箱、項目を区切り線で並べる
6. 開催スケジュール（週ごとの出店一覧）: 赤見出しの日程カードを縦に積み、下に詳細ボタン
7. ソーシャルメディア（SNSへ誘導）: 淡グレー地に黒丸アイコンを中央に一つ
8. スポンサー（協賛紹介）: 白地にロゴを2列で並べる
9. 後援・バナー（後援と関連告知）: グレー地に後援名、白地に角丸の告知バナー
10. フッター（権利表記）: 黒地に白の小文字

Imagery

• ファーストビューは昭和レトロな商店街をアニメ調の太い線で描く
• 縁起物キャラを大きく置き、商品を食べる動きをつける
• 料理写真は明るい照明で器ごと上から撮り、具を盛って見せる
• 背景に桜の花びらや渦巻き模様を散らす
• ロゴは黄色地に黒と赤の極太文字で縁取る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でもポスター部は中央の幅約1000pxに収め、SP と同じ構成にする
• 店舗カードはどちらも3列
• PC の日程カードは2列×2段にする
• PC のスポンサーロゴは4列一行にする
• 情報部の箱は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 行書くと起動時に読み込まれる。