DESIGN.md — セージグリーン×グレージュの植物由来スキンケアLP（Sage Green Botanical Skincare Trial LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ナチュラル、上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: セージグリーン・グレージュ・明朝体・縦書き・植物写真・くすみローズCTA
• 地の質感: 淡いグレーの地に、ソフトフォーカスの植物写真と半透明の水滴を重ねたマットで静かな質感
• 形: 角がほぼない四角の帯と白い箱。円形バッジとV字の切り込みでセクションをつなぐ
• 温度感: やや涼しめのニュートラル。グレージュの差し色で温かみを足す

Colors

• 地は白と淡いグレー系（生成り・ブルーグレー）を交互に使い、セクションを区切る
• ブランド色のセージグリーンは見出し帯や縦書きの強調ボックスなど、面で使う
• グレージュは円形バッジ・オファー枠ヘッダー・ピル型の悩みタグに使う
• くすみローズはCTAボタンと価格の数字だけに限る
• 大きな数字はグレーのグラデーション調で、主張しすぎないようにする
• 原色や彩度の高い色は使わない
• badge-circle は文字 #FFF4F3 × 背景 #B4A591 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#806F57、4.5:1）を使う。
• vertical-highlight は文字 #FFF4F3 × 背景 #7B8D81 のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#65756A、4.53:1）を使う。

Typography

• 見出しは明朝で字間を広めにとる
• キャッチは縦書きを多用する
• 価格や人数などの数字は特大の明朝で見せる
• 手書きの英字を見出しの背後に斜めに重ねる
• 強調したい語だけ文字色をグレーやセージに変える
• 本文はゴシックで中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典やアイコンは 3〜4 列のグリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文とカードは中央揃えにする
• 特長カードは白い箱を縦に積み、間に＋の円を挟む
• オファー枠は生成りの地に白い箱を置き、ヘッダーはグレージュの帯にする
• 写真は全幅で配置し、見出しの箱を写真に重ねる
• オファー＋CTAのブロックはページ内に4回以上繰り返す

Elevation & Depth

• 影はほぼ使わず、白い箱と地色の差で奥行きを出す
• 半透明の白い円形バッジにだけ、ごく淡い影をつける
• CTAボタンはフラットにする（影は弱めでよい）

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は全幅の四角か角丸なしの矩形。成分写真やインサート写真は円形に切り抜く
• セクション境界: 下向きのV字（山形）に切り込んでつなぐ。直線で区切る箇所もある
• CTAは角丸の小さい横長の矩形にし、右端に▶をつける
• 悩みタグとバッジは正円にする
• 無添加タグは細い線の枠で囲み、角丸は小さくする
• 特長の帯見出しは白い箱の下にセージの帯を敷く

Components

• お試しCTAボタン（button-primary）: くすみローズの横長ボタン。明朝体の白文字で、右端に▶。上に小さな補足を1行のせることもある
• 限定セットのオファー枠（offer-box）: グレージュのヘッダー帯の下に白い箱。商品写真、割引率、特大の価格、条件バッジ、送料の帯を並べる
• 円形バッジ（badge-circle）: グレージュの正円に白い明朝文字で、番号や短いラベルを入れる
• 縦書きの強調ボックス（vertical-highlight）: セージグリーンの縦長の帯に、白い明朝の縦書きでキーワードを入れる
• 特長カード（＋でつなぐ）（feature-card）: 白い横長の箱に小さな前置き文と大きめの明朝の見出し。カードの間に＋の円を挟む
• 写真に重ねる見出しプレート（title-plate）: 白い四角に手書きの英字、明朝の大見出し、セージの英字帯を重ね、写真の上に置く
• 半透明の効能サークル（glass-circle）: 白く透けた円に、英字の小さなラベルと2行の明朝で効能を書く
• 無添加タグ（tag-outline）: 細いグレーの線で囲んだ矩形のタグ。2列のグリッドで並べる

Do's and Don'ts

Do - 明朝体と広めの字間で上品さを保つ - 植物の写真を要所に全幅で入れる - CTAの前には必ずオファー枠を置き、繰り返し登場させる - キーワードはセージの帯か縦書きで強調する - 地色は白とグレー系の淡い色を交互に使う

Don't - 鮮やかな赤や黄色で煽らない - ピル型のポップなボタンにしない - 濃い影や光沢のあるグラデーションを使わない - 丸ゴシックやポップ体を見出しに使わない - ローズ色をCTAと価格以外に広げない

Page Structure

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

1. ファーストビュー（価格オファーと製品の世界観を一度に伝える）: 上部にお試し価格の帯。グレーグリーンの背景に縦書きのキャッチと製品写真を置き、下に2つの価値を白い箱で並べる
2. オファー＋CTA（お試しセットへ早めに誘導する）: 生成りの地にオファー枠を置き、特大の価格とローズのボタンを配置。下に注釈を入れる
3. 素材の効能（植物素材の効果を要約する）: 半透明の円を3つ並べ、その下に白い特長カードを縦に積む
4. 実績・アンケート（信頼性を示す）: 大きなグレーの数字、手書き文字、吹き出し型の円で利用者の声を見せる
5. 悩みの提起（肌悩みに共感させる）: 人物写真の上に番号付きの悩みを重ね、円形の悩みタグを4つ並べる。下端はV字で切る
6. 素材の特長詳細（素材の3つの力を説明する）: 写真に見出しプレートを重ね、比較バーや肌の断面イラストで解説する
7. ブランドの誕生（開発の背景を伝える）: 特大の明朝見出し、製品の集合写真、人物写真を置く
8. 利用者の紹介（ターゲット像に重ねてもらう）: 人物写真に縦書きのコピーと枠付きのキーワードを重ねる
9. 使用ステップ（使い方の手軽さを示す）: 左にSTEP番号と縦書きのラベル、右に製品と説明を置き、セージの地を斜めに敷く
10. 製品詳細（各製品の成分と処方を説明する）: 英字の帯見出し、製品写真、成分を円形写真のグリッド、無添加タグ、価格の行を並べる

Imagery

• 自然光で撮った白いボトル。背景は淡いグレーか白い石材
• サボテンなど緑の植物をソフトフォーカスで手前に入れる
• 白い服の女性が頬に手を添える、柔らかなポートレート
• 水滴やジェルのテクスチャをクローズアップで撮る
• 成分は円形に切り抜いた写真をアイコンのように並べる
• 肌の断面は淡いピンクとベージュのフラットなイラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、SP の 1 カラムを最大 750px 幅で中央に置くのを推奨する
• 背景の地色と写真は画面の全幅まで伸ばす
• 特長カードや成分グリッドは PC で 2〜4 列に広げてよい
• 縦書きの見出しは PC でも縦書きのまま残す
• CTAボタンは最大 480px 幅で中央に置く

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