DESIGN.md — パステル3色で色分けするスキンケア LP（Pastel Color-Coded Skincare Lineup LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、上品・高級、清潔・爽やか、シンプル・ミニマル
• キーワード: パステル色分け・縦書きコピー・丸型成分写真・レーダーチャート・グレージュ地・余白多め
• 地の質感: マットでやわらかい質感。光をふわっと回した商品写真と、くすみ系の単色ベタ面を組み合わせる
• 形: ピル型のタグ、正円の成分写真、角丸の大きいカード
• 温度感: やや暖かい。くすみのある中間色で落ち着かせる

Colors

• ページ全体の地はグレージュか白にし、ラインごとにイエロー・グリーン・ピンクの1色だけを割り当てる
• 各ラインのセクションは、そのライン色の濃い帯（見出し）と薄地（本文の地）の2段階でまとめる
• タグ・チャートの塗り・縦書きコピー帯は同じライン色にそろえる
• 共通セクション（成分・フリー処方・使い方）は無彩色寄りのベージュにして、ライン色は使わない
• テキストは黒に近いグレーにし、純黒は避ける。注釈は薄いグレーで小さく入れる
• vertical-copy は文字 #FEFEFE × 背景 #5E8C5E のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#568056、4.51:1）を使う。
• renewal-badge は文字 #8C8C8C × 背景 #FEFEFE のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.5:1）を使う。

Typography

• 見出しはミディアムの細めのゴシックにし、太すぎるウェイトは避ける
• メインコピーは縦書きで、ライン色の帯に白抜きで入れる
• 英字のサブ名やHow toの見出しは細いセリフ体を添える
• 注釈は※の番号を上付きで入れ、10px程度でまとめる
• 番号（01〜04）は細い欧文セリフ体で大きく入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分の丸写真は2〜4個を横に並べ、フリー処方は3列のグリッドにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• ラインごとのブロックは同じ構成を3回くり返す
• 商品写真と縦書きコピーは左右に分けて重ねる
• チェックリストは白カードの中で中央にそろえる
• 成分の訴求は人物写真を左、成分の説明を右に置く2分割にする
• 余白は広めにとり、詰め込まない

Elevation & Depth

• 影はほぼ使わず、色面の差で階層を表す
• 白カードは影なしか、ごく淡い影にとどめる
• 商品写真は柔らかい接地影だけにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 成分やテクスチャーは正円、人物や使い方の写真は角丸なしの矩形で切り抜く
• セクション境界: 直線で地の色を切り替える。ライン帯の上端だけ緩い弧にする
• タグはすべてピル型
• 成分の訴求は正円のバッジにする
• カードの角丸は12〜20px
• Newバッジは小さな円で写真の左上に重ねる

Components

• ラインのタイトル帯（line-header）: ライン色のベタ帯に、悩みタグ2つを「×」でつなぎ、ケア名を白抜きで入れる
• 悩みタグ（pill-tag）: 白地またはライン色のピル型ラベル。3つを横に並べる
• 縦書きコピー帯（vertical-copy）: ライン色の細長い帯に、白文字の縦書きを2列で入れる
• 効果のレーダーチャート（radar-chart）: 6軸の五角形チャートをライン色の半透明で塗る
• 成分の丸写真（ingredient-circle）: 正円に切り抜いた成分写真の下に成分名を入れ、Newバッジを重ねる
• 悩みのチェックリスト（check-card）: 白カードの中に見出しと、チェックボックス付きの4項目を区切り線で並べる
• フリー処方の丸（free-circle）: グレージュの正円に配合しない成分名を入れ、斜線を重ねる
• 使い方のステップ（step-row）: 左に写真、右に大きな番号と説明文を置き、4段に並べる
• リニューアルラベル（renewal-badge）: 白地に小さなセリフ体の英字を入れた矩形ラベル、またはライン色の円

Do's and Don'ts

Do - ラインの色分けは3色で統一し、帯・タグ・チャートまで同じ色にする - ラインごとのブロックは同じ構成をくり返し、比べやすくする - 成分はすべて正円で切り抜き、サイズをそろえる - 注釈は小さく薄いグレーで、各ブロックの末尾にまとめる - 縦書きのコピーで化粧品らしい品のよさを出す

Don't - 原色や蛍光色は使わない - 1つのブロックに複数のライン色を混ぜない - 太い極太の見出しや強いドロップシャドウは使わない - 角の立った派手なボタン装飾は使わない - 背景に柄やテクスチャーを敷き詰めない

Page Structure

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

1. ファーストビュー（シリーズ全体と色の展開を見せる）: 積み上げた色違いの容器の写真に縦書きのコピーを重ね、下に4色のサムネイルと短い見出しを置く
2. ラインナップ（悩み別に商品を比べさせる）: ライン色の帯、レーダーチャート、成分の丸写真を入れたカードを3色ぶん縦に並べる
3. 商品詳細（イエロー）（1つめのラインの世界観と悩みを伝える）: 薄いイエロー地に大きな商品写真と縦書きの帯、悩みタグ、白カードのチェックリストを置く
4. 成分訴求（イエロー）（主な成分の根拠を示す）: 左に人物の写真、右にピル型のリード、太めの見出し、成分の丸写真を置く
5. 商品詳細（グリーン）（2つめのラインを紹介する）: グリーン系で同じ構成をくり返す
6. 成分訴求（グリーン）（成分の根拠を示す）: 人物と成分の2分割で同じ構成にする
7. 商品詳細・成分（ピンク）（3つめのラインを紹介する）: ピンク系で同じ構成をくり返す
8. 共通成分（ブランド独自の成分を説明する）: 白地に植物の俯瞰写真を置き、見出し、本文、4つの丸い植物写真を並べる
9. フリー処方（安心感を伝える）: グレージュ地に、斜線を入れた6つの正円を3列で並べる
10. 使い方（使う手順を示す）: 大きなセリフ体の英字見出しの下に、写真と番号付きの4ステップを並べる

Imagery

• 容器はパステルのマットな質感に。白い背景かライン色の背景で、やわらかい光の中で撮る
• 商品の横にテクスチャーやモチーフ（はちみつ・葉・水滴）を添えて、ラインの性格を見せる
• 成分は寄りで撮り、正円で切り抜く
• 人物は肌のツヤを見せるナチュラルメイクで、顔に手を添えるポーズにする
• 使い方の写真は明るいグレーの背景で、手と顔の動作を見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元画像は狭めのPC幅で、ほぼSPと同じ1カラム構成
• PCでは本文の幅を最大約480〜600pxにして中央に置き、左右はグレージュの地にする
• SPでは人物と成分の2分割を保つか、写真を上に置く縦積みに切り替える
• フリー処方はSPで3列のまま、円の直径を約90pxにする

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