DESIGN.md — 紫×ピンクの黄昏グラデ系ヘアケアLP（Twilight Violet Nostalgic Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 夕焼けグラデ・紫ピンク・明朝見出し・黒髪ツヤ・金の時計・郷愁
• 地の質感: 霞んだ夕景写真・光のにじみ・オイルのしずくなど、柔らかく発光する質感
• 形: 丸バッジ・斜めにカットした帯・ピル型タグ・細線の枠を組み合わせる
• 温度感: 紫寄りのやや温かい中間色。黒いセクションで締める

Colors

• 地は白か淡いラベンダーにし、要所だけ黒いセクションで締める
• 強調はピンク→紫の横グラデ。帯見出し・チェックリスト・FAQの帯に統一して使う
• 暗い面の大見出しは白か金の明朝にする
• 成分セクションだけ淡い黄色〜金のグラデにして温かみを出す
• 主CTAだけは補色の緑。ほかの要素には使わない
• 注釈は灰色の小さい文字で右に寄せる
• button-primary は文字 #FEEDB1 × 背景 #1E8A3A のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1B7B34、4.57:1）を使う。
• price-block は文字 #E2508A × 背景 #EEE6F5 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C72163、4.51:1）を使う。

Typography

• 見出しは明朝。キーワードだけ1.5倍に大きくして強弱をつける
• FVと写真の上では縦書きの見出しも使う
• 強調語はピンク→紫のグラデ文字にする
• 本文はゴシックで、行間を広めにとる
• 英字の筆記体は飾りとして薄く重ねるだけにする
• 価格の数字は特大の明朝をピンクで組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅で使い、見出しを重ねる
• コラージュ風に写真をずらして重ね、半透明の色面を挟む
• お客様の声は写真と吹き出しを左右交互に置く
• 成分は円形の写真を2列に並べる
• セクションのつなぎに縦の細線か下向き三角を置く

Elevation & Depth

• カードには薄い影と細い線の枠をつける
• 丸バッジは白地に紫の外枠と柔らかい影
• CTAは光沢のあるグラデと立体的な影をつける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 全幅の長方形か円形。アーチ型の上辺も使う
• セクション境界: 下向き三角・斜めのカット・縦の細線
• 特長は円形バッジで見せる
• タグはピル型に統一する
• 帯見出しの端は斜めにカットする
• FAQの質問はピル型の帯に丸いQマークを添える

Components

• 主CTAボタン（button-primary）: 緑の光沢ピル型。左に丸い矢印、2段組の明朝
• 単品購入ボタン（button-secondary）: 灰〜黒の光沢ピル型。白文字
• 丸い特長バッジ（badge-circle）: 白い円に紫の外枠。上にグラデの小ラベルを重ねる
• グラデ帯見出し（band-heading）: ピンク→紫の横帯に白い明朝
• お客様の声カード（voice-card）: 人物写真＋細い枠のコメント。角に筆記体の番号
• チェックリスト帯（check-list）: 紫グラデの帯にチェックと白文字を並べる
• 無添加ピルタグ（pill-tag）: 青紫のピル型を複数並べる
• FAQ（faq-item）: グラデのピル型帯に丸いQ。回答はピンクのAと下線
• 価格ブロック（price-block）: 打ち消し価格→ピンクの特大価格。割引率バッジを添える

Do's and Don'ts

Do - 見出しは明朝で、キーワードに大小の強弱をつける - ピンク→紫のグラデを強調色として一貫させる - 黒髪の写真を暗いセクションに使い、ツヤを見せる - 声や成分の近くに注釈を必ず入れる - 金色の時計などの装飾で懐かしさを出す

Don't - 原色の赤や青を広い面に使わない - 見出しに丸ゴシックやポップ体を使わない - 緑はCTAと製造セクション以外に使わない - 余白を詰めすぎて写真の霞んだ空気感を壊さない

Page Structure

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

1. ファーストビュー（キャンペーンと商品の価値を一目で伝える）: 夕景グラデ写真に縦書きの明朝コピーと商品ボトル。下に丸バッジ3つ
2. 世界観（懐かしさの情緒に訴える）: 写真を重ねたコラージュと筆記体の英字、短い詩的な文
3. 悩みの提起（髪の悩みを共有する）: 黒髪写真に悩みを丸バッジで4つ並べる
4. 香りの訴求（香りとリラックスを伝える）: 果実と花の写真に縦書きのグラデラベル
5. 専門家の推薦（権威づけ）: 人物写真と帯見出し、枠囲みのコメント
6. お客様の声(短)（共感）: 写真と吹き出しを左右交互に置く
7. 成分の解説（特徴成分を説明する）: 黒い面に金と白の明朝。円形の成分ビジュアル
8. 美容成分（配合成分の豊かさを見せる）: 金色のオイルのしずくを背景に、円形写真を2列
9. オールインワン・睡眠（機能をまとめて伝える）: 写真の横にグラデのチェックリスト帯
10. 開発ストーリー（ブランドへの共感）: 故郷の風景写真のコラージュと明朝の本文
11. 無添加・製造（安心感）: アーチ型の写真にピルタグ。緑の帯で国内製造を伝える
12. お客様の声(詳)（信頼性を高める）: 大きな英字の見出しの下に、人物写真と枠付きのコメント
13. 返金保証・オファー（購入を後押しする）: 金の枠の保証表示、価格ブロック、緑のCTA
14. よくある質問（不安を解消する）: グラデのQ帯と、下線付きの回答
15. 商品情報（仕様を表示する）: 商品写真の下に、紫のラベルと区切り線のリスト

Imagery

• 夕焼けの空・田園・水辺をラベンダーとピンクの色調で霞ませる
• 黒髪のツヤを強調した、髪を大きく写した写真
• 40〜50代の女性の明るい笑顔のポートレート
• 金色の時計やローマ数字の線画を半透明で重ねる
• 果実・花・オイルのしずくの、温かいシズル写真
• 筆記体の英字を白や薄紫で写真に重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 600〜750px 幅で SP のレイアウトを置き、左右を淡い背景で埋める
• PC ではお客様の声や成分を 2〜3 列に広げてもよい
• 縦書きの見出しは 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 行書くと起動時に読み込まれる。