DESIGN.md — ピンクベージュ×金帯の上品な美容サプリ LP（Pink Beige Gold Elegant Beauty Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか
• キーワード: 透明感・真珠の球体・金の帯・明朝体・ピンクベージュ・インナーケア
• 地の質感: 光のぼけ、水滴、半透明の球体によるつやのある質感。地は無地か淡いグラデーション。
• 形: 円形のバブルとサークル、細い線の枠、台形の金帯、矢羽根形のラベル。
• 温度感: 温かみのある淡いピンク寄りで、ところどころにクールなグレーを挟む。

Colors

• 地は白・淡いベージュ・ピンクベージュを交互に使い、強い原色は使わない。
• セクション見出しの帯は金のグラデーションにして、白文字をのせる。
• 見出しの一部の語だけをテラコッタ色にして強調する。
• 悩みのセクションだけグレーの地にして、雰囲気を切り替える。
• 黒い帯は、ページ最上部とセクションの導入ラベルだけに使う。
• 数値はテラコッタ色の大きなセリフ体で見せる。
• gold-band-heading は文字 #FEFEFE × 背景 #AA8F6B のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8B7150、4.55:1）を使う。
• ingredient-circle は文字 #CB795F × 背景 #FEFEFE のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B85A3C、4.56:1）を使う。

Typography

• 見出しも本文も明朝体を基本にし、文字間を広めにとる。
• 見出しの一部だけ文字を大きくするか、色を変えて強弱をつける。
• 英字の筆記体は、見出しの背後か脇に淡い色で薄く重ねる。
• サブ見出しは { } 形の括弧で囲む。
• 帯の中の短い文はゴシック体の白文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は 2 列のグリッド、成分は 3〜4 列の円形グリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに帯や地の色で区切り、縦にゆったり並べる。
• 見出しは中央揃え、本文は左揃え。
• 写真は画面の端まで広げ、文字を重ねる。
• 円形の要素は大きさを変えて、散らすように配置する。
• お客様の声は写真と文を左右交互に並べる。

Elevation & Depth

• 影はほとんど使わない。
• 球体は光沢とハイライトで立体的に見せる。
• 円形のバッジに、ごく淡いドロップシャドウをつける。
• カードは影を使わず、細い線の枠で見せる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は端まで広げて裁ち落とし、成分の写真は円形に切り抜く。
• セクション境界: 台形の金帯と、下向きの V 字の切り返し。
• カードは角丸なしの細い線の枠にする。
• 要素を強調するときは円形を使う。
• ラベルは左右が尖った矢羽根形にする。
• 枠を二重線か、ずらした線にして上品に見せる。

Components

• 金帯の見出し（gold-band-heading）: 画面幅いっぱいの金のグラデーションの台形の帯に、白文字をのせる。
• 黒ラベル（dark-label）: 大見出しの上に置く、黒い矩形か矢羽根形の導入ラベル。
• 真珠バブル（pearl-bubble）: 半透明のピンクの球体の中に、ベネフィットを短い言葉で入れる。
• 成分サークル（ingredient-circle）: 白い円に細い線の枠をつけ、栄養素の名前を入れる。大きさを変えて散らす。
• 線枠の特長カード（policy-card）: 2 列で並べる細い線の枠のカード。左上に葉のアイコンを置く。
• 悩みのチェックタグ（check-tag）: 白い半透明の矩形に、テラコッタ色のチェックと悩みの言葉を入れる。
• 大きな数値の表示（stat-number）: テラコッタ色の大きなセリフ体の数値と、括弧の枠のバッジを組み合わせる。
• お客様の声（voice-card）: 人物写真と、金色の引用符で挟んだ手書き風の文を左右交互に並べる。

Do's and Don'ts

Do - 明朝体を主役にして、文字間を広めにとる。 - 金帯でセクションの区切りをはっきり見せる。 - 球体・水滴・光のぼけで透明感を出す。 - 強調するのは見出しの中の一語だけにし、テラコッタ色にする。 - 効能や体験談には注釈を小さく添える。

Don't - 原色や彩度の高い色を使わない。 - 太いゴシック体を見出しの主役にしない。 - 角丸の大きいポップなカードを使わない。 - 濃い影や立体的なボタンの装飾を使わない。 - 1 つの画面に強調色を多く散らさない。

Page Structure

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

1. ファーストビュー（商品の世界観とコンセプトを一目で伝える）: 上部に黒い帯のコピーを置く。女性の肌の写真の上に縦書きのコピー、パッケージ、大きな明朝体のキャッチを重ねる。
2. ブランドの想い（ブランドの姿勢を伝える）: 白地にロゴ、明朝体の大見出し、左揃えの本文を置き、下に商品群の写真を並べる。
3. 特長（ポリシー）（ブランドの約束を 4 つ示す）: 2×2 の線枠のカードに、英字筆記体の飾りを添える。
4. 処方の紹介（3 つの要素の組み合わせを図で見せる）: 黒ラベルと大見出しの下に、三角形の頂点へ円形の写真を 3 つ配置する。
5. 悩みの提起（読み手の悩みに共感する）: グレーの写真の地に、チェック付きのタグを散らし、人物の写真を添える。
6. 商品の登場（解決策として商品を紹介する）: ピンクの地に光の球体を置き、中央にパッケージ、左右に巨大な金文字を配置する。
7. ベネフィット（得られる変化を示す）: 金帯の下に、真珠のバブルを 5 つ円状に配置する。
8. 主成分（配合量と含まれる栄養素を示す）: 大きな数値と、栄養素の名前を入れた大小の円を散りばめる。
9. 栄養機能の説明（機能表示を正しく伝える）: 人物と花の写真に、二重線の枠の説明ボックスと注釈を重ねる。
10. 美容成分（配合している成分を一覧で見せる）: 金帯、大見出し、線で挟んだ説明文のあとに、円形の成分の写真を 4 列のグリッドで並べる。
11. 飲み方の提案（習慣にするイメージを伝える）: 人物・水・バラの写真をずらして配置し、本文を重ねる。
12. お客様の声（共感と信頼を得る）: 筆記体の見出しの下に、写真と引用文を左右交互に並べ、最後に注釈を置く。

Imagery

• 人物は白い服を着た女性で、自然光の柔らかい肌のアップにする。
• 半透明のピンクの球体や泡、水滴、光のぼけを散らす。
• 成分は、マクロ写真を円形に切り抜く。
• 背景は淡いピンクベージュのグラデーションに、白い布のような質感を重ねる。
• 花はピンクのバラやカーネーションにし、水滴をのせる。
• 葉の線画アイコンと英字の筆記体を、装飾として淡く重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、以下は推奨。
• PC では中央に 960px 程度の固定幅を置き、左右の外側は淡いベージュで埋める。
• 金帯と背景の写真は全幅のまま広げる。
• 特長カードと成分のグリッドは、列数を増やして 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 行書くと起動時に読み込まれる。