--- version: alpha name: Burgundy Gold Romantic Lingerie Sale LP description: 深いボルドーの地に金のグラデーション文字、赤いバラの花びら、鍵とリボンのモチーフでつくる期間限定セールLP。濃色帯とくすみピンク帯を交互に置き、商品カードは生成りやピンクの面で浮かせる。欧文セリフの大きな数字と価格表示が主役になる。 colors: primary: '#54111A' dark-section: '#42141E' secondary: '#8E545D' accent-1: '#D9B77A' cta: '#DBBC7B' on-cta: '#FFFFFF' surface: '#EEE8E2' tint-1: '#F8E4E6' tint-2: '#D2B9BD' accent-2: '#B5989C' accent-3: '#929E93' text: '#742635' text-body: '#454243' background: '#FFFFFF' on-dark: '#F3EEEF' cta-accessible: '#927028' accent-3-accessible: '#647065' accent-2-accessible: '#896368' typography: display: fontFamily: Cormorant Garamond fontSize: 64px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Cormorant Garamond fontSize: 44px fontWeight: 500 lineHeight: 1.1 headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Pinyon Script fontSize: 20px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 2px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px button-check: backgroundColor: '{colors.text-body}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 24px button-line: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px badge-discount: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 52px event-menu: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 760px product-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 290px countdown-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 70px step-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 80px benefit-tile: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 115px pill-label: textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 22px --- # DESIGN.md — ボルドー×金箔の官能的ランジェリーセールLP（Burgundy Gold Romantic Lingerie Sale LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型 - **キーワード**: ボルドー・金箔グラデーション・バラの花びら・鍵とリボン・秘密の扉・限定セール - **地の質感**: サテン布のドレープ、金のラメ粒子、紙の質感の生成りカード - **形**: 四角いカードが基本。アーチ型の写真枠、ハート、鍵穴形のシルエットを差し込む - **温度感**: 暖色寄りで濃く、夜っぽくて艶のある温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#54111A` | ブランドを代表するボルドーの地 | 30% | 画素の実測 | | `dark-section` | `#42141E` | カウントダウン帯・鍵キャンペーンの最暗部 | 8% | 画素の実測 | | `secondary` | `#8E545D` | 特価セットのくすみローズ帯 | 12% | 画素の実測 | | `accent-1` | `#D9B77A` | 金グラデーションの見出し・価格 | 3% | 推定 | | `cta` | `#DBBC7B` | カート投入の金色ピルボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 金ボタン上の文字 | 0% | 画素の主要色に補正 | | `surface` | `#EEE8E2` | メニュー・商品カードの生成り面 | 10% | 画素の実測 | | `tint-1` | `#F8E4E6` | 特価カード内の淡ピンク面 | 6% | 画素の実測 | | `tint-2` | `#D2B9BD` | LINE案内帯のくすみモーブ | 5% | 画素の実測 | | `accent-2` | `#B5989C` | 特典アイコンカードのモーブ | 2% | 画素の実測 | | `accent-3` | `#929E93` | LINE系セージグリーンボタン | 0% | 画素の実測 | | `text` | `#742635` | 明地上のボルドー見出し・価格 | 1% | 画素の主要色に補正 | | `text-body` | `#454243` | チャコールのサブボタン・本文 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 末尾の商品一覧の白地 | 10% | 画素の実測 | | `on-dark` | `#F3EEEF` | 濃色地上の白文字 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#927028` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#647065` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#896368` | AA を満たす補正値（計算） | | 計算 | - 地はボルドー→くすみローズ→モーブ→白の順に、セクションごとに帯で切り替える - 濃色地の大見出しと価格は金グラデーションで、白文字は説明文にだけ使う - 明るいカード上の見出しと価格はボルドーで統一する - 割引率バッジは、濃地なら金の円、明地ならボルドーの角帯や円にする - サブボタンはチャコールの面に白文字、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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セール名・大きな欧文と数字 | 欧文セリフ | Cormorant Garamond | 500 | 64px | 1.0 | 0.02em | | `headline-lg` | 価格の大表示 | 欧文セリフ | Cormorant Garamond | 500 | 44px | 1.1 | 0.0em | | `headline-md` | セクションの和文見出し | 明朝 | Shippori Mincho | 600 | 24px | 1.5 | 0.08em | | `headline-sm` | 商品キャッチの2行見出し | ゴシック | Zen Kaku Gothic New | 500 | 17px | 1.6 | 0.06em | | `body-md` | 商品名・説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `accent` | 筆記体の添え文字・欧文小見出し | 欧文スクリプト | Pinyon Script | 400 | 20px | 1.2 | 0.02em | | `note` | ※注釈・期間表記 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `label-button` | ボタンのラベル | ゴシック | Noto Sans JP | 500 | 12px | 1.3 | 0.04em | - 数字・価格・英字見出しはハイコントラストの細いセリフ体で大きく組む - 和文の大見出しは明朝、説明文はゴシックで分ける - 番号は細いセリフ体の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 ```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-3dbea632`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/f/sale/tu-hacci_sale - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。