DESIGN.md — ボルドー×金箔の官能的ランジェリーセールLP（Burgundy Gold Romantic Lingerie Sale LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: ボルドー・金箔グラデーション・バラの花びら・鍵とリボン・秘密の扉・限定セール
• 地の質感: サテン布のドレープ、金のラメ粒子、紙の質感の生成りカード
• 形: 四角いカードが基本。アーチ型の写真枠、ハート、鍵穴形のシルエットを差し込む
• 温度感: 暖色寄りで濃く、夜っぽくて艶のある温度感

Colors

• 地はボルドー→くすみローズ→モーブ→白の順に、セクションごとに帯で切り替える
• 濃色地の大見出しと価格は金グラデーションで、白文字は説明文にだけ使う
• 明るいカード上の見出しと価格はボルドーで統一する
• 割引率バッジは、濃地なら金の円、明地ならボルドーの角帯や円にする
• サブボタンはチャコールの面に白文字、LINE系はセージグリーンで区別する
• 原色の赤や純黒の面は使わない
• button-primary は文字 #FFFFFF × 背景 #DBBC7B のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#927028、4.59:1）を使う。
• button-line は文字 #F3EEEF × 背景 #929E93 のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#647065、4.52:1）を使う。
• benefit-tile は文字 #F3EEEF × 背景 #B5989C のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#896368、4.52:1）を使う。

Typography

• 数字・価格・英字見出しはハイコントラストの細いセリフ体で大きく組む
• 和文の大見出しは明朝、説明文はゴシックで分ける
• 番号は細いセリフ体の01〜05と小さな欧文ラベルを組み合わせる
• 筆記体は小見出しに添えるだけで、斜めに重ねてもよい
• 定価は打ち消し線を引いて小さく、割引後の価格を2〜3倍の大きさにする
• 見出しは中央揃え・2行構成を基本にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メニューと特典カードは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の色帯で区切り、中身は左右6%内側に収める
• 特価セクションは細い白の二重枠線で囲む
• 商品カードは写真を左、価格情報を右に置く横並び
• 主商品はメイン写真1枚＋サブ写真2枚のグリッドにし、中央に＋の丸バッジを置く
• メニューは細い罫線で区切った2×2＋1のグリッドにする

Elevation & Depth

• カードは影をほぼ付けず、地との色差で浮かせる
• 生成りカードにはごく薄い影を付けてよい
• 金の要素に光沢グラデーションとラメ粒子を重ねる

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 主写真はハート形やアーチ型、商品写真は四角、プレゼントは楕円で切り抜く
• セクション境界: 基本は直線の色帯の切り替え。案内帯の終わりだけV字の山形にする
• 金とセージのボタンはピル型、チャコールのボタンは角型にする
• 番号付きカードの左上は斜めカットの三角タブにする
• ハートと鍵穴形のシルエットを装飾の面に使う
• ラベルは角帯にして下端を燕尾型に切る

Components

• 金色ピルCTA（button-primary）: 金グラデーションのピルボタン。白文字とカートアイコンを入れる
• チェックボタン（button-check）: チャコールの角型ボタンに白文字と»を入れる。濃地では白地に黒文字にする
• LINE誘導ボタン（button-line）: セージグリーンのピルボタン
• 割引率バッジ（badge-discount）: 金の円に%OFFを2段でセリフ体表示。明地ではボルドーの円または角帯にする
• イベントメニューカード（event-menu）: 生成りの紙地に番号・アイコン丸・特典名・枠線のCLICKボタンを罫線グリッドで並べる
• 特価商品カード（product-card）: 淡ピンク地にアーチ型の写真、セット数の丸、打ち消し定価、割引帯、大価格、ボタンを置く
• カウントダウン帯（countdown-bar）: 最暗部の帯に白文字で残り時間を表示する
• 応募ステップ枠（step-box）: 白い角丸枠にSTEP1/2をセリフ体で表示。左上にボルドーの封蝋風の丸ラベルを付ける
• 特典アイコンタイル（benefit-tile）: モーブの角丸タイルに白い線画アイコンと2行の説明を入れ、2×2で並べる
• 細枠ピルラベル（pill-label）: 濃地の上に白い細線のピル枠で条件を短く示す

Do's and Don'ts

Do - 価格と数字は金またはボルドーのセリフ体で大きく見せる - 濃地にはバラの花びら・ラメ・サテンのドレープを散らす - セクションごとに地の色を変え、長いページにリズムをつける - 商品写真は明るい白い室内で撮ったものを使い、濃地とのコントラストを作る - 定価の打ち消し→割引率→特価の順で縦に並べる

Don't - 原色の赤やビビッドなピンクを使わない - 丸ゴシックやポップなイラストを使わない - 金を本文の小さい文字に使わない - 影の強いカードや立体的なボタンを作らない - 1セクションに地の色を3色以上混ぜない

Page Structure

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

1. ファーストビュー（イベント名と期間を印象づける）: ハート形に切り抜いた人物写真、金の筆記体ロゴ、縦書きの明朝コピー、バラの花びらを置き、期間を金色で表示する
2. セールタイトル（最終期間であることを宣言する）: サテン調のボルドー地に欧文セリフの大見出しを3段で積み、短い煽り文を添える
3. カウントダウン（残り時間で急がせる）: 最暗部の帯に白文字の時間表示を置く
4. イベントメニュー（企画一覧へページ内で誘導する）: 生成りのカードに金リボン見出しを付け、01〜05の企画を罫線グリッドで並べる
5. 1枚買うと1枚無料の企画（目玉企画の商品セットを見せる）: 金リボンの装飾見出しの下に、鍵アイコン付きの番号、写真3枚のグリッド、金の割引バッジ＋大価格、白ボタンを置く
6. 均一価格の特価セット（一律価格の商品を並べる）: くすみローズ地を白い枠線で囲む。筆記体＋セリフ体の番号見出しと淡ピンクの商品カードを繰り返す
7. LINE限定シークレットセール（LINE登録を促す）: モーブのバナーに続いて、斜めタブの番号付き生成りカードで割引商品を見せる
8. 参加方法と会員特典（手順と登録メリットを示す）: スマホの画面写真と番号付き手順、V字の区切り、2×2の特典タイル、ピルボタン2つを並べる
9. 全額タダのキャンペーン（抽選特典で購入を後押しする）: ボルドーの地に金の大きな和文、鍵穴形のシルエットに金の鍵、STEP枠、金のCTA、注意事項の枠を置く
10. SNS投稿でもらえるWチャンス（UGCの投稿を促す）: 白いカードにハートのラベル、SNS投稿の見本2枚、楕円の写真にリボン装飾を付けたプレゼントを3つ並べる
11. クリアランス・新作一覧（ほかの商品へ回遊させる）: 白地にカテゴリの横スクロールタブを置き、2列の商品グリッドとチャコールのボタン、枠線の一覧リンクを並べる

Imagery

• 人物写真は白い窓辺や白いソファの自然光の室内で撮り、柔らかいアンニュイな表情にする
• 下着や部屋着は肌なじみのよいくすみピンク・グレージュ・ラベンダーでそろえる
• 装飾は赤いバラの花びら、金のラメ、サテンの布、アンティーク調の金の鍵、リボンを使う
• アイコンは単色の線画を丸や角丸の中に置く
• 背景の隅に、ローズの線画や筆記体の英字を薄く透かしで入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版は SP のレイアウトをそのまま中央に約 45% 幅の 1 カラムで置く
• PC の左右の余白は各セクションの地の色を全幅に伸ばして埋める
• PC でもグリッドの列数は SP と同じにし、文字サイズも比例して保つ
• PC の右端にページトップボタンを固定する

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