DESIGN.md — ピンク×パステルぼかしの周年記念コスメLP（Dreamy Pastel Anniversary Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: パステルぼかし・周年記念・フラットイラスト・紙吹雪・ピンク基調・まつげモチーフ
• 地の質感: エアブラシ風のやわらかいグラデーション玉と、細かいノイズ粒子を重ねたふんわり質感
• 形: 大きな円弧・波形エッジ・ピル型ボタン・花形バッジなど、すべて丸い形
• 温度感: 暖かく甘い。ピンクを主に、黄色と水色を差し色にする

Colors

• 地の色は淡ピンクを基本にし、セクションごとに白・レモン黄・水色へ切り替える
• 見出し・数字・ボタン縁はブランドピンクに統一する
• ぼかし玉はピンク・黄・水色・紫のパステルで、画面の端に置く
• 濃ピンクは幕や帯など、場面転換の大きな面だけに使う
• 締めのセクションはピンク帯にし、文字はすべて白にする
• 本文は黒にし、強調はピンクの文字色で行う
• button-outline-pill は文字 #E87B98 × 背景 #FFFFFF のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DB315E、4.55:1）を使う。
• content-card は文字 #E87B98 × 背景 #FFFFFF のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DB315E、4.55:1）を使う。
• tab-year は文字 #FDFCFB × 背景 #FE889D のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E8022B、4.58:1）を使う。
• speech-cloud は文字 #FFF9FC × 背景 #1EBEEB のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#0E7D9D、4.55:1）を使う。
• accordion-note は文字 #FFF9FC × 背景 #FFB6C9 のコントラスト比が 1.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#E6003C、4.56:1）を使う。

Typography

• 本文は中央揃えにし、短い行で改行する
• 見出しは丸く太い書体を使い、ピンクで大きく置く
• 英字ラベルは字間を広げた大文字のサンセリフにする
• 筆記体の英字は和文見出しの上に飾りとして添える
• 数字は特大にして、賞の点数や順位を目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞カードは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 要素はすべて中央に寄せ、左右対称に組む
• セクションは大きな円弧や円形の地で包む
• イラストや商品画像は端からはみ出すように散らす
• カードは縦に積み、間を 16px 前後空ける
• 注釈は各ブロックの末尾に小さくまとめる

Elevation & Depth

• カードは影ではなく、下側に厚めのピンク縁を付けて立体感を出す
• ぼかし玉の発光で奥行きを作る
• ドロップシャドウはほとんど使わない

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きにして傾けて配置する。写真は円形や角丸の枠に入れる
• セクション境界: 大きな円弧と波形（スカラップ）のエッジで区切る
• ボタンはピンク縁の白いピル型にし、左に三角アイコンを付ける
• 賞のバッジは花形・ギザギザの円にする
• 吹き出しは雲形や角丸にする
• 直線の区切りは使わない

Components

• ピンク枠のピルボタン（button-outline-pill）: 白地にピンクの枠線と文字。左に三角アイコンを付け、英字は大文字にする
• コンテンツ案内カード（content-card）: 白い角丸カード。下側に厚いピンク縁を付ける。小見出し・ピンクの大タイトル・ボタンの順に並べる
• 年代タブ（tab-year）: ピル型のタブを 3 列×2 段に並べる。選択中はピンクの塗りに白文字にする
• 英字ラベル付き見出し（label-ribbon）: ピンク地のラベルに英字を入れ、その下に白枠の和文見出しを重ねる
• 賞のバッジ（prize-badge）: ピンクからオレンジへのグラデーションの花形バッジ。賞のアルファベットと点数を特大で入れる
• 雲形の吹き出し（speech-cloud）: 水色またはピンクの雲形に、白い太字の短い文を入れる
• 斜線で挟んだ見出し（slash-heading）: 見出しの左右を斜線で挟み、参加を促すピンクの文字にする
• 注意事項アコーディオン（accordion-note）: ピンクの細い帯に、白文字と＋アイコンを入れる

Do's and Don'ts

Do - パステルのぼかし玉を背景の端に散らす - まつげのような小さなモチーフを繰り返し使う - セクションの境目は円弧や波形にする - 賞や実績は特大の数字とバッジで見せる - ボタンはピンク枠のピル型にそろえる

Don't - 黒や紺の重い面を使わない - 角ばった四角いボタンにしない - 明朝体を使わない - 本文を左揃えで長く詰めない - 写真をフルブリードで並べない

Page Structure

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

1. ファーストビュー（周年の祝祭感を伝える）: 中央に周年数字のロゴを置き、まわりに人物と商品のイラストを回転配置する。背景はぼかし玉
2. メッセージ（感謝とブランドの想いを伝える）: 宝箱のアイコン、ピンクの見出し、中央揃えの短い本文を順に置く
3. コンテンツマップ（各企画へ誘導する）: 黄色地に紙吹雪を散らし、案内カードを 3 枚縦に積む
4. 幕の演出（場面を転換する）: 濃ピンクのカーテンと金の額縁でステージを演出する
5. 歴史年表（これまでの歩みを見せる）: 年代タブを置き、花形バッジの年表を曲線でつなぐ
6. 原点ストーリー（ブランドの成り立ちを語る）: 円形の淡ピンク地に、カレンダーとイラストを並べる
7. パッケージの変遷（商品の進化を見せる）: 水色地に白い円のカードと雲形の吹き出しを置く
8. 実績（信頼を示す）: 筆記体の英字とともに、月桂樹で囲んだ特大の数字を見せる
9. SNSキャンペーン（投稿を促す）: 番号バッジ・賞バッジ 4 つ・SNS ボタン 2 つ・注意事項を順に置く
10. ガチャ企画（参加型の楽しさを出す）: ガチャのイラストを中央に置き、左右に賞の円形カードを並べる
11. 締めのメッセージ（余韻を残す）: 円弧と波形で挟んだピンク帯に、白文字の見出しと本文を置く
12. フッター（SNS へ誘導する）: モノクロのSNSアイコンを横に並べ、最後に周年ロゴを置く

Imagery

• 人物は輪郭線のないフラットイラストにし、パステルと粒子の質感を加える
• 商品パッケージは切り抜きにし、傾けて浮遊させる
• 背景には発光するパステルのぼかし玉を置く
• 紙吹雪やキラキラ星で祝祭感を足す
• 閉じたまつげのモチーフを繰り返す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央の約 900px 幅にまとめ、背景のぼかしを全幅に広げる
• PC では案内カードを 3 列に横並びにする
• PC では年代タブを 1 行に並べる
• PC では年表やパッケージ変遷を横に展開する
• PC ではガチャの賞カードを左右に配置する

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