DESIGN.md — 赤枠×中華雷文の食フェスイベント LP（Festive Red Frame Food Event LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 赤い額縁・中華雷文・祭り・手描きイラスト・告知バナー・協賛ロゴ
• 地の質感: 白地はフラット。帯の部分だけ淡い雲文パターンとクリーム色の地を使う
• 形: 外枠の白パネルは角丸。バナーは太い赤枠の長方形。ロゴは細い枠で囲む
• 温度感: 暖色寄りで、にぎやかで熱気がある

Colors

• 赤は外枠と強調だけに使い、情報はすべて白パネルの中に置く
• セクション帯はクリーム地に雲文と赤の雷文ラインを重ねる
• 見出しの飾りは焼き色の茶系でまとめ、赤と競わないようにする
• リンクは青、カテゴリは茶色の小さな文字で分ける
• 告知バナーは太い赤枠に、写真と淡いピンクの装飾文字を合わせる
• フッターは赤地に白文字。注意事項は白い角丸カードにまとめる
• event-banner は文字 #FFFFFF × 背景 #FAB591 のコントラスト比が 1.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-2-accessible（#CD4C09、4.53:1）を使う。
• section-heading-dumpling は文字 #BC7A66 × 背景 #FCE8C5 のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9A5743、4.58:1）を使う。
• news-item は文字 #1E7FD0 × 背景 #FFFFFF のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#1D7AC7、4.51:1）を使う。
• menu-button は文字 #FFFFFF × 背景 #B3A26C のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#847544、4.56:1）を使う。

Typography

• 本文は小さめのゴシック体で、情報を淡々と並べる
• インパクトは画像化した装飾文字に任せる（縁取りと影付き）
• 見出しは文字ではなく、餃子型の飾りに小さな英字を入れる
• 日付や数字はキービジュアルの中で極太にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せの固定幅パネルで、協賛ロゴは 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 32px、基本単位 8px、カード内 12px（375px 幅換算）
• 画面の左右に約 12px の赤い余白を残し、白パネルを浮かせる
• セクションの区切りは雲文の帯と雷文ラインで示す
• お知らせはカテゴリとリンクの 2 段組みで、下に区切り線を入れる
• 協賛ロゴは同じ大きさの枠で中央にそろえ、縦に並べる
• 告知バナーは横幅いっぱいに置き、縦に 2 枚続ける

Elevation & Depth

• 影はほとんど使わない。立体感は赤の外枠と白パネルの対比で出す
• TOP ボタンだけ黒い太線の丸で目立たせる

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: キービジュアルとバナーは角のある長方形。ロゴは細い枠で囲む
• セクション境界: クリーム地の雲文帯に赤い雷文ラインを左右に引き、中央に餃子型の見出しを置く
• 白パネルは大きめの角丸で、上下に赤地を見せる
• バナーには 3〜4px の太い赤枠を付ける
• 注意事項カードは角丸の白カードで、アイコンを左に置く

Components

• 赤枠の白パネル（frame-panel）: 赤い地の上に、角丸の白い大きなパネルを置いてページ全体を包む
• 開催告知バナー（event-banner）: 写真の背景に装飾文字を重ね、太い赤枠で囲んだ横長バナー
• 餃子型の見出し（section-heading-dumpling）: 雲文帯と雷文ラインの中央に、餃子の形の枠と小さな英字ラベルを置く
• お知らせの行（news-item）: 茶色のカテゴリと青いリンクを 2 段にし、下に細い線を引く
• 協賛ロゴの枠（sponsor-logo）: 細いグレーの線で囲んだ横長の枠に、ロゴを中央配置する
• メニューボタン（menu-button）: 右上に固定する、オリーブ金の四角いハンバーガーボタン
• 注意事項カード（notice-card）: 赤地の上に置く白い角丸カード。丸いアイコンと小さな注意文を 2 つ並べる
• TOP ボタン（pagetop-button）: 黒い太枠の白い丸に、上向きの矢印と TOP の文字を入れる

Do's and Don'ts

Do - 赤い外枠と白パネルの額縁構成を必ず守る - セクションの境目は中華風の雷文と雲文で示す - キービジュアルは手描き風の群像イラストで、にぎやかにする - 協賛ロゴは同じ大きさの枠にそろえる - 日付・時間・会場はキービジュアルの左上に極太で置く

Don't - 白パネルの外に本文を置かない - 寒色を大きな面に使わない - 本文の文字を大きく装飾しすぎない（装飾はバナーと画像で行う） - 影やグラデーションを多用して、フラットな印象を崩さない - 見出しを普通の文字だけで済ませない

Page Structure

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

1. ヘッダー（イベント名を示し、ナビゲーションの入口にする）: 左上に赤い小さなロゴ文字、右上に固定のメニューボタン
2. ファーストビュー（開催日・会場・祭りの雰囲気を一目で伝える）: クリーム地にポップな手描きイラストを配置。日付は極太、縦書きのキャッチを添える
3. 他会場の開催告知（関連イベントへ誘導する）: 赤枠の写真バナーを 2 枚、縦に並べる
4. お知らせ（特典などの最新情報を伝える）: 餃子型見出しの下に、カテゴリとリンクの行を区切り線で並べる
5. 協賛（協賛企業を紹介して信頼感を出す）: 餃子型見出しの下に、枠付きのロゴを中央で縦に並べる
6. 注意事項・フッター（飲酒や交通の注意と主催者を示す）: 赤地の上に白い注意カードを置き、主催者は白文字。右下に TOP ボタン

Imagery

• メインは線画と明るいベタ塗りの、手描き風ポップイラスト（料理と人物を密に配置する）
• 料理は湯気や焼き目が見える寄りの写真を、バナーの背景に使う
• 装飾は中華風の雷文・雲文・餃子のシルエット
• SNS や注意事項は丸いアイコンを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 70% 幅の白パネルを置き、周りの赤地を広く見せる
• PC ではキービジュアルの下に、餃子型のナビボタンを横一列に並べる
• PC の協賛ロゴは 3 列のグリッドにする
• PC ではヘッダー右に SNS アイコン、フッターに文字のナビを置く
• SP ではナビをメニューボタンにまとめ、ロゴは 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 行書くと起動時に読み込まれる。