DESIGN.md — 黒×金×ワインレッドの高級スキンケア通販LP（Dark Gold Premium Skincare Set Offer LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 黒×金・明朝の大見出し・泡・しずくの装飾・ワインレッドのオファー枠・緑のCTA・注釈多め
• 地の質感: 大理石のひび割れ柄、乳液や泡のアップ写真、光沢のある金のグラデーション
• 形: 四角い写真パネルと濃色テキストボックスを重ねて配置。成分は円形バブル、悩みは吹き出し、効果は六角形バッジで表す
• 温度感: 落ち着いたクールな黒・グレーが基調。金とワインレッドで温かさを足す

Colors

• 基本の地はグレーと白。黒の地を繰り返し挟んで高級感を出す
• 強調語は金（グラデーション可）で示し、明朝で大きく組む
• オファー枠だけワインレッドの地にし、中に生成りのカードを置く
• 価格と割引は赤、CTA は緑の地に黄色の文字で、ブランド色と切り離して目立たせる
• 悩みのセクションはグレーと黒の濃淡でまとめ、解決のセクションでピンクや淡い青に切り替える
• button-primary は文字 #F5F05A × 背景 #6DB33F のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#477529、4.55:1）を使う。
• worry-bubble は文字 #F2F2F2 × 背景 #76706C のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#736D6A、4.55:1）を使う。
• hex-badge は文字 #F2F2F2 × 背景 #C9A063 のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8D6831、4.51:1）を使う。

Typography

• 情緒的なキャッチは明朝で組み、強調語だけ金色にして大きくする
• 説明や悩みの文はゴシックで、字間を広めにとる
• 縦書きの明朝コピーを写真の横に置く
• 数字のPOINT番号は極細の欧文で大きく組む
• 価格はセリフ寄りの太い数字を赤で大きく組み、（税込）は小さく添える
• ※注釈は小さな灰色の文字で、各セクションの末尾にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキスト箱を左右にずらして重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面端まで広げ、テキスト箱を半分重ねる
• POINT のカードは黒地の上に白い角丸カードで並べる
• 成分は円形バブルを 2〜4 個横に並べる
• オファー枠はページ内で 3 回繰り返す
• CTA ボタンは画面幅のほぼ全体に置く

Elevation & Depth

• CTA ボタンには下方向に柔らかい影をつけ、上部に光沢を入れる
• 白カードはごく薄い影か影なしにする
• 商品写真には床への映り込みと影を入れて浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は四角形を基本に、角丸の大きいパネルや円形で切り抜く
• セクション境界: 基本は直線で区切る。一部に V 字のくさび型や下向き矢印の形を使う
• 悩みは丸みのある吹き出し形にする
• 効果のバッジは金の六角形
• 帯ラベルは片側を斜めに切った黒または金の帯
• オファーカードには細い金色の二重線の枠をつける

Components

• 価格入り緑CTA（button-primary）: 左に白抜き円の割引バッジ、中央に黄色の大きな価格、右に送料無料の枠と矢印丸を置いたピル型ボタン
• 赤価格表示（price-block）: 打ち消し線つきの通常価格、赤い円の割引バッジ、赤帯の限定ラベル、赤い大きな価格を組み合わせる
• オファーカード（offer-card）: ワインレッド地の上に置く生成りのカード。番号つきの商品写真とセット内容の枠を入れる
• 悩み吹き出し（worry-bubble）: 斜線柄の濃いグレーの吹き出しに、白文字で悩みの単語を 1 つ入れる
• POINTカード（point-card）: 黒地の上に置く白い角丸カード。左上に細字の POINT 番号、黒い斜め帯の小見出し、明朝の見出しを入れる
• 金六角バッジ（hex-badge）: 金のグラデーションの六角形に白文字で効果名を入れ、ハニカム状に並べる
• 成分バブル（ingredient-bubble）: 透明感のある球体の中に成分名を入れる円形の部品
• おすすめチェックリスト（check-list）: 濃い茶色の吹き出し見出しの下に、金のチェックと下線つきの文を並べる

Do's and Don'ts

Do - 強調語は金色の明朝で大きく組む - 黒の地とグレー・白の地を交互に並べて緩急をつける - ※注釈を省略せず、小さな灰色の文字で添える - オファー枠は同じ構成で複数回繰り返す - 写真とテキスト箱を重ねて立体的に配置する

Don't - 原色に近い明るい色を地に使わない - 見出しをすべてゴシックにしない（明朝との対比を残す） - CTA を金や黒にしない。緑と黄色で目立たせる - 丸ゴシックやポップなイラストを使わない - 余白の少ない詰めたレイアウトにしない

Page Structure

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

1. ファーストビュー（商品セットと割引を一目で伝える）: 茶系の暗いグラデーション地に金白の明朝コピーと商品写真を置き、下に緑の価格CTAを置く
2. 悩みの提起（肌の悩みに共感させる）: 大理石柄の地に悩みの吹き出しを並べ、写真と濃いグレーのテキスト箱を交互に重ねる
3. 解決の提示（必要なケアを示す）: ピンクの泡の背景の中央に大きな明朝見出しを置き、V字の黒帯でつなぐ
4. 商品紹介（セットの 2 品の特長を伝える）: 金のラベルと金の大見出しの下に、商品写真と縦組みの説明を左右交互に置く
5. 中間CTA（早い段階で購入を促す）: 注釈の下に緑の価格CTAを置く
6. 機能説明（美顔器のモードを説明する）: 虹色グラデーションの枠に白いカードを入れ、使用写真とモード一覧を載せる
7. 成分訴求（独自成分を印象づける）: 商品の大きな写真の下に、成分バブルを並べる
8. オファー（セット内容と価格を示す）: ワインレッドの地に生成りのカードを置き、番号つき写真、セット内容、赤い価格、CTAを入れる
9. 効果・おすすめ（得られる効果と対象者を示す）: 黒地に金の六角バッジ、比較写真、チェックリストを置く
10. 根拠（成分が必要な理由を示す）: 下向き矢印の形の中に事実を示す見出しを置き、続けて研究の写真と成分の球体を見せる
11. POINT解説（特長を3つ詳しく伝える）: 黒地に白い POINT カードを縦に 3 枚並べる
12. 使い方の提案（手間が減ることを伝える）: タイル壁の写真と円形の人物写真に、縦書きの帯を添える
13. オールインワン・無添加（手軽さと安心感を伝える）: 黒地にアイコン列と写真のコラージュを置き、白地に円形の無添加バッジを並べる
14. 最終オファー（購入を決めてもらう）: 前のオファー枠と同じ構成をもう一度置く

Imagery

• 黒い瓶の商品を、暗い背景で艶と映り込みが出るように撮る
• 女性モデルは自然光の柔らかいビューティーポートレートで、肌の艶を強調する
• 乳液のテクスチャー、泡、しずく、ガラス器具の写真を装飾に使う
• 白い球や金の細い線を浮かべて高級感を足す
• 成分は淡い色の透明な球体として描く
• ひび割れた大理石柄で乾燥の悩みを表す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨として書く。PC では幅 750px 前後の中央 1 カラムに SP の構成をそのまま置き、左右は黒かグレーの地で埋める
• POINT カードや成分バブルは PC で横に 2〜3 列並べてもよい
• CTA ボタンは最大幅 600px 程度に抑える
• 縦組みのコピーは 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 行書くと起動時に読み込まれる。