DESIGN.md — ローズピンク×ゴールドの皮膚科学系美容液 LP（Rose Gold Clinical Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型
• キーワード: ローズゴールド・皮膚科学・明朝の見出し・ゴールドの細い罫線・白い余白・繰り返すオファー
• 地の質感: パールのような光沢のピンクのグラデーションと、白〜薄いグレーのクリーンな地。泡やガラス器具を淡くぼかした背景を使う
• 形: 角が直角のカードと細い罫線が中心。CTA だけ大きなピル型、割引バッジは円形
• 温度感: やや暖かい（ピンクベージュとゴールド）

Colors

• 地は白と薄いグレーを交互に使い、ファーストビューと商品ビジュアルだけピンクの光沢グラデにする
• ゴールドブラウンは帯ラベル・細い罫線・英字見出しに使い、面を広く塗らない
• ローズ赤はCTA・価格・割引バッジだけに使う
• オファーのブロックは濃いブラウンの外枠＋ピンクベージュの中地で毎回同じ配色にする
• 見出しのキーワードはローズかゴールドの文字色で 1 語だけ強調する
• benefit-tile は文字 #FFFFFF × 背景 #D46C74 のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CA4A54、4.55:1）を使う。

Typography

• 見出しは明朝、本文と価格まわりはゴシックで分ける
• 見出しは字間を広め（0.06〜0.1em）にして静かに見せる
• 成分名などの専門用語には小さな注釈番号と括弧の補足を付ける
• 価格の数字は太いゴシックで本文の 3 倍以上の大きさにする
• 英字の見出しは細いセリフ体を、和文見出しの上か横に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典ボックスやサポート写真は 2〜3 列
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しの下には左右いっぱいに伸びる細いゴールドの罫線を引く
• POINT のセクションは左寄せ。右上に十字の細い罫線を飾る
• 白いカードは片側の画面端まで伸ばして非対称に置く
• オファーのブロックはページ内で 4 回、同じ構成で繰り返す
• 注釈は各ブロックの最後にまとめる

Elevation & Depth

• 白いカードには薄くて広がる影を付ける（0 4px 20px rgba(0,0,0,.06)）
• CTA ボタンは縦方向のグラデと下に落ちる影で立体的に見せる
• 割引バッジは光沢のある球体風にする

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形で、本文の幅に合わせる。商品と質感の写真は背景を抜いて斜めに置く
• セクション境界: 直線で色を切り替える。ところどころ下向きの小さな三角や斜めの境界を入れる
• カードとラベルは直角かごく小さい角丸にする
• ピル型にするのは主 CTA だけ
• 割引バッジと比較用の要素は円にする
• 成分ラベルは角丸 4px のゴールドの面に白抜き文字

Components

• 申込 CTA ボタン（button-primary）: 画面幅いっぱいの赤いグラデのピルボタン。明朝の白文字と右端に「>」
• オファーのブロック（offer-block）: 濃いブラウンの枠の中に、見出しの帯・特典 3 つ・プレゼント・価格・CTA・セット内容を縦に並べる
• 割引の円形バッジ（badge-discount）: ローズの光沢がある円に白文字で割引率。下に条件の小さな帯を重ねる
• 特典ボックス（benefit-tile）: ローズの四角に白文字 2 行で、特典を 3 つ横に並べる
• ゴールドのラベル帯（label-gold）: 成分名や効能を白抜き文字で入れる帯
• 罫線付きの明朝見出し（heading-rule）: 大きな明朝の見出しの下に、片側の画面端まで伸びるゴールドの細い罫線
• POINT 番号（point-label）: POINT の英字＋大きなセリフ数字。右へ伸びる罫線と十字の飾り
• 比較の枠カード（outline-card）: 白地にゴールドの細枠。明朝の小見出しと 2 行の説明
• 悩みの白い円（worry-bubble）: 白い円形の吹き出しに短い悩みを散らして置く
• チェックリストのカード（check-list）: 白いカードの中に、ローズのチェックボックスアイコン付きで項目を 3 つ並べる

Do's and Don'ts

Do - 見出しは明朝で、広い余白と細い罫線をセットにする - オファーのブロックは同じデザインで何度も繰り返し置く - 専門用語には注釈番号を付け、注釈はブロックの末尾にまとめる - 研究室・白衣・ガラス器具の写真で科学的な信頼感を出す - ゴールドは線とラベルに少しだけ使う

Don't - ビビッドな原色や黒い背景を広い面に使わない - 見出しを太いゴシックにしない（価格まわりは例外） - 主 CTA 以外のボタンをピル型や赤にしない - 装飾的なイラストやポップなアイコンを多用しない - 角の大きく丸いカードを使わない

Page Structure

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

1. ファーストビュー（商品と科学的な信頼性を伝える）: ピンクの光沢グラデ地に商品を斜めに配置。縦書きの明朝コピー、円形の特長バッジ 2 つ、大きな明朝のキャッチ、監修を示す枠ラベル
2. オファー（初回の割引で申込を促す）: ブラウンの枠に割引バッジ・特典 3 つ・プレゼント・大きな価格・説明の枠・赤い CTA
3. 新発売の告知（商品の新しさと技術を示す）: ガラス器具のぼかし背景に商品と明朝の見出し。ローズの帯で配合を強調
4. 悩みの提起（市場の迷いと、ユーザーの不安を見せる）: ローズとゴールドの円を天秤に載せ、その下に白い吹き出し 3 つ
5. 成分の解説（成分の基礎とおすすめの人を示す）: 泡の背景の上に、白いカードを左右交互に配置。分子構造の図とチェックリスト
6. 比較（成分の種類を比べて優位性を示す）: ゴールド枠のカード 2 枚を縦に並べ、大きな明朝で結論を書く
7. コラム（配合成分と開発パートナーを紹介）: 六角形の模様の背景、ゴールドのラベル、写真 2 枚とロゴ入りの白いカード
8. 技術の図解（肌に浸透する仕組みを見せる）: 肌の断面のイラストに赤い矢印を描き、層名を添える
9. 使用上の注意とサポート（リスクを示し、サポートで安心させる）: 白いカードと手のひらの写真。サポート内容を写真付きの 2×2 グリッドで
10. ブランドの紹介と POINT（ブランドの価値を 4 つのポイントで伝える）: POINT 番号＋明朝の見出し＋本文＋写真を縦に繰り返す。監修コメントのカードを挟む
11. 商品ビジュアル（商品の世界観をもう一度見せる）: ピンクの斜めに分かれた背景に商品を大きく。ローズの帯の見出し
12. 商品ラインナップ（セット品それぞれを説明）: 英字の見出し、テクスチャのスウォッチ写真、明朝の商品名、ゴールドのラベル、商品写真
13. 最終オファー（最後の申込）: 前のオファーと同じブロックを再び置く

Imagery

• 商品はパールのような光沢のピンクを背景にし、斜めの光と影で撮る
• クリームやミルクのテクスチャは、背景を抜いたスウォッチで斜めに流すように配置する
• 研究室・白衣・フラスコなどの写真で臨床的な清潔感を出す
• 人物は白衣の専門家と、自然な笑顔の女性。どちらも明るいハイキーで撮る
• 背景には泡・ガラス・六角形の模様を淡くぼかして敷く
• 図解はピンクとベージュのフラットなイラストに、赤い矢印を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後のカラムを置き、左右は白かピンクの地で埋める
• オファーのブロックは PC で商品画像と価格を左右 2 カラムにしてもよい
• POINT のセクションは PC で写真と文章を左右交互に並べる
• CTA ボタンは PC で最大幅 560px 程度に抑えて中央に置く
• 見出しは PC で 1.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 行書くと起動時に読み込まれる。