DESIGN.md — 淡青×桜ピンクのやさしいコスメ新商品 LP（Soft Pastel Blush Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、清潔・爽やか、シンプル・ミニマル
• キーワード: パステル・くすみテラコッタ・ハート・細い線・新発売・色展開
• 地の質感: フラットな単色面と、柔らかい自然光のポートレート写真。影は使わない
• 形: ピル型ボタン、ハート形バッジ、細い罫線で囲んだ角丸の小さいタグ、手描き風のスウッシュ線
• 温度感: 淡青の涼しさと、桜ピンク・テラコッタの温かさが混ざった、ややあたたかい印象

Colors

• 地の色は淡青（ファーストビュー）、白（商品詳細）、桜ピンク（CTA 帯）の 3 つを順に切り替える
• 文字は真っ黒を使わず、濃いブラウンとテラコッタでまとめる
• マゼンタピンクは購入ボタンだけに使う
• NEW 表記や色数のバッジは、テラコッタ系のハートで目立たせる
• グリーンはチェックアイコン程度の小さな差し色に限る
• 罫線や枠線は、ピンクベージュで細く引く
• button-primary は文字 #FFFFFF × 背景 #E3448D のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE257A、4.51:1）を使う。
• badge-heart は文字 #FFFFFF × 背景 #A87876 のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9E6966、4.5:1）を使う。
• tag-outline は文字 #A87876 × 背景 #FFFFFF のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9E6966、4.5:1）を使う。
• spec-bar は文字 #A87876 × 背景 #FFFFFF のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9E6966、4.5:1）を使う。
• speech-bubble は文字 #A87876 × 背景 #FFFFFF のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9E6966、4.5:1）を使う。

Typography

• 見出しは字間を広めにとり、細めのウェイトで上品に見せる
• キャッチの文字はテラコッタにし、下に手描き風のスウッシュ線を添える
• スペック行はテラコッタ文字にし、縦線で区切って 1 行に並べる
• 本文は中央揃えで短く改行する
• 色番号は 01・02・03 のように欧文数字で、見出しの上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。色の展開は SP で 1 列、PC で 3 列。特長タグは SP で 2×2、PC で 4 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• ファーストビューは写真を全幅で置き、左にコピー、右にハートバッジを重ねる
• CTA は桜ピンクの帯の中央に 1 つだけ置く
• 商品の横長写真を中央に大きく置き、吹き出し型の注釈を添える
• 特長タグは同じ幅で横に並べる
• 各セクションの上下に 48px 前後の余白をとる

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる
• 奥行きは、写真と単色面の重なりだけで出す
• カードは影ではなく、淡いグレーの面で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は全幅の角型。目元のアップは角丸なしの横長長方形で切り抜く
• セクション境界: 直線で背景色を切り替える
• CTA は完全なピル型にし、右端に丸い矢印を付ける
• バッジはハート形、または吹き出し形にする
• 特長タグは細い罫線で囲む
• 手描き風の曲線を飾りとして使う

Components

• 購入ボタン（button-primary）: マゼンタのピル型ボタン。右端に白丸の矢印を付け、桜ピンクの帯の中央に置く
• CTA 帯（cta-band）: 全幅の桜ピンク帯。ボタン 1 つだけを中央に置く
• ハート型 NEW バッジ（badge-heart）: テラコッタのハートの中に、新発売の表記と発売日を白文字で入れる
• 特長タグ（tag-outline）: ピンクベージュの細い枠で囲んだ角丸タグ。特長を短い言葉で書き、×印で組み合わせて並べる
• スペック行（spec-bar）: 発売日・価格・色数・容量を縦線で区切った 1 行。上下を細い罫線で挟む
• チェック付き特長カード（feature-chip）: 淡いグレーの面の左にグリーンのチェックを置き、特長を 2 行で書く
• 色展開カード（color-card）: 番号、色名、短い説明、線の見本、目元写真を縦に並べたカード
• 円形吹き出し（speech-bubble）: テラコッタの線で描いた円形の吹き出し。使いやすさを手書き風の文字で書く

Do's and Don'ts

Do - 地の色は淡青・白・桜ピンクの 3 つに絞る - 文字はブラウンかテラコッタにし、柔らかく見せる - CTA はマゼンタのピル型 1 種類で統一する - 色の展開は、番号・線の見本・目元写真を必ずセットで見せる - 余白を広くとり、情報を詰め込まない

Don't - 原色の赤や純黒の太い文字は使わない - 濃い影やグラデーションのボタンは使わない - CTA 以外にマゼンタを使わない - 本文を長い段落で詰め込まない - 角張った太枠の見出しは使わない

Page Structure

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

1. ファーストビュー（商品の世界観と新発売を伝える）: 淡青の背景にモデルの顔のアップを置く。左にキャッチ・価格・特長タグ・商品写真、右にハートの NEW バッジを重ねる
2. CTA（最初の購入導線）: 桜ピンクの帯の中央に、マゼンタのピル型ボタンを置く
3. 商品概要（商品名とスペックを示す）: 白地に大きな商品名、手描き風の線、スペック行、リード見出しを中央揃えで並べる
4. 商品説明（こだわりと使い心地を伝える）: 横長の商品写真の上下に説明文を置く。左に極細芯の拡大図、右に円形の吹き出しを添える
5. 特長（機能をひと目で伝える）: チェック付きの特長カードを 4 つ並べる
6. 色展開（色の違いを比べてもらう）: 番号付きの色カードを 3 つ並べ、それぞれに線の見本と目元写真を入れる
7. CTA（最後の購入導線）: 冒頭と同じ桜ピンクの帯とボタンを繰り返す

Imagery

• 人物写真は淡い青の背景で、柔らかい正面光の顔のアップにする。手を口元に添える
• 肌は明るく透明感を出し、メイクはテラコッタ系でまとめる
• 商品写真は斜めに並べた切り抜きにし、影を薄くする
• 目元は角丸なしの横長でアップにし、色の発色がわかるようにする
• 手描き風のスウッシュ線や線の見本を飾りに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の約 1000px 幅に収め、ファーストビューは全幅の写真にする
• SP ではファーストビューのコピーを写真の上か下に移し、ハートバッジを小さくする
• 色展開カードは PC で 3 列、SP で 1 列の縦並びにする
• 特長カードは PC で 4 列、SP で 2×2 にする
• CTA は SP で幅 80% 程度に広げる

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