DESIGN.md — 桜色×白の明朝で魅せる頭皮美容液LP（Soft Pink Mincho Scalp Serum LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、信頼・誠実
• キーワード: 桜色・明朝体・水滴と波紋・細い罫線・薄いマーカー・医薬部外品の信頼感
• 地の質感: 白〜淡ピンクのグラデーション地に、水面の波紋や光沢のある水滴を重ねたしっとりした質感
• 形: 角丸ほぼなしの白カードに淡い影。円形バッジ、細い線のV字矢印、斜線入りの円
• 温度感: やや暖かいパステル。ピンクで暖かさ、ラベンダーで涼しさを足している

Colors

• 地は白を基本に、口コミ帯は淡ピンク、悩み・原因帯は淡ラベンダーで切り替える。
• 強調はピンク文字か、文字下半分の薄いマーカーで行う。太字や赤は使わない。
• 悩みのパートはラベンダー、解決のパートはピンクのマーカーで色分けする。
• 本文はチャコール。黒の#000は使わない。
• ブルーは図解の水分表現だけに使う。
• 価格カードは白地に黒文字と細罫線だけでまとめ、派手なCTA色は使わない。

Typography

• 見出しはすべて明朝で、字間を広め（0.08〜0.12em）にとる。
• 見出しの強調語はピンク色にし、助詞だけひと回り小さくする。
• 口コミと図解の本文はゴシックで読みやすくする。
• ※注釈は小さいグレーで、見出しの直後か下にまとめる。
• 番号はセリフ体の大きな数字にし、上に筆記体の「Point」と細線を添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。原因の円だけ 3 つを横に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右に約6%の余白をとって中央に置く。
• セクションの境目は地色の切り替えだけで示す。
• 特長はPoint番号を左右交互に置く非対称レイアウトにする。
• 写真とテキストカードは少しずらして重ねる。
• 価格カードはページ内で3回繰り返す。

Elevation & Depth

• 白カードには、ぼかし大きめで薄い影（rgba(0,0,0,0.06)）を付ける。
• 口コミカードは影なしか、ごく薄い影にする。
• 重ねたテキストカードだけ、少し強めの影で浮かせる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。人物は白地に溶け込ませる
• セクション境界: 直線のまま地色だけを切り替える
• 円形はバッジ・原因・フリー表示にだけ使う。
• 矢印は細線のV字にする。
• 比較ブロックは点線の枠で囲み、角に斜線の飾りを付ける。
• フリー表示は円の中に斜線を入れる。

Components

• 価格カード（price-card）: 白カードにロゴ・商品名・容量・区分ラベルを並べ、罫線の下に送料無料の枠と大きな価格を置く
• 口コミカード（review-card）: 白カードの右上にピンクの円形吹き出しを重ね、要点の文にピンクマーカーを引く
• 円形吹き出しバッジ（badge-circle）: ピンクの円に、白い明朝で2〜3行の要約を入れる
• 悩みチェックカード（check-card）: チェックボックスのアイコン、悩みの文、線画イラストを横一列に並べる白カード
• Point見出し（point-heading）: 筆記体の「Point」、細い横線、大きなセリフ数字、明朝の見出し（強調語はピンク）を組み合わせる
• マーカー強調（marker-text）: 文字の下半分に薄いピンクかラベンダーの帯を敷く
• 特長インデックス（point-list）: 淡いピンク枠の長方形に、Point番号と1行の要約を並べて3段に積む
• フリー表示（free-circle）: 細線の円に斜線を入れ、中に成分名を書いて2段に並べる

Do's and Don'ts

Do - 見出しは明朝で、字間を広く組む。 - 強調はピンク文字かマーカーにとどめる。 - 水滴・波紋・光の写真や装飾で、うるおい感を出す。 - 効能を書くときは必ず※注釈を添える。 - 線画のアイコンは細く、グレーで統一する。

Don't - 原色の赤や黄色のボタンで煽らない。 - 太いゴシックで見出しを作らない。 - 背景を濃い色で塗らない。 - 大きな角丸やポップなイラストを使わない。 - 情報を詰め込みすぎて余白を削らない。

Page Structure

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

1. ファーストビュー（独自性と商品を印象づける）: ピンクの水面の写真に商品ボトルを置き、上に大きな明朝コピーを重ねる。成分の帯と注釈を添える
2. 商品概要と価格（効果の要約と価格を早めに見せる）: 左にボトル、右に明朝のリード文を置き、その下に価格カードを続ける
3. レビュー評価（高い評価で信頼を得る）: ピンクの円グラフ風の図形に大きな評価数値を載せ、金色の星を並べる
4. お客様の声（実際の体験で共感を得る）: 淡ピンク地に口コミカードを縦に並べ、円形バッジとマーカーを付ける
5. 悩みの提起（悩みを自分ごと化させる）: 淡ラベンダー地に、チェックカード3枚と線画の女性イラストを置く
6. 原因の説明（乾燥の原因を示す）: V字矢印の下にラベンダーの円を3つ重ねて並べ、明朝の大きな結論文を置く
7. 比較・図解（状態の違いを理解させる）: 点線の枠の中に比較カードを置き、肌断面のイラスト図解を白カードに入れる
8. 解決のメカニズム（成分の働きを説明する）: 一般品と本品の断面図を上下に並べ、矢印と吹き出しで説明する
9. 選ばれる理由（必要性と独自性を訴える）: 罫線の下に中央揃えの明朝文を置き、人物写真と横並びでピンクの強調を入れる
10. 特長3つ（特長を順に深掘りする）: インデックスの後、Point見出しと重ねたカードと写真を交互に配置する
11. 安心・使用感（不安を減らす）: フリー表示の円と試験済みのバナー、ノズルの写真とカードを重ねる
12. 締めの価格（購入を後押しする）: 冒頭と同じ商品概要と価格カードを繰り返す

Imagery

• 商品は白とピンクのボトルを水面や波紋の上に置き、柔らかい光で撮る。
• 透明な水滴やジェルの粒を装飾として散らす。
• 人物は30〜40代の女性。目を閉じた穏やかな表情で、明るいハイキーにする。
• 悩みのイラストは細いグレーの線画にする。
• 図解はパステルオレンジとピンクの肌断面図にし、水分を青い矢印で示す。
• 成分の背景には、米や麻袋などの素材感のある自然光の写真を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはコンテンツ幅を約750pxに固定し、中央に置く。
• 背景の地色とグラデーションは画面幅いっぱいに広げる。
• 特長は写真とテキストを左右2カラムに並べる。
• 見出しの文字サイズは1.3倍程度にとどめ、余白で品よく見せる。

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