DESIGN.md — 深紅×白の研究系エイジングスキンケアLP（Crimson Science Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 深紅グラデーション・明朝見出し・成分サイエンス・水紋・波・白地の余白・円形バブル
• 地の質感: 赤の放射グラデーションや波形カーブ、水紋の写真、細かなドット網点で、つややかでみずみずしい質感を出す。
• 形: 円形のバブル、六角形のバッジ、緩い波形のセクション境界、細い角括弧の囲み。
• 温度感: 暖色の赤が主役。淡い水色の面で清潔感と冷静さを足す。

Colors

• 地は白と薄グレーが基本。深紅のグラデーション面は、ブランド訴求・成分番号の見出し・著名人の推薦に使う。
• 強調したい見出しは深紅の明朝で組む。キーワードは深紅の帯に白抜き文字にする。
• 成分の図解は淡い水色の面に置き、赤との対比で清潔感を出す。
• 口コミは淡いピンク地、悩みはくすみローズのバブルにして、トーンを柔らかくする。
• CTAはピンク寄りの赤のピル型にし、ゴールドの差し色はバッジだけに使う。
• button-primary は文字 #FFFFFF × 背景 #F7514A のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EA130A、4.57:1）を使う。
• hex-badge は文字 #CD0202 × 背景 #F4D2AF のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C00202、4.52:1）を使う。

Typography

• 見出しは明朝、本文はゴシックで役割を分ける。
• 見出しは中央揃えで2〜3行に分け、行間を広く取る。
• 本文は左揃えにし、行間は1.9前後でゆったり組む。
• 注釈記号（※1など）は小さく上付きにし、注釈本文はセクション末にまとめる。
• 番号の大数字は白の半透明にして、赤背景に溶け込ませる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。2つの図解ボックスだけ左右に並べる
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは中央揃えの見出し、本文、写真の順に縦に積む。
• 成分紹介は番号付きの赤い見出し帯から始め、同じ型を3回繰り返す。
• 図解は淡い水色の角丸パネルにまとめ、最後に下向き三角で結論へ導く。
• 写真は本文と同じ幅で配置する。

Elevation & Depth

• 基本はフラットに組む。
• 口コミカードと白いコラムパネルには、ごく薄い影を付ける。
• CTAボタンには下方向に柔らかい影を付ける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしか小さな角丸の横長矩形。人物は切り抜きにする。
• セクション境界: 赤面の下端を白い波形カーブで切る。斜めの切り替えや細いV字線も使う。
• 悩みは大小の円形バブルにして、ずらしながら配置する。
• 成分の3要素は、白丸に赤の輪郭を付けて三角形状に並べ、細線でつなぐ。
• 『オリジナル成分』は金のグラデーションの六角形バッジにする。
• 引用は細い角括弧で左右を囲む。

Components

• 主CTAボタン（button-primary）: ピンク寄りの赤のピル型ボタン。白文字で、影は柔らかく付ける。
• キーワード帯（keyword-band）: 見出し中の語句を深紅の帯に置き、白の明朝で抜く。
• 悩みバブル（worry-bubble）: くすみローズの円に、白文字で悩みの短文を入れる。4つをずらして配置する。
• 成分番号見出し（ingredient-header）: 赤のグラデーション帯に、半透明の大数字と白の明朝見出しを置く。下端は波形にする。
• 六角形バッジ（hex-badge）: 金のグラデーションの六角形に、赤字で『独自成分』を示すラベルを入れる。
• 比較図解パネル（diagram-panel）: 淡い水色の角丸面に白カードを2枚並べ、＝記号と色ラベルで比較する。
• 赤枠小見出し（outline-heading）: 白地に細い赤枠の矩形を置き、赤のゴシック太字で組む。
• 口コミカード（review-card）: SNS投稿風の白い角丸カード。写真、ハート、投稿文の順に並べ、左右に送り矢印を付ける。
• 推薦コメント枠（speech-quote）: 赤背景の上に置く、生成りの角欠けカード。推薦者の長めのコメントを入れる。

Do's and Don'ts

Do - 見出しは明朝で、深紅か濃いグレーの2色に絞る。 - 赤面と白・グレー面を交互に置き、リズムを作る。 - 成分の説明には必ず図解か抽象写真を添える。 - 販売実績や受賞は、金やラベンダーのバッジで小さく添える。 - 注釈と出典を明記し、信頼感を保つ。

Don't - 本文に赤を多用しない。 - 丸ゴシックやポップな手書き文字を使わない。 - 原色の青や緑を強調色に使わない。 - 影を強くしない。 - 余白を詰めて情報を詰め込まない。

Page Structure

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

1. ファーストビュー（商品イメージとブランドの世界観を伝える）: 肌の写真の上に明朝のコピーを3行置き、赤いボトル3本を並べる。右側に実績の円形バッジを付ける。
2. キャンペーン告知（初回特典で行動を促す）: 金色の斜めの帯に、赤字の特典見出しとサンプル写真を置き、ピル型CTAを付ける。
3. 悩みの提起（ターゲット年代の肌悩みに共感する）: 明朝の見出しの下に、くすみローズの円形バブルを4つ並べ、線画の女性イラストを添える。
4. ブランド紹介（研究背景と実績を伝える）: 全面に赤の放射グラデーションを敷き、ボトル写真、金の実績帯、白の本文を置く。
5. 成分の全体像（3つの独自成分を一覧で見せる）: 水紋背景にキーワード帯付きの見出しを置き、赤い輪郭の白丸3つを三角形状につなぐ。
6. 成分詳細×3（成分ごとの根拠を説明する）: 番号付きの赤い波形見出し、六角形バッジ、赤い明朝の成分名、本文、抽象写真を繰り返す。
7. 比較図解（肌なじみの理由を論理的に示す）: 水色のパネルに比較カード2枚を置き、角括弧の引用と下向き三角を経て、赤字の結論を出す。
8. 著名人の推薦（権威ある第三者の声で信頼を高める）: 赤のグラデーション面に人物の切り抜き、手書き風の吹き出し線、コメントカードを置く。
9. お客様の声（実際の使用感を伝える）: 淡いピンク地に、SNS風の口コミカードのカルーセルを置く。
10. ブランドストーリー（企業の歴史と信頼性を伝える）: 淡い水色の波の背景に白いパネルを置き、赤枠の小見出し2つ、本文、写真を並べる。
11. クロージングCTA（最後に購入を促す）: ピーチ色の水紋背景に、明朝の呼びかけ、ボトル写真、受賞バッジを置く。

Imagery

• 商品は赤いボトルを白っぽい水紋の上に並べ、つややかな光で撮る。
• 成分は水滴、分子模型、粒子など、ピーチ系や水色系の抽象的なビジュアルで表す。
• 悩みは細い線画に淡い水色で部分的に塗った女性イラストで描く。
• 人物は白背景で切り抜き、赤の地に重ねる。
• 金のキラキラや光の粒を、特典まわりに少しだけ散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元のLPはPCでもSPと同じ幅の1カラムを中央に置く構成。SPではそのまま全幅で使う。
• SPでは本文の左右余白を約7%取る。
• 悩みバブルは、SPでも2列のずらし配置を保つ。
• 比較カード2枚はSPでも横並びにし、文字は12px程度に下げる。
• PCでは本文の最大幅を約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 行書くと起動時に読み込まれる。