DESIGN.md — 生成り地にピンク×ブルーの手書きポップなヘアケアLP（Pop Fresh Haircare Spray LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ポップ・元気、清潔・爽やか、かわいい、親しみ・手作り感
• キーワード: 生成り地・香り別カラー・手書き見出し・人物写真・ビフォーアフター・線画イラスト
• 地の質感: フラットな単色面。紙っぽい生成り地に、果物の写真と線画イラストを重ねる
• 形: 四角い色帯ラベルと四角い写真。シーン提案だけ白い円形バッジにする
• 温度感: 明るく軽い。やや暖かい生成りに、寒色と暖色をバランスよく置く

Colors

• 地はほぼ生成りの#F6F8ECで統一する。No.1セクションだけ少し黄みのクリーム地にする
• 香りの種類ごとにイエロー・ティール・ピンクを割り当て、キャップ色・装飾・キラキラアイコンの色をそろえる
• ピンクとブルーは左右で対にして、シーン比較やビフォーアフターに使う
• 大見出しはブルーで書く。強調する語だけピンク地に黄文字のボックスにする
• 黒地は動画セクションだけに使い、ほかは明るさを保つ
• 本文は黒、注釈はグレーの小さい文字で右寄せにする
• color-band-label は文字 #FEFEFD × 背景 #EB5B91 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E31C66、4.5:1）を使う。
• highlight-box は文字 #FEE414 × 背景 #EB5B91 のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E31C66、4.54:1）を使う。
• before-after-pair は文字 #FEFEFD × 背景 #439DDA のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#247BB7、4.53:1）を使う。
• award-laurel は文字 #30B5B0 × 背景 #FFFCE9 のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#22817D、4.52:1）を使う。

Typography

• 見出しは太い丸ゴシック、香りの名前は手書き風フォントにして、硬さを分ける
• 1つの見出しの中で色を2色に分け、言いたい語だけ大きくする
• 本文は2行程度の短い文を中央か左寄せで置く
• 英字ラベルは太いセリフ体か、細いサンセリフ体を黒帯の中に置く
• 注釈は※付きの小さい文字で、右下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介は商品画像を左、説明を右に置く2分割。シーンとビフォーアフターは左右2つ並び、バッジは4つ並び
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• FVと人物写真は画面幅いっぱいに置く
• 香りの紹介は同じ型を3回繰り返す
• 左右2つの比較は8px程度の隙間でほぼ全幅に並べる
• 円形バッジは等間隔で4つ並べる
• No.1セクションは商品3本を横に並べ、下に斜めの色面を敷く

Elevation & Depth

• 影はほぼ使わずフラットにする
• 白カードは生成り地との色の差だけで浮かせる
• 商品画像だけ、ごく薄い影で立体感を出してよい

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの四角。商品は背景を切り抜く
• セクション境界: 直線で色を切り替える。最後のセクションだけ斜めのティール面を入れる
• 色帯ラベルは角丸なしの長方形にする
• シーン提案のバッジは白い正円にする
• 強調ボックスは角丸を小さく（約8px）する
• 四角い4点のキラキラアイコンを見出しの脇に添える

Components

• 香り紹介ブロック（scent-feature-block）: 左に商品2サイズ、右にサブキャッチ、手書きの香り名、果物の写真、2行の説明を縦に並べる
• 色帯ラベル（color-band-label）: 写真の下に大きな色文字の見出しを置き、その下にピンクかブルーの帯と白文字の説明を入れる
• シーン円形バッジ（scene-circle-badge）: 白い円の中に青文字2行と、ピンク・黄の線画アイコンを入れる。4つ並べる
• 強調ボックス見出し（highlight-box）: ブルーの見出しの中で、強調語だけピンク地に黄色文字で囲む
• ビフォーアフター比較（before-after-pair）: 左はブルー地、右はピンク地にする。上部に白いセリフ体の英字を置き、髪のアップ写真と黄色の手描き線を重ねる
• 使い方カード（howto-card）: 白カードに黒帯の英字ラベルと箇条の本文を置き、右に線画イラストと吹き出しを入れる
• No.1実績バッジ（award-laurel）: ティールの月桂樹で囲み、大きなセリフ体のNo.1と小さな見出しを入れる
• 動画枠（video-frame）: 黒地の中央に動画を置き、手書き文字の説明と再生アイコンを重ねる

Do's and Don'ts

Do - 香りごとの色を、商品・アイコン・装飾まで一貫させる - 手書き風の見出しで、親しみやすさを出す - 左右の比較は必ずピンクとブルーの対にする - 地を生成りにして、全体を明るく軽く保つ - 効果をうたう表現には※注釈を付ける

Don't - 暗い地や重いグラデーションを多用しない - ボタンやラベルに大きな角丸や濃い影を付けない - 香りの色を混ぜて使わない - 長い本文の段落を置かない - 明朝体を見出しに使わない

Page Structure

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

1. ファーストビュー（手軽さと気持ちよさを一目で伝える）: 商品を使う女性の写真を全幅で置き、左上に青とピンクの丸ゴシックで3行のキャッチを重ねる
2. 香りのラインナップ（香りの違いを見せて選ばせる）: 生成り地に香り紹介ブロックを3回繰り返す。それぞれ色を変える
3. 使い方動画（使い方を動画で見せる）: 黒地に動画枠を置き、手書きのテロップを入れる
4. 利用シーン（いつ使うかを想像させる）: 青の大見出し、2枚の人物写真と色帯ラベル、4つの円形バッジの順に並べる
5. ビフォーアフター（効果を目で見せる）: 強調ボックスの見出しの下に、ブルーとピンクの2枚を並べる
6. 使い方（手順を簡潔に説明する）: 白カードに黒帯のラベル、本文、線画イラストと吹き出しを入れる
7. 実績・商品一覧（売上実績で信頼を得る）: クリーム地に月桂樹のNo.1を置き、商品3本を並べる。背景にティールの斜めの面を敷き、下に出典の注釈を入れる

Imagery

• 人物は明るい白背景で撮り、笑顔や自然な表情で商品を手に持つ
• 果物はみずみずしいアップで、断面を見せる
• 商品は背景を切り抜き、大小2サイズを重ねて置く
• 線画イラストは黒の単線で描き、ピンクと黄色を少し差す
• 黄色の手描きの線やぐるぐるで動きを表す
• 4点のキラキラ記号を見出しの脇に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像はないため、SPの1カラムを中央に置く（最大幅約750px）ことを推奨する
• PCでは、香りの3ブロックを横並びのカードにしてもよい
• 円形バッジとビフォーアフターは、PCでもそのまま横並びにする
• FV写真は横長に切り取り、キャッチを左側に置く

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