DESIGN.md — 真珠光沢×コーラルの透明感スキンケアLP（Iridescent Pearl Coral Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型
• キーワード: 透明感・パール光沢・くすみコーラル・明朝見出し・成分訴求・シャボン玉
• 地の質感: 大理石・シルク・泡のような淡いテクスチャ写真を地に敷き、半透明の白パネルを重ねる
• 形: 虹色の円形バッジ、角丸の小さい帯見出し、アーチ型パネル
• 温度感: やや暖かいニュートラル。ピンクベージュ〜ラベンダーのグラデーション

Colors

• 地は淡いグレー〜ピンクベージュのテクスチャで、純白一色の面は使わない
• セクション見出しの帯はくすみコーラル、白文字で統一
• 数値や成分名の強調はコーラル赤の文字だけで行う
• 環境・倫理系の話題だけグレーグリーンの帯に切り替える
• 締めのセクションはラベンダー→ピーチのグラデーション地にする
• 黒は使わず、文字はダークブラウングレーにする
• band-heading は文字 #FFF7E8 × 背景 #E0866F のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C4492A、4.55:1）を使う。
• fv-claim-band は文字 #FFF7E8 × 背景 #D8B09F のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#A56043、4.53:1）を使う。
• highlight-note は文字 #E0564E × 背景 #F6F6F4 のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#D62F25、4.52:1）を使う。

Typography

• 情緒的な見出しは明朝、帯見出しと説明はゴシックで分ける
• 明朝見出しは字間を0.1em前後広げる
• 数値は1.5倍程度に大きくして単位を小さくする
• FVのキャッチは縦書きで写真の左右に置く
• 注釈記号*を小さく右肩に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジ・アイコンは 3 列、成分は 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに幅いっぱいのテクスチャ地を切り替える
• 帯見出しはセクション上端の中央に置く
• 白パネルは左右に約5%の余白を取って置く
• 3つの特長は円形バッジを等間隔で横に並べる
• STEPカードは画像の左右を交互に入れ替える

Elevation & Depth

• 白パネルにはごく薄いドロップシャドウ（0 2px 8px 薄グレー）を付ける
• 円形バッジは内側に白い光を入れて立体的な泡に見せる
• 商品写真に柔らかい接地影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分写真は正方形か円形、商品は切り抜き
• セクション境界: 直線で切り替える。一部はアーチ上端のパネル
• 帯見出しは角丸4px程度の長方形にし、下に小さな吹き出し三角を付けることがある
• 特長は虹色のパール円にする
• ラベルは角丸の白カードで3列に並べる
• セクション見出しは[ ]型の細い括弧で囲むことがある

Components

• コーラル帯見出し（band-heading）: 幅の広いコーラル帯に白の太ゴシック。下に三角を付けることもある
• パール円バッジ（pearl-badge）: 虹色に光る泡の円に、明朝の短い言葉と小さな補足を入れる
• FV訴求帯（fv-claim-band）: 半透明コーラルの帯に成分と配合量を白文字で入れる
• 比較丸ラベル（compare-badge）: 比較図の左右に置く円ラベル。他社はチャコール、自社はコーラル
• 線画アイコン円（icon-circle）: 白い円に細線の黒アイコンを入れ、下に短い説明を置く
• フリー処方カード（free-tag）: 白の角丸カードを3列×2段に並べる
• STEPカード（step-card）: 半透明の白カードに欧文斜体のSTEP番号、泡の円と明朝の動詞、商品写真を入れる
• 数値強調ボックス（highlight-note）: 淡いクリーム地のボックスに大きなコーラル赤の数値を入れる

Do's and Don'ts

Do - 地には淡いテクスチャ（シルク・泡・大理石）を敷く - 特長は3つに絞って円で見せる - 成分の配合率は図解と大きな数値で示す - 明朝とゴシックを役割で分ける - 強調色はコーラル1色に絞る

Don't - 原色の赤や純黒で強調しない - ボタンをピル型や派手なグラデーションにしない - 地を真っ白な平面にしない - 太いゴシックの大見出しを使わない - 1行に強調色を何個も入れない

Page Structure

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

1. ファーストビュー（透明感のイメージと主要成分を伝える）: 女性のアップ写真に縦書き明朝キャッチ、訴求帯2本、商品写真、パール円3つ
2. 成分比較（天然由来成分の多さを示す）: コーラル帯見出しの下に方眼パネルで容器断面の比較図と大きな数値
3. 注目成分の解説（主成分の効果を3つの言葉で伝える）: 吹き出し風の小見出しと白い円を3つ並べる
4. 独自技術（保護の仕組みを図で説明する）: 明朝見出し、パール円2つを×でつなぎ、肌断面イラストのビフォーアフター
5. 配合成分（厳選成分を一覧で見せる）: アーチ型パネルに帯見出し2段、円写真2つと正方形写真3つ
6. サステナビリティ（ブランドの姿勢で信頼を得る）: 罫線つき見出し、グレーグリーン帯、線画アイコン円を3つ
7. フリー処方（無添加で安心感を伝える）: 暗めの写真地に明朝の大きな数字、白カードを3列×2段
8. 使い方ステップ（シリーズで使ってもらう）: ラベンダー→ピーチのグラデーション地に括弧つき見出しと3枚のSTEPカード

Imagery

• 人物は透明感のある肌のアップ。ソフトフォーカスでピンク寄りの光
• 背景はシルクの布、泡、水滴などをハイキーで
• 特長バッジは虹色に光るシャボン玉のような円
• 成分写真は分子模型や美容液のしずく、カプセルのマクロ写真
• 図解は淡いパステルの肌断面イラストを方眼地に置く
• アイコンは黒の細い線画で円の中に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約750px幅で置き、左右は淡いグレーで埋める
• 3列のバッジ・カードはPCでも3列のまま余白を広げる
• STEPカードはPCで画像とテキストを左右に分ける2カラムにしてもよい
• FVの縦書きキャッチは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 行書くと起動時に読み込まれる。