DESIGN.md — 杏色グラデと黒茶の白髪ケア LP（Warm Apricot Gradient Hair Color Treatment LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 杏色グラデーション・明朝見出し・円形バッジ・黒茶の悩みセクション・オレンジ強調・ラボ感
• 地の質感: 柔らかい光のグラデーション地。ガラスの実験器具や水滴・分子の写真が透明感を出す
• 形: 円形の吹き出しや成分写真、ピル型ラベル、細いオレンジ線の角ばった手順枠を組み合わせる
• 温度感: 暖色寄り。杏色とオレンジの温かさを黒茶で引き締める

Colors

• 地は杏色→ピーチ→生成りと、下に行くほど明るくするグラデーションにする
• 悩みの提起と概念説明だけ黒茶の暗い地にして、空気を切り替える
• 強調語はオレンジのゴシック体にし、残りの文は茶色で書く
• ラベルは2色を使い分ける。主はオレンジのピル、補助は焦げ茶のピル
• ケアの種類は水色とオレンジの2色で区別する
• カードとFAQは白い面にし、オレンジの細線で区切る
• label-pill-primary は文字 #DBDBD7 × 背景 #F07A1E のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#99490A、4.57:1）を使う。
• free-badge は文字 #8A8078 × 背景 #FEFEFC のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#7D736C、4.58:1）を使う。

Typography

• 大見出しは明朝。キーワードだけ文字を大きくしてジャンプ率をつける
• 文中の強調はオレンジの太字ゴシックにする
• 注釈は※番号を付けて小さく添える
• 見出しは中央揃え、本文やFAQは左揃え
• 日本語の見出しの下に英字のサブ見出しを小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分は 2 列、髪の長さ別の使用量は 3 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色を変え、余白でつなぐ
• 見出しは中央揃えにし、その下にビジュアルを大きく置く
• 手順は全幅の枠を縦に積む
• 背景に下向きの大きな矢印を薄く敷き、手順の流れを見せる
• FAQは白いカードを縦に並べる

Elevation & Depth

• 白カードには薄い影（0 2px 8px rgba(0,0,0,0.08)）を付ける
• 円形バッジは白地に細い縁取りと柔らかな影
• 写真カードは角丸にして軽く浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 成分やビフォーアフターは円形に切り抜く。髪の写真は角丸の長方形
• セクション境界: 直線で地の色を切り替える。手順セクションの末尾は三角の矢印
• 悩みや特長は円形の吹き出しに入れる
• ラベルはすべてピル型
• 手順枠は角丸なしでオレンジの細線
• 配合していない成分は、円の上にオレンジの斜線を引いて示す

Components

• オレンジのピルラベル（label-pill-primary）: 商品名や放置時間を書く、白文字の帯
• POINT番号ラベル（label-point）: 焦げ茶のピルに英字で番号を入れる
• 円形訴求バッジ（circle-badge）: 白い円に数字や利点を明朝で入れる
• 悩みの円吹き出し（worry-bubble）: 白い円にチェックアイコンと短い悩みを入れ、暗い写真の上に散らす
• 手順枠（step-box）: オレンジ線の長方形に手順を1行ずつ書き、縦に積む
• 成分の円写真（ingredient-circle）: 成分の写真を円形に切り抜き、下に成分名を添える
• 無添加の斜線バッジ（free-badge）: 細い線の円に成分名を入れ、オレンジの斜線を重ねる
• FAQカード（faq-card）: 白いカードの上段にオレンジでQ、線で区切って下段にA

Do's and Don'ts

Do - 地は暖色の淡いグラデーションでつなぐ - 強調語はオレンジに限る - 見出しは明朝で上品に組む - 根拠や成分は円形の写真とアイコンで見せる - 注釈を※番号で丁寧に添える

Don't - 寒色を地に使わない - 見出しを太いゴシックだけで組まない - ボタンや面に強い影を付けない - オレンジをベタ面で大きく使いすぎない - 暗いセクションを連続させない

Page Structure

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

1. ファーストビュー（新しさと商品の価値を示す）: 杏色の地に実験器具と商品の写真。明朝のコピー、円形バッジ、オレンジのピル帯を重ねる
2. カラーラインナップ（色の選択肢を見せる）: ピーチの地に商品を3つ並べ、下に色見本の髪の写真と色名の帯
3. 悩みの提起（既存品への不満に共感する）: 黒茶の地で、髪の写真の上に悩みの円吹き出しを5つ散らす
4. 概念説明（髪の状態の原因を教える）: 暗い地に明朝の大見出しと、断面の拡大図を入れた吹き出し
5. 開発背景（研究の裏付けを示す）: 白衣の研究者の写真と企業ロゴを置き、白い地で信頼感を出す
6. 効果訴求（使用前後の違いを見せる）: 円形のビフォーアフター写真を中央の矢印でつなぎ、両側に丸ラベル
7. 特長まとめ（3つの価値を要約する）: 円を3つ横に並べ、中央の円だけオレンジで塗る
8. 特長詳細（作用の仕組みと成分を説明する）: POINTラベルの下に図解を置き、成分は2×2の円写真
9. 香り・付属品（使い心地を伝える）: 花と商品のイメージ写真に、オレンジの線枠の説明を添える
10. 使用量・頻度（使い方の目安を示す）: 髪の長さ別の線画イラストを3列に並べ、グレージュの帯にモデル写真を置く
11. 使い方の手順（2通りの使い方を案内する）: アイコンと明朝の見出しの下に、手順枠を縦に積み、薄い矢印を背景に敷く
12. 無添加訴求（安心感を与える）: 濃い緑の葉の写真の上に白いカードを置き、斜線バッジを6つ並べる
13. よくある質問（不安を解消する）: オレンジの英字見出しの下に、白いFAQカードを縦に並べる

Imagery

• 商品は暖色の逆光のもとで、ガラスの実験器具と一緒に撮る
• 髪の写真は艶のある黒髪のクローズアップ
• 成分は素材や分子模型を真上から撮り、円形に切り抜く
• 背景に水滴や分子の球を淡くぼかして散らし、透明感を出す
• 髪型の使用量は細い線画のシンプルなイラストで描く
• 研究シーンは白衣の女性を明るいトーンで撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは約640px幅の中央カラムにSPの構成をそのまま入れる
• PCのカラムの外側は杏色系の単色で埋め、下に行くほど明るくする
• SPでは内容を全幅にし、グリッドの列数はPCと同じに保つ
• 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 行書くと起動時に読み込まれる。