--- version: alpha name: Nude Beige Feminine Innerwear Sales LP description: 肌色ベージュとモカブラウンを地にして、黒帯と金の限定キャンペーン帯で締める女性向けナイトブラの通販 LP。モデル写真を大きく見せ、太いゴシックの見出しと価格カード、緑の CTA で購入を後押しする情報量の多い構成。 colors: primary: '#A3826B' background: '#FDF3E9' background-alt: '#DDC9AD' surface: '#F5EFE9' dark-section: '#010101' on-dark: '#FFFFFF' text: '#2A2420' accent-1: '#BA2526' cta: '#3DAA3A' on-cta: '#FEFEFF' secondary: '#B4821D' accent-2: '#B0252A' accent-3: '#1E4A36' marker: '#FBE7A8' text-muted: '#847F77' cta-accessible: '#30862E' text-muted-accessible: '#7B766F' primary-accessible: '#90705A' secondary-accessible: '#B6841D' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em headline-sm: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Noto Sans JP fontSize: 52px fontWeight: 900 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Montserrat fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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.md}' height: 76px button-secondary: backgroundColor: '{colors.text-muted}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 44px campaign-banner: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 300px price-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 480px compare-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px point-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 22px worry-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 56px shipping-band: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 110px --- # DESIGN.md — ヌードベージュ×黒の訴求型インナー通販LP（Nude Beige Feminine Innerwear Sales LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 情報量多め・訴求型、やさしい・柔らかい、上品・高級 - **キーワード**: ヌードベージュ・モカブラウン・黒帯見出し・金の限定帯・モデル写真・価格訴求 - **地の質感**: マットな肌色の単色面とソフトな自然光の写真。キャンペーン部分だけ金の斜めストライプと紙吹雪を使う - **形**: 四角の帯見出しと角丸 8px 前後のカード。ピル型の小ラベルと丸切り抜き写真を混ぜる - **温度感**: 暖色寄り。ベージュの温かさを、黒と赤の価格表示で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A3826B` | モカブラウンの見出し帯・ラベル | 6% | 画素の実測 | | `background` | `#FDF3E9` | メインの生成りベージュ地 | 20% | 画素の実測 | | `background-alt` | `#DDC9AD` | 比較・特長セクションの濃いベージュ地 | 14% | 画素の実測 | | `surface` | `#F5EFE9` | カード・価格ボックスの白 | 9% | 画素の実測 | | `dark-section` | `#010101` | 価格セクション・黒帯見出しの地 | 9% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の白文字 | 2% | 画素の実測 | | `text` | `#2A2420` | 見出し・本文の濃い文字 | 3% | 推定 | | `accent-1` | `#BA2526` | 価格数字・割引バッジの赤 | 1% | 画素の実測 | | `cta` | `#3DAA3A` | 購入ボタンの緑 | 2% | 推定 | | `on-cta` | `#FEFEFF` | 購入ボタン文字 | 0% | 画素の主要色に補正 | | `secondary` | `#B4821D` | 限定キャンペーンの金帯 | 4% | 画素の実測 | | `accent-2` | `#B0252A` | 受賞告知の深紅帯 | 2% | 推定 | | `accent-3` | `#1E4A36` | 当日発送帯の深緑 | 1% | 推定 | | `marker` | `#FBE7A8` | キーワード下の黄マーカー | 0% | 推定 | | `text-muted` | `#847F77` | 注釈・サブボタンのグレー | 1% | 画素の主要色に補正 | | `cta-accessible` | `#30862E` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#7B766F` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#90705A` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#B6841D` | AA を満たす補正値（計算） | | 計算 | - 地は生成りベージュと濃いベージュを交互に使い、セクションの区切りにする - 価格・オファーは黒地にまとめて、白カードを載せる - 限定キャンペーンは金の斜めストライプ帯に黒の見出しで囲む - 価格数字・割引バッジ・取消線は赤だけにする - 主 CTA は緑のグラデーションに白文字。黄の文字で強調語を入れる - 見出し帯はモカブラウン・黒の地に白抜き文字で強調語を区切る - `button-primary` は文字 `#FEFEFF` × 背景 `#3DAA3A` のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#30862E`、4.55:1）を使う。 - `button-secondary` は文字 `#FFFFFF` × 背景 `#847F77` のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#7B766F`、4.5:1）を使う。 - `heading-band` は文字 `#FFFFFF` × 背景 `#A3826B` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#90705A`、4.51:1）を使う。 - `campaign-banner` は文字 `#2A2420` × 背景 `#B4821D` のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#B6841D`、4.6:1）を使う。 - `point-label` は文字 `#FFFFFF` × 背景 `#A3826B` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#90705A`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・セクションの大見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.4 | 0.08em | | `headline-md` | 帯見出し・カード見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.06em | | `headline-sm` | FV の縦書きコピー・ポイント | 明朝 | Shippori Mincho | 600 | 28px | 1.3 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.03em | | `accent` | 価格の大きな数字 | ゴシック | Noto Sans JP | 900 | 52px | 1.0 | 0.0em | | `note` | 注釈・小さな補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | CTA ボタン文字・英字ラベル | 欧文サンセリフ | Montserrat | 700 | 22px | 1.3 | 0.05em | - 見出しは 2 行に分け、2 行目を大きくして強調語を色帯か下線で強調する - 強調したい語の上に傍点を打つ - 数字は大きく、単位は小さくして強弱をつける - 英字の見出しはセクションの頭に細いゴシックで小さく置く - 本文は 13px 前後で、強調語は太字か茶色にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較とカラー一覧は 2〜4 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は端まで広げ、テキストは左右 16px 内側に置く - 比較は左右 2 列にして、間に黒の三角矢印を置く - 価格カードは黒地の中に白カードを置き、左右 12px の余白をとる - キャンペーン・価格・CTA の一式をページ中で 2〜3 回繰り返す - セクション間はベージュの色を変えて区切る ## Elevation & Depth - カードには影をつけず、白とベージュの色差だけで浮かせる - CTA ボタンは下側に薄い影をつけ、立体感を出す - 吹き出しには小さなドロップシャドウをつける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 基本は角丸 4px の長方形。利用シーンは円形、昼夜の比較は斜めの分割 - **セクション境界**: 基本は水平な直線。下向き三角のはみ出しと斜めのカットを一部に使う - 見出し帯は角丸なしの四角 - 小ラベル（POINT 番号など）はピル型 - CTA は角丸 12px の横長ボタン - 不要な部品は丸の中に斜線を引いたアイコンで示す ## Components - **緑の購入ボタン**（`button-primary`）: 上段に黄の保証文言を斜線で挟み、下段に大きな白文字。左端に再生マークを置く - **単品購入のグレーボタン**（`button-secondary`）: 単品価格の横に置く控えめなボタン - **色帯の見出し**（`heading-band`）: 強調語を茶色か黒の四角い帯で白抜きにする - **金ストライプのキャンペーン枠**（`campaign-banner`）: 金の斜めストライプ地に黒帯の保証見出し、赤の無料文言、商品写真を重ねる - **セット価格カード**（`price-card`）: 白カードに商品画像、セット内容の枠、赤い丸の割引バッジ、取消線の定価と赤の大きな価格を並べる - **従来品との比較カード**（`compare-card`）: ベージュ地に左右 2 枚の白カードを置き、黒の三角矢印でつなぐ。右側の結論には黄マーカーを引く - **ポイント番号ピル**（`point-label`）: 茶色のピルに英字で番号を入れ、その下に見出しと短い横線を置く - **悩みの吹き出し**（`worry-bubble`）: 写真の上に白い吹き出しを 4 つ散らし、文字の下に灰色のマーカーを引く - **当日発送の帯**（`shipping-band`）: 薄い色の枠の中に、深緑の帯で発送の速さを白文字で訴える ## Do's and Don'ts **Do** - 地色は肌色系ベージュの濃淡で統一する - オファーと価格は黒地にまとめ、赤い数字で目立たせる - 見出しの強調語は帯、傍点、マーカーのいずれかで示す - モデル写真は自然光でソフトに撮り、大きく見せる - CTA 一式は複数回繰り返す **Don't** - 寒色や原色を地色に使わない - 赤を価格以外に多用しない - 見出しを細い書体だけで組まない - 写真に強いコントラストやフィルターをかけない - CTA を緑以外の色にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（限定特典と商品の価値を一目で伝える）: 上部に先着特典の帯。モデル写真の右に明朝の縦書きコピーと実績バッジ、下に金の帯を置く 2. **新色・リニューアル告知**（新しさを伝える）: 色ラベルのチップと大見出し。斜めの英字透かしを入れ、カラーを一覧で見せる 3. **カラー診断**（色選びを手助けする）: 4 象限のチャートにパーソナルカラーの英字を置き、商品画像を配置する 4. **実績・受賞**（信頼を得る）: 深紅の帯に白の大きな英字、紙吹雪、累計販売数を赤い大きな数字で見せる 5. **限定キャンペーン**（購入特典を訴える）: 金ストライプの枠に保証の帯と無料プレゼントの赤文字を入れる 6. **店舗紹介**（実在感を出す）: グレージュ地に店舗写真を重ね、黒のラベルで店名を示す 7. **技術・特長**（機能の根拠を示す）: 茶色の帯見出し、商品の切り抜きと矢印、証書の画像を並べる 8. **価格・CTA**（購入へ導く）: 黒地に 5 枚・3 枚セットの価格カード、緑の CTA、単品購入ボタンを置く 9. **悩みの提起**（共感を得る）: 写真に吹き出しを 4 つ載せ、図解で原因を説明する 10. **従来品との比較**（優位性を示す）: 左右 2 列のカードを矢印でつなぎ、結論に黄マーカーを引く 11. **利用シーン**（24 時間使えることを伝える）: 円形の写真 4 枚をリング状に並べ、シーンごとのカードにチェックリストを入れる 12. **ビフォーアフター・ポイント**（効果を具体的に見せる）: 2 分割の写真にラベルを付け、ピル番号つきのポイントを 6 つ縦に並べる ## Imagery - 20〜30 代の女性モデルを自然光で撮り、ベージュの室内で柔らかく見せる - 商品は白い背景かトルソーで切り抜き、白い矢印で持ち上げる効果を示す - カラーバリエーションは同じ角度の切り抜きを格子状に並べる - キャンペーン部分には金の紙吹雪とストライプを使う - 図解は細い線画に茶色のラベルを付ける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に 750px 前後の SP レイアウトを置き、左右はベージュ地で埋める - 価格カードは PC でも縦積みのまま維持する - 比較カードとシーンカードは PC で 2〜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-a58b8b2b`（元 LP の URL から採番） - **元 LP**: https://bambiwater.jp/lp?u=lap_nbs_shortssl7 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。