DESIGN.md — パールシルバー×金の大人向け医薬部外品コスメ LP（Pearl Silver Anti-Aging Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、情報量多め・訴求型、信頼・誠実
• キーワード: パール光沢・銀白・くすみブルー・金の月桂樹・明朝の大見出し・縦書きコピー
• 地の質感: パール玉、きらめき粒子、水面の揺らぎ、大理石や漆喰調の背景を重ねた、つややかで透明感のある質感
• 形: 細い線で囲んだ四角いカード、正多角形の花形バッジ、ピル型ラベル、斜めにカットしたリボン帯
• 温度感: やや寒色寄りのニュートラル。金と赤で部分的に温度を足す

Colors

• 地は白とパールグレーを交互にし、写真のきらめきで光沢感を出す
• 見出しやラベル帯はくすみブルーに統一し、ブランドの清潔感を保つ
• 金は受賞・CTA・装飾線のみ。面積は小さく使う
• 深紅は価格と割引バッジに限定する
• 悩み提起だけはチャコール地にして空気を変える
• 本文の要点は黄色マーカーで強調する
• button-primary は文字 #FEFEFE × 背景 #C2A266 のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8E7139、4.55:1）を使う。

Typography

• 大見出しは明朝体。キーワードだけ1.5倍に拡大して強弱をつける
• FVと特長では縦書きの明朝コピーを使う
• 価格の数字は太い明朝で特大にし、深紅にする
• 英字のセクション名は大文字のセリフ体。下に小さな和文ラベルを添える
• ※注釈は必ず小さなグレー文字で添える
• Voice番号やMorning/Nightは筆記体の英字で装飾として重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジやタグは 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃え、本文は左揃え
• 商品写真を右寄せにして、左側にテキストを置く
• 成分紹介は円形写真と説明を左右交互に並べる
• カードの左右には約5%の余白をとる
• 注釈はセクション末尾にまとめる

Elevation & Depth

• カードには柔らかい広めの影(0 4px 16px rgba(0,0,0,.12))をつける
• お客様写真はポラロイド風の白枠と影をつけ、マスキングテープで留めたように見せる
• CTAは金グラデに下影をつけて立体的にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は角版か背景に溶かす切り抜き。成分写真は円形のガラス玉風にする
• セクション境界: 基本は直線で切り替える。下向きV字の三角や矢印でセクションをつなぐ
• ラベル帯は右端を斜めにカットする
• 効能バッジは花形(多角形)の白抜きにする
• 成分タグはピル型の白チップにする
• 声カードは一つの角だけ大きく丸める

Components

• 金グラデCTA（button-primary）: 横幅いっぱいの金グラデボタン。左にカートアイコン、白い明朝文字
• 価格オファー枠（price-block）: 通常価格に取り消し線、深紅の特大価格、円形の割引バッジ
• 斜めカットラベル帯（label-ribbon）: くすみブルー地に白文字で、見出しの上に置く小帯
• 月桂樹No.1バッジ（award-badge）: 金の月桂樹とリボンでNo.1を囲む。2列で並べる
• 悩みチェックリスト（worry-checklist）: チャコール地にチェックボックス付きの白文字を6行並べる。下にブルー帯の解決訴求
• POINT番号（point-number）: 細い円弧と大きな細身数字に、小さなPOINT英字を添える
• お客様の声カード（voice-card）: 白カードに筆記体のVoice番号、ポラロイド写真、年代タグ、黄色マーカー
• 成分タグ（ingredient-chip）: 白いピル型チップに影をつけ、成分名を2列で並べる
• Q&Aカード（faq-card）: 白カードに明朝のQ./A.、間を点線で区切る

Do's and Don'ts

Do - パール・銀白・淡ブルーで透明感を保つ - 大見出しは明朝で大胆なサイズ差をつける - 効能表現には※注釈を必ず添える - CTA・受賞には金、価格には深紅を使い、役割を分ける - 商品チューブの写真を各セクションで繰り返し見せる

Don't - ビビッドなピンクやオレンジを多用しない - 丸ゴシックや手書き体で幼く見せない - CTAを青や緑にしない - 背景を真っ白のフラットだけにしない(光沢テクスチャを入れる) - 深紅を価格以外に広げない

Page Structure

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

1. ファーストビュー（独自性と多機能を一目で伝える）: 女性写真と商品の上に縦書き明朝の大コピー。下に花形の効能バッジ6個を置く
2. オファー・CTA（割引価格を提示して購入を促す）: 白枠カードに価格ブロックと金のCTA、定期コースの説明
3. 問題提起（今のケアへの不満を問いかける）: 暗めの写真に白帯の斜め見出しを重ねる
4. 商品概要（医薬部外品であることを説明する）: 月桂樹で囲んだ中央見出し、縦書きコピーで商品を挟み、用語解説の枠を置く
5. 受賞実績（第三者評価で信頼を得る）: きらめき背景に金のNo.1バッジを2列で並べる
6. メディア掲載（権威付け）: セリフ体の英字見出しの下に、雑誌表紙をずらして重ねる
7. 悩みの提起（共感を得て解決策へつなぐ）: 人物写真の下にチャコール地のチェックリスト、続けてブルー帯で解決を示す
8. 選ばれる理由(3ポイント)（機能を詳しく伝える）: POINT番号、明朝の大見出し、肌断面の図解、円形写真の成分紹介、無添加タグ
9. 製造へのこだわり（品質への安心感を与える）: ラボ写真の上に半透明カードと番号付き多角形バッジ3つを置く
10. お客様の声（使用実感を伝える）: 水色大理石の地にポラロイド写真付きカードを左右交互に配置
11. 使用方法（使い方を示す）: 写真と枠付きテキスト、朝・夜の2カードに筆記体英字を添える
12. お届けイメージ（梱包を見せる）: 銀の箱の写真に、薄い大きな英字を背景として重ねる
13. よくある質問（不安を解消する）: 水面テクスチャ地に白いQ&Aカードを縦に並べる
14. 最終CTA（購入を後押しする）: 冒頭と同じオファーカードを繰り返す

Imagery

• 40〜50代女性が頬に手を添えて微笑む、明るく白い光の写真
• 白銀のチューブ商品を斜めに置き、光沢と反射を強調する
• パール玉、水滴、きらめき粒子、シルクの布で透明感を演出する
• 成分はガラス玉のような円形フレームに入れる
• 肌断面はピンク系の柔らかいイラストにする
• お客様写真は自撮り風。ポラロイド枠と花の装飾を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像はないため、SPの縦長構成を中央に最大480〜750px幅で配置する
• PCでは背景にパールグレーのテクスチャを全幅で敷く
• FVは写真とコピーを左右2カラムに広げてもよい
• 受賞バッジと声カードはPCで3列にする
• CTAはPCでも幅最大480pxを保つ

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 行書くと起動時に読み込まれる。