DESIGN.md — パールグレー×くすみローズの明朝エイジングケア LP（Pearl Gray Rose Mincho Anti-Aging Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: パールグレー・くすみローズ・縦書き明朝・白大理石・黒ボトル・メダリオン
• 地の質感: ボケ光や水滴がにじむ淡いグレーの写真背景と白大理石の紙面。ところどころに漆黒の帯を入れて引き締める
• 形: 円形の効能バッジ、細い線のリング、角の小さい矩形ラベル、角丸カードは右上だけ大きく丸める
• 温度感: ややクールなグレーの地に、ローズとゴールドで温かみを足す

Colors

• 地はパールグレーと白大理石を交互に使う。悩みの深掘り 1 か所だけを漆黒にする
• 強調語はくすみローズの文字か、ローズの帯に白抜き文字で示す
• 砂金色はラベル帯・月桂樹・権威表示に限って使う
• 鮮やかな赤は購入ボタンにだけ使う
• 黒地では見出しをシャンパンゴールドにし、ゴールドの下線を添える
• 本文はグレーにし、強調部分だけローズにする
• badge-medallion は文字 #C4505A × 背景 #FEFEFE のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C34E58、4.58:1）を使う。
• label-band-rose は文字 #FEFEFE × 背景 #C4505A のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C34E58、4.58:1）を使う。
• label-band-gold は文字 #FEFEFE × 背景 #BC9D73 のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8F6F44、4.6:1）を使う。

Typography

• キャッチは明朝の縦書きにし、写真の左右に寄せる
• 見出しは明朝、本文はゴシックで分ける
• 見出しの中で強調語だけを 1.3 倍に大きくし、ローズにする
• 字間を広めに取り、静かで上品な印象を保つ
• ※注釈は 8px 前後の小さな字でブロック下にまとめる
• 数字の実績は明朝の特大サイズを砂金色のグラデーションにし、月桂樹で挟む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分アイコンだけ 3〜4 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は全幅で大きく見せ、文字を重ねる
• 成分の解説は左に縦の罫線を引き、右寄せのインデントで本文を置く
• 白カードは左に寄せ、右側に少し余白を残す
• 人物紹介は四隅の括弧枠で囲む
• 効能バッジは 4 つの円を横一列に並べる

Elevation & Depth

• 白カードはぼかしの大きい薄い灰色の影（0 8px 24px rgba(0,0,0,.08)）
• 商品ボトルは床に柔らかい落ち影を落とす
• 円形バッジは影なしにし、細いリングで縁取る

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は全幅の矩形。成分素材は正円、季節写真は角丸 4px
• セクション境界: 主に直線。黒セクションの前に斜めカットや V 字の切り込みを入れる
• ラベル帯は角丸なしか 2px の矩形
• 大きいカードは右上の角だけ大きく丸める
• 効能は白い円に細いローズのリング
• 購入ボタンは角丸 4px 程度の矩形

Components

• 購入 CTA ボタン（button-primary）: 幅いっぱいの赤い矩形ボタン。白太字の文言に下向き三角を添える
• 効能メダリオン（badge-medallion）: 白い円にローズの細いリング。明朝のローズ文字で効能を 2 行で書く
• ローズのラベル帯（label-band-rose）: 強調語を白抜きにする矩形の帯。縦書きのコピーの中にも差し込む
• 砂金色のラベル帯（label-band-gold）: 成分名や権威の前置きに使う金の帯
• 月桂樹付きの実績表示（laurel-stat）: 金の月桂樹で左右を挟み、特大の明朝数字を置く
• 番号付き成分カード（ingredient-card）: 上に素材写真、次にローズの大きな明朝番号と成分名、効能タグ、左罫線付きの本文を並べる
• 括弧枠プロフィール（bracket-profile）: 四隅の角括弧で囲み、肩書きと名前を明朝で書いて経歴を小さく添える
• 価格ボックス（price-box）: 罫線の枠で内訳を並べ、打ち消し線の合計価格、特大明朝のセット価格、赤丸の送料無料バッジを置く

Do's and Don'ts

Do - 縦書きの明朝コピーを写真の余白に置く - 効能は 4 つの円バッジで繰り返し見せる - 成分素材は円で切り抜き、グリッドに並べる - 強調語はローズの帯か文字色で統一する - 訴求ごとに※注釈を小さく添える

Don't - ビビッドな原色を地に使わない - 丸ゴシックやポップな書体を使わない - 角丸を大きくしたピル型のボタンにしない - 黒地のセクションを何度も繰り返さない - ゴールドを本文の色に使わない

Page Structure

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

1. ファーストビュー（新規性と効能を一目で伝える）: グレーのボケ光を背景に黒ボトルを置き、左に縦書きの大明朝コピー、下に成分のリングバッジを 2 つ並べる
2. 商品セットと価格（購入へ早めに誘導する）: 金の地の上に白大理石のカードを置き、3 品の物撮りと価格ボックス、赤い CTA を入れる
3. コンセプト訴求（独自の配合を印象づける）: 特大の明朝見出しの下に成分リングを並べ、縦書きコピーとモデル写真に効能円を縦に並べる
4. 実績（信頼を補強する）: 月桂樹で挟んだ金の特大数字を 2 段で見せる
5. ブランド背景と製品ライン（開発の経緯を伝える）: 金の帯の下にハイライト見出しを置き、製品群の物撮りを並べる
6. 専門家の推薦（第三者の評価を示す）: ピンクの地に人物写真、ローズの帯、大きなカギ括弧のコメント、括弧枠のプロフィールを置く
7. 悩みの提起（共感を得る）: グレー地にモデルの横顔を置き、ダッシュで始まる縦書きの悩みを 4 行並べる
8. 原因の解説（問題を深掘りする）: 黒地にゴールドの見出しを置き、ベージュの肌断面図と灰色の吹き出し注記を入れる
9. 解決策と成分概要（1 本で済むことを示す）: 大理石の地に効能円 4 つと黒ボトルを置き、成分を円写真のグリッドで見せる
10. 成分詳細（根拠を説明する）: 番号付きの白カードを縦に積み、カプセルの図解は金ラベルと点線で引き出す
11. メディア出演者の推薦（権威付けをする）: ローズの明朝見出しを置き、右上を角丸にした写真に縦書きの帯コメントを重ねる
12. 追加成分と香り（付加価値を伝える）: 植物の円写真を 4 列のグリッドにし、香りはピラミッド図と引用符で見せる
13. 締めのビジュアルと店舗実績（余韻と信頼を残す）: モデル写真に縦書きコピーを重ね、ポップアップストアの写真コラージュにローズの縦長パネルを重ねる

Imagery

• 30〜40 代の女性モデルを白い衣装で撮る。素肌感のある艶と柔らかい拡散光
• 黒いマットなボトルを淡いグレーの背景で撮る。ボケた光の玉と水泡を添える
• 成分素材（テクスチャ、水、オイル、花）のマクロ写真を正円で切り抜く
• ピンクの細胞やカプセルを描いた透明感のある 3D イメージ図
• 背景には白大理石の柔らかな模様をうっすら敷く
• 金の線で描いた月桂樹の装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後の SP レイアウトを置き、左右をグレーの地で埋める想定
• PC でも縦書きコピーと写真の重ね方は維持する
• 成分グリッドは PC で 4〜6 列に広げる
• 価格ボックスと CTA は最大幅 600px 程度に抑える

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