DESIGN.md — 朱橙×ローズ装飾のうる艶ヘアオイル通販LP（Rose Orange Glossy Hair Oil Direct Response LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 情報量多め・訴求型、上品・高級、やさしい・柔らかい
• キーワード: 朱橙・ローズ装飾・金のきらめき・明朝の大見出し・手書き口コミ・繰り返しCTA
• 地の質感: 白や淡いグレーの地に、写真・花の切り抜き・金のスパークルを重ねた光沢感のある質感。
• 形: 角の立った四角い帯と写真フレームが基本。緑のボタンだけ角丸で立体的にする。成分写真は円形に切り抜く。
• 温度感: 暖色寄り。朱橙と金で温かく、ピンクのローズで女性らしい柔らかさを足す。

Colors

• 地は白と淡いグレーを交互に置き、朱橙は帯見出しと強調語だけに絞る
• 購入ボタンは緑に固定する。単品の小さいプランだけグレーのサブボタンにする
• 価格ブロックはえんじの帯で始め、1本あたり価格をマゼンタの大きな数字で見せる
• 受賞・ランキングは金のグラデーション文字と金のメダルで表現する
• 悩み・デメリットはダークグレー帯でトーンを落とし、解決パートで朱橙へ戻す
• 口コミの重要部分には黄色マーカーを引く
• button-primary は文字 #FFFFFF × 背景 #53940B のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#4A830A、4.62:1）を使う。
• button-secondary は文字 #F4F2F3 × 背景 #8A8A8A のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#6F6F6F、4.51:1）を使う。
• band-heading は文字 #F4F2F3 × 背景 #EA531E のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C54112、4.55:1）を使う。
• ingredient-icon は文字 #F4F2F3 × 背景 #EA531E のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C54112、4.55:1）を使う。
• award-badge は文字 #F4F2F3 × 背景 #B1964E のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#816D39、4.51:1）を使う。

Typography

• 見出しは明朝で組み、強調語だけを1.4倍ほどに拡大して朱橙かマゼンタにする
• 助詞は小さく、キーワードは大きくするジャンプ率の高い組み方にする
• 口コミ本文は手書き風の書体にして生の声らしさを出す
• Step・Point・User's Voiceなどの欧文は細いスクリプト体を添える
• 価格の数字はセリフ体の斜体で大きくし、税込表記は小さく添える
• FVのキャッチは縦書きの明朝で写真の右側に配置する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分アイコンは 4〜5 列、使い方は朝夜の 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 画像主体のセクションは全幅、テキストのカードは左右4%の余白をとる
• 価格ブロック（3プラン＋お試し）をFV直後・中盤・末尾の3回置く
• 口コミカードは少し傾けたり重ねたりして雑誌のコラージュ風に並べる
• 成分は番号付きの章（1〜4）で区切り、細い朱橙の罫線で分ける
• 見出しの左右には斜めの短い線を置いて囲む

Elevation & Depth

• 購入ボタンは上から下への緑グラデーションと下側の濃い影で立体的にする
• 写真フレームは白フチとドロップシャドウでポラロイド風にする
• 口コミカードには薄い影をつけ、紙が重なっているように見せる

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物と施術写真は白フチ付きの四角で少し傾ける。成分とビフォーアフターの比較は円形に切り抜く
• セクション境界: 基本は直線の切り替え。帯の下に三角の矢印を付けて次のセクションへつなぐ
• ボタンの角丸は8px程度にとどめ、ピル型にしない
• 帯見出しは角の立った長方形
• 成分ラベルは朱橙の小さな四角
• NG番号は×印と手書き風の数字で示す

Components

• 緑の購入ボタン（button-primary）: 幅90%、グラデーションと影のある立体的な緑ボタン
• グレーのお試しボタン（button-secondary）: 単品の小容量用。小さめのグレーのボタン
• プラン価格ブロック（price-block）: えんじ帯にプラン名、左に商品の写真、右に取り消し線の通常価格とマゼンタの大きな価格
• プラン帯（plan-ribbon）: ▼記号付きの白文字を入れた全幅のえんじの細い帯
• 朱橙の帯見出し（band-heading）: 全幅の朱橙の面に白い明朝見出しを置き、下に三角を付ける
• 手書き口コミカード（review-card）: 朱橙かピンクのタイトル帯、罫線ノート風の白い本文、黄色マーカー、末尾に名前と日付
• NG項目見出し（ng-heading）: ×NG番号と、ダークグレーの帯に白い明朝の2行見出し
• 成分円アイコン（ingredient-icon）: 円形の素材写真の下に朱橙のラベルを付けて横に並べる
• 金メダルバッジ（award-badge）: ランキングや受賞を示す金の円形メダル。FVの上部にも並べる
• 使い方ステップ（step-item）: スクリプト体のStep番号、点線、イラストの丸枠と説明文

Do's and Don'ts

Do - 見出しは明朝で組み、キーワードだけ朱橙で拡大する - セクションの区切りにローズの花と金のきらめきを添える - 価格とCTAのブロックを複数回繰り返す - 口コミは手書き風の書体とマーカーで生の声らしく見せる - 権威付け（メダル・雑誌・TV・SNS）を前半にまとめて置く - 注釈「個人の感想」を小さく必ず添える

Don't - 購入ボタンを朱橙やピル型にしない - 全体を寒色やモノトーンだけにしない（ダーク帯は悩みパートに限る） - 見出しを細いゴシックだけで組まない - 余白を広くとりすぎて情報密度を下げない - ローズ装飾をテキストの上に重ねない

Page Structure

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

1. ファーストビュー（悩みの解決と実績を一目で伝える）: 笑顔の女性の写真に縦書きの明朝キャッチ、上部に金メダル、商品のボトル、円形の特長バッジを3つ
2. 価格・CTA（すぐ購入したい層を取り込む）: えんじ帯付きのプランを3つと小容量のプランを1つ、緑ボタン
3. SNS・雑誌・TV実績（社会的な証明）: グラデーションの帯見出し、投稿写真のコラージュ、雑誌表紙の一覧、朱橙帯のTV紹介と吹き出し
4. ランキング・受賞（信頼性の訴求）: 淡い金の地に金メダルを2つ、月桂樹とNo.1表記
5. 悩みの提起（クセ毛の悩みに共感する）: ピンク地のキャラクターイラストと髪の写真に白い明朝
6. お客様の声（使用感を伝える）: 番号付きの白カードに太い明朝のタイトル、手書きの本文、写真2枚
7. 悩み詳細とプロの推薦（対象者を絞り、専門家の推薦で裏付ける）: ダークグレー地に円形の髪写真を3つ、朱橙帯の見出しと美容師の写真、ビフォーアフター
8. 香りの訴求（付加価値を伝える）: 髪をなびかせる写真に花びらとローズ、マゼンタの強調語
9. 競合施術のデメリット（代替手段を否定する）: 警告アイコン、黄色マーカーの見出し、NGの1〜3をダーク帯で
10. 解決策の提示（商品の価値に転換する）: 朱橙の帯と木目調の髪の背景に、オイルの雫と縦書きコピー
11. 口コミ一覧（大量の声で後押しする）: 花びらの背景に手書きカードを重ねてコラージュ
12. 成分・ヒミツ（効果の根拠）: 朱橙グラデーションの見出し、大きな斜体番号の1〜4、円形の成分アイコン
13. 使い方（使用イメージを持たせる）: 朝夜の2色分割、使用量の目安、Stepの1〜4とPoint
14. クロージングCTA（最終の購入）: ローズ装飾の締め見出しと価格ブロックの再掲

Imagery

• 艶のあるロングヘアの女性写真。明るい自然光で、肌は柔らかく見せる
• ピンク・白・赤のローズやラナンキュラスの切り抜きをセクションの角に置く
• 金色のスパークルや光の粒を見出しの周りに散らす
• ビフォーアフターは同じ角度で並べ、矢印でつなぐ
• 成分の素材は円形に切り抜いた接写の写真
• 悩みの表現にはたわしなどを擬人化したゆるいキャラクターを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央にSP幅（約750px）のカラムを固定し、左右は淡いグレーの地にする
• 価格ブロックとCTAはPCでも縦積みのまま、ボタン幅は最大480px
• コラージュや成分アイコンは列数を増やしすぎず、SPの構成を保つ
• 見出しの文字サイズは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 行書くと起動時に読み込まれる。