DESIGN.md — ライムグリーン×チャコールのまつ毛美容液LP（Fresh Lime Green Eyelash Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、ナチュラル、情報量多め・訴求型、上品・高級
• キーワード: ライムグリーン・若草グラデーション・チャコール帯・オレンジCTA・円形バッジ・細枠カード
• 地の質感: 白〜淡緑の柔らかいグラデーション地と水面のような淡い質感。マットな商品写真。
• 形: 円形の成分バッジ、太い緑枠の角型カード、ピル型ボタン、斜めの緑ストライプ装飾。
• 温度感: やや明るく爽やかな寒暖中間。緑の自然感にオレンジで温度を足す。

Colors

• 地は白と淡い若草色を交互に使い、ライムグリーンは枠・バッジ・FV面に限定する。
• 購入ボタンのみオレンジのグラデーションにし、他要素にオレンジを使わない。
• 価格の大きな数字は赤橙、割引率は白地バッジ＋金縁で目立たせる。
• セクション区切りの帯見出しはチャコール地に白文字で統一する。
• 本文はダークグレー、見出しはやや青みのチャコールを使う。
• 信頼系（調査結果）は金色の月桂樹で表現する。
• button-primary は文字 #FEFCF2 × 背景 #FE7403 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BE5601、4.52:1）を使う。
• price-block は文字 #ED5820 × 背景 #F2FEE6 のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CC4410、4.57:1）を使う。

Typography

• 情緒的な見出しは明朝、説明と価格はゴシック／太字サンセリフに分ける。
• 見出しは字間を広めにとり上品に見せる。
• 成分には上付きの注釈番号を付け、近くに小さな注釈を置く。
• 価格は数字を特大、円・税込を小さく右に添える。
• 本文は中央揃え短文で、行間を広くとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードは 2 列グリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 価格・CTAブロックはページ内で3回くり返す。
• 各ブロックの前にチャコールの帯見出しを全幅で置く。
• 白カードを淡緑グラデーション地の上に浮かせ、余白は左右6%程度。
• 成分バッジは円を3つ重ねて横並び。
• 使い方はSTEP番号＋イラスト＋文を横並びにした枠カードを縦積み。

Elevation & Depth

• 白カードは影ほぼなし、細いグレー線の二重枠でずらして奥行きを出す。
• CTAボタンは下方向に柔らかい影＋光沢グラデーション。
• 割引バッジは金縁＋軽いドロップシャドウ。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き。目元写真は円形クロップ。人物はスクエア写真を重ねてコラージュ。
• セクション境界: 直線の切り替え。一部に斜めのライム色の三角・帯装飾。
• 特長カードは角丸なしで太いライム枠。
• ラベル類（Point・STEP・小見出し）はピル型か円形のライム地。
• 強調コピーは下半分に蛍光グリーンのマーカー帯。
• フリー設計は斜線入りの円形バッジを並べる。

Components

• 購入CTAボタン（button-primary）: オレンジのグラデーションのピル型。左端に商品パッケージをはみ出して重ね、右に矢印。
• 帯見出し（band-heading）: 全幅のチャコール帯に白文字の明朝/ゴシック見出し。
• 価格ブロック（price-block）: 定価に取消線、金縁の割引率円バッジ、赤橙の特大価格、チャコールの定期初回ラベル。
• 成分円バッジ（badge-circle）: 淡いライムの円を重ねて並べ、中に成分名を大きく表示。
• こだわりカード（card-feature）: 太いライム枠の白カード。見出しに細い下線、線画アイコン、短文説明。
• ピル見出しラベル（label-pill）: ライム地のピルに数字やカテゴリ英字を載せ、下に明朝見出し。
• マーカー強調コピー（marker-copy）: 白地に緑グラデーションのマーカーを敷いた強調一文。
• 満足度月桂樹（award-badge）: 金色の月桂樹で数字%を囲む調査結果バッジを3つ三角配置。
• 使い方STEPカード（step-card）: ライムの円にSTEP番号、線画イラスト、説明文を横並びにした細枠カード。
• 注釈（note-text）: 各ブロック下に小さなグレー文字で成分の注釈を記載。

Do's and Don'ts

Do - ライムグリーンは枠・バッジ・面装飾として面積を抑えて使う。 - 価格＋CTAはページ中に繰り返し配置する。 - 成分訴求には必ず注釈番号と注釈文を添える。 - 見出しは明朝で上品さを、本文はゴシックで読みやすさを出す。 - 白い余白を多めにとり清潔感を保つ。

Don't - オレンジをCTA・価格以外に使わない。 - 濃い緑の面を広く敷かない。 - カードに強い影や大きな角丸をつけない。 - 原色の赤や青を追加しない。 - 本文を長く左詰めで詰め込まない。

Page Structure

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

1. ファーストビュー（商品の印象とベネフィット提示）: ライムグリーン地に白の曲線ストライプ、斜めに置いた商品、明朝の大キャッチ。
2. オファー（価格＋CTA）（定期初回価格で購入を促す）: チャコール帯見出し、商品写真、割引バッジ、特大価格、オレンジCTA、注意書き。
3. 主成分紹介（希少な原料をアピール）: 淡緑地に明朝リード、白地ラベル見出し、原料と商品の写真。
4. 効果説明（浸透と保護の働きを伝える）: 白カードに短文、円形クロップの目元写真、マーカー強調コピー。
5. 配合成分（補助成分の追加価値）: 吹き出しラベル、淡緑の円バッジ3連、深緑の強調コピー。
6. こだわりポイント（4つの特長を整理）: ピル数字ラベル＋明朝見出し、2×2のライム枠カードに線画アイコン。
7. フリー設計（無添加の安心感）: 斜めのライム装飾、斜線入り円バッジ5つ、プラス記号と補足の枠。
8. 商品紹介（商品の再提示）: 淡い地に商品写真と斜めの英字筆記体、明朝キャッチ。
9. 原料の解説（原料の背景を説明）: 緑グラデーション地に白カード、本文と原料写真。
10. 開発者の想い（研究背景による信頼）: グレー地に白カード、線で挟む明朝見出し、白衣人物と研究室写真のコラージュ。
11. お客様の声（調査結果）（満足度データで後押し）: ピルの英字ラベル、商品写真と金の月桂樹バッジ3つ。
12. 使い方（正しい使い方の案内）: グレー帯にPointラベル2行、STEP番号つき枠カード3段。
13. フッター（法定表記リンク）: チャコール地に白の小文字リンクを中央揃え。

Imagery

• 商品はマットなライムグリーン容器を斜めに置き、柔らかい影の切り抜きで。
• テクスチャーのしずくや白いクリーム状の背景で潤い感を出す。
• 目元のクローズアップは円形クロップ。
• 研究者は白衣で明るい研究室、自然光。
• アイコンはグレーの単色線画・シルエット。
• 原料のナッツ実と葉を白地で切り抜く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 750px）のカラムを置き、左右を淡緑の地で埋める。
• PC でも 1 カラム構成を保ち、価格ブロックは横並びの比率を維持する。
• PC の特長カードは 4 列に広げてもよい。
• CTA ボタンの幅は最大 600px に抑える。

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