DESIGN.md — ピンク×パステルの遊園地風ヘアケアLP（Candy Pink Dreamland Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: キャンディピンク・泡・クリームの形・パステルの色分け・遊園地の背景・太い欧文・白抜きの線文字
• 地の質感: フラットな面に、柔らかい写真と水彩風の香り素材を重ねる。光沢のある3D風の背景。
• 形: 波形・液だれのブロブ、大きめの角丸カード、ピル型ボタン
• 温度感: 暖かく甘い。ピンク中心で、ラインごとに紫とミントを入れて温度を少し下げる

Colors

• ピンクの面と白地を、波形の境界で交互に重ねる
• 商品ラインごとに、ピンク・紫・ミントでタグ・見出し・地色をそろえる
• ライン用の地色は淡いグラデーションにし、濃い色はタグと見出しだけに使う
• CTAはピンクの塗りに白文字。白地のサブボタンはピンク文字にする
• 黒は使わず、文字は濃いグレーか各ラインの濃い色にする
• ショップ一覧は濃いサーモンピンクの帯に、白いピルを並べる
• button-cart は文字 #FFFFFF × 背景 #FC6585 のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EC0536、4.52:1）を使う。
• button-shop は文字 #FF6684 × 背景 #FEFEFF のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EB002E、4.56:1）を使う。
• blob-point は文字 #FF6684 × 背景 #FEFEFF のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EB002E、4.56:1）を使う。
• circle-keyword は文字 #FF6684 × 背景 #FEE5EC のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EB002E、4.53:1）を使う。
• product-card は文字 #FF6684 × 背景 #F5DEF1 のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EB002E、4.51:1）を使う。
• shop-pill は文字 #FF6684 × 背景 #FEFEFF のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EB002E、4.56:1）を使う。
• speech-title は文字 #FF6684 × 背景 #FEFEFF のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EB002E、4.56:1）を使う。

Typography

• 英字の大見出しは、太い塗りと細い白抜き線を使い分ける
• セクション名の英字は、白抜きの線文字かぼかしたピンクで装飾として置く
• 日本語見出しは太めのゴシックにし、語尾にハートなどの記号を添える
• ポイント番号は小さい英字と数字を見出しの左上に添える
• 背景に英字を繰り返し並べた帯を置き、区切りに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードは縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真とテキストのブロブは、左右交互にずらして置く
• ステップカードは白い角丸カードに、商品写真と説明を横に並べる
• 香りの説明はトップ・ミドル・ベースの3段を斜めの帯に散らす
• ショップ一覧は白いピルを3列（SPは2列）のグリッドに並べる
• FAQはピンクの帯を縦に積むアコーディオンにする

Elevation & Depth

• ピルボタンに、うっすらピンク色の影をつける
• 商品写真やブロブには、柔らかい影を薄くつける
• カードは基本フラット。影はごく弱くする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 泡・液だれ・雲のような有機的なブロブで切り抜く。商品は切り抜きで置く
• セクション境界: 大きな波形のカーブ。ミルクがはねたようなしぶきも使う
• 直線的な区切りは避け、波とブロブで区切る
• キーワードは淡いピンクの円を重ねたバッジにする
• タグはハッシュ付きの小さな角丸の帯にする

Components

• カートボタン（button-cart）: ピンクのピル型で、アイコンと白文字を入れる
• オンラインショップボタン（button-shop）: 白地のピル型で、ピンク文字と下向き三角を入れる
• ポイントのブロブ（blob-point）: 液だれ形の白い面に、番号・太い英字・短い説明を置く
• ステップカード（step-card）: 白い角丸カードに、筆記体の番号・見出し・成分タグ・商品名を入れる
• ハッシュタグのタグ（hashtag-chip）: ラインの色で塗った帯に、白文字で悩みのキーワードを入れる
• 円形のキーワード（circle-keyword）: 淡いピンクの円を2つ重ね、中に効果の言葉を入れる
• 商品カード（product-card）: 淡いピンクの角丸カードに、太い英字の商品名・価格・ボタン2つ・商品写真を入れる
• FAQの帯（faq-bar）: ピンクの帯に、白文字の質問と右端のプラスを入れる
• 店舗名のピル（shop-pill）: 白いピルにピンク文字。濃いピンクの帯の上にグリッドで並べる
• 吹き出し型の見出し（speech-title）: 白いピルの下に三角をつけ、診断の問いかけを入れる

Do's and Don'ts

Do - ラインごとの色（ピンク・紫・ミント）を、タグ・見出し・地色まで一貫させる - 泡やクリームの形を、ブロブや区切りに繰り返し使う - 英字の大見出しで、ポップなリズムを作る - ボタンはすべてピル型にする - 香りの説明は水彩風の果物・花・紅茶の素材で添える

Don't - 黒や原色の濃い青を使わない - 直角のカードや、直線だけの区切りにしない - 明朝体や渋い色で、大人っぽくしすぎない - ラインの色を混ぜて使わない - 文字を詰め込みすぎず、ブロブの余白を残す

Page Structure

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

1. ファーストビュー（コラボの告知と発売日の提示）: 遊園地の背景に人物写真をハート形の枠で置き、太い白文字で日付を入れる。周りはピンクの帯
2. コンセプト（ブランドの世界観を伝える）: 白地にピンクの大きな英字スローガンを置く。続けてピンクの波形の面に、泡と商品写真、短い詩的な文を並べる
3. 3つのポイント（体験の価値を3つの言葉で示す）: 遊園地の背景に、液だれ形の白いブロブと商品写真のブロブを左右交互に置く
4. 使い方のステップ（2つの商品を使う手順を示す）: ピンク地に白いカードを2枚置き、ミルクのはねた区切りにつなげる
5. タイプ診断（好みのラインを選ばせる）: 吹き出し型の問いかけの下に、2軸のマトリクスと3つの円形アイコンを置く
6. ライン紹介（3ラインの効果と香りを紹介する）: ラインごとに地色を変え、白抜きの英字・タグ・香りの3段・紅茶の水彩画を並べる
7. 商品一覧（購入への誘導）: 英字を繰り返す帯の下に、淡いピンクの商品カードとボタン2つを並べる
8. よくある質問（不安の解消）: ピンクの帯を縦に積むアコーディオン
9. 取扱店舗（購入先の案内）: 濃いピンクの帯に白いピルのグリッドを置き、カートのイラストを添える
10. SNS・お知らせ（最新情報の発信）: 遊園地の背景に、投稿カードの横並びと白いピルのお知らせ一覧を置く
11. フッター（ナビゲーションとSNSへの導線）: ピンクの面に白いロゴ・SNSアイコン・リンクを並べる

Imagery

• お菓子と観覧車がある夢の遊園地を、3D風のパステル調で描く
• 商品は真上か正面からの切り抜きにし、泡やクリームを添える
• 香りの素材（果物・花・紅茶・シナモン）は水彩風のイラストにする
• ミルクがはねたような白い液体のしぶきを、区切りに使う
• 人物写真は明るく、ピンク系の衣装で統一する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約900px幅で組む。SPは1カラムに積む
• 左右交互のブロブは、SPでは写真とテキストを縦に重ねる
• 商品カードはPCで2+1の配置、SPでは1列にする
• 店舗のピルはPCで3列、SPでは2列にする
• 大きな英字見出しは、SPで画面幅の85%程度に縮める

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