DESIGN.md — くすみローズ×水玉ツヤ感のスキンケア LP（Dusty Rose Glossy Cleansing Balm LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、清潔・爽やか
• キーワード: くすみローズ・透明感・水滴・泡・明朝の大見出し・成分訴求・やわらかな光
• 地の質感: ぼかした光とグロスのある水面・泡の写真。グラデーションのピンク地。
• 形: 円形の成分バッジ、角丸カード、左上から斜めに切れたタブ見出し。
• 温度感: 暖かめのピンク寄りで、柔らかく上品。

Colors

• 地は淡いピンクのグラデーションを基本にし、セクションごとに明度を少し変えて区切る。
• 強調はくすみローズ一色に絞り、帯・タグ・タブ・チェックアイコンに使う。
• 見出しは黒ではなく濃いブラウンにして柔らかさを保つ。
• 使い方セクションのみローズを全面地にし、白カードを載せて変化をつける。
• 本文の一部はローズ色の太字で強調する。
• 鮮やかな原色や寒色は使わない。図解の緑は成分写真の中だけにする。
• feature-tag は文字 #FFF2ED × 背景 #B5615F のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AF5553、4.52:1）を使う。
• solution-pointer は文字 #FFF2ED × 背景 #B7605E のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B15452、4.5:1）を使う。

Typography

• 見出しはすべて明朝。キーワードだけ 1.5〜2 倍に大きくしてジャンプ率をつける。
• 本文はゴシックの細めで、重要語だけ太字かローズ色にする。
• 英字見出しは細いサンセリフにし、下に罫線付きの小さな和文サブを添える。
• 成分バッジの中は 2〜3 行の中央揃え。効能は山括弧で小さく添える。
• 注釈は※を付けて本文の下に小さく置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分カードは 2 列、図解は 3 列、無添加タグは 4 列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は端まで広げる。テキストブロックは左右 6% の余白を取る。
• 見出しは中央か左揃えで、写真と重ねて置く。
• 成分カードは写真の上にタブ見出し、下に説明の順に置く。
• 悩みリストは白い大きな角丸パネルにまとめる。
• セクション間はグラデーションで自然につなぐ。

Elevation & Depth

• 白カードにはごく薄い影（0 2px 8px 程度の淡いローズ影）をつける。
• 成分バッジの泡は内側にハイライトを入れたグロス表現にする。
• それ以外はフラットにし、強い影は使わない。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の四角か円で切り抜き、成分は円形の泡にする。
• セクション境界: ぼかしグラデーションで切り替え、一部はゆるい曲線にする。
• 成分タブは左から右へ薄くなるグラデーションの帯にする。
• 強調タグは小さな角丸（4px）のローズ地に白文字。
• 解決への誘導には下向き三角の吹き出しを使う。
• 円形のイラスト枠に小さな丸バッジを重ねる。

Components

• 成分の泡バッジ（ingredient-bubble）: ピンクのグロス球体の中に成分名と効能を 2〜3 行で入れる。少しずつずらして並べる。
• 特長タグ（feature-tag）: 小さなアイコン付きの短い特長を、ローズ地に白文字で横に並べる。
• グラデーションのタブ見出し（tab-heading）: 濃いボルドーから透明へ抜ける帯に明朝の白文字を載せる。成分カードの上部に使う。
• 成分カード（ingredient-card）: 成分の写真の下端に白い小ラベルを重ね、その下に強調入りの説明文と注釈を置く。
• 3 ステップ図解（process-diagram）: 白パネルに番号付きの肌断面イラストを 3 つ並べ、山括弧でつなぐ。下にローズ地の成分タグを置く。
• 無添加タグ群（free-from-tags）: ローズの見出し帯の下に、白地に細枠の四角タグを 4 列 × 2 行で並べる。
• 悩みチェックリスト（worry-checklist）: 白い大きな角丸パネルに、ローズの丸チェックと区切り線で悩みを 4 つ並べる。
• 解決への吹き出し（solution-pointer）: ローズ地の小さな五角形の吹き出しで、次の写真パートへ視線を誘導する。
• 使い方ステップカード（howto-step-card）: ローズ地の上の白カード。左に線画イラストと細い番号、右に手順文を置く。

Do's and Don'ts

Do - 地は淡いピンクのグラデーションにし、ぼかした光の玉を散らす。 - 見出しは明朝で大きく、キーワードを特大にする。 - 成分は泡や雫の写真・球体バッジで透明感を出す。 - 強調色はくすみローズ 1 色に絞る。 - 注釈は※付きの小さな文字で必ず添える。

Don't - 純黒の文字や彩度の高い原色を使わない。 - 太いゴシックの見出しにしない。 - 影の強いカードや立体的なボタンにしない。 - 直線的で硬いセクション区切りを多用しない。 - 1 画面に強調色を何色も混ぜない。

Page Structure

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

1. ファーストビュー（世界観とベネフィットを一目で伝える）: 目を閉じた女性の写真に、縦書きの小見出しと明朝の特大キャッチを重ねる。成分の泡バッジ 4 つ、特長タグ、ロゴと商品名を置く。
2. 商品コンセプト（独自の処方バランスを示す）: 水しぶきの球体に包まれた商品写真。2 語を×でつないだ白帯の見出しと大見出しを置き、短い説明を添える。
3. 色・香りの特長（使い心地の魅力を補足する）: ローズのグラデーション帯見出しの下に、果物やハーブの写真と説明文を左右に並べる。
4. 主要成分（成分ごとの効果を説明する）: 笑顔の女性の写真に見出しを重ねる。その下に、タブ見出し付きの成分カードを 2 列 × 2 段で並べる。
5. 保湿成分（配合成分の豊富さを示す）: 左に明朝の見出し（キーワードにマーカー下線）、右に泡バッジを 3 列 × 2 段で置く。
6. 毛穴ケアの仕組み（汚れが落ちる仕組みを図で見せる）: 白パネルに 3 ステップの肌断面イラストを並べ、その下にローズ地の成分タグを置く。
7. 無添加処方（敏感肌への安心感を伝える）: ローズの帯見出しの下に白枠のタグを 8 つ並べる。
8. 悩みの提起（読み手の悩みに共感する）: 白い角丸パネルにチェック付きの悩み 4 つを並べ、下向きの吹き出しで次へつなぐ。
9. 解決（悩みを一気に解決できると印象づける）: 笑顔の女性と開けた商品の写真に、明朝の特大 2 文字を重ねる。
10. 使い方（使う手順を示す）: ローズ地に細い英字タイトルを置き、線画付きの白いステップカードを 2 枚並べる。
11. 応用の使い方（部分ケアや男性にも使えると伝える）: 濃色の帯見出しと説明文の横に、円形のイラスト枠と小さな丸バッジを置く。
12. 締めのメッセージ（ブランドの余韻を残す）: 淡いピンクの布地の上に商品写真を置き、明朝 3 行のメッセージとロゴを添える。

Imagery

• 女性モデルは素肌感のある柔らかい光で撮る。目を閉じた表情や頬に手を添えた笑顔にする。
• 商品はピンクの水しぶきや泡、布の上に置き、ハイキーで撮る。
• 成分は雫・スポイト・泡のマクロ写真で、透明感を強調する。
• 背景にはボケた光の玉や半透明の泡を散らす。
• 図解や手順は細い線画のイラストにし、ピンクの差し色だけを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央に幅 750px 前後のカラムを置き、左右は淡いピンクのグラデーションで埋めることを推奨。
• 成分カードは PC で 4 列にしてもよい。
• ファーストビューは写真を横長にし、キャッチは左に寄せる。
• 文字サイズは SP の 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 行書くと起動時に読み込まれる。