DESIGN.md — 水色×ティールの透明感スキンケア LP（Aqua Translucent Morning Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 透明感・水光・ティール・明朝見出し・白カード・朝のケア
• 地の質感: 光のにじみ・プリズム・泡のような半透明背景と、フラットな白カードの対比
• 形: 四角い白カードと細線ボックスが基本。悩み吹き出しとサブボタンだけ大きく丸い
• 温度感: やや寒色寄りで、清涼感があり落ち着いている

Colors

• 地は白・淡いミント・淡い水色を交互に使い、濃色の面は帯見出しに限る。
• 見出しはティールで統一し、黒の見出しは白い帯に載せる時だけ使う。
• 赤は価格と特別価格だけに使う。
• 緑は購入CTAにだけ使い、他の部品には使わない。
• ピンクは特典・新発売のバッジにだけ少量使う。
• 悩みのセクションはモノクロ写真にして、後に続くカラーとの対比を作る。
• button-cart は文字 #FFFFFF × 背景 #3DB860 のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2C8646、4.56:1）を使う。
• button-detail-pill は文字 #0B998E × 背景 #FEFEFE のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#09847A、4.53:1）を使う。

Typography

• 見出しは明朝、本文と注釈はゴシックにする。
• 大見出しの中で助詞を小さくし、キーワードを大きくして字の大小にリズムを付ける。
• 数字は大きな欧文で強調し、%などの単位は小さくする。
• 縦書きの明朝コピーは白い短冊に載せる。
• 注釈は9px前後のグレーにして、見出しの直後や下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧だけ横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• POINTカードは白地を全幅の90%にし、カード同士は約40px空ける。
• カード上辺の中央にPOINTバッジを半分はみ出させて重ねる。
• トライアルのセクションはミントの外枠の中に白い面を入れる二重構造にする。
• 写真の上にコピーを重ね、余白を広めにとる。

Elevation & Depth

• 白カードには薄く広い影を付け、背景からわずかに浮かせる。
• ピル型のサブボタンは白からグレーのグラデーションに軽い影を付ける。
• 緑のCTAは上が明るいグラデーションと下側の影で立体的に見せる。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで背景に溶け込ませる。人物は角丸なしの全幅で、成分写真は円形に切り抜く
• セクション境界: 直線で切り替え、背景色の変化で区切る
• カードと細線ボタンは角を丸めない。
• CTA・サブボタン・悩みの吹き出しはピル型にする。
• POINTバッジは右下の角だけを大きく丸める。
• 成分の写真は円形に並べる。

Components

• カート投入ボタン（button-cart）: 緑のグラデーションのピル型。右端に小さな矢印を付ける
• 詳細へのサブボタン（button-detail-pill）: 白からグレーのグラデーションのピル型。ティールの文字に下向きの矢印を付ける
• 細線の詳しく見るボタン（button-outline）: 白地に濃いグレーの1px枠の四角いボタン。右に「>」を付ける
• 悩みの吹き出し（worry-bubble）: モノクロ写真の上に白いピル型を左右交互にずらして並べる。先頭にティールのチェックボックスを置く
• POINT番号バッジ（point-badge）: アクアのグラデーションの四角。右下の角だけ丸め、POINTの英字と大きな欧文の数字を白で入れる
• 濃色の帯見出し（band-heading）: 濃いティールの長方形に白文字を中央揃えで入れる。カテゴリや配合成分の見出しに使う
• 特別価格表示（price-block）: 赤い枠の「特別価格」ラベルと、赤い大きな数字の価格を並べ、税込は小さく書く
• 白い短冊コピー（framed-label）: 写真の上に半透明の白い帯を敷き、明朝の一行を載せる。縦書きにも使う
• 特典の円バッジ（sample-badge）: ピンクの円に白文字で、特典の量や付属品を示す

Do's and Don'ts

Do - 見出しはティールの明朝で上品にまとめる。 - 背景には光のにじみや泡の半透明表現を使い、透明感を出す。 - 効果を表す表現には必ず※注釈を添える。 - 訴求の数字はドーナツグラフと大きな数字で見せる。 - 購入までの流れは「特典の帯 → 価格 → 緑のCTA」の順にまとめる。

Don't - 原色の派手な色を地に使わない。 - 見出しを太いゴシックにしない。 - 緑のCTA色を装飾に流用しない。 - カードに大きな角丸を付けない（直角を保つ）。 - 注釈を省いて効果を言い切らない。

Page Structure

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

1. ファーストビュー（商品の印象と、トライアル先行販売を伝える）: 水色のプリズム背景に商品ボトルとテクスチャの帯を置く。明朝の大見出しにルビを付け、白い円で販売告知を入れる
2. トライアル導線（早い段階でオファーを提示する）: ミントの帯にセット写真とピンクのバッジを置き、ピル型のサブボタンを添える
3. 悩みの提起（年齢による悩みに共感させる）: モノクロの人物写真に白抜きの明朝見出しを載せ、チェック付きの吹き出しを3つ並べる
4. 調査データ（関心の高さを数字で裏付ける）: 枠付きの見出しの下にティールのドーナツグラフを置き、中央に大きな%を入れる。調査概要は注釈にする
5. 気づきの提示（朝のケアの重要性を語る）: ティールの明朝の大見出しを置き、人物写真に縦書きの白い短冊コピーを重ねる
6. 商品紹介（商品の登場と概要を伝える）: 光の背景に商品の切り抜きを置き、縦書きコピーと細線の枠で囲んだ説明を添える
7. 特長（POINT）（3つの特長を示す）: 白カードにPOINTバッジを重ね、ティールの明朝見出し・注釈・細線ボタンを入れる。画像はカードの角に置く
8. テクスチャ・香り（使用感を伝える）: 大きな欧文の透かし文字を背景に置き、テクスチャ写真とピラミッド図に白い短冊コピーを添える
9. トライアルオファー（価格を提示して購入させる）: ミントの外枠の中に白い面を置き、濃色の帯・内容・赤い価格・成分の円写真・緑のCTAを並べる
10. 購入特典（期限付きの特典で後押しする）: アクアの帯に日付入りのピルを置き、サンプル写真とピンクの円バッジ、グレーの一覧枠を並べる
11. ラインナップ（シリーズ商品を紹介する）: 淡いグレーミントの地に濃色の帯見出しを置き、白カードの横スクロールとドットのページ送りを付ける

Imagery

• 白いボトルを光沢のある切り抜きで見せ、水色の光・泡・プリズムのにじみを背景にする。
• 乳液のとろみは、白いクリームの曲線のストロークで表現する。
• 悩みはモノクロで物憂げな女性の横顔、解決後は明るい自然光の笑顔で撮る。
• 成分は円形に切り抜いた花・果実・カプセルの写真で見せる。
• 花びらや金色の泡など、軽い浮遊物を散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央を約480〜750px幅のカラムに固定し、左右は淡いミントの地で埋める。
• PC ではPOINTカードを画像と文字の2カラムにしてもよい。
• ラインナップのカルーセルは、PC では3〜4枚を同時に表示する。
• 大見出しは 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 行書くと起動時に読み込まれる。