DESIGN.md — オーロラパステルの艶ヘアケア LP（Iridescent Pastel Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: かわいい、清潔・爽やか、やさしい・柔らかい、上品・高級
• キーワード: オーロラグラデーション・パステル・三角形モチーフ・艶・透明感・字間広めの欧文見出し
• 地の質感: ホログラムのような虹色グラデーションに、ボケた光とガラス片風の三角形を重ねる。地は白と淡いグレーのフラット。
• 形: 三角形・菱形のジグザグ帯でセクションを区切る。ボタンは円・ピル。カードは小さめの角丸。
• 温度感: やや涼しめのパステル。ピンクで甘さを、水色で清潔感を出す。

Colors

• 地は白をベースにする。区切りにピンク→ラベンダー→水色のオーロラグラデーション帯を挟む。
• 悩み提起だけはモカブラウンの波模様の地にして、空気を変える。
• 成分訴求は水色の単色地に白カードを載せる。
• 強調色は3色まで。ピンク・水色・ラベンダーをラベルや円バッジに順番に割り当てる。
• イエローは原因の強調や手順バッジなど、要所だけに使う。
• 文字は真っ黒にせず、濃いグレーにする。
• worry-circle は文字 #FFFFFF × 背景 #EB95C3 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D72C87、4.57:1）を使う。
• tag-label は文字 #FFFFFF × 背景 #A0C3DE のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#3C7BAC、4.54:1）を使う。
• fragrance-card は文字 #C08AC8 × 背景 #F1EBF5 のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#994DA4、4.54:1）を使う。
• highlight-box は文字 #F5E04A × 背景 #B1878F のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#82555D、4.59:1）を使う。

Typography

• セクション見出しは小文字の英字を字間広め（0.3em）で置き、下に小さな日本語を添える。
• 英字見出しの上下や左右に細い罫を添える。
• 価格は数字だけ大きく細身にし、税込表記は小さく添える。
• 商品カテゴリー名を白抜きの大きな英字にして、図形に半透明で重ねる。
• 強調する語は色を変えて太字にする。下線は使わない。
• 本文は中央揃えで、短い行で改行する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は写真と説明を縦に積む。悩み・処方は2〜4列の円バッジにする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは中央揃え。英字見出しから始める。
• 商品は三角形の図形と商品写真を重ね、左右交互に配置する。
• 水色・グラデーションの帯の上に、白カードを浮かせて載せる。
• 円バッジは同じ大きさで横に並べ、SP では2列に折り返す。
• 手順は番号＋商品写真＋黄色の円バッジを横に並べる。SP では2×2にする。

Elevation & Depth

• 白カードには淡くて広い影（0 4px 16px rgba(0,0,0,.08)）をつける。
• 商品写真は切り抜きにし、影はほぼなしにする。
• 全体はフラットにし、奥行きはグラデーションと透明感で出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真にする。SNS の写真は角丸の正方形にする。
• セクション境界: 三角形・菱形が連なるジグザグのプリズム帯。悩みセクションは縦の波模様。
• 装飾の基本は、角を丸めた大きな三角形（再生ボタン形）。
• 悩み・フリー処方は円形バッジにする。
• ラベルは小さな角丸の長方形を色違いで並べる。

Components

• 英字セクション見出し（section-title-en）: 字間を広げた小文字の英字。下に罫で挟んだ小見出しを添える。
• 悩み円バッジ（worry-circle）: 色違いの円の中に、悩みを短い言葉で書く。4つ並べる。
• フリー処方円（free-circle）: 白い円に淡い色の太い縁をつけ、無添加項目を書く。7つ並べる。
• 特長ラベル（tag-label）: パステル色の小さな角丸ラベルに、特長を3つ並べる。
• 浮遊白カード（white-card）: グラデーション地や水色地の上に載せる、成分・コンセプト説明のカード。
• 商品三角ビジュアル（product-triangle）: グラデーションの三角形に商品写真と筆記体を重ね、半透明の英字を置く。
• 香りカード（fragrance-card）: 淡いラベンダーのカード。香名、果実の写真、三層のピラミッド図を縦に並べる。
• 手順バッジ（step-badge）: 大きな番号と商品写真の下に、黄色い円で効果を短く書く。
• 原因提示ラベル（highlight-box）: 白枠の小さなラベルの下に、黄色の太字で原因を書く。

Do's and Don'ts

Do - ピンク・ラベンダー・水色のオーロラグラデーションを主役にする。 - 三角形やプリズムのモチーフを、区切り・背景・商品の台座で繰り返す。 - 英字見出しは細身にして字間を広く取る。 - 余白をたっぷり取り、軽さと透明感を保つ。 - 悩み提起のセクションだけ暖色ブラウンにして、緩急をつける。

Don't - 原色の濃い赤・黒の大きなボタンを置かない。 - 純黒の太いゴシック見出しで重くしない。 - 角ばった重い影や立体ボタンを使わない。 - グラデーションの上に細かい本文を直接置かない（白カードに載せる）。 - パステル以外の彩度の高い色を増やさない。

Page Structure

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

1. ファーストビュー（艶の世界観と商品ラインを一目で伝える）: オーロラ光の背景に、ボトルを斜めに並べる。右に大きなキャッチと三角ロゴを置く。
2. ブランド導入（悩みを解決するブランドとして紹介する）: 白地の中央にロゴを置き、色違いの特長ラベルを3つ並べる。
3. コンセプト（シリーズの考え方を説明する）: グラデーション帯の上に英字と和文の見出しを置き、白カードで本文を見せる。
4. 悩みの提起（髪の悩みに共感を得る）: ブラウンの波模様の地に悩み円バッジを4つ置き、黄色字で原因を示す。毛髪の断面図を矢印で比較する。
5. 解決提示（ブランドが解決策であると示す）: 白地にロゴと、ラベンダー色のリード文を置く。
6. 成分・処方（技術的な裏付けを示す）: 水色地に白枠の見出しを置く。白カードの中で、ケア前後の比較図と成分を説明する。
7. ポイント（主要な特長を4つ提示する）: グラデーション地に、大きな横長カード1枚と小さなカード3枚を並べる。
8. フリー処方（やさしさを訴求する）: 白抜きの円バッジを横一列に7つ並べる。
9. 商品一覧（各商品と価格を紹介する）: 三角形のビジュアルと説明を左右交互に置き、価格と購入先ロゴを添える。
10. 詰め替え・限定品（関連商品を見せる）: 淡いグラデーション帯の上に半透明の英字を置き、商品を3列・2列で並べる。
11. 香り（香りの違いを伝える）: ラベンダーのカードを2枚並べ、果実の写真と香りのピラミッド図を入れる。
12. 使い方ステップ（ライン使いの手順を示す）: グレー地に番号と商品を4つ並べ、黄色の円で効果を添える。
13. SNS（公式アカウントへ誘導する）: オーロラ地にSNSアイコンを置き、角丸の正方形の写真を横に流す。

Imagery

• 透明ボトルを光の反射ときらめきで撮り、背景はパステルのボケにする。
• ホログラムやオーロラ風の虹色グラデーションに、ガラス片のような三角形を散らす。
• 毛髪のキューティクルを、イラストの断面図で円形に切り抜いて比較する。
• 果実・花・パールなど、成分や香りの物撮りを白背景で見せる。
• SNSの写真は単色のパステル背景で、テクスチャや商品を物撮りする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 60% の幅にコンテンツを置き、グラデーション帯は全幅で敷く。
• SP では商品の左右交互配置をやめ、ビジュアル→説明の縦積みにする。
• 悩み円は4つ横並びから2×2に、フリー処方円は7つ横並びから3〜4列に折り返す。
• 香りカードは PC の2列から SP の1列にする。
• ポイントの小カード3枚は、SP で縦に積むか横スクロールにする。
• SNS の写真は 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 行書くと起動時に読み込まれる。