DESIGN.md — 水色と薄紫の透明感ボディケア LP（Watery Pastel Blue Body Care LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、上品・高級
• キーワード: 透明感・水滴・液体の滴り・パステルグラデーション・縦書きコピー・手書き英字
• 地の質感: 水面や泡のようなみずみずしい質感。虹色の光のにじみが入った淡いグラデーション地。
• 形: 楕円の写真フレーム、円形の訴求バッジ、液体が垂れるような波形のセクション境界。
• 温度感: 涼しげで少しクール。薄紫の差し色でやわらかさを足す。

Colors

• 地は淡い水色とパステルピンク〜ラベンダーのグラデーションを交互に使う
• 見出しの文字は青の単色か、青から水色へのグラデーションにする
• 購入ボタンは光沢のある青のグラデーションにして、文字を白にする
• 別の香りの商品群は紫系の地と紫のボタンで分ける
• ピンクは成分の効果を強調する語だけに使う
• 黒は使わない。濃い色も青か紫のトーンで止める
• scent-pyramid は文字 #2F6FA8 × 背景 #B2DEDD のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#285F90、4.6:1）を使う。

Typography

• 大きなコピーは縦書きにして、白い帯の上に 1 文字ずつ置く
• キーワードは他の文字の 1.5〜2 倍に拡大し、手書き風の書体に置き換えて混ぜる
• 英字は細い筆記体を薄く重ね、背景の飾りにする
• 数字の訴求は大きなグラデーション数字に、小さな※番号を添える
• 見出しの字間は広めにとる（0.1em 以上）
• 注釈は小さいグレーの文字で、訴求のすぐ下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分は 3 列、商品一覧は 3 列か 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は全幅で置き、その上に縦書きコピーを重ねる
• 購入ボタンは容量違いを 2 つ横に並べる
• 成分カードは 2 枚並べ、色帯の見出しと白い本文の 2 段で組む
• 成分の素材は白い円に入れて 3 つ並べる
• 商品一覧は商品画像・商品名・CHECK ボタンの順に縦に積む

Elevation & Depth

• 購入ボタンは上側を明るくした光沢グラデーションに、薄い影をつける
• 円形バッジは白の半透明にし、ぼかしたドロップシャドウで泡のように浮かせる
• 成分カードは影を弱めにし、細い水色の枠で囲む
• 背景には泡や水滴を半透明で散らし、奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: モデル写真は縦長の楕円で切り抜く。その他の写真は全幅の長方形。成分は円形にする
• セクション境界: 液体が垂れるようなしずく形の波と、ゆるい斜めのカーブ
• CHECK ボタンは完全なピル型にする
• 購入ボタンは角丸の長方形にし、左に商品の小画像を、右にカートアイコンを置く
• 三角形のピラミッド図で香りの構成を見せる
• 角ばった重い枠は使わない

Components

• 購入ボタン（button-purchase）: 光沢のある青のグラデーション。容量と購入の文言を白で 2 段に組み、左に商品の小画像、右にカゴのアイコンを置く
• CHECK ボタン（button-check）: 商品一覧で使う英字のピル型ボタン。紫の系統と青の系統で色を分ける
• 円形訴求バッジ（badge-circle）: 白の半透明の円に明朝体の青文字を入れ、効果・肌質・成分比率を 3 つ縦に並べる
• 縦書きコピー帯（vertical-copy）: 写真の上に白い縦帯を置き、ゴシックの縦書きを載せる。隣に大きなグラデーション文字を添える
• 有効成分カード（ingredient-card）: 上段は青のグラデーション帯に白の成分名、下段は白地に効果の説明。強調語はピンクにする
• 波線付き見出し（heading-wave）: 青文字の見出しの下に、水色の波線を引く
• 素材の円（ingredient-circle）: 白い円の中に、素材名と果実や実の写真を入れて 3 つ並べる
• 香りのピラミッド（scent-pyramid）: 水色から青紫へのグラデーションの三角形に、トップ・ミドル・ラストの香りを 3 段で書く。横に花の写真を傾けて置く

Do's and Don'ts

Do - 淡い水色とパステルのグラデーションで、透明感を保つ - 泡・水滴・光のにじみを背景に散らす - 大きなコピーは縦書きと手書き風の英字で動きを出す - 購入ボタンは容量違いを 2 つ並べ、ページ内で繰り返し置く - 訴求には※番号を付け、注釈を近くに置く - 香りや系統の違いは地の色とボタンの色で分ける

Don't - 黒や濃いグレーの地を使わない - 原色の赤や黄色をボタンに使わない - 直線の硬い区切り線を多用しない - 写真の上に彩度の高い帯を重ねない - 文字を詰めて組まない

Page Structure

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

1. ファーストビュー（商品の価値・容量・価格・受賞を一目で伝える）: くすんだ水色の水面のような地に、明朝の大見出しとボトル写真を置く。左に円バッジを 3 つ、右上に吹き出し、右下に受賞メダルを置き、最後に購入ボタンを 2 つ並べる
2. コンセプト（季節の肌悩みに共感し、使う場面を想像させる）: 青の見出しの下に、楕円で切り抜いたモデル写真を置く。左右には英字を縦に並べ、手書き風の強調語で締める
3. 特長1 美白（透明感ケアを訴求する）: 全幅の写真に、縦書きの白帯と大きなグラデーション文字を重ねる
4. 有効成分（配合成分の根拠を示す）: 波線付きの見出しの下に、2 枚の成分カードを横に並べる
5. 特長2 保湿（うるおいと肌へのやさしさを伝える）: 寝そべったモデル写真に縦書きコピーを重ね、テクスチャの写真と大きな数字の訴求を添える。素材の円を 3 つ並べる
6. 特長3 香り（香りの魅力と構成を伝える）: ギフトボックスの写真に縦書きコピーを重ねる。香りのピラミッドと花の写真を置き、香りの名前を大きく見せる
7. CTA（購入へ誘導する）: 購入ボタンを 2 つ並べ、下端はしずく形の境界にする
8. ラインナップ（別の香りの商品群を紹介する）: ラベンダーの地に英字ラベルと筆記体の香り名を置き、商品をグリッドで並べて紫の CHECK ボタンを付ける
9. 同シリーズ商品一覧（シリーズ全体の購入へつなげる）: 斜めのカーブで区切ったミントブルーの地に、筆記体の英字と商品グリッドを置き、青の CHECK ボタンを付ける

Imagery

• 白いボトルを、水色の布や水面、泡と一緒に明るく涼しげに撮る
• モデルは淡いブルーの服を着せ、自然光でリラックスした表情を撮る。少しフィルム調にする
• クリームのテクスチャは、白くとろりとした質感で切り抜く
• 素材（柑橘・実・花）は白い円の中に切り抜いて置く
• 背景に半透明の泡・水滴・虹色の光のにじみを重ねる
• 白地で撮った商品の切り抜き画像を、一覧に整列させる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はスマホ幅の縦長の構成を、PC でも中央に固定幅で表示している
• PC では本文を最大 480〜750px 幅で中央に置き、左右を背景のグラデーションで埋める
• SP では購入ボタンを 2 列のまま、幅を各 46% 程度にする
• SP の商品グリッドは 3 列が窮屈なら 2 列にする
• 縦書きコピーは SP でも縦書きのまま、写真に重ねる

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 行書くと起動時に読み込まれる。