DESIGN.md — オーロラ虹彩と泡玉のツヤ髪ヘアケアLP（Iridescent Aurora Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、清潔・爽やか、情報量多め・訴求型
• キーワード: オーロラグラデーション・透明な泡玉・ホログラム光沢・明朝の大見出し・ダークな悩みパート・繰り返す購入カード
• 地の質感: シルク布や光の反射のような虹彩グラデーション。キラッとした星形の光と半透明の泡玉を重ねる。悩みパートはざらついたグレーのコンクリート調。
• 形: 購入カードは白で角丸は小さめ。CTAはピル型。成分は円形の泡玉、ポイント番号は黒い丸バッジ。
• 温度感: 寒色寄りで、ピンクとラベンダーを差して華やかさを出す。悩みパートだけはグレーで冷たく沈める。

Colors

• 基本の地は水色・ラベンダー・ピンクの淡い虹彩グラデーションにする。彩度は低めにして明るく保つ。
• 悩みパートと原因説明だけはグレーのコンクリート調に切り替え、白文字と黒帯で構成する。
• 購入ボタンはティール1色に限定し、他の要素にティールを広く使わない。
• 価格と最重要の強調語はマゼンタで表す。
• 成分ラベルはくすみローズ・金・ティール・紫を、成分の系統ごとに塗り分ける。
• 見出しは墨色の明朝が基本。ブランドを示すラベルにだけ紺青を使う。
• button-primary は文字 #F0FEFF × 背景 #35B2AA のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#26817B、4.51:1）を使う。
• button-sub は文字 #35B2AA × 背景 #FDFDFE のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#26817B、4.58:1）を使う。

Typography

• 情緒的な大見出しは明朝、機能説明はゴシックと使い分ける。
• 大見出しでは、キーになる語だけを1.5〜2倍に拡大して緩急をつける。
• 英字のシリーズ名は細めのサンセリフで、字間を広く取る。
• 価格の数字は極太のゴシックで大きくし、税込などの単位は小さく添える。
• 成分の注釈は※番号つきで、カード下に小さくまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較カード・小ボタン・他商品リストは 2 列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の背景帯で区切り、中身は左右に約20pxの余白を取る。
• 購入カードはページ内に3回くり返す（FV直後・特長の途中・終盤）。
• 悩みは写真と黒帯テキストを左右交互にずらして3つ並べる。
• POINT番号バッジはセクションの境目にまたがるよう配置する。
• 成分は泡玉を三角形やペアに配置し、線でつなぐ。

Elevation & Depth

• 購入カードは白地に弱い影（0 4px 12px rgba(0,0,0,.15)）をつける。
• CTAボタンの下側に濃い影を落とし、押せる感じを出す。
• 泡玉はハイライトと内側の影で立体的な球体に見せる。
• 他商品のボタンは細い枠と小さな影で浮かせる。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物と髪は角丸なしの矩形か全幅。使い方の手順写真は円形。商品は切り抜いて泡玉や布の上に置く。
• セクション境界: 基本は直線の背景切替。悩みパートの終わりだけ下向きのV字で次へつなぐ。
• 主CTAとサブボタンはピル型にする。
• 成分や訴求ワードは円形の泡玉に入れる。
• 比較カードは見出し帯つきの小角丸にする。
• ラベル帯は角丸なしの矩形で、横方向のグラデーションをかける。

Components

• 購入ボタン（button-primary）: ティールの太いピル型。左に白丸の再生アイコン、下に濃い影をつける。
• 単品購入ボタン（button-sub）: 白地にティール枠のピル型を2列に並べる。上部に商品名の小ラベルを乗せる。
• 購入カード（purchase-card）: 上半分は虹彩背景に商品画像、下半分は送料無料の枠バッジ・マゼンタの価格・CTA。
• 泡玉バッジ（bubble-badge）: 半透明の球体の中に、小さな前置き文と紺の明朝キーワードを入れる。
• POINT番号（point-number）: 黒い円に細い金縁。小さなPOINTの英字と大きな明朝数字を入れる。
• グラデーション帯ラベル（gradient-label）: 青〜紫のホログラム調の横帯に白文字。鍵アイコンを付けることもある。
• 悩み黒帯（worry-band）: 写真に重ねる半透明の黒帯。白文字で、強調語は太字にする。
• 比較カード（compare-card）: 健康な状態はローズ、傷んだ状態は黒の見出し帯。断面イラストと説明文を入れて2列に並べる。
• 成分タグ（ingredient-tag）: くすみローズや金の小さな矩形に白文字の成分名。間を×でつなぐ。

Do's and Don'ts

Do - 背景は淡い虹彩グラデーションか、シルク布のテクスチャにする。 - 星形の光と泡玉を余白に散らして、ツヤ感を演出する。 - 悩みパートだけを暗いグレーにして、明暗の対比で解決を際立たせる。 - 購入カードは同じデザインのまま複数回挿入する。 - 髪の断面イラストを使い、ダメージの仕組みを図で説明する。

Don't - CTAにティール以外の色を使わない。 - 濃い原色のベタ塗りで面を大きく塗らない（悩みパートは除く）。 - 見出しをすべてゴシックにしない。情緒的な見出しは明朝にする。 - 泡玉や光の装飾を本文の上に重ねて可読性を下げない。 - 角の大きい丸カードを多用しない。基本は小角丸にする。

Page Structure

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

1. ファーストビュー（ツヤの世界観と商品を印象づける）: 虹彩背景にボトル2本を置き、ひし形バッジとグラデーション帯コピー、光沢明朝の大見出し、英字シリーズ名を重ねる。
2. 3つの効果（効果の要点を一目で伝える）: 後ろ姿の髪写真の上に、泡玉バッジを3つ配置する。
3. 香り紹介（香水のような香りで情緒的に訴求する）: 装飾枠の説明文、花と果実を散らした商品写真、TOP/MIDDLE/LASTの三角形チャートを並べる。
4. 購入CTA（早い段階で購入へ導く）: 購入カードと、2列の他商品リストを入れたグレーの箱。
5. ブランドコンセプト（シリーズの独自性を語る）: シルク布の背景に、中央揃えのゆったりした行間の短文を置く。
6. 悩みの提起（読み手の悩みに共感する）: グレーのコンクリート地に、写真と黒帯テキストを左右交互に3つ並べる。
7. 解決の鍵・原因説明（美髪の条件とダメージの仕組みを示す）: 白カードに鍵付きのグラデーション帯を入れる。断面イラストのグレーカードに黒ラベルを添える。
8. 解決提案（Wアプローチで解決できることを提示する）: 明るいグラデーション地にマゼンタの強調語。×でつないだ帯2本と、人物写真に縦書きの明朝コピー。
9. 特長POINT1〜3（処方と成分の根拠を示す）: 黒丸の番号バッジ、明朝の大見出し、比較カード、成分タグ、泡玉図解、※注釈。
10. 共通成分（シリーズ全体の品質を伝える）: ボトルを横一列に並べ、洗浄成分の円2つを×でつなぐ。系統別に色分けした成分の円をカードに入れる。
11. シリーズ比較（自分に合うタイプを選ばせる）: 方眼背景の白カードに、縦横の軸を使ったポジショニングマップ。各タイプを色付きの半円ラベルで示す。
12. 使い方（使用手順を示す）: 紺の帯に英字見出し。円形写真とstep番号を左右交互に置き、アウトバス商品は白カードで紹介する。
13. 安心訴求（無添加と国内製造で安心感を出す）: 研究室の写真の下に、斜線入りの円6つを3×2で並べる。英字の明朝見出しを添える。
14. キャンペーン（期間限定の特典を告知する）: オレンジ系の欧文セリフ大見出し、円形の期間限定バッジ、ギフト包装の写真。

Imagery

• 商品は光沢のある反射面に置き、青白い逆光とキラキラした粒子を添える。
• 背景はパステルの水色・ピンク・紫が溶け合うシルク布や、ホログラム光。
• 人物は、ツヤのある長い髪の女性を白背景で撮る。悩みカットは髪先を気にする表情。
• 髪の断面は3DCG風の茶色い円柱で描き、ダメージは剥がれたうろこ状に表す。
• 装飾は透明な泡玉、四芒星のきらめき、花や果実の切り抜き。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではSPと同じ1カラムを中央に約420px幅で置き、左右は淡い水色のグラデーション背景で埋める。
• PCでは上部に細いグローバルナビ（ロゴと小さなテキストリンク）を横長に置く。
• PCで本文要素を広げることはせず、SPのデザインをそのまま縮尺表示する。

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