DESIGN.md — コーラルレッド×淡ピンクのポップなヘアケアLP（Pop Coral Red Pastel Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ポップ・元気、かわいい、やさしい・柔らかい、情報量多め・訴求型
• キーワード: コーラルレッド・パステル・ポップ・SNS風・不定形切り抜き・繰り返しCTA
• 地の質感: 淡いグラデーションのピンク地や方眼紙柄の生成り地に、つやのある商品写真と水滴・クリームの質感素材を重ねる
• 形: 大きめの角丸カード、ピル型ボタン、円バッジ、波形の境界、上が丸いアーチ型の商品カード
• 温度感: 暖かめ。赤とピンクが主で、ペールブルーと濃紺のアクセントで締める

Colors

• 見出し・コピーは基本すべてブランドの赤で書く。黒い見出しは使わない
• 地色は生成り→淡ピンク→ペールブルー→赤を交互に切り替え、セクションの区切りを色で見せる
• 赤い地の上では購入ボックスを白にし、中のボタンは赤のままにする
• 濃紺は New バッジ・手順番号・成分ピルだけに絞る
• 2商品の比較は左右をピンク／ブルーに塗り分け、文字やボタンの色も列に合わせる
• 悩みのコピーは赤帯に白抜きの手書き風文字で載せる
• purchase-box は文字 #E94340 × 背景 #FEFEFE のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E52320、4.53:1）を使う。
• button-primary は文字 #FFF3EB × 背景 #EA443D のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC2018、4.52:1）を使う。
• pain-label は文字 #FFF3EB × 背景 #E94340 のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E52320、4.52:1）を使う。
• tab-heading は文字 #FFF3EB × 背景 #E94340 のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E52320、4.52:1）を使う。
• feature-card は文字 #E94340 × 背景 #FEFEFE のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E52320、4.53:1）を使う。
• product-arch-card は文字 #E94340 × 背景 #FEE0E0 のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E52320、4.5:1）を使う。
• sns-photo-card は文字 #E94340 × 背景 #FEFEFE のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E52320、4.53:1）を使う。

Typography

• 見出しは中央揃え。字間を広めにとって軽く見せる
• FVのキャッチは太字の段組で斜めに傾け、勢いを出す
• 大きく見せたい語だけを1.5倍に拡大し、前後は小さく添える
• 強調語は傍点、または白い帯に赤文字を抜く
• 赤地の端に巨大な英字を縦向きの淡い透かしで敷く
• 英字の見出しは極太で丸みのあるサンセリフを使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較・商品一覧のみ 2〜3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は左右に交互に寄せ、反対側にコピーを重ねる
• 購入ボックスはセクションごとに繰り返し置く
• 特長は大きな角丸の白カードにまとめ、上端にタブ見出しを重ねる
• 比較は画面を縦に二分し、左右の列を色で塗り分ける
• 商品一覧はアーチ型カードを2〜3列で並べる

Elevation & Depth

• 影はほぼ使わず、色の面で階層を作る
• 円バッジは白〜ピンクのグラデーションと淡い影で、ぷっくりした立体感を出す
• SNS風の写真カードは白い枠と弱い影で重ね置きする

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 不定形の有機的な形で切り抜く／角丸の長方形／上が半円のアーチ
• セクション境界: 波形の曲線と大きな円弧。一部は直線で色を切り替える
• 購入ボタンはピル型で、白い角丸ボックスの中に置く
• 見出しタブは平行四辺形の赤帯に、吹き出しの尾を付ける
• 特長カードは角丸32px程度に赤の細い枠線
• New バッジは濃紺の正円で、文字を斜めに入れる

Components

• 購入ボックス（purchase-box）: 白い角丸ボックスの上段に赤文字の案内と下向き矢印、下段に赤いピル型の通販ボタンを置く
• 通販ボタン（button-primary）: 赤いピル型。左にカートアイコン、中央に字間を広げたラベル
• 悩みの赤帯コピー（pain-label）: 赤い帯の上に手書き風の白文字を、行ごとにずらして重ねる
• 斜めタブ見出し（tab-heading）: 傾けた赤い平行四辺形に白文字。尾を付けてカードの上端に重ねる
• Newバッジ（badge-new）: 濃紺の正円に白い極太の英字を斜めに入れる
• 特長カード（feature-card）: 白地に赤の細い枠。中に見出し、下線付きの説明、図解、成分ピルを置く
• 成分ピル（ingredient-pill）: 濃紺の角丸ラベルを2列×2段に並べ、白文字に注釈番号を付ける
• 手順番号（step-number）: 濃紺の楕円に白の2桁英数字。赤地の上に縦に並べる
• アーチ型商品カード（product-arch-card）: 上が半円のパステル地に商品写真を置き、下部の赤い帯に購入ボタンを入れる
• SNS投稿風カード（sns-photo-card）: 白い枠付きの写真の下にハート・コメント・送信アイコンを並べ、カードを散らして重ねる

Do's and Don'ts

Do - 見出しと強調は赤で統一する - 購入ボックスを数セクションおきに繰り返す - 写真は不定形やアーチ型に切り抜き、柔らかく見せる - 水滴・クリーム・キラキラ星を余白に散らす - 地色をセクションごとに交互に切り替える

Don't - 黒や濃いグレーの太い見出しを使わない - 影の強いカードや角張ったボタンにしない - 濃紺を広い面に使わない - 写真を単純な四角だけで並べない - ピンクとブルー以外の比較色を足さない

Page Structure

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

1. ファーストビュー（仕上がりの効果を一目で伝える）: ペールブルー地に横顔のモデル。斜めの赤い大キャッチと円バッジ2つを置き、波形の境界から淡ピンクにつなげて商品と購入ボックスを見せる
2. 持続効果の訴求（長時間キープできることを示す）: 太陽から月へ回る円弧の矢印に、巨大な数字と短い説明を添える
3. 口コミ・SNS実例（仕上がりの実例と話題性）: SNS投稿風の写真カードを散らして重ね、下に赤い一言を置く
4. 新商品の告知（新タイプを紹介して購入へ導く）: 円弧で始まる赤地に白抜きの見出しと縦向きの英字透かし。商品写真と白い購入ボックスを置く
5. 悩みの提起（共感を得る）: 生成り地に不定形の写真4枚を左右交互に置き、赤帯の手書き風コピーを重ねる
6. 解決の提示（商品を解決策として示す）: 赤い大見出しの下に、モデルが商品を持つ写真
7. 2タイプ比較（自分に合う方を選ばせる）: 吹き出しタブと英字の大見出しの下で、ピンクとブルーの2列に分けて商品・特徴・購入ボタンを並べる
8. 特長・成分（仕組みの説得）: 方眼紙柄の地に角丸の白カード。図解と成分ピルを入れる
9. 香り（使い心地の情緒的な訴求）: 手書き風のサブ見出しに、写真2枚を段違いに並べる
10. 締めの購入（再度の購入導線）: モデル写真から波形の境界で淡ピンクにつなぎ、2商品と購入ボックスを並べる
11. 使い方（使うタイミングと手順の説明）: 英字の大見出しとピル型ラベル。タブで切り替えられる赤地に動画風の写真と番号付きの手順
12. 併用の提案（まとめ買いを促す）: 白いカードに円バッジ2つを×でつなぐ
13. 商品ラインナップ（シリーズ全体を見せる）: パステル色のアーチ型カードを2〜3列で並べる
14. ブランドメッセージ・フッター（世界観を伝えて締める）: 青空に浮かぶ商品写真。中央揃えの赤いメッセージ文、ロゴ、リンク

Imagery

• モデルは黒髪ロングのつやのある髪。明るく柔らかい自然光で撮る
• 商品は白背景で切り抜き、少し傾けて浮かせるように配置する
• 水滴・クリームのテクスチャ素材を商品の周りに添える
• 線画の星やキラキラ、太陽・月の簡単なアイコンをあしらう
• 図解は赤・ピンク・濃紺の単純なフラットイラストで描く
• 締めのビジュアルは青空に商品が浮かぶ構図
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅のカラムを置き、左右に背景を広げる形を推奨
• 比較や商品一覧は PC で 3〜4 列に広げてもよい
• 不定形の写真はサイズを大きくし、コピーを横並びに配置する
• 見出しサイズは PC で約1.3倍にする

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