DESIGN.md — 銀×紺×金の真珠光沢美白美容液LP（Silver Pearl Luxury Whitening Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、清潔・爽やか
• キーワード: 白銀グラデーション・真珠の球体・明朝体の大見出し・金の筆記体数字・深紅の価格訴求・成分ごとの色分け
• 地の質感: メタリックな銀の光沢、泡や水滴の透明感、黒い石目のテクスチャを場面で使い分ける
• 形: 完全な円形の成分球、角丸小さめのカード、下が三角形に尖るセクション
• 温度感: やや寒色寄りの白。金と深紅で温かさを差す

Colors

• 地は白〜銀灰グラデーションを基本にし、真珠光沢で高級感を出す
• ブランド説明は紺の帯、悩み提起は黒い石目地で場面を切り替える
• 価格・割引率・特典は深紅だけで強調する
• 主CTAは緑の光沢ボタンにし、ページ内で唯一の緑とする
• 成分ごとに金・紫・水色の球体色を割り当てて統一する
• 金は数字の筆記体と細い装飾線に限る
• button-primary は文字 #FFFFFF × 背景 #2E8B2E のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2D872D、4.55:1）を使う。

Typography

• 見出しは明朝体の太字で、キーワードだけ2倍ほどに拡大する
• 縦書きの大見出しを人物写真の横に配置する
• 数字は欧文セリフのイタリックで大きく扱い、単位は小さくする
• 効能表現には必ず※の注釈を小さく添える
• 価格の数字は深紅の明朝で最大サイズにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分球は 2 列＋1 個の三角配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の背景で区切る
• 価格ブロックは銀地の上に白いカードを重ねる
• 特典は番号付きの横長カードを縦に6段並べる
• 成分説明は写真全面＋縦書き見出しで1成分1画面
• 価格・CTAブロックはページ内で3回以上繰り返す

Elevation & Depth

• CTAボタンは上下グラデーションと影で立体的な光沢にする
• 成分球はハイライトと影で真珠のような立体感を出す
• カードは影なしで、薄い面色の差で分ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は角なしで背景に溶け込ませ、成分は円形の球体
• セクション境界: 直線の区切りが基本。事実セクションの下端は逆三角形に尖らせる
• ボタンは角丸8px程度の横長矩形
• 無添加項目は細い線の円の中に置く
• ラベルは角丸なしの深紅帯

Components

• 緑の光沢CTA（button-primary）: 左上に深紅の限定タグ、左に大きな割引率、右に申込文言
• 単品購入ボタン（button-secondary）: 濃い灰色の角丸ボタンに白文字と小さな価格
• 価格カード（price-card）: 定価に取り消し線、深紅の大きな割引価格、赤枠の条件ラベル4つ
• 番号付き特典行（benefit-row）: 左に深紅の番号ブロック、右に深紅の大きな特典文言
• 成分の球体（ingredient-orb）: 金・紫・水色の真珠球に成分名、上に金の小ラベル
• Point番号（point-number）: 透明な泡の上に金の欧文イタリック番号
• 割引バッジ（badge-campaign）: 深紅帯の限定ラベルの下に大きな割引率
• 口コミ吹き出し（speech-bubble）: 白い角丸吹き出しに黒の手書き風短文

Do's and Don'ts

Do - 見出しは明朝体で、キーワードを大きく拡大する - 成分ごとの球体色をページ全体で統一する - 価格・CTAブロックを複数回同じ形で繰り返す - 効能表現には※注釈を添える - 銀・白の光沢の背景で清潔感と高級感を両立する

Don't - 丸ゴシックやポップな書体を見出しに使わない - 深紅をCTA以外の装飾に広げすぎない - 緑を主CTA以外に使わない - フラットな単色ベタだけで構成しない - 注釈を省略しない

Page Structure

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

1. ファーストビュー（悩みと解決をひと目で伝える）: 黒石目帯に悩みのワード、白銀地に商品ボトルと縦書き明朝の大見出し
2. 成分の紹介（2つの有効成分と補助成分を示す）: 金の筆記体頭文字の見出しと、3つの真珠球を三角に並べる
3. ブランド帯（商品名と価格を伝える）: 紺地に白の明朝で商品名と容量・価格
4. 価格・CTA（初回割引で申込を促す）: 銀地に価格カード、緑CTA、2回目割引の深紅帯、6大特典のリスト
5. 共同開発・権威（専門家の監修で信頼を得る）: 紺紫グラデーションの円の中に実績数字、人物写真と金枠のコメント
6. SNSの反響（口コミで共感を広げる）: 紫ピンクのグラデーション地にSNS投稿を重ね、吹き出しを散らす
7. 素材のこだわり（高級素材の配合を伝える）: 黒地に金の大きな明朝と純度の数字
8. 悩みの提起（変わらない原因を示す）: モノクロの人物写真、黒い吹き出し、肌の断面図
9. 4つのポイント（成分を一覧で見せる）: 紺帯の見出しの下に4色の球体を商品の周りに配置
10. ポイント詳細（成分ごとの働きを説明する）: 成分色の背景、泡の上のPoint番号、縦書きの成分名、比較カード
11. 事実の提示（隠れた悩みを見える化する）: 黒石目地に肌の拡大写真、下端は逆三角形
12. 無添加（安心感を伝える）: 白地に細い線の円を6つ並べ、中央に商品
13. クロージングCTA（最後のひと押し）: イメージモデルと縦書きの締めの文言、価格ブロックを再掲

Imagery

• 銀のボトルを白背景に置き、強いハイライトで金属の光沢を出す
• 成分は真珠や泡のような透明な球体CGで表す
• 女性モデルは白い服で、白飛び気味の明るい肌を見せる
• 悩みのシーンはモノクロ写真と黒い石目テクスチャで暗く見せる
• 肌の断面図は淡いピンクの細胞をシンプルな図解で描く
• 水しぶき・金の液体・泡を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に幅420〜480pxの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 行書くと起動時に読み込まれる。