DESIGN.md — 生成り地×橙グラデの上品スキンケアLP（Warm Apricot Gradient Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル、情報量多め・訴求型
• キーワード: 生成り・橙グラデーション・明朝見出し・成分訴求・植物あしらい・番号ポイント
• 地の質感: ほぼフラットな紙のような生成り地。帯とボトルにだけ光沢のある橙グラデーションを使う
• 形: 角丸は小さめのカードとピル型ラベル。左に縦線を引いた見出し帯と円形の成分アイコン
• 温度感: 暖色寄り。杏色と生成りで、柔らかく温かい

Colors

• 地は生成り、内容のまとまりは白カードに載せる
• 大見出しの帯だけ濃い橙から杏色への左右グラデーションにし、文字は白にする
• Point番号・Step番号・ラベル・強調語は橙1色にそろえる
• 小見出しの帯は淡い桃橙の地に、左端だけ橙の縦線を引く
• 本文は墨色で、橙は1ブロックに数か所だけ使う
• 寒色は使わず、写真の緑やワインの紫だけを例外とする
• gradient-band は文字 #FFFFFF × 背景 #EB6A33 のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CD4B14、4.55:1）を使う。
• point-number は文字 #E8622C × 背景 #FFF0E9 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BF4615、4.61:1）を使う。
• layer-pill は文字 #E8622C × 背景 #FFFFFF のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BF4615、4.55:1）を使う。
• ingredient-icon は文字 #E8622C × 背景 #FFFFFF のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BF4615、4.55:1）を使う。
• qa-header は文字 #E8622C × 背景 #FFF0E9 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BF4615、4.61:1）を使う。

Typography

• 見出しは明朝体、本文はゴシック体にする
• 番号と欧文の見出しは細めのセリフ体にし、橙で表示する
• 本文は中央揃えを基本とし、カード内の説明は左揃えにする
• 訴求表現の右肩に※番号を付け、注釈はブロックの直下に小さく置く
• 強調は太字よりも橙の文字色で行う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ステップの図解と成分アイコンは 3 列、クリーム層は 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに白カードを生成り地の上に置く
• Pointは番号の円と見出しを横に並べ、その下に区切り線と本文を続ける
• 成分は円形アイコンと名前を3列のグリッドに並べる
• ステップは左にイラスト、右に説明を置く
• 注釈はカードのすぐ下に、左揃えで小さく置く

Elevation & Depth

• 影はほぼ使わず、面の色の差と細い線で階層を作る
• 写真カードだけ、ごく淡い影か角丸で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 製品は切り抜きで配置する。情景写真は四角に切り、成分写真は白い円で囲む
• セクション境界: 直線で区切る。グラデーションの全幅帯を境目のアクセントにする
• 層を示すラベルは白地に橙の枠と文字のピル型にする
• Point番号の背後には淡い桃色の円を置く
• 囲みの左上に『ここがポイント』型の見出しを手書き風の斜線で添える

Components

• グラデーション見出し帯（gradient-band）: 濃い橙から杏色へ横方向に変わる帯。白い明朝体で見出しを載せる
• Point番号（point-number）: 淡い桃色の円の上に、Pointと2桁の番号を橙のセリフ体で重ねる
• 左線付き小見出し（heading-bar）: 淡い桃橙の帯で、左端に4pxの橙の縦線を引く
• 層ラベル（layer-pill）: 白地に橙の枠線と文字のピル型。その右に成分名を橙で並べる
• ここがポイント枠（point-box）: 細い枠のボックス。左上に装飾見出し、グラデ帯、本文と写真を並べる
• 成分アイコン（ingredient-icon）: 白い円の中に植物の写真を入れ、右に橙の成分名を2行で添える
• Step番号（step-number）: 小さなStepの文字と、大きな斜体セリフの番号を橙で並べ、線画イラストと組む
• Q見出し（qa-header）: 淡い桃橙の帯に大きな橙のQを置き、質問文を橙の明朝体で書く。回答は帯の外に墨色で書く

Do's and Don'ts

Do - 生成り・白・淡い桃橙の3段階で面を分ける - 橙の要素は番号・ラベル・強調語にそろえる - 訴求表現には※番号を付け、注釈を近くに置く - 柑橘や葉の水彩風あしらいをカードの角に添える - 見出しは明朝体で、ゆったりした行間にする

Don't - 寒色や原色の赤を主な色に使わない - 強い影や立体的なボタンを使わない - 見出しを太いゴシック体にしない - グラデ帯を連続して並べない - 成分写真を四角いまま並べない

Page Structure

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

1. ファーストビュー（製品の世界観と核となる便益を伝える）: 白い浴室風の情景に製品写真を置き、上に明朝のコピーを縦線で挟む。下にロゴと商品名を置く
2. おすすめの人（対象者に自分ごととして捉えてもらう）: 白カードに橙の点付きの箇条書きを4つ並べ、角に柑橘のイラストを添える
3. ベネフィットコピー（1品で完結することを強く打ち出す）: 生成り地に、大きな明朝体を2行で中央揃えにする
4. Point 01 構造の説明（独自技術を説明する）: 番号の円と見出し、本文の後に、カプセルの図と層ラベルを並べる。続けてポイント枠に容器の写真を入れる
5. Point 02 テクスチャーの変化（使ったときの感触を伝える）: 番号付きの3枚の図解カードを横に並べ、下にポイント枠を置く
6. Point 03 原料の物語（原料の由来から信頼感を作る）: 淡いぶどう畑のイラストを背景に中央揃えの文章を置き、ワインの写真と全幅の農園写真を添える
7. 配合成分（成分の豊富さを示す）: グラデ帯の後、層ごとのカードで円形の成分アイコンを3列に並べる
8. 香り（使う時間の情緒的な価値を伝える）: 白い花と製品の写真の前に、グラデ帯のコピーと本文を重ねる
9. 使い方（正しい使い方を教える）: 欧文の大見出しの下に、Step番号と線画イラストを3段で並べる。続けてシーン別の使い方を紹介する
10. タイプの選び方（2タイプから選べるようにする）: ローマ数字の見出しと橙の点の箇条書きを、ボトル写真と左右交互に組む
11. よくある質問（購入前の不安を解消する）: Q帯と回答文を並べ、手順の回答はStep番号と下向きの矢印でつなぐ

Imagery

• 製品は光沢のある橙グラデーションのボトルを切り抜き、白や生成りの地に置く
• 情景写真は白いタオルや浴室など、明るく白っぽいトーンにする
• 成分はそれぞれ白い円の中に写真を入れる
• 使い方は細い線画で、顔や手を描いたイラストにする
• 柑橘・葉・ぶどう畑の水彩風あしらいを淡く添える
• テクスチャーは、オイルの粒が泡状の肌の上にのる図解で表す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元のLPは720px幅の中央1カラムで、PCでも左右に余白を取ってそのまま表示する
• SPでは成分の3列グリッドを維持し、アイコンは48pxにする
• ポイント枠内の本文と写真の横並びは、SPでは写真を下に回してもよい
• Pointの見出しはSPで18〜20pxにし、番号の円と横に並べる

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