DESIGN.md — ラベンダー×ローズの煌めくヘアケア限定品 LP（Crystal Lavender Gradient Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、清潔・爽やか
• キーワード: 透明感・クリスタル・ラベンダーグラデーション・限定感・煌めき
• 地の質感: ボケた光の粒と水面の揺らぎを重ねた、すりガラスのような半透明の質感
• 形: 角丸の大きいカード、六角形バッジ、有機的なブロブ形の写真切り抜き
• 温度感: やや寒色寄り。冬の澄んだ空気感にローズの甘さを足す

Colors

• 地はラベンダー（#E1E6F5）と白に近い面を交互に使い、販売まわりだけピンクラベンダーにする
• 英字の大見出しはローズモーブから青紫への横グラデーションで塗る
• カード・六角形・購入ボタンも同じグラデーションで塗り、上の文字は白にする
• 金色はロゴ・限定バッジの線・応募ボタンだけに使う
• 本文は黒ではなくブランド紫で書き、規約だけ黒を使う
• 原色や彩度の高い色は入れない
• button-primary は文字 #FEFEFE × 背景 #AD9A53 のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#84753F、4.53:1）を使う。

Typography

• 文字間は広め（0.08〜0.15em）にとり、透明感を出す
• 英字見出しは細めの幾何学サンセリフで大きく置き、グラデーションで塗る
• 和文の大見出しは 2 行に分け、句読点で余韻を残す
• ハッシュタグ風のコピーは、モーブ帯に白抜き文字で行ごとに敷く
• 注釈は ※番号つきで、ごく小さく淡く入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品ブロックは画像と情報の 2 分割
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文は左右 24〜40px の余白をとって左揃えにする
• セクションは全幅のきらめき背景と、大きな角丸の白カードを交互に置く
• 英字の見出しはカードの左上に半分はみ出すように重ねる
• 購入先ボタンは 2×2 のグリッドに並べる
• 特長はカルーセルにし、前後のカードを傾けて少し見せる

Elevation & Depth

• 影はほぼ使わず、半透明の面の重なりで奥行きを出す
• カルーセルの前後カードは縮小して透明度を下げ、遠近感を出す
• 成分カードは数度傾け、背後に同じ形の淡いカードを重ねる
• 再生ボタンや矢印ボタンは白丸で、ごく弱い影をつける

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の矩形が基本。香りの写真は有機的なブロブ形に切り抜き、画面端まで伸ばす
• セクション境界: 大きな角丸カードの上端で区切る。直線の境界は使わない
• 六角形バッジは 3 つを蜂の巣状に組む
• 購入先ボタンは角丸なしの矩形タイルにする
• 応募ボタンと開閉ボタンはピル型にする
• モデル写真の背後に、ずらした淡色の矩形を重ねる

Components

• 六角形の特長バッジ（hex-badge）: グラデーションで塗った六角形に、特長を白文字で書く。3 つを組む。
• 限定ピルバッジ（badge-limited）: 金の細い線で囲んだピル型。金文字で限定を示す。
• 英字グラデーション見出し（heading-gradient-en）: セクション名を大きな英字で書き、ローズから青紫へのグラデーションで塗る。
• ハッシュタグ帯（tag-hashtag）: モーブの帯に白抜き文字。行ごとに帯を敷く。
• 特長カルーセルカード（card-feature-carousel）: 上半分に写真、中央に成分の帯、下半分はグラデーション地に白文字。左上に分数で番号を表示する。
• 開閉ボタン（button-toggle）: モーブのピル型ボタン。白文字に下向きの矢印をつける。
• 購入先ボタン（button-store）: グラデーションで塗った矩形タイル。左に白文字、右上に外部リンクのアイコン。2×2 で並べる。
• 金色の応募ボタン（button-primary）: 金のグラデーションで塗ったピル型。白文字は 2 行まで。
• 規約のスクロール枠（terms-scroll-box）: ピンクラベンダー地の角丸の枠。中に黒の小さな文字を入れ、枠内でスクロールさせる。

Do's and Don'ts

Do - 文字と面はグラデーションで統一する - 背景にはボケた光の粒と水面のテクスチャを敷く - 文字間を広くとり、余白を多めにする - カードは重ねたり傾けたりして、立体感を演出する - 金色はロゴと CTA だけに絞る

Don't - 本文を真っ黒の太字で詰めて組まない - 赤や黄の原色で値引きを訴求しない - 濃い影や太い枠線をつけない - 角ばった直線のセクション区切りを使わない - グラデーション以外の色を増やさない

Page Structure

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

1. ファーストビュー（季節の悩みと仕上がりを一言で伝える）: ボカした商品写真を全面に敷き、下部に白い半透明の箱を置く。中に小さなリードと、2 行のグラデーションコピーを入れる。
2. 限定品の告知（限定エディションであることを示す）: きらめき背景の角丸カードに限定ピルバッジを置き、巨大な英字グラデーション見出しを続ける。その下に六角形バッジを 3 つ組み、注釈を添える。
3. 仕上がりのイメージ（ツヤ髪への憧れを喚起する）: 白いカードに、ずらした矩形を背後に重ねた横顔の写真を置き、中央揃えで 2 行のコピーを入れる。
4. 処方コンセプト（独自のケア概念を紹介する）: 抽象的な CG のビジュアルに説明を添え、開閉ボタンで詳細を見せる。
5. 商品紹介（商品名と限定性を印象づける）: ハッシュタグ帯の上に大きな和文の商品名を置き、背景に細い線の英字を流す。ボトルは傾けて泡と一緒に配置する。
6. 動画（世界観を動画で見せる）: 角丸のサムネイルの中央に、白丸の再生ボタンを置く。
7. 特長 1（処方）（4 つの補修効果を順に説明する）: グラデーションの見出しとリードの後に、立体的なカルーセルカードを置く。左右の矢印は白丸ボタン。
8. 特長 2（成分）（限定成分の効果を説明する）: 見出しと本文の後に、傾けたグラデーションの成分カードを重ねて置く。
9. 香り（香りの魅力を伝える）: 英字見出しの下に、ブロブ形に切り抜いた花と果物の写真を左右交互に置き、テキストを添える。
10. ラインナップ（価格と購入先を示す）: ピンクラベンダー地に、商品写真と商品名・容量・価格を 2 分割で並べる。その下に購入先ボタンを 2×2 で置く。
11. キャンペーン（SNS の応募キャンペーンに誘導する）: 白いカードにバナー画像と紫の本文を置き、金色の応募ボタンを添える。
12. 応募規約（キャンペーンの条件を明記する）: 英字見出しの下に、規約のスクロール枠を置く。

Imagery

• 商品ボトルは乳白色の半透明。ラベンダーの光の中で、水しぶきや泡と一緒に撮る
• モデルはピンクベージュの艶髪の横顔。肌は柔らかい自然光で撮る
• 背景は水面のコースティクスとボケた光の粒を、紫系に色調補正する
• 成分や香りの素材（花びら・果実）は、淡い紫の地に真上や斜め上から撮る
• 抽象的な CG（透明なリボンや光の輪）で処方を表現する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 340px 幅の SP 版カラムを固定し、左右にきらめき背景を広げる
• PC の FV は横長で、商品写真を全面に敷き、左下にキャッチを置く
• PC の右余白に、キャッチと SNS アイコンを繰り返し配置する
• 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 行書くと起動時に読み込まれる。