DESIGN.md — 淡青×白の透明感スキンケアLP（Translucent Pale Blue Mincho Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、やさしい・柔らかい、信頼・誠実
• キーワード: 透明感・淡いブルーグレー・明朝体・楕円写真・筆記体英字・ゴールドの価格
• 地の質感: ぼかした光や水滴の背景に白い面を重ね、霞がかった柔らかい質感
• 形: 大きな角丸カード、縦長の楕円・カプセル型写真、ピル型ボタン、円形の成分バッジ
• 温度感: やや寒色寄り。価格・保証部分だけ暖色のゴールドとベージュ

Colors

• 地は淡いブルーグレー、情報は白の角丸カードに載せる
• 青緑は主CTAと強調見出しの一部だけに使う
• 価格・割引・特典・保証は暖色ゴールドに切り替えて特別感を出す
• 使い方セクションのみベージュ地にして章を区切る
• 黒系は通常購入のサブボタンに限定
• 見出し文字は純黒を避けチャコールで柔らかく
• button-primary は文字 #FFFFFF × 背景 #3EA9B9 のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2F818D、4.52:1）を使う。
• discount-arrow は文字 #CE9244 × 背景 #FAEFE4 のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#926326、4.59:1）を使う。
• guarantee-banner は文字 #FFFFFF × 背景 #B59A6A のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#8B7245、4.57:1）を使う。
• benefit-list は文字 #FFFFFF × 背景 #B59A6A のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#8B7245、4.57:1）を使う。

Typography

• 見出し・本文とも明朝で統一し、注釈だけゴシック
• 見出し上に細い筆記体英字を青緑で添える
• FVと情緒コピーは縦書きを使う
• 見出しは字間を広めに取り軽く見せる
• 価格の数字は大きくゴールド、円・税込は小さく添える
• 注釈記号※は上付きで小さく
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、成分比較や効果は 2 列の円・カプセル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右 6% 余白で中央に置く
• 写真は左右交互に寄せて余白にコピーを置く
• 見出しは中央揃え、本文は左揃え
• 注釈は各ブロック右下に小さく
• セクション間はたっぷり余白で静かに

Elevation & Depth

• 白カードはごく薄い影か影なしで地色差で浮かせる
• 商品ボトルの下に柔らかい落ち影
• 成分バッジの円に淡い影
• ボタンは影なしのフラット

Shapes

• 角丸: 小 6px ／ 中 20px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 縦長カプセル・楕円・円形に切り抜き、一部は画面外にはみ出す
• セクション境界: 大きなアーチ型・半楕円の白面で次のセクションへつなぐ
• 直角の写真は使わない
• 成分ポイントは円形または角丸ピル枠
• カードは大きな角丸
• セクション上端をドーム状に丸める

Components

• 主CTAボタン（button-primary）: 青緑のピル型、2行明朝文字、右端に白丸の矢印アイコン
• 通常購入ボタン（button-secondary）: チャコールのピル型、白文字と矢印丸
• 筆記体英字ラベル（script-label）: 見出し直上に置く細い青緑の筆記体英字
• 成分円バッジ（ingredient-badge）: 細線の円に成分名、上にグレー円の分類ラベルを重ねる
• 商品・価格カード（product-card）: 白の大角丸カードに商品名、医薬部外品の枠ラベル、ボトル写真、価格
• 割引矢印帯（discount-arrow）: ベージュの下向き五角形にゴールド文字で割引率
• 返金保証帯（guarantee-banner）: ゴールドグラデの角丸帯に白文字、両脇に月桂樹装飾
• 特典リスト（benefit-list）: ゴールド地のドーム型面に白丸番号、点線区切りで3項目
• 斜線付き誘導見出し（lead-heading）: 左右に斜めの二重線を置いた青緑の明朝2行見出し
• 口コミ横スクロール（review-carousel）: 正方形写真と短文の口コミを横に並べたカルーセル

Do's and Don'ts

Do - 余白を広く取り、明朝の細さで透明感を保つ - 写真は必ず楕円・カプセル・円で切り抜く - 見出しごとに筆記体英字ラベルを添える - 価格・特典ブロックだけゴールドで温度を上げる - 効能表現には※注釈を必ず添える - CTA直前に斜線付き誘導見出しを置く

Don't - 原色や彩度の高い赤・黄をCTAに使わない - 太いゴシックの見出しを使わない - 角ばった写真枠や濃い影を使わない - 地を真っ白一色にしない（淡い青灰を残す） - 文字を詰め込みすぎない - 黒ベタの大きな面を作らない

Page Structure

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

1. 特典告知バナー（購入者限定特典を最上部で予告）: 青緑の枠と斜めリボン見出し、右に動画サムネ
2. ファーストビュー（商品と透明感の世界観を伝える）: 笑顔の人物を楕円切り抜き、白抜き縦書き明朝の大コピーと商品ボトル
3. ブランドの信頼性（製薬会社の背景で安心感を出す）: 白いドーム面に明朝見出し、研究員・施設写真をカプセル型で配置
4. 商品概要とCTA（成分と定期条件を見せ早期申込を促す）: 白角丸カードに成分円バッジ3つ、注釈、誘導見出し、主CTA
5. コンセプト・アンバサダー（ケアの方向性と起用人物の提示）: 筆記体英字＋明朝見出し、人物2名をカプセル写真で互い違いに
6. 成分解説（保湿成分の特徴を理解させる）: 水滴球のビジュアル、2つのピル枠ポイント、比較表
7. 浸透技術（技術の違いを図解）: 円形写真と細線の引き出し線、2つの円で比較図
8. 3つの有効成分（成分ごとの役割を説明）: 番号つき円ラベルと横長カプセル写真、オレンジの浸透図
9. 開発ポイントまとめ（特長を3つに要約）: 商品写真の右にピル枠3つを線でつなぎ、分子モチーフを散らす
10. 使い方（使用手順を示す）: ベージュのドーム地に線画イラストを円で、ゴールド縦線でステップ連結
11. ベネフィット（使用後の気分と効果を情緒的に）: 人物楕円写真を左右交互、青緑帯の縦書きコピーと筆記体英字
12. 価格・オファー（定期価格と割引を提示）: 白カードに通常価格→割引矢印帯→ゴールドの大きな価格
13. 返金保証・特典（購入不安を除く）: ゴールドの保証帯と番号付き特典リスト
14. お客様の声（社会的証明）: 写真付き口コミの横スクロール、アンバサダーの手書き風コメントとサイン
15. 最終CTA（定期と通常購入を選ばせる）: 定期価格カード＋主CTA、下に枠線カードの通常購入と黒ボタン

Imagery

• 白い服の人物を明るい自然光で撮り、高キーで柔らかく
• 背景は淡い青や白の玉ボケ・光のにじみ
• 商品は白背景で落ち影のみの切り抜き
• 成分は水滴・泡・オイル球の接写で清潔感
• 使い方は細いグレー線の手描き風女性イラスト
• 分子モデルを淡い青のガラス質感で散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に SP 幅（約 480〜750px）のカラムを置き左右は淡い青灰の背景で埋める
• PCでは写真とテキストの左右配置を2カラムに広げてもよい
• 縦書きコピーはPCでも維持し文字サイズを1.3倍程度に
• 口コミは PC で 4 枚程度を同時表示
• CTAボタンは最大幅 420px に抑える

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