DESIGN.md — ミント×葉グリーンの清涼スキンケアキットLP（Fresh Mint Green Botanical Skincare Kit LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、ナチュラル、やさしい・柔らかい、シンプル・ミニマル
• キーワード: ミントグラデーション・白カード・葉のあしらい・ステップ解説・透明感
• 地の質感: フラットな淡色地に、光沢のある葉と水滴の写真で質感を足す
• 形: 白い角丸ほぼ無しの大きなカード、角丸の薄緑リスト、ピル型の小ラベル
• 温度感: 涼しく清潔、やや柔らかい

Colors

• 地はミントの淡いグラデーションか白。白カードを重ねて段差を作る
• 濃い緑は帯、バッジ、番号、＋アイコン、ラベルの枠だけに使う
• 見出しは黒。本文の中の強調語だけを緑の太字にする
• ミント地と白地をセクションごとに交互に置いて区切る
• 赤や暖色は使わない
• 注釈は小さなグレーでカード外に置く
• section-tab は文字 #FEFFFF × 背景 #139552 のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#11874B、4.57:1）を使う。
• pill-label は文字 #139552 × 背景 #F0FBF3 のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#11874B、4.54:1）を使う。

Typography

• 見出しは太いゴシックで2行に分け、中央揃えにする
• FVの大見出しは字間を詰めて塊に見せる
• STEP番号は斜体の欧文。数字だけを大きくする
• 強調語は緑の太字にし、下線やマーカーは使わない
• カード内の本文は左揃え
• 注釈は※印と番号を付けて小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ステップカードの中だけ画像と文字の 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは画面幅いっぱいに近い幅にして、左右に約12pxの余白を残す
• ステップカードは左に商品画像（約30%）、右に文字を置く
• ステップカードどうしの間は約16px空ける
• おすすめリストは同じ幅の淡い緑ボックスを縦に4つ並べる
• セット内容は商品の集合写真の下に番号付きリストを置く

Elevation & Depth

• 影はほぼ使わず、白カードとミント地の色の差で浮かせる
• 商品写真には床にうっすら落ちる影だけを付ける
• 葉の写真はカードの端からはみ出させて奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 商品は白背景か透過で切り抜く。人物は顔のアップを裁ち落とす
• セクション境界: 直線。色面の切り替えとカードの重なりで区切る
• 大きな白カードは角丸なし
• リストのボックスは小さな角丸
• 「ご使用方法」などのラベルはピル型の緑枠
• バッジは円形の緑

Components

• 緑グラデーション帯ラベル（badge-ribbon）: FVの見出し下に置く横長の帯。中央を濃くし、左右を淡くする
• 円形キットバッジ（badge-circle）: 人物写真に重ねる緑の円。斜体の欧文で番号を入れ、白字でキット名を書く
• 見出しタブ帯（section-tab）: 写真の下端に置く緑の帯。英字のライン名を入れる
• おすすめリスト項目（check-list-item）: 淡い緑のボックスで、先頭に緑の＋アイコンを置く。文の一部を緑の太字にする
• 線付き小見出し（title-rule）: 中央の見出しの両側に細い横線を引く
• 丸数字リスト（number-list）: 緑の丸に白数字を入れ、商品名と容量を1行ずつ並べる
• ステップカード（step-card）: 白カードの左に商品画像を置く。右には斜体のSTEP番号、手書き風の弧、動詞の見出し、商品名、説明を順に並べる
• 使用方法ラベル（pill-label）: 緑の細い枠のピル型。中に緑の小文字を入れる

Do's and Don'ts

Do - ミント地と白カードの重なりで構成する - 緑は要所のアクセントだけに使う - 葉や水滴の写真を端に散らして、みずみずしさを出す - ステップは番号、動詞、商品名、説明の順でそろえる - 余白は広めにとり、文字は控えめな大きさにする

Don't - 暖色や派手なグラデーションを使わない - カードに強い影や太い枠線を付けない - 明朝体を主書体にしない - 本文を中央揃えで長く続けない - 緑を大きな面で多用しない

Page Structure

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

1. ファーストビュー（キット名とリニューアルを知らせる）: ミントのグラデーション地に、ロゴ、リード、黒の大見出し、緑の帯を置く。その下に、透明感のある植物モチーフと商品の集合写真を配置する
2. コンセプト導入（成分の特長とラインの刷新を伝える）: 白地に小さなリードと太字の2行見出しを置く。その下に、肌の人物アップと円形バッジを重ねる
3. ライン紹介（商品ラインの全体を見せる）: 人物写真の下に商品を並べ、写真の下端に緑のタブ帯を置く
4. おすすめの方（対象者を示して共感を得る）: 白カードの中に、＋アイコン付きの淡い緑リストを4つ並べる
5. セット内容（キットの中身を明示する）: 線付きの小見出し、商品の集合写真、丸数字の4行リストの順に置く。葉を左右からはみ出させる
6. 注釈（成分表記を補足する）: カードの外に、小さなグレー文字で※を付けて置く
7. 使用ステップ（4段階の使い方を説明する）: ミント地に中央の2行見出しを置き、白いステップカードを縦に4枚並べる。各カードに使用方法のラベルを付ける
8. 締めのビジュアル（キット全体をもう一度見せて印象を残す）: ミント地にポーチと商品を並べた写真を置き、葉をあしらう

Imagery

• 白と淡い緑のボトルを、明るい白背景で正面から撮る
• つやのある緑の葉に水滴を付けた切り抜き素材を画面の端に配置する
• 透明なジェルや水のオブジェで透明感を出す
• 人物は素肌が見える顔のアップ。スポイトを当てる仕草を入れる
• ポーチと商品を床に並べた、影の柔らかい俯瞰気味の集合写真を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅約480〜600pxのカラムを置き、左右はミント地で埋める
• ステップカードは横並びを保ち、画像と文字の余白を広げる
• FVの見出しは最大56px程度まで大きくする
• 葉の装飾はカラムの外側の余白にも散らす

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