DESIGN.md — コバルトブルー×淡青の皮膚科系スキンケアLP（Cobalt Blue Clinical Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、上品・高級、情報量多め・訴求型
• キーワード: コバルトブルー・淡青グラデーション・明朝見出し・マーカー下線・白カード・皮膚断面図
• 地の質感: ガラス瓶の光沢と水面のような淡い青のグラデーション。全体はマットで清潔。
• 形: 大きめ角丸の白カード、ピル型の紺ボタン、円形アイコン。
• 温度感: 寒色中心のクール寄りで、肌色の図解がやわらかさを足している

Colors

• 地は淡い青白とほぼ白を交互に使い、オファーのセクションだけ濃い紺で区切る。
• 見出しは紺文字。強調語の下に薄紫の太いマーカー線を引く。
• 赤は割引率と割引後の価格だけに使う。
• CTAは紺ベタのピル型ボタンに白文字。紺地の上では白カードの中に置く。
• 図解は肌色ピンクと赤矢印で、寒色の画面に温かみを足す。
• SNS誘導は外部ブランドの緑を使い、セクション内で1つだけ置く。

Typography

• 見出しと価格は明朝、本文・ボタン・FAQはゴシックで分ける。
• 強調したい語だけ文字を大きくし、助詞は小さく残す。
• 見出しは中央揃えで2〜3行に改行する。
• 価格の数字は明朝で大きく、「(税込)」は約1/3の大きさにする。
• 注釈は※番号を付けてセクション末にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。オファーカードとアイコン一覧は 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• オファーは2枚の白カードを紺の帯の上に横並びで置く。
• 解説系の写真は画面幅いっぱいに置き、その上に見出しを重ねる。
• 特長は写真と白いテキスト箱を半分ずつ重ねて段違いに組む。
• セクション間は 'だから' などのつなぎ語と下向きの山形矢印でつなぐ。
• FAQは白いアコーディオンカードを縦に並べる。

Elevation & Depth

• FAQカードには薄い青みの影（0 2px 8px rgba(20,30,120,.12)）を付ける。
• オファーカードは影を付けず、紺地とのコントラストで浮かせる。
• 口コミカードは影なしで、1pxの薄グレー枠にする。
• 白テキスト箱は写真の上に重ね、フラットに置く。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。人物は裁ち落とし、商品は切り抜きで影を付ける。
• セクション境界: 直線で背景色を切り替える。区切りの装飾は山形矢印だけにする。
• オファーカードは大きめの角丸（約24px）にする。
• バッジは小さい角丸の紺線枠にする。
• アイコンは紺の円の中に白い線画を入れる。
• 注意書きの箱は角丸なしの紺線枠で、見出しを上の枠線にかぶせる。

Components

• 購入CTAボタン（button-primary）: 紺ベタのピル型ボタン。右端に＞矢印を付け、下に小さく補足文を添える。
• オファーカード（offer-card）: 紺の帯の上に置く白い角丸カード。プラン名・商品画像・バッジ・価格・CTAを縦に並べる。
• 条件バッジ（badge-outline）: 紺の細い線枠の小さい角丸タグ。送料無料などの条件を書く。
• 割引率バッジ（discount-badge）: 赤い正方形の中に白で割引率を入れ、割引後の価格の左に置く。
• マーカー下線見出し（heading-marker）: 明朝の紺見出しに、文字の下半分へ薄紫の帯を敷く。
• 処方アイコン一覧（icon-feature）: 紺の円に白い線画アイコンを入れ、右に短いラベルを置く。2列×4段。
• 口コミカード（review-card）: 白地に薄枠。星評価と属性を上に置き、左に手描き人物イラスト、右に明朝の見出しと本文。
• FAQアコーディオン（faq-accordion）: 白の角丸カード。頭に明朝の「Q.」、右に紺の円の＋ボタン。
• 注意書きの線枠ボックス（outline-box）: 紺の線枠の箱。見出しを上の枠線の中央に重ねて置く。

Do's and Don'ts

Do - 紺と淡青の2つの地を交互に使い、オファーの帯だけ濃い紺にする。 - 見出しは明朝の紺で書き、要点に薄紫のマーカーを引く。 - 効果は皮膚断面のような図解とバーグラフで見せる。 - オファーカードを途中と後半に繰り返し置く。 - 注釈は小さいグレー文字でセクション末にまとめる。

Don't - 赤を見出しや装飾に使わない。価格の訴求だけに使う。 - 暖色やポップな色を地に使わない。 - 丸ゴシックや手書き書体を見出しに使わない。 - ボタンを角張らせたり、グラデーションにしたりしない。 - 影を強くかけない。

Page Structure

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

1. ファーストビュー（悩みの訴求と実績を示す）: 濃紺のグラデーション地に白の明朝コピー。光る商品瓶、受賞エンブレム、No.1の枠囲み。
2. 初回オファー（お試し価格ですぐ購入へ誘導する）: 紺地に白の角丸カード。上部の見出しは枠線にかぶせ、価格は大きな明朝、下に紺のピル型CTA。
3. 動画紹介（ブランドへの信頼と共感をつくる）: 白地に大きい動画1本と小さい動画2本のサムネイル。上に紺のピル型見出し帯。
4. ベネフィットのビジュアル（理想の肌のイメージを見せる）: 人物写真を全幅で置き、左側にマーカー下線付きの明朝見出しを重ねる。
5. 効果の実感データ（テスト結果で効果を示す）: 淡青の地に白カード。チェック付きの項目と青い横バーを並べる。
6. オファーの比較（お試しと定期便を比べさせる）: 紺の帯の上に白カードを2枚横並び。定期便には赤い割引バッジ。
7. 悩みの提起（これまでのケアの失敗に共感する）: 顔の線画を中央に置き、まわりに円で囲んだ方法名を4つ散らす。
8. メカニズムの解説（肌が生まれ変わる仕組みを図で伝える）: 肌色ピンクの皮膚断面図に、赤矢印と注釈の箱を重ねる。
9. 商品の紹介・誤解の解消（独自のアプローチを伝える）: 白衣の手が商品を持つ写真。線枠の箱で誤解を示し、山形矢印でつなぐ。
10. 特長（テクスチャーと浸透感を伝える）: 写真と白いテキスト箱を段違いに重ね、水滴と矢印の図解を添える。
11. 低刺激処方（安心感を与える）: 水面の写真に商品を置き、その下に白箱で紺の円アイコンを2列で並べる。
12. 使い方のステップ（使う順番を示す）: 線画アイコンを横に並べて矢印でつなぎ、商品のところだけ薄紫の円で強調する。
13. お客様の声（第三者の評価で背中を押す）: ハッシュタグ風の声を写真の上に重ね、ミント地に口コミカードを並べる。最後に紺の『もっと見る』ボタン。
14. よくある質問・ブランド紹介（不安を解消し、ブランドの背景を伝える）: 白い角丸のアコーディオンを並べる。続けて大きな欧文ロゴとブランドの由来の文章、診断への誘導枠を置く。

Imagery

• 商品はコバルトブルーのガラス瓶。青い光や水面を背景に、映り込みを付けて撮る。
• 人物は素肌感のあるナチュラルメイク。白〜淡青の背景で、青い衣服を差し色にする。
• 白衣の手元や研究室のボトルで、医療・研究の信頼感を出す。
• 図解はフラットなイラスト。肌色ピンクの層に赤い矢印、青い水滴を使う。
• 口コミの人物は、くすんだオレンジや青の手描き風の素朴なイラストにする。
• アイコンは紺の円の中に白い細い線画を入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 600〜750px 幅のカラムを置き、左右は淡青の地で埋める。
• オファーカードは PC でも2枚横並びのまま、余白を広げる。
• 全幅写真は PC ではカラム幅に収め、見出しを写真に重ねる構成は保つ。
• 見出しの文字サイズは PC で 1.2〜1.3 倍にする。
• アイコン一覧は PC で 4 列に広げてもよい。

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