DESIGN.md — 紺×シャンパンゴールドの研究系美容液 LP（Navy and Champagne Gold Science Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 濃紺×金・透明感ブルー・明朝体の縦書きコピー・六角形バッジ・研究・エビデンス・定期便オファー反復
• 地の質感: 光のボケ・水滴・泡のきらめきを重ねた半透明の質感。金はメタリックのグラデーションで表現する。
• 形: 角丸は小さめの白カード、六角形の部位バッジ、円形のポイント番号、斜めのセクション境界。
• 温度感: クールな青が基調。金と肌色のピンクベージュでほんのり温かみを足す。

Colors

• FVとオファーは濃紺〜青グラデで締め、説明セクションは淡い水色・白・ピンクベージュで明るく保つ
• 金は高級感の記号として使う。ボトル・六角バッジ・円形バッジ・見出し帯・保証ボタンに限定する
• 主CTAだけは明るい金黄のグラデにして、ページ内で一番目立たせる
• 見出しのラベル帯は紺の地に白文字。特典の帯は金の地に白文字で使い分ける
• 本文の強調は赤文字に黄色マーカーを重ねる。使うのはお客様の声の中だけ
• 単品購入はグレーのグラデボタンで格下げし、定期便との差をはっきりさせる
• hex-badge は文字 #1B475E × 背景 #C69C6C のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CDA87E、4.5:1）を使う。

Typography

• 情緒・研究系の見出しと本文は明朝体で上品に組む
• 価格・特典・保証などオファー情報は太いゴシックで読みやすくする
• FVのメインコピーは縦書きの大きな明朝にし、白文字で写真に重ねる
• 見出しの左右に「＼ ／」を付け、小見出しを挟む
• 価格の数字は金のグラデの欧文セリフで極端に大きくする
• 注釈は※付きの10px前後で、該当ブロックの直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分の紹介は写真と文を左右交互に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面幅の約90%で中央に置き、淡色の地の上に浮かせる
• オファーブロック（価格・保証バッジ・CTA）はページ内で3回以上繰り返す
• オファーの直後に注釈とブロンズの保証アコーディオンを置く
• 定期便特典とお客様の声は横スライダーにし、左右に次のカードを少し見せる
• 画面下に「短時間で注文」を示す追従バナー（オペレーター写真付き）を固定する

Elevation & Depth

• 白カードには薄いグレーの柔らかいドロップシャドウを付ける
• CTAボタンは下方向に影と金の縁取りを付けて立体的に見せる
• 金のバッジはメタリックのグラデとハイライトで光沢を出す
• 追従バナーは黄色の縁取りと影で最前面に置く

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は角丸なしで背景に溶け込ませる。成分写真は矩形。効能は円形の切り抜き
• セクション境界: 基本は水平。説明セクションの一部を斜めに切り替える
• 部位バッジは金の縁取りの六角形を蜂の巣状に並べる
• ポイント番号は紺の円にPOINTと数字を入れ、カード左上にはみ出させる
• フリー処方は細線の円に斜線を入れて表現する
• 保証バッジは白地の角丸の小さな矩形にする

Components

• 金グラデ主CTA（button-primary）: ピル型の金黄グラデのボタン。上に割引率の小ラベル、右端に丸い矢印アイコンを置く
• 単品購入ボタン（button-secondary）: グレーのグラデのピル型ボタン。白文字に丸い矢印を付ける
• 定期便オファー枠（offer-block）: 青グラデの地に、ロゴ・ボトル・取消線の通常価格・巨大な金の価格・割引率の金丸バッジ・保証バッジ2つ・CTAをまとめた枠
• 保証アコーディオン（accordion-guarantee）: ブロンズのグラデに装飾フレームを付けた帯。白文字で右端に＋を置く
• 六角形部位バッジ（hex-badge）: 金または白の六角形の中に部位名を1語ずつ入れ、4つ組み合わせる
• 成分ポイントカード（point-card）: 白カードの左上に紺の円形番号、紺のラベル帯の下に明朝の大見出し、続けて図解や写真を置く
• 紺ラベル帯（label-band）: 紺の矩形帯に白い明朝の文字を入れる。見出しの上に添える
• お客様の声カード（voice-card）: 上に悩みタブを3つ並べ、写真・名前・年齢の円バッジ・本文を置く。本文はマーカーで強調する
• Q&A行（faq-item）: 淡い水色の地に白い行を並べる。明朝の大きなQ、質問文、右端に＋を置く
• 追従注文バナー（sticky-banner）: 黄色の縁取りのピル型。オペレーター写真の丸アイコンと吹き出し文を入れ、上矢印のボタンを付ける

Do's and Don'ts

Do - 濃紺と光のボケの上に金のボトルを置いて、高級感と科学感を両立させる - 研究・成分・使い方は淡い水色の地と明朝体で、静かに説明する - 価格のブロックは同じデザインで繰り返し、迷わず申し込める導線にする - ※付きの注釈は小さく、該当箇所のすぐ下に置く - 部位や効能は六角形・円形のバッジに短い言葉で入れて示す

Don't - 原色の赤や緑を面で使わない。強調の赤はマーカー部分だけにする - 金を本文の文字色に使わない - ゴシック体だけで情緒系の見出しを組まない - 角丸の大きいポップなカードは使わない - CTAに金黄以外の色を使わない

Page Structure

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

1. ファーストビュー（研究背景と効能を一言で伝える）: 濃紺に光のボケの背景。左に金のボトル、右に縦書きの大コピーと否定形の小帯、六角の部位バッジ4つを置く
2. 実績帯（販売実績と受賞で信頼を示す）: 金の紙吹雪の地に、巨大な金の数字と雑誌賞の丸バッジを置く
3. オファー（初回割引価格と保証を提示する）: 青グラデの枠に、価格・割引率バッジ・保証バッジ・金のCTAを置く。下に注釈と保証アコーディオンを続ける
4. 研究背景（研究に基づく開発であることを示す）: 白衣の研究者と肌画像・グラフを重ねる。見出しは明朝で、細線の飾りを付ける
5. 技術・成分ポイント（独自技術と成分を説明する）: 水色の地にPOINT番号付きの白カードを置く。カプセルの図解と、成分写真を左右交互に並べる
6. 有効成分の訴求（効能を部位で具体化する）: 金の円バッジ「さらに」から入る。紺帯の成分名、赤下線の強調文、横顔の女性写真に六角バッジを組み合わせる
7. 定期便の特典（解約自由などの不安を解消する）: グレーブルーの地に金ヘッダーのカードスライダーを置く。電話番号も載せる
8. 単品購入（定期以外の選択肢を示す）: グレーのヘッダーの白枠に価格とグレーのボタンを入れる
9. 社員の声（作り手の愛用で信頼を補強する）: 金の手書き風吹き出しと金の帯見出しを置く。水色カードに吹き出し・人物・手書きボードを入れたスライダー
10. お客様の声（悩み別に共感を得る）: ピンクベージュの地に英字スクリプトの見出しを置く。悩みタブ3つと、マーカー強調の体験談カード
11. ブランドコンセプト・処方（情緒価値と低刺激性を伝える）: 泡と水滴の背景に、斜めのボトル、円形の効能バッジ、縦書きコピーを置く。フリー処方は斜線の円、テスト済みは青い円で示す
12. 使用感・使い方（テクスチャー・香り・手順を伝える）: 動画埋め込み・花の写真・洗顔後の女性写真を使う。手順は線画の顔イラストと▼で区切ったステップにする
13. よくある質問（疑問を解消する）: 水色の地に、白いアコーディオン行と明朝のQを並べる
14. クロージングCTA（最終の申込を促す）: オファー枠・特典スライダー・単品・保証を再掲する

Imagery

• ボトルはシャンパンゴールドの金属質で、柔らかい反射を付けて切り抜く
• 背景は濃紺〜水色の光のボケ・水滴・泡・分子モチーフで透明感を出す
• 人物は30〜40代の女性。白やナチュラルな服で、頬や首に手を添えた穏やかな表情
• 研究者は白衣にピペット。肌の拡大画像やグラフを重ねて信頼感を出す
• 成分は果実・花・樹木の自然光写真。使い方は細い線画の顔イラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約1000px幅のカラムを置き、FVは横長の構図でボトル左・コピー右に配置する
• PCのFVコピーは縦書きでなく横書きの大見出しにする
• 成分写真3種と定期便特典3枚は、PCでは横3列に並べる
• オファー枠はPCでは価格とCTAを横並びに圧縮する
• お客様の声はPCでは写真と本文を横並びにする
• PCでは最下部に商品詳細の表を追加する

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