DESIGN.md — 黄緑グラデと透明カプセルのスキンケアLP（Fresh Green Bio-Science Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、クール・先進的、ナチュラル、情報量多め・訴求型
• キーワード: 黄緑グラデーション・透明ジェルカプセル・分子模型・円形カード・黄色マーカー・スクリプト欧文
• 地の質感: みずみずしい透明感。ガラスやジェルの光沢、ボケた泡、淡い水色のシルク状の波を背景に使う
• 形: 大きな正円の白カード、縦長の角丸窓、細い線で囲んだ見出しボックス、ピル型のタグ
• 温度感: やや涼しげ。黄緑と水色寄りの白で、フレッシュな印象

Colors

• 地は黄緑グラデと淡い水色白を交互に使い、セクションの区切りを色の移り変わりで見せる
• 見出しはブランドの緑文字にし、キーワードの行だけ黄色マーカーを敷く
• 白は円形カード・商品カードの面に使い、緑の地から浮かせる
• ピンクは数字やスクリプト装飾など1画面に1か所までのアクセントに絞る
• 購入ボタンは濃い緑のベタ塗りに白文字。ほかのボタンと色を変えない
• 本文は濃いグレー、注釈は薄いグレーの小さい文字にする
• button-primary は文字 #FFFFFF × 背景 #0BAB00 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#098A00、4.52:1）を使う。
• tag-pill は文字 #FFFFFF × 背景 #0BAB00 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#098A00、4.52:1）を使う。
• marker-highlight は文字 #0E9C0A × 背景 #F3FE6C のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0C8208、4.56:1）を使う。
• badge-circle は文字 #FFFFFF × 背景 #0BAB00 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#098A00、4.52:1）を使う。
• band-heading は文字 #FFFFFF × 背景 #0BAB00 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#098A00、4.52:1）を使う。

Typography

• 見出しは字間を広め（0.08em前後）にした太ゴシックで中央揃え
• 章の頭に細い欧文スクリプトを置き、その下に和文見出しを重ねる
• 見出しでは英字と和文を縦線で区切って並べ、上下を罫線ではさむ
• 本文は行間2.0で、ゆったり読ませる
• ※の注釈番号は見出し内でも上付きの小文字で入れる
• 背景には大きな欧文を薄い透かし文字として配置する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。使い方の手順だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 円形カードは画面幅を少しはみ出すほど大きく取り、中に見出しと本文を収める
• 成分カードは横スクロールのカルーセルにし、次のカードの端を見せる
• セクション見出しは上下罫線ではさんだ中央揃えのブロックにする
• 注釈は各セクションの最後にまとめて小さく置く
• 購入エリアは白カードを縦に積む

Elevation & Depth

• カードは影をほぼ付けず、背景との色差で浮かせる
• カプセルや泡の装飾には光沢とぼかしで奥行きを出す
• 帯見出しには白い細線の二重枠を付けて立体感を出す
• 使い方ボックスは枠線をずらして重ね、紙を重ねたように見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分写真は正円や縦長の角丸窓で切り抜く。カード写真は上部いっぱいの四角
• セクション境界: 直線では区切らず、グラデーションと透明な波の写真でなめらかにつなぐ
• 購入ボタンは角丸がほぼない長方形
• タグや構造図のラベルはピル型
• 特徴のバッジは正円の緑ベタまたは半透明の白円
• 見出しの帯は四角い緑ベタに白い細線の内枠

Components

• 購入ボタン（button-primary）: 濃い緑のベタ塗り長方形に白い太字。カード幅いっぱいに置く
• 効果タグ（tag-pill）: 緑ベタのピル型に白文字。2つ横に並べる
• 罫線見出し（heading-ruled）: 上下を罫線ではさみ、欧文と縦線で区切った英字を並べ、その下に緑の和文見出しを置く
• 円形アプローチカード（circle-card）: 大きな白い正円に、スクリプト見出し・緑見出し・マーカー行・本文を入れる。外周を緑のジェル写真で縁取る
• 黄色マーカー（marker-highlight）: 見出しの2行目に黄色の帯を敷いて強調する
• 円形バッジ（badge-circle）: 緑ベタの正円に白い細線の内枠。短い実績を4行で入れる
• 帯見出し（band-heading）: 緑の四角い帯に白い二重線の枠を付け、白文字で書く
• 成分カルーセルカード（ingredient-card）: 上半分に写真と大きな白い欧文ラベル、下半分は白地に緑の見出しと本文。下にドットのページャーを置く
• 購入カード（purchase-card）: 白い角丸カード。上部に緑の見出し帯、中央に商品画像と価格、下部に購入ボタンを置く
• 情報アコーディオン（accordion）: 上下の罫線で区切った中央揃えの行。右端に＋アイコン

Do's and Don'ts

Do - 緑は黄緑から中緑の範囲で統一し、透明感のあるグラデにする - 強調語にはマーカーか※付きの上付き注釈を併用する - 装飾として透明ジェルカプセルや泡を画面の端に散らす - 章ごとに欧文スクリプトと罫線見出しを繰り返し、リズムを作る - 本文は短い行で中央か左揃えにし、行間は広く取る

Don't - 濃い影や太い枠線を使わない - 赤や黒の大きな面を入れない - ピンクをボタンや大見出しに使わない - セクション境界を硬い直線の色帯で区切らない - 注釈を省いて効果を断定する見せ方をしない

Page Structure

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

1. ファーストビュー（商品と主な効能を一目で伝える）: 黄緑グラデにパッケージ写真を大きく置く。上部に緑の見出しを白帯で、右に回転文字の円形バッジ、下に欧文の商品名とスクリプトを置く
2. 成分配合の訴求帯（主成分の配合を強調する）: 半透明の緑ボックスに白文字の2段組み。下に注釈を入れる
3. 悩みの提起・コンセプト（対象の悩みと解決の方向を示す）: ピル型タグ2つ、大きな緑見出し、中央揃えの緑の本文。成分名は明朝の大きな引用符で囲む
4. 特長（3つのアプローチ）（効果の根拠を3点で説明する）: 分子模型の装飾の後に罫線見出しを置き、白い円形カードを3つ縦に並べる。各カードにマーカー見出しと円形バッジを入れる
5. 成分フォーカス（主成分を詳しく解説する）: 背景に薄い大きな欧文。中緑の縦長パネルに白い細枠、縦長の角丸窓でボケ写真を見せ、下に白い本文を置く
6. 配合成分の紹介（4種の成分を悩み別に紹介する）: 緑の帯見出しの下に、写真付きカードの横スクロールを2組置く
7. シートの特長（使い心地と構造を伝える）: とろけるマスクの写真を左に、縦長の本文を右に置く。下に3層構造の図とピル型のラベルを入れる
8. 低刺激の訴求（安心して毎日使えることを示す）: 緑のボケ写真の背景に、ピンクの大きな数字とスクリプト、半透明の白円で4項目を2列に並べる
9. 使い方（手順を4ステップで示す）: 薄緑の地。重ねた枠のタイトルボックスの下に、線画イラストと緑の大きな番号を2×2で並べ、最後に白いTipsボックスを置く
10. 購入CTA（定期購入と通常購入へ誘導する）: FVと同じ黄緑グラデにパッケージを置き、白い角丸の購入カードを2つ縦に積む。割引はバッジで示す
11. 商品情報（成分や注意事項を補足する）: 罫線区切りのアコーディオンを2行置く

Imagery

• 透明な緑のジェルカプセルを光沢とぼかしで描き、画面の四隅に浮かせる
• 青みがかったガラス玉の分子模型を斜め上から写す
• 成分写真は緑・ピンク・紫・水色の泡のマクロ撮影で、カードごとに色を変える
• 背景には淡い水色白のシルクや水の波紋をぼかして敷く
• 使い方は黒の太い線画に、マスク部分だけピンクの線を入れたシンプルなイラスト
• 商品写真は白背景に切り抜いて浮かせ、周りに水滴を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約900px幅の列を取り、背景のグラデと装飾を全幅に広げる
• PCのFVは商品写真を左、縦書きのキャッチを右に置く
• PCでは3つの円形カードを三角形の配置（上に2つ、下に1つ）にする
• PCでは成分カードを2×2のグリッドにし、カルーセルにはしない
• PCの低刺激4項目と使い方4ステップは横一列に並べる
• PCの購入エリアは左に商品写真、右に購入カードの2カラムにする

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