DESIGN.md — 生成り×マゼンタ明朝の上品ヘアケアLP（Elegant Mincho Salon Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 明朝体・マゼンタ強調・生成り地・黒髪の艶・金の月桂樹・白カード
• 地の質感: マットな生成り地に、柔らかい影の白カードを重ねる。所々に金の紙吹雪や水滴のような泡を散らす
• 形: 角はほぼ直角。四角いカードと写真に、細い枠線の見出しフレームを合わせる
• 温度感: やや暖色寄りのニュートラル。ランキング帯だけ深いえんじで熱量を出す

Colors

• 地は白・生成り・淡い青灰を交互に切り替えて、セクションを区切る
• 強調語はマゼンタの文字色にする。1見出しにつき1〜2語まで
• 本文の重要語には、くすみグリーンの背景マーカーに白文字を使う
• 実績訴求だけ、えんじまたは黒の帯に金と白を合わせる
• 小見出しの頭に、黒またはマゼンタのラベル帯を置く
• text-marker は文字 #FFFFFF × 背景 #7E8A72 のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#6F7964、4.57:1）を使う。
• free-circle は文字 #9A9E96 × 背景 #F4F7FC のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#6F736A、4.51:1）を使う。

Typography

• 見出しと本文は明朝体を基本にする
• 強調語は周りより1.3〜1.5倍大きくし、マゼンタにする
• 見出しの背面に、薄いグレーの英字筆記体を重ねる
• 縦書きの見出しを部分的に使う
• 注釈は「※」付きの小さなゴシック体で入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内で写真とテキストを左右2分割することもある
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードを生成り地の上に浮かせて配置する
• 写真とテキストのカードは、左右を交互に入れ替える
• 理由は大きな番号「1.」「2.」「3.」で区切る
• 実績バッジは2〜3個を横に並べる
• 声のカードは写真を少しはみ出させて重ねる

Elevation & Depth

• 白カードに、ぼかし大きめの薄い影（0 8px 24px rgba(0,0,0,0.08)）を付ける
• 製品写真を浮かせるのは、ソフトシャドウのみにする
• 帯やラベルはフラットにする

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いトリミング。成分は円形の泡や水滴として描く
• セクション境界: 直線で地色を切り替える。斜めや波形は使わない
• カードとボタンは角丸なし、または極小の角丸にする
• 見出しは細線のコの字フレームで囲む
• 実績は金の月桂樹付きの円形メダルにする
• 成分は透明な円形の泡に入れて並べる

Components

• ラベル帯（label-band）: 小見出しの上に置く黒地白文字の短い帯
• マゼンタ帯（accent-band）: キーワードを白抜きにするマゼンタの帯
• 枠線見出し（bracket-heading）: 細線の角括弧で明朝見出しを囲み、下に英字の小見出しを添える
• 月桂樹メダル（laurel-badge）: 金の月桂樹で囲んだ実績数値
• 成分の泡（ingredient-bubble）: 半透明の青い球体に成分名を入れたもの
• 理由カード（reason-card）: 大きな番号の下に白カードを置き、写真と本文を組む
• グリーンマーカー（text-marker）: 本文中の重要語に敷く、くすみグリーンの背景
• お客様の声カード（review-card）: 人物写真とマゼンタ見出し、本文、注釈を組んだカード
• 無添加の丸（free-circle）: 淡色の円に成分名を入れ、斜線で打ち消したもの

Do's and Don'ts

Do - 見出しは明朝体で組み、強調語だけマゼンタで大きくする - 生成り・白・淡い青灰の地を交互に切り替える - 黒髪の艶が伝わる写真を大きく使う - 数値の実績は金の月桂樹で格調を出す - 注釈は必ず小さく添える

Don't - ビビッドな色を多用しない - 丸ゴシックやポップな書体を使わない - 大きな角丸やピル型を多用しない - マゼンタを面で広く使わない - 濃い影や立体的なボタンを使わない

Page Structure

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

1. ファーストビュー（商品の世界観と受賞歴を伝える）: 大人の女性とボトルの写真に、縦組みの明朝コピーを重ねる。強調語はマゼンタ、右上に受賞メダルを置く
2. 成分訴求（独自の配合を印象づける）: 髪の写真の上に、成分名入りの泡を3つ並べる
3. 悩みへの対応（1本で複数の悩みに応えることを示す）: 暗い髪の写真に、縦書きの悩みワードを4つ並べ、マゼンタ帯を添える
4. ランキング実績（人気を証明する）: えんじの地に金の明朝見出しと月桂樹のメダル、ランキング画像を組む
5. SNSの声（口コミの量を見せる）: 英字見出しの下に、投稿カードを4列のグリッドで並べる
6. 販売実績・メディア掲載（信頼を補強する）: 生成り地に金の紙吹雪を散らし、メダルとコラージュ写真、雑誌の画像を置く
7. 問題提起（サロン仕上げとの差に疑問を投げかける）: グレー地に縦組みの明朝問いかけと、美容道具の写真を組む
8. 専門家の推薦（権威付けをする）: 生成りカードに人物写真と推薦文を入れ、サインを添える
9. 選ばれる理由（3つの理由を詳しく説明する）: 大きな番号と白カードで区切り、成分の詳細カードと比較図を入れる
10. こだわり（安全性と品質を示す）: 枠線見出しの下に、無添加の丸グリッドと写真付きの説明を置く
11. お客様の声（使用感を伝える）: 人物写真とテキストのカードを、左右を交互にして配置する
12. 使用方法（手軽さを伝える）: モデル写真に英字の筆記体を重ね、手順を説明する

Imagery

• 30〜50代女性の黒髪の艶を、自然光の柔らかい光で撮る
• 黒いスプレーボトルの物撮りに、植物の葉を添える
• 成分は透明な水滴・泡・とろみのある液体で表現する
• 金の紙吹雪と月桂樹で、祝祭感を部分的に出す
• 美容道具（ハサミ・コーム）を白い台の上で俯瞰で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPC中央の固定幅カラムで、左右は生成りの地で埋めている
• SPでは同じカラムを全幅にし、本文は88%幅にする
• 4列のSNSグリッドは、SPでは2列にする
• 左右分割のカードは、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 行書くと起動時に読み込まれる。