DESIGN.md — ヌードベージュ×黒の訴求型インナー通販LP（Nude Beige Feminine Innerwear Sales LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 情報量多め・訴求型、やさしい・柔らかい、上品・高級
• キーワード: ヌードベージュ・モカブラウン・黒帯見出し・金の限定帯・モデル写真・価格訴求
• 地の質感: マットな肌色の単色面とソフトな自然光の写真。キャンペーン部分だけ金の斜めストライプと紙吹雪を使う
• 形: 四角の帯見出しと角丸 8px 前後のカード。ピル型の小ラベルと丸切り抜き写真を混ぜる
• 温度感: 暖色寄り。ベージュの温かさを、黒と赤の価格表示で引き締める

Colors

• 地は生成りベージュと濃いベージュを交互に使い、セクションの区切りにする
• 価格・オファーは黒地にまとめて、白カードを載せる
• 限定キャンペーンは金の斜めストライプ帯に黒の見出しで囲む
• 価格数字・割引バッジ・取消線は赤だけにする
• 主 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

• 見出しは 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。