DESIGN.md — 桜ピンク×水色アクセントのリップコスメ LP（Sweet Pink Glossy Lip Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気
• キーワード: 淡ピンク・ツヤ・色番号・モデル写真・水色アクセント・キラキラボケ
• 地の質感: ピンクのグラデーションに光のボケやキラキラを薄く重ねる。白カードは影なしのフラット。
• 形: 角丸の大きい白カード、ピル型ボタン、円形の色番号チップ、花形の限定バッジ
• 温度感: 暖かく甘い。差し色の水色で清潔感と軽さを出す

Colors

• 地は白と淡ピンクを交互に置き、限定色ブロックだけくすみピンクで区切る
• 色名と色番号はローズブラウン、機能説明の見出しと番号は水色
• 購入ボタンは水色のみ。ピンク系のボタンは作らない
• キーワードはピンクのマーカー帯に水色文字を乗せる
• 黒はフッターだけに使う
• button-primary は文字 #FFFFFF × 背景 #14BAD5 のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0E8194、4.58:1）を使う。
• marker-heading は文字 #30A9BA × 背景 #FEC5DD のコントラスト比が 1.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1D656F、4.53:1）を使う。

Typography

• セクションラベルは細い英字で、左右に小さなピンクの点を添える
• 色番号は大きな数字、その下に色名カタカナを太字で
• 強調語は水色かピンクで部分的に色を変える
• 本文は短い 2 行程度に区切る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。色紹介は写真と文字を縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 色紹介ブロックは写真と文字を左右交互に配置する（PC）
• 特長は大きな白カードの中に番号付きで縦に並べ、点線で区切る
• 色番号チップは横一列に並べ、SP では 5 個ずつ 2 段にする
• SNS リンクは白い小カードのグリッドにする

Elevation & Depth

• 影はほぼ使わず、地の色の差でカードを浮かせる
• 購入先カードは細い灰色の枠線で囲む

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: モデル写真は片側の角だけ大きく丸める角丸四角。キービジュアル下にはスタジアム型の切り抜きも使う
• セクション境界: 直線で地の色を切り替える
• 限定色・新色バッジは花形の円に白文字
• 見出しラベルはピル型の水色タブ
• 色番号は円形チップの下に小さな山形矢印を付ける

Components

• 購入ボタン（button-primary）: カート記号付きの水色ボタン。白枠カードの中に置く
• 英字セクションラベル（section-label）: 中央に細い英字、左右にピンクの点
• マーカー見出し（marker-heading）: ピンクの帯に水色太字。2 語を×記号で結ぶ
• 水色タブ見出し（tab-heading）: 白文字のピル型タブで白カードの上端に重ねる
• 番号付き特長カード（feature-card）: 白カード内に水色の番号と小見出し、右に図版。点線で区切る
• 限定・新色バッジ（badge-limited）: ローズ色の花形円に白文字
• 色番号チップ（color-chip）: 実際の色で塗った円に白い番号
• 色紹介ブロック（shade-block）: 番号と色名と 2 行のコピー、唇の写真とテクスチャ写真、モデル写真

Do's and Don'ts

Do - 色ごとに番号・色名・2 行コピー・唇写真をセットで見せる - ピンクの地に水色を少しだけ差して甘さを抑える - 写真は片側の角だけを大きく丸める - 余白を広く取り、要素を中央に揃える

Don't - 濃い原色や黒を広い面に使わない - 影の強いカードや立体的なボタンにしない - 明朝体や硬い書体を見出しに使わない - 色紹介を表組みで詰め込まない

Page Structure

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

1. ファーストビュー（商品の世界観とモデルを見せる）: ピンクのキラキラ背景にモデル 2 人、手書き風コピー、ロゴ、丸バッジ
2. 新着情報（新色・限定色を告知する）: 白地にバナー 2 枚、その下に日付と説明
3. コンセプト（商品の想いを伝える）: ピンクのグラデ地に、マーカー帯の見出しと中央揃えの本文
4. 特長の訴求（主な効果をひと目で見せる）: マーカー見出しを×で結び、水色の大コピー、スタジアム型の写真、唇のイラスト
5. 特長の詳細（仕組みを説明する）: 水色タブ見出しと白カード、番号付きの 4 項目と図版
6. 使い方（手順を示す）: ピンク丸数字の 4 ステップと唇の写真
7. 商品ラインナップ（全色・価格・購入先を示す）: パッケージを格子状に並べ、購入先カードと水色ボタン、色番号チップ
8. 色紹介（色ごとの魅力を伝える）: 左右交互のモデル写真と唇写真。限定色はくすみピンクの地に分ける
9. カラーチャート（色の位置関係を示す）: 十字の軸の上に円形の色チップを配置
10. 動画（使っている様子を見せる）: 白地の中央に埋め込み動画
11. SNS・取扱店（公式アカウントと店舗へ誘導する）: 淡ピンクの地に白い小カードのグリッドと店舗ロゴの枠
12. フッター（著作権表記）: 濃いグレーの細い帯

Imagery

• モデルは明るい肌で、手を顔に添える甘いポーズ。背景は淡い水色かピンクの無地
• 唇のアップと、筆で伸ばしたツヤのあるテクスチャ写真をセットで使う
• 商品は白いボトルを真っすぐ立てて切り抜く
• ピンクの唇イラストやキラキラのシンプルな線画を装飾に使う
• 背景には光のボケや花びらを薄く重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅約 75% で中央寄せ。SP は 88% にする
• 色紹介は PC では左右交互、SP では写真の下に文字を積む
• 色番号チップは SP で 2 段に折り返す
• SNS カードは PC が 3 列、SP は 2 列にする
• 購入先カードは SP で縦に並べる

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