DESIGN.md — 赤×黒×銀の上品なまつ毛美容液 LP（Red Black Mincho Luxury Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、力強い・インパクト
• キーワード: 深紅のオファー枠・黒帯見出し・明朝体・金の受賞エンブレム・光のボケ背景・淡いグレー地
• 地の質感: グレー〜白のグラデーションや光のボケ、水面の写真を背景に敷き、ツヤのある質感を出す
• 形: 四角い枠と黒帯が基本。CTA だけ立体感のある大きなピル型。成分は丸や六角形
• 温度感: クールなグレー・水色の地に、赤で熱を足すやや寒色寄り

Colors

• 地は白・淡グレー・淡水色を交互に使い、全体を明るく保つ
• 深紅はオファー枠・価格・CTA・強調見出しに限定する
• セクション見出しの核は黒帯に白抜き文字で締める
• 受賞や実績は金色のエンブレムで示す
• 成分ゾーンはくすみピンクのグラデ地で柔らかくする
• 注釈は小さいグレー文字でまとめる
• ingredient-hex は文字 #FCFCFC × 背景 #8C845C のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#7D7552、4.51:1）を使う。

Typography

• 見出しは明朝体を基本にし、上品さを出す
• 価格の数字は特大の明朝で赤にする
• 見出しの核となる語は黒帯に白抜きで載せる
• Point・STEP の番号は欧文イタリックのセリフ体にする
• 本文はゴシック体の小さめサイズで行間 1.6
• 字間はやや広めの 0.05〜0.1em
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典・口コミは 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• オファーブロックは赤い枠線で囲み、上端に赤帯の見出しを置く
• 見出しは中央揃え、説明は短い 2〜3 行
• 成分は丸・六角形をグリッドで敷き詰める
• 使い方は左にイラスト・右に STEP 番号と説明
• オファーはページ冒頭と末尾の 2 回に置く

Elevation & Depth

• CTA は赤のグラデとハイライト、下影でツヤのある立体ボタンにする
• 特典カードは白地に影なしで、赤枠の内側に置く
• 口コミカードは影なしの写真＋テキスト
• 図解パネルは白地に薄い枠線

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品は斜め置きの切り抜き。口コミ写真は正方形。成分写真は六角形や円
• セクション境界: 基本は直線。一部で下向きの V 字や黒帯の三角吹き出しを使う
• 枠・帯は角丸なしの四角
• CTA だけ大きなピル型
• 成分ラベルは小さな角丸の帯
• 問いかけ帯の下に三角の矢印を付ける

Components

• 立体ピル型 CTA（button-primary）: 赤グラデのピル型。2 行の明朝文字と右端に白丸の矢印アイコン
• 赤帯オファー見出し（offer-header）: 赤い帯に白文字で割引率を大きく、左にお得感の言葉を下線付きで
• 特典カード（benefit-card）: 白い四角に赤い明朝で特典を 2 行。3 列＋横長 1 枚
• 黒帯見出し（black-band-heading）: 黒い帯に白い明朝の太字。2 行なら帯を段違いに重ねる
• Point 番号ラベル（point-label）: 赤い欧文イタリックの番号と短い見出し、下に細い赤線
• 受賞エンブレム（award-emblem）: 金色の月桂樹と王冠のメダル。横に明朝の大きな受賞文言
• 成分六角形グリッド（ingredient-hex）: 写真の六角形とオリーブ／白の六角形を交互に並べ、成分名を明朝で
• SNS 風口コミカード（review-card）: 正方形写真の下に丸アイコンとユーザー名、短い感想。2 列
• 不安への問いかけ帯（question-band）: 黒帯に白文字で問いかけ、下に三角矢印。続けて人物イラストと回答
• 枠線タグ（outlined-tag）: 細い黒枠の四角に明朝の短い言葉。セクションの前置きに使う

Do's and Don'ts

Do - 見出しは明朝体で揃え、核の語は黒帯白抜きにする - 赤は価格・CTA・オファー枠に絞って使う - 受賞・ランキング・掲載誌などの実績を金エンブレムと一緒に並べる - 成分は図解・丸・六角形で見せる - 注釈を小さく必ず添える - オファーブロックは冒頭と末尾の 2 か所に置く

Don't - 丸ゴシックやポップな書体を使わない - 赤を広い背景に多用しない（オファー枠以外） - カードに強い影や大きな角丸を付けない - 彩度の高い多色配色にしない - 背景を真っ白だけで単調にしない

Page Structure

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

1. ファーストビュー（高級感と商品の印象を伝える）: グレーと赤の斜め分割背景に商品を斜めに置き、明朝の大キャッチと金の受賞エンブレム
2. オファー（定期購入の価格と特典を示す）: 赤枠と赤帯見出し、商品写真の横に打消し価格と赤い特大価格、ピル CTA、特典カード 4 枚
3. 不安の解消（解約への心配をなくす）: 黒の問いかけ帯と三角矢印、人物イラストと明朝の回答、赤いチェック
4. ランキング実績（人気を示す）: 枠線タグ、月桂樹で挟んだ紺色の明朝大見出し、ランキング画像を横並び
5. 受賞・メディア掲載（第三者評価で信頼を得る）: 光のボケ背景に金エンブレムと欧文明朝の受賞文言、雑誌表紙を重ねて並べる
6. お客様の声（体感を共有する）: 赤い明朝の大見出しと SNS 風の 2 列口コミカード
7. 特長（Point）（成分と使いやすさを説明する）: Point 番号ラベル＋黒帯見出し、成分図解、六角形グリッド、赤い丸で特長を商品の周りに配置
8. ヘアサイクル解説（継続利用を促す）: 水面写真の背景に黒帯見出し、白い角丸パネルに成長段階のイラストを横並び
9. 使用方法（使い方を示す）: 赤い明朝見出しと赤枠ピル、STEP 番号と線画イラストの 4 ステップ
10. 活用シーン（眉やまつエクへの使い道を示す）: 目元の写真の上に黒帯ラベルを重ねたバナー 2 枚、縦書き明朝のイメージカット
11. 満足の理由（成分濃度と低刺激性を訴える）: 透明な球体の中に青灰の大きな数字、金色の雫にペプチドの円を 2×2、低刺激の白カード 2 列
12. クロージングオファー（最終的な申込を促す）: 冒頭と同じオファーブロックと不安解消を繰り返す

Imagery

• 商品は黒いボトルを斜めに置き、赤い光を当てたツヤのある物撮り
• 背景は光のボケ・虹色のプリズム光・水面のテクスチャで透明感を出す
• 受賞は金色の月桂樹メダルのグラフィック
• 成分は果物・植物・水の写真を六角形や円で切り抜く
• 使い方は茶色の線画で目元とチップを描く
• 人物は女性の目元クローズアップと、スーツ姿の線画オペレーター
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後のカラムに SP と同じ構成を置く
• 背景の写真やグラデは全幅に広げる
• 口コミと特典カードは 3〜4 列に増やしてよい
• オファーは商品写真と価格を左右に並べる
• 見出しサイズは 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 行書くと起動時に読み込まれる。