DESIGN.md — 焼き栗色×紅葉の秋限定お酒福袋 LP（Autumn Harvest Lucky Bag Liquor Campaign LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感
• キーワード: 秋の落ち葉・琥珀色・福袋・ガチャ感・お得訴求・フラットイラスト
• 地の質感: グラデーションなしのフラットな塗り。写真は暗めの背景で高級感を出す
• 形: 葉っぱ形・ギザギザ形のシルエット、角の小さい四角カード、円形バッジ
• 温度感: 暖色中心で温かい。深緑と紫を差し色にする

Colors

• 地色は琥珀→クリーム→濃茶→えんじ→クリームと切り替え、単調にしない
• 茶地の上の文字はクリームか白、クリーム地の上は焦げ茶
• 強調数字は赤、または黄の地に焦げ茶で描く
• 赤・黄・紫・深緑の 4 色を落ち葉として散らす
• 主 CTA は赤のピル。黄のピルに赤文字のサブ版も使う
• FAQ とフッターは彩度を落とした淡いベージュで締める
• button-secondary は文字 #E31413 × 背景 #FABF02 のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#FFF8E3、4.52:1）を使う。
• faq-item は文字 #A4946F × 背景 #FEF7ED のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#7E7050、4.57:1）を使う。

Typography

• 見出しは太い 900 ウェイトで、数字だけ 1.5〜2 倍に大きくする
• 季節タイトルだけ手書き風書体を使う
• 強調語の下に黄やピンクの帯マーカーを引く
• 商品見出しは 2 行に分け、1 行目を左寄せ、2 行目を右寄せにする
• カテゴリ名は写真の横に縦書きで黄色にする
• 本文は 14px で行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 64px、基本単位 8px、カード内 18px（375px 幅換算）
• 写真は片側の端まで裁ち落とし、カードを重ねてずらす
• 番号つきの魅力リストは左に丸番号、右に 2 段のテキスト
• スタッフコメントは丸アイコンとカードを左右交互に並べる
• ランク表は左に色ラベル、右に説明の 2 分割の行を積む
• 本文の左右余白は約 16px

Elevation & Depth

• 影はほぼ使わず、フラットな色面の重なりで奥行きを出す
• CTA ボタンだけ下に濃色の帯を付け、立体感を出す
• 写真の上にカードを一部重ねて段差を作る

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 四角の裁ち落とし、葉っぱ形・ギザギザ形のマスク、円形アイコン
• セクション境界: 葉っぱのシルエットが並ぶ山形の境界、下向きの三角形
• カードの角丸は 4〜6px と小さめにする
• バッジは円形か、花のようなギザギザ円にする
• 落ち葉はフラットな単色で、軸の線を抜いて描く
• FAQ の項目は白い角丸ボックスに入れ、右に＋を置く

Components

• 商品ページボタン（button-primary）: 赤いピル型で白い太字。茶地の上で中央に置く
• 黄色サブボタン（button-secondary）: 黄色のピルに赤文字。濃茶セクションで使う
• 相性バッジ（badge-circle）: 黄色の円に、アイコンと 3 行の短い文を入れる。写真の角に重ねる
• 丸番号つき魅力リスト（number-list）: 深緑の葉形に白い数字。右に小さな文と赤い帯の強調見出しを置く
• 商品紹介カード（product-card）: 淡いクリームのカード。2 行の見出しと、赤い商品名・価格の行
• ランク表の行（rank-row）: 左は色の違うラベルを斜めに切る。右は価格帯を赤で書く
• スタッフ吹き出し（staff-comment）: 黄色の丸にイラストの人物を入れ、横に淡黄のカードで本文を置く
• レビューカード（review-card）: 黄色の星 5 つ、赤い見出し、本文、回り込む写真
• 帯マーカー見出し（heading-marker）: 見出しの下半分にピンクや黄の帯を敷く。左右どちらかに寄せる
• FAQ アコーディオン（faq-item）: 白いボックスに赤い Q と淡い茶の質問文。右端に＋

Do's and Don'ts

Do - 落ち葉モチーフを各セクションに散らし、季節感をそろえる - 数字（割引率・本数・確率）を巨大に出す - 地色をセクションごとに切り替える - 商品写真は暗い背景で撮り、高級感を出す - CTA は複数箇所に繰り返し置く

Don't - 寒色を主役にしない - グラデーションや強い影を使わない - 細い明朝で見出しを書かない - カードの角丸を大きくしすぎない - 落ち葉を 4 色以外の色で描かない

Page Structure

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

1. ファーストビュー（季節限定の福袋と期間を伝える）: 琥珀の地に紙袋のイラスト、手書き風の巨大タイトル、商品ボトル、割引バッジ、日付
2. リード訴求（確定特典と抽選を要約する）: CTA の下に 3 つの訴求を下線つきの太字で並べる
3. サービス紹介（実績とサービスの仕組みを説明する）: クリーム地に大きな赤い実績数字。葉形の黄色カードに特長を書く
4. 3 つの魅力（福袋の利点を整理する）: 葉形の丸番号リストに、赤い帯の強調を付ける
5. 抽選特典（当選確率と景品を見せる）: 大きな分数表記と、ギザギザ形のバッジ。葉形に切り抜いた写真
6. 景品紹介（具体的な景品を紹介する）: 写真、相性バッジ、淡黄の説明カードを繰り返す
7. 商品例（入るお酒の例を見せる）: 暗い写真と縦書きのカテゴリ名、価格つきのカードを左右交互に並べる
8. 価格 CTA（価格を提示して購入へ誘導する）: 紙袋の枠に商品を集め、赤い帯で価格を大きく出す。下にピルボタン
9. スタッフの声（作り手の思いで親しみを出す）: 丸いイラストアイコンと淡黄のカードを左右交互に並べる
10. ランク説明（ガチャのレア度を説明する）: えんじ地にランク表と説明カード、2 列の商品グリッド
11. 一覧（景品の全体像を見せる）: クリーム地に 3 列のサムネイルとキャプション
12. 品質・こだわり（信頼性を伝える）: 帯マーカーの見出し、写真、本文を繰り返す
13. 満足度・レビュー（社会的証明）: 黄色の円グラフに大きな%。星つきのレビューカード
14. よくある質問（不安を解消する）: 淡いベージュ地に白いアコーディオンを並べ、マスコットのフッター帯で終える

Imagery

• 落ち葉・紙袋はフラットな単色のベクターで描く
• ボトル写真は切り抜き、斜めに配置して躍動感を出す
• 高級酒は黒背景にスポット光を当て、赤い差し色を入れる
• おつまみは自然光の俯瞰か斜めのカットで、白い器を使う
• 人物は線画風のシンプルなイラストで、黄色の丸に入れる
• 酒蔵・倉庫などの現場写真は明るめに撮り、信頼感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 375〜480px 幅の SP 構成を置き、左右を背景色で埋める想定
• PC で広げる場合は、商品一覧を 4 列、景品紹介を 2 列にする
• 落ち葉の装飾は画面端まで広げて散らす
• 見出しサイズは PC で 1.3 倍程度にとどめる

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