DESIGN.md — 水色×マゼンタの毛穴ケア化粧水 LP（Aqua Cyan & Magenta Skincare Explainer LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、情報量多め・訴求型、ポップ・元気
• キーワード: 水色・マゼンタ・蛍光イエロー・成分図解・マーカー強調・透明感
• 地の質感: フラットな単色面が基本。成分写真と柔らかい水色ボケの背景を合わせる
• 形: 片側だけ角丸の帯見出し、ピル型ラベル、角丸カード
• 温度感: 涼しげだが、マゼンタで元気さを足した中間の温度

Colors

• 地は白が基本。ポイント群だけ淡い水色の地で囲む
• セクション見出しは水色の帯に白文字
• 番号ラベルや締めの一言はマゼンタの面にする
• ポイントの成分名見出しは蛍光イエローの面に水色の文字
• 本文のキーワードは黄色・ピンク・緑の半分の高さのマーカーで目立たせる
• 最も伝えたい文はマゼンタ文字にして下線を引く
• heading-band は文字 #FAFDFD × 背景 #43BBD4 のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#217F92、4.55:1）を使う。
• point-label は文字 #FEFE02 × 背景 #E50984 のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D9097D、4.52:1）を使う。
• point-card は文字 #E50984 × 背景 #FEFFFE のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D9097D、4.52:1）を使う。
• ingredient-pill は文字 #FAFDFD × 背景 #E50984 のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D9097D、4.54:1）を使う。
• closing-bar は文字 #FAFDFD × 背景 #E50984 のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D9097D、4.54:1）を使う。
• floating-shop は文字 #E50984 × 背景 #EEEEEE のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D9097D、4.5:1）を使う。

Typography

• 本文も太めの丸みのあるゴシックで中央揃えにする
• 本文は字間を広く、行間 2.0 にして読みやすくする
• 助詞だけ文字を小さくして、見出しにメリハリを付ける
• 注釈は ※ や * を付けて小さい文字で左揃えにする
• Point の番号は黄色の大きい欧文数字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、中央揃え
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 帯見出しは左右に約 6% の余白を取って配置する
• ポイントカードは淡い水色の地の上に縦に並べる
• 図解は図→番号付きの説明→下向き三角の順に並べる
• 成分写真は中央に置き、下にピル型ラベルを付ける

Elevation & Depth

• 影はほぼ使わず、フラットな面の差で階層を作る
• カードは白い面と淡い水色の地の対比で浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 成分写真は白抜き。商品写真は角丸なしの四角形
• セクション境界: 直線で区切る。色帯の切り替えのみ
• 水色の帯見出しは左上と右下だけを大きく丸める
• マゼンタのラベルはピル型にする
• 図解のパネルは角丸 16px のベージュの面にする

Components

• 水色帯見出し（heading-band）: 対角の角だけを丸めた水色の帯。白い太字の見出しを入れる
• Point ラベル（point-label）: マゼンタのピル型。黄色の欧文で Point と番号を入れる
• ポイントカード（point-card）: 上部が黄色い見出し面の白い角丸カード。中に成分名や写真を入れる
• 成分名ラベル（ingredient-pill）: 成分写真の下に置く、マゼンタのピル型ラベル（白文字）
• マーカー強調（marker-text）: 本文中のキーワードに半分の高さの色マーカーを引く
• 工程図解（step-diagram）: 角丸のベージュパネルの断面図と丸数字の説明を、青い下向き三角でつなぐ
• 締めの帯（closing-bar）: 角丸なしのマゼンタ帯に白文字で一言を入れる
• 固定ショップボタン（floating-shop）: 右端に固定するグレーの角丸タブ。マゼンタの丸にカートのアイコンを入れる
• 枠線ボタン（button-outline）: 写真の上に置く、白く半透明の枠線ピルボタン

Do's and Don'ts

Do - 水色・マゼンタ・黄色の 3 色を役割ごとに使い分ける - 仕組みは断面図などのイラストで見せる - キーワードにマーカーを引いて、流し読みでも伝わるようにする - 成分は白背景の写真にピル型ラベルを付けて並べる - 注釈は対象の近くに小さく入れる

Don't - 暗い背景や重い影を使わない - マゼンタを広い面に使いすぎない（ラベルと帯に限る） - 明朝体や細い書体を本文に使わない - 1 つの文に 3 色以上のマーカーを重ねない - 写真の上に細い文字を直接のせない

Page Structure

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

1. ファーストビュー（実績と新商品を訴求する）: 水色の帯に実績を置き、マゼンタの帯にコピーを入れる。モデルと商品の写真に、銀色の立体文字のタイトルを重ねる
2. 商品情報（商品の種類・名前・容量を示す）: 水色ボケの背景に、枠線ラベルと細い文字を左揃えで置く
3. 商品概要（効果を一言で伝える）: 水色の帯見出しの下に、左に商品写真、右にマゼンタ下線の強調コピーを置く
4. ポイント（成分）（配合成分の特長を示す）: 淡い水色の地に Point ラベルと黄色見出しのカードを縦に並べる
5. 作用の仕組み（効果の仕組みを図で説明する）: 断面図・丸数字の説明・青い三角で 3 段階を見せる
6. 原因の解説（悩みの正体を説明する）: 帯見出しの下にマーカー入りの中央揃え本文と構造図を置く
7. 香り（使用感の魅力を伝える）: 香りのピラミッド図の周りに、果物や植物の写真を円形に切り抜いて配置する
8. 使用方法（使い方を案内する）: ●付きの箇条書きと、顔の線画にふき取る方向の矢印を入れる。最後をマゼンタの締め帯で終える
9. 関連商品への誘導（ショップへ送客する）: 水色ボケの背景に商品の集合写真を置き、枠線のピルボタンを重ねる
10. SNS・フッター（フォローとサイト内の回遊を促す）: グレーの地に吹き出しと SNS アイコンを置く。その下に線で区切ったメニューのリストを並べる

Imagery

• モデルは素肌感のある顔のアップを、明るく青みの光で撮る
• 商品は水しぶきと一緒に、白や水色の背景で清涼感を出す
• 成分は果物・水滴・分子の 3D を白抜きにして中央に置く
• 図解は肌色ベージュと水色のフラットなイラストに、青とピンクの粒を加える
• 使用方法は灰色の細い線画の顔に、水色の矢印を加える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約 750px の 1 カラムで表示し、左右は淡い色の地にする
• 帯見出しやカードは最大幅を決めて、伸ばしすぎない
• 固定ショップボタンは右下に残す
• フッターメニューは 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 行書くと起動時に読み込まれる。