--- version: alpha name: Dreamy Pastel Anniversary Cosmetics LP description: 淡いピンク地にパステルのぼかし玉と、フラットな人物イラストを散らした周年記念のキャンペーンLP。丸みのある太いゴシックと手書き風の欧文、ピンク縁のピルボタン、波形の区切りで、かわいく祝祭感のある見た目にしている。 colors: primary: '#E87B98' background: '#FFEFF0' surface: '#FFFFFF' background-alt: '#E8F7FC' tint-1: '#FFFBCB' dark-section: '#FFB6C9' on-dark: '#FFF9FC' secondary: '#CE507F' cta: '#FE889D' on-cta: '#FDFCFB' text: '#222222' accent-1: '#1EBEEB' accent-2: '#FFB347' line: '#FE889D' primary-accessible: '#DB315E' cta-accessible: '#E8022B' accent-1-accessible: '#0E7D9D' dark-section-accessible: '#E6003C' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 64px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Pacifico fontSize: 36px fontWeight: 400 lineHeight: 1.1 label-button: fontFamily: Nunito fontSize: 14px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-outline-pill: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px content-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 110px tab-year: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 36px label-ribbon: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 24px prize-badge: backgroundColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.full}' height: 180px speech-cloud: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 80px slash-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 32px accordion-note: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 16px --- # DESIGN.md — ピンク×パステルぼかしの周年記念コスメLP（Dreamy Pastel Anniversary Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: パステルぼかし・周年記念・フラットイラスト・紙吹雪・ピンク基調・まつげモチーフ - **地の質感**: エアブラシ風のやわらかいグラデーション玉と、細かいノイズ粒子を重ねたふんわり質感 - **形**: 大きな円弧・波形エッジ・ピル型ボタン・花形バッジなど、すべて丸い形 - **温度感**: 暖かく甘い。ピンクを主に、黄色と水色を差し色にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E87B98` | ブランドピンク（大見出し・数字ロゴ・ボタン縁） | 6% | 画素の実測 | | `background` | `#FFEFF0` | メイン地の淡ピンク | 23% | 画素の実測 | | `surface` | `#FFFFFF` | カード・白地セクション | 24% | 画素の実測 | | `background-alt` | `#E8F7FC` | 水色セクション地 | 8% | 画素の実測 | | `tint-1` | `#FFFBCB` | レモン黄色セクション地 | 6% | 画素の実測 | | `dark-section` | `#FFB6C9` | 締めのピンク帯セクション | 9% | 画素の実測 | | `on-dark` | `#FFF9FC` | ピンク帯上の白文字 | 1% | 画素の実測 | | `secondary` | `#CE507F` | 幕・濃ピンクのアクセント面 | 5% | 画素の実測 | | `cta` | `#FE889D` | 選択中タブ・強調ボタンの塗り | 2% | 画素の主要色に補正 | | `on-cta` | `#FDFCFB` | 塗りボタン上の文字 | 0% | 画素の実測 | | `text` | `#222222` | 本文・小見出しの黒 | 2% | 推定 | | `accent-1` | `#1EBEEB` | 水色の吹き出し | 1% | 推定 | | `accent-2` | `#FFB347` | オレンジ黄の賞バッジ | 1% | 推定 | | `line` | `#FE889D` | カード・ボタンのピンク枠線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#DB315E` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E8022B` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#0E7D9D` | AA を満たす補正値（計算） | | 計算 | | `dark-section-accessible` | `#E6003C` | AA を満たす補正値（計算） | | 計算 | - 地の色は淡ピンクを基本にし、セクションごとに白・レモン黄・水色へ切り替える - 見出し・数字・ボタン縁はブランドピンクに統一する - ぼかし玉はピンク・黄・水色・紫のパステルで、画面の端に置く - 濃ピンクは幕や帯など、場面転換の大きな面だけに使う - 締めのセクションはピンク帯にし、文字はすべて白にする - 本文は黒にし、強調はピンクの文字色で行う - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 周年数字のロゴ・大見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 64px | 1.0 | 0.0em | | `headline-lg` | セクション見出し（ピンク・手書き風ゴシック） | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.4 | 0.05em | | `headline-md` | カード内タイトル・キャンペーン名 | 丸ゴシック | M PLUS Rounded 1c | 700 | 20px | 1.3 | 0.03em | | `headline-sm` | 黒の小見出し・リード | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.5 | 0.05em | | `body-md` | 中央揃えの本文 | ゴシック | Zen Kaku Gothic New | 500 | 11px | 1.9 | 0.05em | | `accent` | 手書き筆記体の英字飾り | 欧文スクリプト | Pacifico | 400 | 36px | 1.1 | 0.0em | | `label-button` | 英字ボタン・英字ラベル | 欧文サンセリフ | Nunito | 800 | 14px | 1.2 | 0.1em | | `note` | 注釈・応募条件 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | - 本文は中央揃えにし、短い行で改行する - 見出しは丸く太い書体を使い、ピンクで大きく置く - 英字ラベルは字間を広げた大文字のサンセリフにする - 筆記体の英字は和文見出しの上に飾りとして添える - 数字は特大にして、賞の点数や順位を目立たせる - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-4619f1c0`（元 LP の URL から採番） - **元 LP**: https://lululun.com/shop/pages/lululun_15th - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。