--- version: alpha name: Crimson Halloween Seasonal Drink Campaign LP description: ページ全体を赤のグラデーション一色で塗った、季節限定ドリンクのキャンペーン LP。極太の欧文ロゴ見出し、白地の帯マーカー、金色の番号、額縁のような枠カードで、ハロウィンらしい少し不思議な祝祭感を出している。終盤だけ白いカードに切り替えて定番商品を紹介する。 colors: primary: '#E22434' dark-section: '#790105' secondary: '#FF3741' background-alt: '#D43843' accent-1: '#F5C030' accent-2: '#F0601A' cta: '#EA7C6A' on-cta: '#FFF8F2' on-dark: '#FFF8F2' surface: '#FFFFFF' background: '#FFFFFF' text: '#3A2A22' tint-1: '#F6F6F6' marker: '#FEFDFD' primary-accessible: '#E11E2E' cta-accessible: '#D5381E' accent-1-accessible: '#926C07' accent-2-accessible: '#C74A0D' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 40px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.03em headline-sm: fontFamily: Montserrat fontSize: 16px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 4px md: 12px lg: 200px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-logo-heading: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 130px marker-band: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 32px campaign-frame-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 1200px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px step-label: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px winner-badge: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 40px price-table: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 130px order-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 140px share-button: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 68px marquee-band: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 20px --- # DESIGN.md — 深紅グラデのハロウィン限定ドリンク LP（Crimson Halloween Seasonal Drink Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 深紅一色・シズル感・季節限定・コラボ・極太欧文ロゴ・額縁フレーム - **地の質感**: 赤の放射グラデーションに細かいノイズ粒子を重ね、果実やソースが滴る写真を合成している - **形**: りんご形やアーチ形で写真を切り抜く。カードは装飾コーナー付きの二重線の額縁。ボタンはピル型 - **温度感**: 暖色だけで構成した熱量の高い世界観 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E22434` | ブランドの赤（中盤の地色） | 20% | 画素の実測 | | `dark-section` | `#790105` | ラインナップ・特長の深紅の地 | 18% | 画素の実測 | | `secondary` | `#FF3741` | 明るい朱赤の帯面 | 9% | 画素の実測 | | `background-alt` | `#D43843` | フッター手前の赤い地 | 6% | 画素の実測 | | `accent-1` | `#F5C030` | 番号・日付の金色 | 1% | 推定 | | `accent-2` | `#F0601A` | プロフィール部のオレンジ | 4% | 推定 | | `cta` | `#EA7C6A` | ピル型ボタンのサーモン | 0% | 画素の実測 | | `on-cta` | `#FFF8F2` | ボタン文字 | 0% | 画素の主要色に補正 | | `on-dark` | `#FFF8F2` | 赤地の上の白文字 | 3% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | 定番商品の白カード | 6% | 画素の実測 | | `background` | `#FFFFFF` | フッターの白 | 1% | 画素の実測 | | `text` | `#3A2A22` | 白カード上の濃茶の文字 | 0% | 推定 | | `tint-1` | `#F6F6F6` | 価格表のグレー地 | 0% | 画素の実測 | | `marker` | `#FEFDFD` | 見出しの白帯マーカー（文字は赤） | 0% | 画素の実測 | | `primary-accessible` | `#E11E2E` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#D5381E` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#926C07` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#C74A0D` | AA を満たす補正値（計算） | | 計算 | - 地色は赤系だけにする。深紅→赤→朱→オレンジと、セクションごとに明るさを変えて区切る - 赤地の上の本文と見出しは白にする - 強調したい語は白い帯に赤文字を載せて目立たせる - 番号・日付・当選数は金色にして祝祭感を出す - 最後の定番商品ブロックだけは白いカードに濃茶の文字で、落ち着いた見せ方に切り替える - 価格表では 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文ロゴ見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 48px | 1.0 | 0.0em | | `headline-lg` | キャンペーンのタイトル | ゴシック | Noto Sans JP | 900 | 24px | 1.4 | 0.02em | | `headline-md` | 特長の小見出し（帯付き） | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.3 | 0.02em | | `accent` | 装飾的な欧文タイトル・番号 | 欧文セリフ | Playfair Display | 900 | 40px | 1.0 | 0.03em | | `headline-sm` | 英字の小ラベル・価格の数字 | 欧文サンセリフ | Montserrat | 800 | 16px | 1.2 | 0.03em | | `body-md` | 本文（中央揃えのリード文） | ゴシック | Noto Sans JP | 700 | 14px | 1.9 | 0.05em | | `note` | 注意書き | ゴシック | Noto Sans JP | 700 | 11px | 1.7 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.03em | - セクション見出しは 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-9e51a880`（元 LP の URL から採番） - **元 LP**: https://campaign.gongcha.co.jp/red-halloween-2025/index.html?_ga=2.179270567.2014948882.1759480846-945716797.1756890074&_gl=1*1jlq5i8*_gcl_au*MTQwNzY0ODE0My4xNzU2ODkwMDc0*_ga*OTQ1NzE2Nzk3LjE3NTY4OTAwNzQ.*_ga_F4SYD729GY*czE3NTk0ODA4NDYkbzIkZzEkdDE3NTk0ODE0M - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。