DESIGN.md — 金箔と濃紺ボトルの高級ヘアケア LP（Gold Accent Premium Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、ラグジュアリー・ダーク
• キーワード: 金グラデーション・明朝体・月桂樹・艶髪写真・深紅の価格・権威訴求
• 地の質感: シルク布・泡・オイル滴・大理石・コンクリートなど質感のある写真背景を多用。金はメタリックグラデーション。
• 形: 角丸小さめのカード、円形バッジ、リボン帯、泡や布のふわっとした境界。
• 温度感: 暖色寄り。金とベージュで温かく、悩みパートのみ灰色で冷たく落とす。

Colors

• 地は白・ライトグレー・生成りを交互にし、特典セクションのみピンク地にする。
• 見出しや帯、月桂樹など装飾は金のメタリックグラデーションでまとめる。
• 価格・割引率・強調語は深紅に統一し、価格下に黄色マーカーを敷く。
• 悩みパートは灰色系の質感背景と黒い筆ブラシで暗く落とす。
• 受賞・店舗実績は赤カーテンや暗色木目の地で特別感を出す。
• 購入ボタンだけ鮮やかな緑にし、他の要素とはっきり区別する。
• button-primary は文字 #FBFBFB × 背景 #1E9A4A のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1A8540、4.54:1）を使う。

Typography

• 見出しは明朝体。重要語だけを大きくし、助詞は小さくして抑揚を付ける。
• 金文字はグラデーションにして、細い影で立体感を出す。
• 価格数字は明朝で大きく深紅にし、円・税込は小さく添える。
• 英字の小見出しを和文見出しの上下に小さく添える。
• 悩みパートは筆・手書き風書体で荒々しく見せる。
• ※注釈は小さなグレー文字で、該当ブロックの直下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。お届けサイクルなどは 3 列カード。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅で、セクション間を背景写真でつなぐ。
• 特典・価格は白や生成りの浮いたカードにまとめる。
• 見出しは中央揃え。本文も基本は中央揃えにする。
• 実績や権威のブロックを連続させ、信頼を積み上げる。
• CTA の手前に価格の内訳・割引バッジを密に並べる。

Elevation & Depth

• 価格カード・特典カードは柔らかいドロップシャドウで浮かせる。
• CTA ボタンは下方向の濃い影と光沢で立体的にする。
• 金バッジは影とハイライトでメダル風にする。
• ランキング画像は少しずつずらして重ね、影を付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品・人物は切り抜き。悩み写真は円形切り抜き。ビフォーアフターは角形。
• セクション境界: 泡や布の波打つ境界、斜めの帯、上が丸いタブなど。
• CTA は角丸の大きなピル型にする。
• 特典番号は菱形の金バッジにする。
• 悩みワードは黒い筆ブラシの円形に載せる。
• 帯見出しは両端を切り込んだリボン形にする。

Components

• 購入CTA（button-primary）: 緑のグラデーションのピル型ボタン。白と黄の大文字に右矢印の円アイコンを付け、左上に金の丸バッジを重ねる。
• 特典リスト（benefit-list）: 生成りのカードに金の菱形番号を並べ、点線で区切る。強調語は深紅にする。四隅に金の飾り罫を入れる。
• 価格ブロック（price-block）: 取り消し線の通常価格から矢印でつなぎ、深紅の大きな価格を置く。下に黄色マーカー、横に赤い丸の割引バッジを付ける。
• 条件タグ（tag-chip）: 深紅塗りと深紅枠のタグを 2 列で並べ、初回限定などの条件を示す。
• 金リボン見出し（gold-ribbon）: 斜めにカットした金の帯に白い明朝文字を置く。
• 月桂樹メダル（laurel-badge）: 左右を金の月桂樹で囲み、星と王冠を添えた受賞・実績の見出し。
• お届けサイクルカード（cycle-card）: 金のヘッダーに回数を入れ、商品写真・割引バッジ・価格・送料ラベルを縦に並べる。カード間は配送アイコンでつなぐ。
• 悩みブラシ円（worry-brush）: 黒い筆ブラシの円に白い太字で悩みを書き、写真の周りに散らして配置する。

Do's and Don'ts

Do - 金はグラデーションで使い、フラットな黄色にはしない。 - 見出しは明朝体にして、重要語をサイズ差で強調する。 - 価格と割引率は深紅に統一する。 - 権威付け・ランキング・販売実績を写真付きで連続して見せる。 - 注釈は該当ブロックの直下に小さく置く。

Don't - 丸ゴシックやポップな色で幼く見せない。 - 緑を CTA 以外に使わない。 - 白地だけの平板なセクションを続けない。 - 金と深紅以外の強調色を増やさない。 - 本文を左寄せの長文にしない。

Page Structure

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

1. キャンペーン帯（期間限定のセット価格を告知する）: 若葉色の水彩地に明朝の見出し、商品の切り抜き、赤丸の限定バッジ、取り消し価格と深紅の価格を置く。
2. ファーストビュー（艶髪の世界観と実績を見せる）: 長い髪の後ろ姿を全幅で見せ、金の明朝キャッチを重ねる。受賞バッジ・プレゼント吹き出し・商品を下部に配置する。
3. ベネフィット（使用後の髪の状態を示す）: 大きな明朝見出しの下に、サロン施術の写真を枠付きで置く。
4. ブランドメッセージ（情緒的な共感をつくる）: ベージュのシルク布写真の上に、白文字の中央揃えで詩的な文章を置く。
5. 特典（購入障壁を下げる）: 月桂樹の大見出しの下に、生成りカードで番号付きの特典を5つ並べる。
6. プレゼント・価格・CTA（オファーを提示して購入させる）: ピンク地に白カードを置き、セット内容・価格・条件タグ・お届けサイクル・緑の CTA を並べる。
7. ビフォーアフター（効果を実証する）: 手書き風の見出しと金リボンの下に、比較写真のスライダーと拡大の丸窓を置く。
8. 専門家推薦（権威付けをする）: 金枠のカードに人物の切り抜きと経歴、コメント欄を入れる。
9. 受賞・店舗実績（社会的な証明を示す）: 赤カーテン地にランキング画像を重ね、暗色木目の地に店舗写真を並べる。
10. 累計販売数（人気を数字で示す）: 金の紙吹雪の背景に巨大な金の数字を置き、商品ボトルを並べる。
11. 悩みの提起（髪の悩みを自分事にさせる）: 灰色コンクリート地に筆文字の見出しを置き、悩みワードを黒いブラシ円で散らす。
12. 原因解説（ダメージの原因を理解させる）: 円形写真 4 枚で原因を示し、白いカードに髪の断面イラストを入れて図解する。
13. 理想と解決策（独自処方を紹介する）: 黒髪写真の上に金文字を置き、金のオイル背景に商品と 2 つの丸い効果バッジを × でつなぐ。
14. 成分の秘密（技術の根拠を詳しく示す）: 英字のラベルに番号を付けた見出しで、成分ごとに展開する。

Imagery

• 艶のある黒髪のロングヘアを、後ろ姿の明るいスタジオ光で撮る。
• 濃紺に金の大理石模様のボトルを、タオルや布の上に置いて柔らかい光で撮る。
• シルク布・泡・金色のオイルの流体や滴を背景に使う。
• 悩みは灰色に寄せた写真で、パサついた髪を手で掴むカットにする。
• 月桂樹・王冠・星・紙吹雪の金装飾を添える。
• 髪の断面図は茶とクリーム色のシンプルなイラストで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 程度に SP のレイアウトをそのまま置き、左右に淡いグレーかベージュの地を敷く。
• 全幅写真は PC では左右に広げ、文字は中央の幅に収める。
• お届けサイクルや原因の写真は PC でも 3〜4 列を保つ。
• CTA は PC で最大幅 480px 程度に留める。

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