--- version: alpha name: Pastel Character Collab Cosmetics LP description: 淡いクリーム色に花柄ドットを敷いた地に、ピンク・水色・紺のパステル配色でキャラクターを散りばめたコラボ限定コスメ LP。雲形・吹き出し・ふち取り文字でポップに見せつつ、成分や使い方は白カードで整理している。 colors: background: '#FEFFD5' surface: '#FDFDFD' primary: '#F08AAE' tint-1: '#FEEDF3' secondary: '#BCE5F3' tint-2: '#E9F2F7' dark-section: '#162446' on-dark: '#FFFFFE' accent-1: '#F08A30' accent-2: '#E0407A' accent-3: '#297DAA' marker: '#FDFD54' text: '#2A2A3A' line: '#B8C4D8' primary-accessible: '#E22064' accent-2-accessible: '#DD2C6C' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Zen Maru Gothic fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 26px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 6px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px heading-number: textColor: '{colors.accent-3}' typography: '{typography.headline-lg}' height: 56px product-cloud-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 300px rating-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 90px dark-header-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 420px free-icon-grid: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 80px limit-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px point-cloud: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 110px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px award-laurel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' height: 100px --- # DESIGN.md — クリーム地×パステルのキャラコラボ美容液 LP（Pastel Character Collab Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: パステル・キャラクター・雲形・ふち取り文字・商品ごとの色分け・限定感 - **地の質感**: クリーム地に薄い花柄パターン、ストライプ、虹、キラキラ星の装飾を重ねたフラットな質感 - **形**: 雲・もこもこ吹き出し・角丸カード・円形アイコン・ピル型ラベル - **温度感**: 暖かく甘い。ピンクと水色で軽やかさを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFFD5` | ページ全体の花柄クリーム地 | 22% | 画素の実測 | | `surface` | `#FDFDFD` | 情報カードの白地 | 20% | 画素の実測 | | `primary` | `#F08AAE` | ピンク見出し帯・商品2のテーマ色 | 6% | 推定 | | `tint-1` | `#FEEDF3` | ピンク系セクションの淡い地 | 8% | 画素の実測 | | `secondary` | `#BCE5F3` | 水色見出し帯・商品3のテーマ色 | 6% | 画素の主要色に補正 | | `tint-2` | `#E9F2F7` | 水色系セクションの淡い地 | 7% | 画素の実測 | | `dark-section` | `#162446` | 紺の見出しヘッダー帯 | 3% | 画素の実測 | | `on-dark` | `#FFFFFE` | 紺帯上の白文字 | 1% | 画素の実測 | | `accent-1` | `#F08A30` | オレンジのふち取り見出し・強調 | 2% | 推定 | | `accent-2` | `#E0407A` | 濃ピンクの価格・強調文字 | 1% | 推定 | | `accent-3` | `#297DAA` | 青のステップ枠・番号 | 2% | 画素の実測 | | `marker` | `#FDFD54` | 黄色マーカー・バッジ | 2% | 画素の実測 | | `text` | `#2A2A3A` | 見出し・本文の濃い文字 | 4% | 推定 | | `line` | `#B8C4D8` | 点線区切り・カード枠 | 1% | 推定 | | `primary-accessible` | `#E22064` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#DD2C6C` | AA を満たす補正値（計算） | | 計算 | - 地はクリーム＋薄い花柄で統一し、情報は白カードに載せる - 商品ごとにテーマ色を分ける（紺・ピンク・水色） - 見出し帯はテーマ色のピル／雲形で、白抜きふち取り文字にする - 価格や重要語は濃ピンク、マーカーは黄色で引く - FVはピンク・虹・水色ストライプの多色で賑やかにする - 本文は濃紺グレーで可読性を確保 - `heading-pill` は文字 `#FFFFFE` × 背景 `#F08AAE` のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E22064`、4.54:1）を使う。 - `limit-badge` は文字 `#FFFFFE` × 背景 `#E0407A` のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DD2C6C`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・セクション大見出しのふち取り文字 | 装飾・ディスプレイ | Dela Gothic One | 700 | 36px | 1.2 | 0.02em | | `headline-lg` | ひらがなの丸い章見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 30px | 1.3 | 0.04em | | `headline-md` | カード内見出し・商品名 | 丸ゴシック | Zen Maru Gothic | 700 | 21px | 1.4 | 0.03em | | `headline-sm` | 見出し帯の白文字・リード | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.05em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.03em | | `note` | 成分注釈・※書き | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 価格の数字 | 欧文サンセリフ | Montserrat | 800 | 26px | 1.1 | 0.0em | | `label-button` | ピルラベル・タブ文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.3 | 0.05em | - 大見出しは白の太いふち取り＋色文字で立体感を出す - 章見出しはひらがな表記で幼さと親しみを出す - 見出し下に丸ドットの点線を引く - 重要語は色文字＋黄色マーカーで強調 - 注釈は小さく、本文と明確に差をつける - 価格は数字を大きく、税込表記は小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、比較や成分アイコンのみ 3〜4 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右に約5%の余白を残して置く - 商品紹介は左に商品写真、右に説明の2分割 - キャラクターはカード端からはみ出すように配置 - 成分フリーは円形アイコンを4列×2段 - 使い方は番号付きステップを縦または3列で並べる - セクションの切れ目は余白とテーマ色の見出しで示す ## Elevation & Depth - 基本はフラット。影はほぼ使わない - カードは淡い色の太めの枠線か濃いめの外枠ずらしで浮かせる - 雲形の背景を商品写真の下に敷き、奥行きを出す ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜き、使用イメージは円形または角丸四角でトリミング - **セクション境界**: 直線の切り替えに雲形・波形の装飾を重ねる - 見出しラベルはピル型か雲形にする - 吹き出しはもこもこの雲形 - 成分アイコンは斜線入りの円 - カード角は大きめの丸み ## Components - **ピル型見出し帯**（`heading-pill`）: テーマ色のピル内に白抜き文字、両端に曲線の飾り - **番号付き商品見出し**（`heading-number`）: 白ふち取りの大きな文字と下の丸ドット点線 - **雲形商品カード**（`product-cloud-card`）: 白い雲の上に商品写真と商品名・価格・星評価を配置 - **星評価の点線ボックス**（`rating-box`）: 点線枠内にケア項目と星の数を並べる - **紺ヘッダー付き情報カード**（`dark-header-card`）: 上部が紺帯に白文字、星の装飾、下が白い本文 - **無添加アイコングリッド**（`free-icon-grid`）: 斜線入り円に成分名を入れ4列で並べる - **限定数バッジ**（`limit-badge`）: ピンクの円形に限定数を白文字で - **ポイント雲吹き出し**（`point-cloud`）: ピンク枠の雲形に番号ラベルとポイントを短く - **使い方ステップ**（`step-card`）: 青枠の正方形にイラストと番号タグ、下に説明 - **月桂樹の実績表示**（`award-laurel`）: 金色の月桂樹で数値実績を3つ並べる ## Do's and Don'ts **Do** - 地は必ずクリーム＋花柄にし、情報は白カードにまとめる - 商品ごとにテーマ色を変え、見出し帯・枠・地を揃える - キャラクターや星をカード端に置いて遊び心を出す - 見出しはふち取り文字・ひらがなで柔らかく - 注釈は※付きで成分説明の直下に置く - 限定数と発売日はFV直後に白カードで示す **Don't** - 黒や原色の大面積を使わない（紺は見出し帯だけ） - 角張ったボタンや細い明朝体を使わない - 影を濃くつけたリアルな立体表現にしない - 1カードに3色以上のテーマ色を混ぜない - 注釈を本文と同じサイズにしない - キャラなしで文字だけが続く区間を長くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボと限定感を伝える）: ピンク地に虹とストライプ、ふち取りロゴ、キャラと商品3種を雲の上に並べる 2. **登場演出**（コラボ商品のお披露目）: 赤いカーテンと水色ストライプ、紙吹雪の舞台で大見出し 3. **発売日**（予約・発売日時を知らせる）: 白い角丸カードにピンクのピル見出し、日時を大きく 4. **限定特典**（購入特典で後押し）: 黄色の波形枠カードに限定数バッジと特典写真 5. **商品ラインナップ見出し**（全商品数を示す）: オレンジ枠の吹き出しにひらがな大見出しと黄色バッジ 6. **商品紹介（1品目）**（価格と特長の提示）: 番号見出し、雲形カードに商品・価格・星評価 7. **成分のひみつ**（独自成分の説明）: 紺ヘッダーカード、図解フロー、無添加アイコングリッド 8. **使用方法**（正しい使い方の案内）: タブ切替、円形の目元写真と STEP 番号の縦リスト 9. **商品紹介（2・3品目）**（商品ごとの推しポイント）: ピンク／水色テーマで雲形ポイント、比較写真カード 10. **実績**（信頼性の裏付け）: 月桂樹の数値を3つ並べ、注釈を下に 11. **シリーズのこだわり**（独自設計の訴求）: 青見出し帯と番号付き水色カード、夜空背景の比較図 12. **使い方3ステップ**（継続使用を促す）: 青枠の吹き出しと3列のイラストステップ ## Imagery - 商品パッケージは白背景切り抜きで、雲や台座の上に置く - キャラクターは太い輪郭線のポップなイラストで各所に配置 - 星・キラキラ・紙吹雪・ハートを手描き風に散らす - 使用イメージは目元のアップ写真を円形で - 成分説明はパステルのフラット図解 - 比較は拡大写真を3枚横並び＋矢印 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅のカラムを置き、左右は花柄クリーム地で埋める - 商品紹介は PC で写真と説明を横並びで余白を広く - アイコングリッドは PC で8列1段にしてもよい - 見出し文字サイズは PC で1.3倍程度にする ## 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-6d2bc622`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/angfa/eye-cp/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。