DESIGN.md — 深紅グラデのハロウィン限定ドリンク LP（Crimson Halloween Seasonal Drink Campaign LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 深紅一色・シズル感・季節限定・コラボ・極太欧文ロゴ・額縁フレーム
• 地の質感: 赤の放射グラデーションに細かいノイズ粒子を重ね、果実やソースが滴る写真を合成している
• 形: りんご形やアーチ形で写真を切り抜く。カードは装飾コーナー付きの二重線の額縁。ボタンはピル型
• 温度感: 暖色だけで構成した熱量の高い世界観

Colors

• 地色は赤系だけにする。深紅→赤→朱→オレンジと、セクションごとに明るさを変えて区切る
• 赤地の上の本文と見出しは白にする
• 強調したい語は白い帯に赤文字を載せて目立たせる
• 番号・日付・当選数は金色にして祝祭感を出す
• 最後の定番商品ブロックだけは白いカードに濃茶の文字で、落ち着いた見せ方に切り替える
• 価格表では ICED を青、HOT を赤にして色分けする
• campaign-frame-card は文字 #FFF8F2 × 背景 #E22434 のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E11E2E、4.51:1）を使う。
• button-primary は文字 #FFF8F2 × 背景 #EA7C6A のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D5381E、4.52:1）を使う。
• order-banner は文字 #FFF8F2 × 背景 #F5C030 のコントラスト比が 1.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#926C07、4.57:1）を使う。
• marquee-band は文字 #FFF8F2 × 背景 #F0601A のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C74A0D、4.52:1）を使う。

Typography

• セクション見出しは 3 段で組む。上に小さな英字、中央に極太の英字、下に日本語の小さな訳語
• 赤地の本文はすべて太字の白文字にし、中央揃えで 1 行を短く切る
• 物語調のコピーは字間を広くとった細めの文字で左揃えにする
• 数字（価格・日付・番号）は本文の 2〜3 倍の大きさにする
• 見出し文字の一部をカボチャ顔の装飾に差し替えてもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介は写真と文字を左右交互に配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品紹介は、写真と文字の左右を 1 品ごとに入れ替える
• キャンペーンは番号付きの額縁カードを縦に並べる
• カードの中は細い区切り線で、期間・説明・景品・参加方法に分ける
• 大きな欧文を横長にはみ出させた帯で、セクションの切り替えを示す

Elevation & Depth

• 影は少なく、色の明暗で奥行きを出す
• 景品の写真には落ち影を付けて、少し傾けて置く
• ピル型ボタンには柔らかい影を下に付ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: りんごのシルエット、上が丸いアーチ、縦長のカプセル形で切り抜く
• セクション境界: ソースが滴る写真や、ゆるい弧を描くカーブで区切る
• キャンペーンのカードは二重線の額縁にし、四隅に唐草の飾りを付ける
• 白カードは角丸 12px
• ラベルは角丸 4px の小さな四角

Components

• 3 段のロゴ見出し（section-logo-heading）: 小さな英字、極太の英字、日本語訳を縦に積む。文字の一部をカボチャ顔にする
• 白帯マーカー（marker-band）: 強調したい語に白い帯を敷き、赤い太字を載せる
• 番号付き額縁カード（campaign-frame-card）: 上辺に金色のイタリック番号を重ねた、二重線の装飾フレーム
• ピル型ボタン（button-primary）: サーモン色のグラデーションに白文字を載せ、影を付ける
• STEP ラベル（step-label）: 白い小さな四角に赤文字の STEP 番号を入れ、右に説明を書く
• 当選数の矢印ラベル（winner-badge）: 金色の線で縁取った矢印形のラベルの横に、大きな金色の数字を置く
• サイズ別の価格表（price-table）: グレーの枠に S/M/L の丸アイコンを並べ、ICED と HOT の行を色分けする
• 金色の注文バナー（order-banner）: 金色のグラデーションのバナーに、白い角丸の帯で先行発売日を載せる
• シェアボタン（share-button）: 白い四角のボタンに、SNS アイコンと赤文字を並べる
• 欧文の流れる帯（marquee-band）: 細い帯の中に、同じ英単語を横に繰り返し並べる

Do's and Don'ts

Do - 赤の濃淡だけで全体をまとめる - 見出しは極太の欧文を大きく置く - 強調語には白帯マーカーを使う - 数字は金色で大きく見せる - 写真はりんご形やアーチ形で切り抜く

Don't - 青や緑を広い面に使わない - 赤地の上に細い文字や小さすぎる文字を置かない - 角の立った無機質なカードにしない - 白い地を途中のセクションに挟まない

Page Structure

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

1. ファーストビュー（新商品のシズル感と発売日を伝える）: ドリンクと果実の写真を全面に敷き、ロゴと発売日を大きく置く
2. モバイル注文の導線（先行注文へ誘導する）: 金色のバナーに先行発売日を載せ、下に補足リンクを添える
3. コンセプト（味の魅力を短く伝える）: 大きなロゴの下に中央揃えのリード文を置き、強調語に白帯を敷く
4. ラインナップ（商品と価格を見せる）: りんご形のシルエットを背に、商品写真と価格を左右交互に並べる
5. 特長（素材のこだわりを説明する）: アーチ形の深紅の面に、素材 2 種を×でつないで見せ、写真と説明を添える
6. 茶葉の紹介（ベースのお茶の価値を伝える）: カプセル形の枠に茶葉の写真と帯付きの見出しを入れる
7. コラボの世界観（コラボ相手と物語を見せる）: 人物のビジュアルを全面に敷き、詩のような文を左揃えで載せる
8. プロフィール（コラボ相手を紹介する）: オレンジ地に写真・プロフィール文・SNS アイコンを置き、縦書きの英字を添える
9. キャンペーン（プレゼント企画を告知する）: 番号付きの額縁カードに、期間・景品・当選数・参加の STEP・ボタンを順に並べる
10. 定番の季節商品（ほかの季節メニューを紹介する）: 白カードに吹き出しの見出し、商品写真、価格表、Check! の帯を置く
11. シェアとフォロー（SNS での拡散を促す）: 赤地にシェアボタンを 2 つ並べ、FOLLOW US の見出しとアイコンを置く
12. フッター（注記とロゴを載せる）: 赤地に注意書きを置き、その下の白い帯にロゴとコピーライトを入れる

Imagery

• ドリンクの写真は果実と一緒に、赤い背景の中で撮る
• ソースが滴る質感や、果実が浮いて見える合成を使う
• 人物は全身を赤い衣装でそろえた、ファンタジー調のビジュアルにする
• 装飾にはカボチャ顔のりんごのシルエットと紅葉を使う
• 景品は少し傾けて置き、落ち影を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨として書く。PC では SP 幅のカラムを中央に置き、左右に赤のグラデーション背景を広げる
• PC ではラインナップを 3 列のカード並びにしてもよい
• 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 行書くと起動時に読み込まれる。