DESIGN.md — 深紅×パールグレーの科学系エイジングケア LP（Crimson Pearl Science Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 深紅のオファー帯・パール光沢・明朝の大見出し・科学・研究感・注釈多め・繰り返しCTA
• 地の質感: 白〜グレーのシルクやパールのような光沢グラデーション。水滴や分子モデル、泡のテクスチャ写真を重ねる。
• 形: 角丸の少ない四角カード、細い枠線、斜めにカットした色帯、CTA だけピル型。
• 温度感: やや寒色寄りのクールなグレーとブルーに、温かい深紅を差し色として置く

Colors

• オファーと決済説明は深紅の帯の上に白いカードを載せてまとめる。
• その直後にくすみローズの帯を置き、3 つの安心サービスを白いカードで並べる。
• 商品説明はパールグレーや淡いブルーのグラデーションの地にして、色数を抑える。
• 科学根拠のセクション 1 つだけ濃紺の地に白文字を使い、印象に変化をつける。
• 本文の強調はピンク文字とアンダーライン、または濃紺の帯に白文字の 2 種類だけにする。
• 注釈は必ずグレーの小さい文字で書く。

Typography

• 大見出しは明朝、説明文や小見出しはゴシックで使い分ける。
• 見出しの上に、欧文セリフの小さな英字ラベル（Problem・Technology など）を添える。
• 価格の数字は特大の太字にし、単位と税込表記は小さくする。
• 効能を述べる語にはすべて米印の注釈を付け、肩付きの小さい文字にする。
• 人物写真の上は縦書きの明朝コピーにする。
• 見出しのジャンプ率は高く、強調したい語は 1.5〜2 倍の大きさにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。サービスと悩みタグは 3〜4 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• オファーブロック（価格・セット内容・CTA・決済・サービス）を、ほぼ同じ形のままページ内で 4 回繰り返す。
• 商品説明はポイント 1〜3 として番号付きの白カードで縦に積む。
• ステップ説明は、写真の上に見出しを重ね、その下に枠線付きの説明ボックスを置く。
• セクションの終わりに注釈ブロックを置く。
• 人物写真は画面幅いっぱいに置き、縦書きのコピーを重ねる。

Elevation & Depth

• カードは基本的に影なしで、細いグレーの枠線で区切る。
• お客様の声のカードは右下にずらした細い線で奥行きを出す。
• CTA ボタンには下方向にうっすら影を付ける。
• シャボン玉のような球体の画像で、光沢と立体感を出す。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 四角く切り抜き、写真は画面幅いっぱいに置く。成分写真は四角の2枚並び。担当者の顔写真だけ円形に切り抜く。
• セクション境界: 斜めにカットした深紅・ピンクの三角帯、細い V 字の線、＋マークの丸アイコンでつなぐ
• CTA ボタンは横幅いっぱいのピル型にし、右端に三角の矢印を付ける。
• 悩みタグは角丸ほぼなしの四角タグを 4 つ並べる。
• ポイント番号はメタリックな円形バッジにする。
• FAQ は角丸小さめのバーにし、右端に＋の丸アイコンを付ける。

Components

• 主CTAボタン（button-primary）: 深紅のグラデーションのピル型ボタン。白文字で2行にし、右に三角矢印を付ける。
• オファーカード（offer-card）: 深紅の帯の中に置く白いカード。限定ラベル、割引の丸バッジ、大きな価格、セット内容の表、注釈を順に並べる。
• 割引率の丸バッジ（discount-badge）: 深紅の円の中に割引率を白文字で入れ、価格の左に置く。
• 安心サービスカード（service-card）: ローズの地に白い縦長カードを3枚並べる。線画アイコンと明朝の深紅文字で入れる。
• 悩みタグ（concern-tag）: 濃いグレーまたは半透明紺の四角に、白文字で悩みを短い言葉で4つ並べる。
• 濃紺のハイライト帯（highlight-band）: 本文中の重要な一文を、濃紺の帯に白文字で入れて目立たせる。
• ポイントカード（point-card）: メタリックな番号バッジ、黒地のラベル、明朝の大見出し、図解、本文の順で入れる白いカード。
• お客様の声カード（voice-card）: 白いカードの左上にピンクのハッシュタグを置き、L字の細い罫線を付ける。本文の一部をピンクで強調する。
• FAQバー（faq-bar）: グレイッシュブルーのバーに白文字で質問を入れ、右に＋の丸アイコンを付ける。
• 注釈ブロック（note-block）: 米印付きの小さいグレー文字で、セクション末尾に左揃えでまとめる。

Do's and Don'ts

Do - 深紅のオファーブロックを、ページの区切りごとに同じデザインで繰り返す。 - 見出しは明朝、本文はゴシックの組み合わせを守る。 - 背景は白・グレー・淡いブルーの光沢グラデーションにして、清潔感を保つ。 - 効能の表現には必ず米印の注釈を付ける。 - 図解は細い線とパステル調の色でまとめ、科学的な印象にする。

Don't - ビビッドな原色や黄色を大きな面で使わない。 - カードの角を大きく丸めたり、ポップな影を付けたりしない。 - CTA 以外の要素を深紅で塗りつぶさない。 - 丸ゴシックや手書き風の書体は使わない。 - 注釈を省いて効能を言い切らない。

Page Structure

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

1. ファーストビュー（商品のラインと受賞実績、お試し価格を一度に見せる）: 光沢背景に商品の集合写真を置き、明朝の大コピーを重ねる。下に悩みタグを4つ、右下に深紅の価格バッジを置く。
2. 受賞実績（第三者の評価で信頼を得る）: 金色の細枠のカードに、明朝の大きな文字で順位を並べ、右にエンブレムを置く。
3. オファー・CTA（限定のモニターセットへ申込を促す）: 深紅の帯に白いカードを載せ、価格・セット内容・ピル型CTA・決済ロゴを入れる。
4. 安心サービス（送料・配送・返品の不安をなくす）: ローズの地に、白い3列のアイコンカードを並べる。
5. 研究開発の紹介（企業の研究力と開発者の想いを伝える）: 研究室の写真と、濃紺のハイライト帯付きの本文を置く。開発者は円形の顔写真付きのカードで紹介する。
6. 口コミSNS（投稿数で人気を示す）: 大きな件数表示と、SNS投稿の横スクロールを並べる。
7. 悩みの提起（年齢肌の疑問に共感する）: 淡い人物写真の上に、白い吹き出し風の疑問を3つ並べ、続けて悩みタグを置く。
8. 科学的根拠（新しい着眼点を訴求する）: 濃紺の地に、デジタル表現の顔写真と縦書きのピンクラベルを置く。
9. 成分紹介（新しく配合した成分を見せる）: パール色の地に分子の球体ビジュアルを置き、明朝の見出しとピンクの帯ラベルを入れる。
10. 美容コラム（加齢による変化を図解する）: 淡いブルーの枠の中に、年代別の線画イラストを3つ矢印でつないで並べる。
11. 3つのポイント（商品の特長を論理的に示す）: 番号バッジ付きの白カードを縦に積み、図解と成分写真を入れる。
12. お客様の声（使った感想で後押しする）: ピンクの光沢地に、L字の罫線付きの白いカードを4枚並べる。
13. 使い方ステップ（ライン使いの手順と各アイテムを説明する）: テクスチャ写真の上に、擬音のピンクのコピー、黒地のステップラベル、枠付きの説明ボックスを置く。
14. よくある質問（最後の不安を解消する）: 欧文セリフの見出しの下に、グレイッシュブルーのアコーディオンバーを並べる。

Imagery

• 白とシルバーのボトルを、光沢のあるパール調の背景で撮影する。
• 肌のきれいな大人の女性を、白い服で目を閉じた横顔の構図にし、柔らかい自然光で撮る。
• 水滴・シャボン玉・分子模型の 3D ビジュアルで研究感を出す。
• 泡やクリームのテクスチャを大きく寄って撮る。
• 成分の植物は白背景や自然光で、四角く切り抜く。
• 図解は細い線とパステル調の色で、角層の断面などを描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文を 640px 前後の中央 1 カラムに収め、左右の地は淡いグレーにする。
• 深紅やローズの帯は、PC でも画面幅いっぱいに伸ばす。
• サービスカードと悩みタグは列数を保ったまま横幅を広げる。
• 写真に縦書きコピーを重ねる構成は、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 行書くと起動時に読み込まれる。