DESIGN.md — 和柄×赤茶金の食品キャンペーン LP（Japanese Traditional Red and Brown Food Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 和風、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 和紙・青海波・金箔・明朝見出し・赤と焦げ茶・応募手順
• 地の質感: 生成りの和紙調の地に、薄い青海波・麻の葉の地紋。黒地には金の点と箔の装飾を散らす。
• 形: 角丸はほぼ使わない。角の立った長方形カードと帯見出しが基本。
• 温度感: 暖色寄り。炊きたてご飯のような温かさがある。

Colors

• 地は生成り（和紙調）と白（和紙調）を交互に使う。黒地と赤地はそれぞれ 1〜2 回までの山場に限る。
• 赤はナビ帯・強調帯・本文中のキーワードに使い、面としての使用は大きな赤地セクション 1 つに絞る。
• こげ茶はアコーディオンや大きめのボタン帯に使い、赤と役割を分ける。
• 金は見出し帯のグラデーション・ラベル・装飾にだけ使い、文字色には使わない。
• 白カードは細い茶系の線で囲み、影は弱くする。
• 注意事項は赤枠の中に赤文字で書く。可否の比較は青（Good）と赤（NG）で塗り分ける。

Typography

• 見出しはすべて明朝体の太字で組む。本文はゴシック体にする。
• 見出しの強調語は一回り大きくして赤にする。
• セクション見出しの上には、英字を入れた小さな赤いリボンラベルを置く。
• 日付や数字は明朝体で大きく組み、曜日は丸囲みにする。
• 本文は中央揃えを基本とし、手順や規約などの長文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では 2 カラムの手順カード・商品グリッドを SP で縦積みにする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の地色で区切り、中身は中央寄せのコンテナに入れる。
• 見出しの上下に 32px 程度の余白を取る。
• 手順カードと Point カードは 2 列のグリッドで並べる（SP では 1 列）。
• 赤地・黒地のセクションの中に白カードを浮かべて囲む。
• 規約はこげ茶のアコーディオン帯を 8px 間隔で縦に並べる。

Elevation & Depth

• 白カードには弱い影（0 2px 8px rgba(0,0,0,0.08)）を付ける。
• 赤地の上の白パネルは少し強めの影で浮かせる。
• ボタンと帯は影なしのフラットにする。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品パッケージは切り抜きで置く。食材は円形の和柄背景に重ねる。料理写真は角の立った長方形を 3 枚横に並べる。
• セクション境界: 直線で地色を切り替える。境目には和柄の地紋と雲の装飾を置く。
• ボタンは角の立った長方形にし、右端に矢印か＋を付ける。
• 期間ラベルは矢羽根型の帯にする。
• 当選数バッジは赤い円形にする。
• トップへ戻るボタンだけ赤い円にする。

Components

• 和風セクション見出し（section-title）: 英字入りの赤いリボンラベルの下に明朝の大見出しを置き、左右に金の雲・水引の装飾を添える。
• 赤いアンカーナビ（nav-bar）: 赤い帯に白文字で各セクション名を並べ、文字の下に小さな下向き矢印を付ける。
• こげ茶の帯ボタン（button-secondary）: 全幅のこげ茶ボタン。右端に矢印を付け、応募方法の切り替えなどに使う。
• 規約アコーディオン（accordion）: こげ茶の帯の中央に明朝の見出しを置き、右端に細い＋を付ける。
• 応募期間カード（period-card）: 金の矢羽根ラベルに回数を入れ、白いカードに日付を大きな明朝で組む。上に赤い当選数タブを載せる。
• 当選数の丸バッジ（badge-winners）: 赤い正円の中に白文字で当選総数を大きく入れる。
• 手順カード（step-card）: 細い茶の枠線で囲んだ白カード。赤い欧文で Step 番号、明朝で見出し、その下に説明とイラストを入れる。
• 金帯見出しのレシピパネル（gold-header-panel）: 白パネルの上部に金のグラデーション帯を敷き、明朝の見出しを置く。下は材料と作り方の 2 列にする。
• 赤ベタ強調見出し（red-label）: 赤い長方形に白い明朝文字。特長の要点や吹き出し帯に使う。
• 赤枠の注意ボックス（caution-box）: 赤い線の枠の中に、Good 例（青）と NG 例（淡いピンク）の比較や × のリストを並べる。

Do's and Don'ts

Do - 見出しは明朝体にし、金の和柄装飾を左右に添える。 - 地色は生成りと白を交互にし、黒地・赤地の山場を 1 回ずつ入れる。 - 手順は Step・Point の番号付きカードで分かりやすく並べる。 - 地には青海波・麻の葉などの薄い和柄を敷く。 - 注釈は小さな文字で、ブロックの直下にまとめる。

Don't - 丸ゴシック・ピル型ボタン・パステル色は使わない。 - 赤を広い面で何度も使わない。 - 原色の青や緑は Good 例以外で使わない。 - 強い影やグラデーションのボタンにしない。 - 和柄を濃くして本文の読みやすさを損なわない。

Page Structure

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

1. ファーストビュー（キャンペーン名と賞品・当選数を伝える）: 生成りの和紙地に明朝の大タイトルを置き、商品パッケージと料理写真を並べる。当選数は赤い丸バッジで示す。
2. 応募期間帯（締切を明示する）: 黒い帯に金ラベルを置き、回ごとの締切日を白い大きな数字で示す。
3. 応募方法の概要（応募方法が 2 通りあることを伝える）: 赤枠カード 2 枚に手順アイコンを並べ、下にこげ茶のバナーで炊き方への導線を置く。
4. アンカーナビ（ページ内を移動しやすくする）: 赤い全幅帯に白文字のメニューを並べ、SNS シェアアイコンを添える。
5. キャンペーン概要（条件と期間を説明する）: 中央揃えの文章で強調語を赤にし、期間カードを 2 枚並べる。
6. プレゼント紹介（賞品の魅力を伝える）: 金の点を散らした黒地に、商品と料理写真を置く。原材料などのスペックは罫線の表で示す。
7. 対象商品（対象となる商品を示す）: パッケージ画像を 2×2 のグリッドに並べ、下に商品名を添える。
8. 素材の特長（食材の価値を伝える）: 和柄の円の上に食材写真を置き、赤ベタの見出しと短い説明を 2 列で並べる。
9. おいしい炊き方（使い方のレシピを紹介する）: 赤地に金帯見出しの白パネルを置く。商品×食材の図、材料と作り方の 2 列、料理写真 3 枚で構成する。
10. 応募方法の詳細（具体的な応募手順を説明する）: こげ茶の切り替えボタンの下に、Step カード、注意事項の赤枠、撮影 Point カードを置く。
11. 利用規約（法的事項を示す）: 白い和紙地に、こげ茶のアコーディオンを縦に並べる。
12. お問い合わせ（窓口を案内する）: 赤い細枠の中に明朝で電話番号を大きく書き、受付時間を添える。

Imagery

• 料理は和食器に盛った暖色の俯瞰・斜めのカットにし、木やベージュの背景で撮る。
• 食材は木のさじに載せて白背景で切り抜き、和柄の円の上に置く。
• 装飾は金の雲・水引・青海波・金の点・紙吹雪にする。
• 手順は線画アイコン（かご・スマホ・はがき）とスマホのモックアップで示す。
• NG 例はレシート写真に × とキャプションを付けて 4 枚並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の 2 列カード（手順・Point・期間）は SP で 1 列に縦積みする。
• アンカーナビは SP で横スクロールにするか、ハンバーガーメニューに格納する。
• 対象商品は SP でも 2 列を保つ。
• レシピの材料と作り方の 2 列は、SP で縦積みにする。
• 大見出しは PC 約 36px、SP 26px に縮める。

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