DESIGN.md — 虹色パステル×ミントのヘアケア LP（Iridescent Pastel Gradient Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: かわいい、ポップ・元気、清潔・爽やか、やさしい・柔らかい
• キーワード: 虹色グラデーション・ミント・ピンク・波形区切り・三角モチーフ・余白多め
• 地の質感: ホログラムのような光沢のあるぼかしグラデーションと、フラットな白い面を組み合わせる
• 形: 波線で区切り、角丸カード・正円バッジ・角丸の三角形を使う
• 温度感: やや暖かいパステルに、ミントの爽やかさを加える

Colors

• 地は白を基本にする。区切りにミントの帯、パステル虹色グラデーション、茶色の悩みセクションを差し込む
• 強調はピンクの文字。ミントは帯と円形バッジに使う
• パステルは数色を同時に使う。ただしグラデーションかタグ程度の小さな面に留める
• 悩みセクションだけ茶色系にする。不快感を表し、ほかとの対比をつける
• 本文は濃いグレーで、真っ黒は使わない
• worry-circle は文字 #FEF2E9 × 背景 #78D7D3 のコントラスト比が 1.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#247B77、4.57:1）を使う。
• heading-frame は文字 #EE6FA0 × 背景 #FFFFFF のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E41B68、4.51:1）を使う。
• shop-pill は文字 #999999 × 背景 #FFFFFF のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#757575、4.61:1）を使う。

Typography

• セクション見出しは欧文小文字にし、字間を 0.3em ほど広くとる
• 強調したい語だけピンクの太字にする
• 大きな数字は細いサンセリフで大きく見せる
• 価格の数字は大きく、単位は小さくする
• 本文の行間は 1.8 前後でゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイントカードやタグは 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの上下に余白を広くとる
• 商品紹介は画像と文章を左右交互に置く
• 注釈は小さく、ブロックの下にまとめる
• 見出しは中央揃え、本文ブロックも基本は中央に置く

Elevation & Depth

• 白いカードに薄くぼかした影をつける
• 円形バッジに淡い影をつける
• ピル型ボタンは影なしで、細い線だけにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き。インスタグラム風の画像は角丸の正方形
• セクション境界: 柔らかい波線でセクションを区切る
• 悩みや成分のバッジは正円にする
• 角丸の三角形（再生マーク風）を背景の模様として繰り返す
• カードは角丸 8〜16px

Components

• 悩みの円形バッジ（worry-circle）: ミントの正円の中に、悩みを短い言葉で白抜きにする。4 つ並べる
• ポイントカード（point-card）: 上に写真、下に番号・ピンクの見出し・成分タグ・本文を置く白いカード
• 成分タグ（ingredient-tag）: 薄いグレーの小さな角丸タグに成分名を入れる
• 枠つきの見出しラベル（heading-frame）: ピンクの細い枠で囲んだ小見出し
• 不使用成分のリング（free-circle）: 白い太枠の円の中に成分名を入れ、横一列に並べる
• 店舗・EC へのピル型ボタン（shop-pill）: 白地にグレーの細い枠のピル型。中に店名やロゴを置く
• 商品紹介の行（product-row）: パステルの三角形の上に切り抜いた商品を置き、筆記体の飾り文字・商品名・価格を添える
• 香りのカード（fragrance-card）: 薄いミントまたはピンクのカードに、香りのピラミッド図を入れる

Do's and Don'ts

Do - パステルの虹色グラデーションとミントを主役にする - 波線の区切りと角丸三角形のモチーフを繰り返し使う - 欧文見出しは字間を広くとり、細めの書体にする - 強調はピンク、悩みや原因の強調は黄色を使う - 商品は切り抜き画像にして余白を多くとる

Don't - 黒や原色の強い面を使わない - 直線の硬い区切りにしない - 見出しを太く詰めた書体で組まない - 影を強くしすぎない - ピンクを広い面で使わない

Page Structure

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

1. ファーストビュー（商品の世界観と効果を一目で伝える）: 虹色グラデーションの背景に商品を並べ、大きな丸文字コピーを重ねる
2. ブランド導入（商品ラインを紹介する）: 波線の下にロゴを置き、3 色のタグで特長を示す
3. コンセプト（ブランドの考え方を伝える）: グラデーションの上に白い角丸カードを置き、中央揃えの文章を入れる
4. 悩みの提起（湿気による髪の悩みに共感する）: 茶色の地に水滴の模様を敷き、ミントの円形バッジを 4 つ並べる
5. 原因の説明（悩みの原因を図で見せる）: 黄色の強調見出しのあと、円形のイラストを矢印でつないで 3 段階で示す
6. 解決の提示（商品ラインが解決策だと伝える）: 白地にロゴとピンクの一文を置く
7. 処方の解説（技術の仕組みを図で説明する）: ミントの帯に白いカードを置き、色違いの 3 段階の図を並べる
8. 特長（ポイント）（配合成分を訴求する）: グラデーションの上に白いポイントカードを並べ、不使用成分をリングで示す
9. 商品一覧（商品ごとの詳細と価格を見せる）: 三角形の背景に切り抜いた商品を置き、左右交互に並べる
10. 使い方（使うタイミングと量を示す）: グラデーションの枠のカードに、昼と夜の 2 枠と使用量の表を入れる
11. 香りの紹介（香りの違いを伝える）: ミントとピンクの 2 枚のカードに、ピラミッド図を入れる
12. 使用ステップ（使う順番を示す）: 大きな番号と商品画像の横にミントの円形バッジを添え、5 段階で見せる
13. SNS（投稿を見せて親近感を出す）: グラデーションの帯に角丸の画像を横スクロールで並べる
14. 販売店・EC（購入先へ誘導する）: ピル型ボタンを格子状に並べる

Imagery

• ホログラムのような虹色のぼかしグラデーション。光の筋や水面の反射を入れる
• 商品は白い背景で切り抜き、泡やテクスチャを添える
• 髪や仕組みの図は、パステルの線画イラストで描く
• 角丸三角形を、半透明のパステルで背景に散らす
• 香りの原料は、果実や花の切り抜き写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 900px 幅で組み、背景のグラデーションは全幅にする
• SP ではポイントカードを 1〜2 列に落とす
• SP では商品紹介の行を、画像の下に文章を置く縦積みにする
• SP では使用ステップを横スクロールか 2 列にする
• 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 行書くと起動時に読み込まれる。