DESIGN.md — 桜色×真珠光沢の美容サプリ LP（Soft Pink Pearl Beauty Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、情報量多め・訴求型
• キーワード: 桜色・真珠光沢・明朝の上品さ・コーラル強調・内側からの美容
• 地の質感: 水滴やプリズム光、半透明の真珠玉など光沢のある装飾。地はフラットな淡ピンク。
• 形: 円形バッジ、角丸小さめの白カード、雲形吹き出し、波形のセクション境界
• 温度感: 暖かく柔らかいピンク寄りの中間色

Colors

• 地は淡ピンクを基本にし、セクションごとに濃淡のピンクで切り替える
• 強調したい語句と数値だけをコーラルレッドにする
• POINT 番号はプラム紫のセリフ数字で入れる
• ゴールドは実績の月桂冠と循環矢印だけに使う
• 本文はダークグレー。純黒は使わない
• 工程リストは赤から淡ピンクへのグラデーション段階で塗る
• process-row は文字 #FFFFFF × 背景 #E35353 のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DE3434、4.52:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #DC7C7C のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE4848、4.52:1）を使う。

Typography

• 見出しは明朝を主にし、訴求文はゴシックにする
• 一文の中で強調語だけを大きく、コーラルにする
• 数値は斜体のセリフ体で特大にする
• 本文は中央揃え、行間は広めにとる
• 英字の筆記体を見出しに添えて装飾にする
• FV のコピーは縦書きを白帯の上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分カードだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• POINT ごとに白カードを置き、左右に約 16px の余白を残す
• POINT 番号はカードの角からはみ出させる
• 特徴の円バッジは 3 つ横に並べる
• 工程は左にラベル、右に説明を置く表形式にする
• FAQ は質問を左寄せ、回答を右寄せにして交互に置く

Elevation & Depth

• 白カードにはごく薄い影（0 2px 8px rgba(0,0,0,.06)）を付ける
• 雲形の吹き出しに柔らかい影を付ける
• 真珠玉は半透明のハイライトで立体感を出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は矩形で裁ち落とし、写真同士を少しずらして重ねる。成分は小さな角丸サムネイル
• セクション境界: 斜めの切り替えと、ゆるい波形・円弧の境界
• 特徴バッジは細線の正円
• FAQ は尻尾付きの角丸吹き出し
• 悩みは雲形の吹き出し
• CTA は角丸小さめの横長矩形

Components

• 特徴円バッジ（badge-circle）: 細線の正円に短い特徴を2行で入れ、3つ並べる
• 真珠玉の実績表示（pearl-stat）: 虹色に光る半透明の玉の中に、満足度や受賞などの数値を斜体で入れる
• POINT カード（point-card）: 白カードの角にプラム紫のセリフ数字を置き、中に成分の説明を入れる
• 悩み吹き出し（thought-bubble）: 白い雲形の吹き出しを人物イラストの周りに4つ置く
• 成分カード（ingredient-card）: 左上に斜めに切った写真、コーラルの見出し、下線、説明文
• 工程リスト（process-row）: 左の色ラベルは段ごとに色を変え、右に2行の説明と下線を置く
• FAQ 吹き出し（faq-bubble）: Q はグレーで左寄せ、A はピンクで右寄せの尻尾付き吹き出し
• 主ボタン（button-primary）: コーラルの横長ボタン。白文字の右に細い矢印線を付ける
• 英字ラベル枠（outline-label）: 細線の矩形に英字を入れ、右に線を伸ばした装飾ラベル

Do's and Don'ts

Do - 強調色はコーラル1色にしぼり、要所だけに使う - 真珠玉や虹色の光で上品なツヤを出す - セクションの区切りは淡ピンクの濃淡で付ける - 数値は大きなセリフ斜体で見せる - POINT 番号で説明に順番をつける - 注釈は小さく、数値の近くに添える

Don't - 原色の赤や蛍光ピンクは使わない - 黒い地の大きな面は作らない - 角張った太いボーダーは使わない - ボタンを丸ピル型にしない - 装飾フォントを本文に使わない - 余白を詰めすぎない

Page Structure

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

1. ファーストビュー（世界観と商品を見せる）: 水滴とプリズム光の上に女性のモデル写真。明朝の白いキャッチと縦書きの白帯コピーを重ねる
2. 実績・特徴（信頼を得る）: 金の月桂冠に販売実績、商品パッケージを添え、円バッジを3つ並べる
3. コンセプト（思いを伝える）: 中央揃えの短文を数行並べ、英字の枠ラベルを置く
4. 実績訴求（評価を示す）: 真珠玉の中に満足度と受賞の数値。パッケージを台座に載せて見せる
5. 悩みの提起（共感を得る）: 女性のイラストの周りに雲形の吹き出しを4つ置く
6. 原因の説明（問題を見える化する）: 年代ごとのシルエットに右下がりの赤い矢印グラフを重ね、モーブの帯に置く
7. 解決の配合（商品の働きを示す）: パッケージの周りに真珠玉3つとゴールドの循環矢印を置く
8. POINT 01〜03（成分の根拠を示す）: 白カードに番号、比較図、工程リスト、成分の2カラムカードを入れる
9. 品質へのこだわり（安心を与える）: 認定証の画像と番号付きの説明。下線付きのメッセージ文を添える
10. よくある質問（不安を解消する）: Q と A を吹き出しで交互に並べ、最後にコーラルのボタンを置く
11. 締めのメッセージ（利用後の姿を想像させる）: 波形の境界のあと、笑顔の女性写真を重ね、縦書きのコピーを白帯に入れる

Imagery

• モデル写真はグレージュ地に水滴を散らし、柔らかい自然光で撮る
• 写真に虹色のプリズム光を斜めに入れる
• パッケージは紫からピンクのグラデーションに光沢の泡を描く
• イラストは細い線と淡い塗りの女性像にする
• 成分の写真は小さく斜めに切り抜く
• 締めの写真は年代の違う女性の笑顔にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央 750px 前後に固定し、左右に淡ピンクの地を広げる
• 成分カードは PC で 3 カラムにしてもよい
• FV の写真は PC で横幅いっぱいに広げ、コピーを左に寄せる
• POINT カードは最大幅 960px にする

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