DESIGN.md — ライムグリーン×明朝の美容液 LP（Fresh Lime Green Cosmetic Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、ナチュラル、上品・高級、情報量多め・訴求型
• キーワード: ライムグリーン・ミントグラデーション・明朝見出し・円形成分バッジ・線囲みカード・注釈多め
• 地の質感: 白地にミント色のやわらかなグラデーションと、グレーの光沢スタジオ背景を重ねたつややかな質感
• 形: 円形バッジ、片側だけ丸いピル帯、細い緑線の四角枠、斜めのストライプ装飾
• 温度感: 爽やかで少しクール。自然素材の温かみも感じさせる

Colors

• 地の色は白・淡いミント・グレー光沢の3種類を交互に置き、セクションの切れ目をつくる
• ライムグリーンの全面塗りはFVと『フリー設計』『レビュー』など要所だけにする
• 強調語はライムのマーカー帯や塗り帯にのせ、文字は深緑か濃いグレーにする
• オレンジは価格と割引率にだけ使う
• 注釈は灰色の小さい文字で、各セクションの右下か下にまとめる
• 実績の数値は金色の月桂冠と組み合わせて見せる
• price-block は文字 #EA581E × 背景 #F2FEE6 のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CA4713、4.54:1）を使う。

Typography

• 大見出しは明朝で字間を広めにとり、上品な印象にする
• 『4つの』のような数字の前置きは、小さいピル帯にのせて見出しの上に置く
• 訴求の要点はゴシック太字にし、マーカー帯を敷く
• 説明文は中央揃えで、短い行で改行する
• 注釈番号は上付きの小さい文字にする
• 価格は欧文の数字を非常に大きくし、オレンジで目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードだけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色を全幅で切り替える
• 白いカードを淡色の地の上に余白を残して置く
• 製品写真と文字を左右に分け、ずらして配置する
• 注釈はセクションの最下部に右寄せか左寄せでまとめる
• 成分は円形バッジを3つ横並びにし、少し重ねる
• 使い方は STEP 番号の円＋線画イラスト＋説明文の横長行にする

Elevation & Depth

• 影はほぼ使わず、フラットな面と細い線で構成する
• 製品写真にだけ自然な落ち影をつける
• 白カードは影なしで、地色との差だけで浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 製品は切り抜き。人物は四角。目元のアップは円形に切り抜き、緑の縁をつける
• セクション境界: 基本は直線で切り替える。ライムの面には斜めストライプや斜めの帯を装飾に入れる
• ラベル類は完全なピル型にする
• 商品名の帯は右端だけ大きく丸める
• カードは角丸を小さくし、緑の細い線で囲む
• 成分やフリー表記は正円バッジにする

Components

• 数字ピルラベル（pill-label）: 見出しの上に置く、ライムの塗りのピル型ラベル
• 商品名ピル帯（name-band）: 片側が丸い黄緑の帯で、カテゴリ名と英字の商品名をのせる
• マーカー見出し（marker-heading）: 要点の文字の下に黄緑のマーカー帯を敷く
• 成分円バッジ（ingredient-circle）: 淡い緑の正円を少し重ねて横に並べ、成分名を大きく入れる
• 特長カード（feature-card）: 緑の線で囲んだ2列の白カード。タイトル、小さいアイコン、説明文を入れる
• フリー表記円（free-circle）: ライムの正円に白文字と斜め線をのせ、3つと2つで並べる
• 使い方STEP行（step-row）: 左端に緑の番号円を置き、線画イラストと説明文を緑線の枠で囲む
• 価格ブロック（price-block）: 濃色の帯見出しの下に、通常価格の取り消し線、金色の割引バッジ、オレンジの特大価格を並べる
• 月桂冠実績（laurel-stat）: 金色の月桂冠の中に満足度などの割合を大きく入れる

Do's and Don'ts

Do - ライム、ミント、白、グレーの4つの地色だけで構成する - 見出しは明朝、説明はゴシックと使い分ける - 表現の根拠になる注釈番号と注釈文を必ず添える - 製品写真は光沢のある白・グレー背景か、ライムの背景で撮る - 数字を前置きにした見出しで情報を区切る

Don't - ピンクや紫など、緑系と合わない彩度の高い色を入れない - オレンジを価格以外に使わない - 太いドロップシャドウや立体的なボタンにしない - ポップな丸ゴシックで見出しを作らない - 注釈を省略しない

Page Structure

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

1. ファーストビュー（商品と効果を一目で伝え、受賞実績を見せる）: ライムの全面に白い斜めストライプを入れる。明朝の大きなキャッチ、斜めに置いた製品写真、右上に金色の受賞メダルを配置する
2. 商品紹介（商品が何かを改めて伝える）: グレーの光沢背景に製品を置き、斜めの英字見出しとキャッチ、商品名のピル帯を添える
3. SNSでの話題（SNSでの拡散を見せて社会的証明にする）: ライムの地に投稿のスクリーンショットを3列×2段で、少し傾けて並べる
4. 技術・成分訴求（独自技術と希少な成分を説明する）: ミントのグラデーション地に、リード文、マーカー見出し、成分写真を置く
5. 作用説明（浸透と保護のイメージを伝える）: 白カードの中に、文章と円形に切り抜いた目元のアップを並べる
6. 配合成分（補助成分の配合を見せる）: 重ねた円バッジを3つ並べ、その下に大きな見出しを置く
7. こだわりポイント（特長を4つに整理して見せる）: 数字のピルラベルと明朝見出しの下に、緑線の2×2カードを並べる
8. フリー設計（無添加であることを示して安心感を出す）: ライムの円を5つ置き、プラス記号と緑線の枠で追加情報を添える
9. 成分ストーリー（原料の背景を説明する）: 白カードの中に英字見出しと本文、右下に原料の写真を置く
10. 開発者の想い（研究背景を伝えて権威性を出す）: グレーの地に、両側に線がついた明朝見出し、白衣の人物写真、名前の帯、本文を並べる
11. お客様の声・満足度（数値で実感を示す）: 金色の月桂冠に入れた割合を3つ、製品写真と合わせて配置する
12. 使い方（正しい使い方を示す）: Pointのラベル行のあとに、STEPの番号円、線画、説明文の3行を並べる
13. 価格・定期プラン（お得さを伝えて購入を後押しする）: 濃色の帯見出し、製品写真、割引バッジ、オレンジの特大価格、注意書きの順に置く
14. レビューキャンペーン（購入後の特典を案内する）: ミントの地に緑線の枠を置き、緑のピル見出しとマーカー付きの特典、注意書きを入れる

Imagery

• 製品は真上や斜めから撮った光沢のあるスタジオ写真。テクスチャーのしずくを添える
• 背景は白からグレーの柔らかなグラデーションか、ライムの単色にする
• 原料のナッツや葉を切り抜いて製品の横に置く
• 研究者は白衣で、明るい研究室の写真にする
• 使い方は細い黒線の目のイラストに、緑のチップを描き足す
• アイコンは小さいモノトーンの線画と点描にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央の幅480〜600pxにSPの構成をそのまま置き、左右はミントかグレーの地で埋める
• 特長カードはPCで4列にしてもよい
• 成分の円バッジやフリー表記の円は横一列に並べる
• FVは製品写真とキャッチを左右に分けて配置する

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