DESIGN.md — 桜ピンク×明朝の女性向けリップケア LP（Soft Pink Feminine Beauty Lip Care LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 桜ピンク・明朝見出し・波線装飾・白カード・モデル写真・ふっくら感
• 地の質感: フラットな淡ピンクの面に、ごく弱い影の白カードを重ねる。ランキング帯だけ金色の箔の質感を使う
• 形: 円形の切り抜き、写真の一角だけを大きく丸める形、細いピンクの波線、カード角の L 字飾り
• 温度感: 暖かくやわらかい。甘さは明朝体とグレージュの文字色で抑える

Colors

• 地は白・淡ピンク・濃いめピンクをセクションごとに交互に置き、区切りを作る
• 文字は純黒を使わず、こげ茶グレー（#4A3F3F）で柔らかくする
• 濃いピンク（#F0508C）は欧文ラベル・番号・数字の強調だけに使う
• 金と濃紺はランキングの実績帯だけに使い、他のセクションには持ち込まない
• ピンクの地の上には白カードを置き、本文が読める明るさを保つ
• 成分表のような情報ブロックは、一段濃いピンクの帯で囲む
• speech-bubble は文字 #E0548A × 背景 #FFFFFF のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DA3172、4.5:1）を使う。

Typography

• セクション冒頭は、ピンクの太い欧文セリフのラベル → 明朝の日本語見出し → 小さなゴシックのリードの 3 段で組む
• 見出しは字間を 0.1em 以上あけ、中央揃えにする
• 本文は中央揃えか左揃えの短い行にし、行間は 1.8 以上にする
• 数字や重要な語は見出しの中で大きくし、ピンクにする
• 注釈には ※ 番号を付け、小さな文字でカードの下にまとめる
• ステップ名や曜日には筆記体の欧文を添え、手書きの軽さを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードの 1・2 だけ 2 カラムに並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地の色を切り替える
• 白カードは左右に 6% の余白を取って中央に置く
• 見出しブロックとコンテンツの間は 32px あける
• 写真と本文を交互に縦へ積むシーン構成にする
• ステップは左に円形のイラスト、右に番号と本文を置く

Elevation & Depth

• カードはごく弱い影（0 2px 8px rgba(0,0,0,0.05)）か影なしにする
• 強い立体感は使わず、地の色の差で重なりを表す
• 写真の重ね置き（コラージュ）では白フチと薄い影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 円形の切り抜きと、四角の一角だけを大きく丸めた写真。お客様の声は白フチ写真を傾けて重ねる
• セクション境界: 直線で地の色を切り替える。区切りに細い波線やくの字の矢印を添える
• 成分写真やステップのイラストは正円に切り抜く
• モデル写真は一角だけを 40px 前後丸める
• カードの角にピンクの L 字飾りを付ける
• 吹き出しは白い楕円に小さなしっぽを付ける

Components

• 欧文セクションラベル（section-label）: ピンクの太い欧文セリフの大文字ラベル。下に明朝の見出しを置く
• 波線の飾り（wave-divider）: 見出しの下や写真の横に置く、ピンクの細い波線
• 番号付き特長カード（feature-card）: グレージュの面に、ピンクの筆記体の番号・円形写真・欧文名・説明を縦に並べる。角に L 字飾りを付ける
• 詳細解説の白カード（detail-card）: 番号と欧文名の見出し、マーカー付きの大見出し、本文、注釈を収めた縦長の白カード
• 口コミの吹き出し（speech-bubble）: 写真のコラージュの上に置く白い楕円の吹き出し。中に短い感想を入れる
• チェックリスト（check-list）: 四角のチェックボックスに短い悩みやメリットを 3 つ並べる
• アルファベットの丸バッジ（letter-badge）: シーンの区切りに置く、濃いピンクの正円に白文字の A/B/C
• ランキング実績帯（ranking-band）: 金の王冠と月桂樹の飾りに、赤ピンクの大きな順位、ランキング画面のキャプチャを重ねる
• 注意事項ボックス（caution-box）: 白の角丸の帯に、警告アイコンと小さな注意書きを入れる

Do's and Don'ts

Do - 見出しは明朝を使い、字間を広めに取って上品さを出す - 欧文ラベル・波線・円形の切り抜きを各セクションで繰り返して統一感を出す - ピンクの濃さを 3 段階で使い分け、セクションにリズムを付ける - モデル写真は明るく柔らかい自然光で、唇の質感が見える寄りの構図にする - 仕組みの説明は、番号付きのステップ図で順に見せる

Don't - 純黒の太いゴシック見出しを使わない - 原色の赤や青を広い面積で使わない - ピンク以外の強い色をランキング帯以外に持ち込まない - 角の鋭い四角い写真だけで構成しない - カードに強い影や太い枠線を付けない - 本文の行間を詰めない

Page Structure

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

1. ファーストビュー（商品の印象と、使った後の唇の状態を伝える）: くすみピンクの地に、左にモデルの顔の寄り写真、右に明朝のキャッチと商品パッケージを置く
2. 商品の導入（新しさと 3 つのメリットを示す）: 明朝の大見出しの一部を大きくし、拡大イラストとチェックリスト 3 項目を並べる
3. 実績（ランキング実績で信頼を得る）: 金の王冠と月桂樹、斜線の飾り、大きな順位、キャプチャ画像を重ねる
4. コンセプト（ブランドの世界観を伝える）: 欧文ラベル、明朝の見出し、一角を丸めたモデル写真、中央揃えの詩的な本文の順に置く
5. お客様の声（使用者の写真と感想で共感を生む）: 傾けた白フチ写真を重ねたコラージュに、白い吹き出しを散らす
6. 3 つの秘密（商品の構成要素を整理して見せる）: 中央の商品写真の周りに円形の要素写真を 3 つ置き、その下に番号付きの特長カードを並べる
7. 詳細解説（技術と成分の根拠を説明する）: 白カード 3 枚で、マーカー付きの見出し、成分表、受賞マーク、ステップ図を見せる
8. 悩みの提起（唇の悩みに共感し、解決へつなぐ）: モノクロのモデル写真にピンクの筆記体を添え、チェックリスト、下向き矢印、線画イラストを置く
9. 利用シーン（使う場面を想像させる）: A/B/C の丸バッジ、短い文、角を丸めた写真、波線を交互に縦へ積む
10. 継続の提案（使用頻度の目安を示す）: 曜日のラベルを付けた円をジグザグに並べ、使う日だけ商品写真の円にして線でつなぐ
11. 使い方（3 ステップの手順を示す）: 左に白い円の線画イラスト、右に番号・筆記体のステップ名・説明を置き、最後に注意事項ボックスを付ける
12. 動画・評価（使い方動画と総合評価で後押しする）: ピンクのグラデーションの動画サムネイルと、大きな評価点の数字を見せる

Imagery

• モデル写真は白やベージュの背景で、柔らかい自然光で撮る。唇のツヤとふっくら感を強調する
• 成分や素材は、ピンクの光沢がある接写を円形に切り抜く
• 手順の説明は、細い黒線のシンプルな線画で唇と指を描き、ピンクを差し色にする
• お客様の声は、自撮り風の写真を白フチのポラロイド風に傾けて重ねる
• 悩みのパートだけはモノクロ写真で、明るい解決パートとの対比を作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元のデザインは PC でも幅 820px 前後の 1 カラムで、スマホ表示とほぼ同じ構成
• SP では左右に約 6% の余白を取り、カードを全幅に近く広げる
• 特長カード 1・2 は SP 375px でも 2 カラムを保てるが、狭い場合は 1 カラムにする
• ファーストビューは写真の上に文字を重ねるか、写真と文字を上下に分ける
• PC に広げる場合は、内容幅 750〜820px で中央に寄せ、左右を地の色で埋める

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