DESIGN.md — モーヴ×ワインレッドの艶髪ヘアケア LP（Mauve Wine Salon-Gloss Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、力強い・インパクト
• キーワード: 艶髪・モーヴ・ワインレッド・縦書き明朝・円バッジ・価格訴求
• 地の質感: 写真が主役。くすみモーヴの面に光沢感、黒地に金縁の高級感を重ねる
• 形: 白い円形バッジ、斜めカットの帯、金縁の長方形フレーム
• 温度感: 前半は温かみのあるくすみトーン、後半は高コントラストで熱量が高い

Colors

• 前半の世界観は、モーヴ、ワインレッド、プラム紫のくすみトーンで統一する
• 縦書きコピーの帯は、ワインレッドか黒の地に白い明朝で入れる
• 特長のバッジは白い円に、ワインレッドか墨色の文字を使う
• 価格・特典ゾーンは黒地に金の縁取りを付け、赤い数字と黄色マーカーで強調する
• CTA は緑のピル型にし、ほかの色と混同させない
• 注釈は小さな灰色文字にまとめる
• button-primary は文字 #F3FEF3 × 背景 #2E9A3A のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#288432、4.57:1）を使う。

Typography

• 世界観のパートは明朝を縦書きにして大きく組む
• 数字は周りの文字より 2〜3 倍大きくし、単位は小さく添える
• 価格ゾーンだけ極太ゴシックに切り替える
• 縦書きの帯は 1 行ずつ帯に載せ、段違いに配置する
• 注釈には必ず※を付け、小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円バッジは 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真セクションは余白を空けずに全幅で縦に積む
• 縦書きコピーは写真の左右どちらかに寄せて重ねる
• 円バッジは写真の上に 2 列で配置する
• 価格ゾーンは金縁の枠の中に情報を縦に積む
• 特典は 2 段の横長カードと 3 列の小カードで構成する

Elevation & Depth

• 円バッジには柔らかいドロップシャドウと内側のグラデーションを付け、パール調の立体感を出す
• 価格パネルは金の二重縁取りで面を浮かせる
• CTA ボタンには下方向の影と光沢を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 全幅の矩形が基本。人物は円形に切り抜くこともある
• セクション境界: 斜めカットとまっすぐな境界を併用する
• 特長は白い円バッジで表す
• セクション間に斜めの帯を差し込んで動きを出す
• 価格枠は角丸を付けず、金縁の長方形にする
• 割引率はリボン型や斜めの帯に載せる

Components

• 縦書きコピー帯（vertical-copy-band）: ワインレッドや黒の縦帯に、白い明朝の縦書きを載せる
• パール円バッジ（circle-badge）: 白い円の中に、特長を明朝 2 行で入れる
• 年齢付き利用者タグ（testimonial-tag）: 円の中に年齢を大きく、名前を小さく入れて写真に重ねる
• 価格訴求ブロック（price-hero）: 赤い極太数字と黄色マーカーで、通常価格との差を見せる
• 割引リボン（discount-ribbon）: 赤地と金縁で割引率を大きく打ち出すリボン型の帯
• 特典カード（benefit-card）: 黒地に金縁。赤いラベルで特典番号を付けた白カード
• 申込 CTA（button-primary）: 緑のピル型ボタン。左に商品画像、割引率を大きく入れる
• 無添加チェックリスト（free-list）: ×印付きで、不使用成分を 2 列に並べる

Do's and Don'ts

Do - 艶のある髪の写真を全幅で大きく使う - 縦書きの明朝で上品さを保つ - 数字を主役にした円バッジで特長を示す - 価格ゾーンは黒、金、赤でメリハリを付ける - 注釈には※番号を付けて丁寧に入れる

Don't - 前半の世界観パートに原色を使わない - 円バッジを角張った四角に置き換えない - 明朝とゴシックを同じ見出しの中で混ぜない - 写真の上に枠のない細い文字を直接置かない - CTA を緑以外の色にしない

Page Structure

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

1. ファーストビュー（艶髪と商品を一目で印象づける）: モーヴの地に髪と商品の写真を重ね、縦書きの巨大な明朝コピーと縦帯を置く
2. 使い方の提示（手軽さを伝える）: 手のひらにクリームを取る写真を全幅で見せる
3. お客様の声（共感と実感を伝える）: 斜めカットのラベンダー地に人物写真、年齢タグ、吹き出し円を配置する
4. 香りの紹介（癒しの価値を伝える）: 花と果実の写真に縦書きの帯を重ね、香りの段階を3つ示す
5. 悩みの提起（髪の悩みを喚起する）: 黒地に円形の人物写真を 2 つ並べ、短い悩みの言葉を添える
6. 特長（多機能）（1本で何役もこなすことを示す）: ワインレッドの地に髪の写真を敷き、円バッジを 2 列で並べ、大きな数字を縦書きで入れる
7. 成分訴求（配合成分の豊富さを示す）: 写真のコラージュに白縁の円コピーを重ね、成分の円バッジを 3 列で並べて注釈を付ける
8. 権威付け（企業の実績で信頼を得る）: 紺地に実績バッジと大きな明朝を置く
9. 商品ビジュアル（高級感を演出する）: 暗い森と大理石の台に商品を置き、円バッジ 2 つと縦書きの帯を添える
10. 人気・完売告知（希少性を演出する）: ネオン調の光と金ラメの縦文字、ピンクの帯で強く煽る
11. 予約受付（急ぎの申込を促す）: 白地に金の光線を背景に置き、ピンクの太字見出しと注意書きの枠を入れる
12. 価格・オファー（割引価格を提示する）: 黒地に商品情報、割引リボン、赤い巨大価格、黄色マーカー、緑の CTA を並べる
13. 特典（定期購入の不安をなくす）: 金縁の黒パネルに特典カード 5 つを置き、オペレーターの写真で安心感を添える
14. まとめ訴求（ベネフィットを再確認させる）: 髪の写真に縦書きの帯、テクスチャ写真、円バッジのグリッドを再掲する

Imagery

• 濡れた長い髪や、ストレートの艶髪を背面から捉えた写真を使う
• グレーのクレイ状クリームのテクスチャを接写する
• 桃、柑橘、白い花を添えて香りを表現する
• 商品は大理石の台や暗い植物を背景に、高級感のある照明で撮る
• 完売告知にはネオンやスポットライト、金ラメの演出を使う
• 笑顔の女性や親子の自然光ポートレートを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元 LP は 1 カラムの画像主体なので、PC でも中央に幅 750px 前後で固定して同じ構成にする
• SP では縦書きの大コピーを画面幅の 1/4 程度に収める
• 円バッジは SP では 2〜3 列、PC でも列数を増やさない
• PC の左右余白は、セクションの地色を延長して埋める

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