--- version: alpha name: Pastel Pink & Lavender Character Collab Sunscreen LP description: 2 色の商品をピンクとラベンダーのパートに分けて訴求するコスメ LP。くすんだパステルの地に大きなセリフ体の英字を置き、キャラクターのイラスト、SNS 投稿風カード、ポラロイド風フレーム、グラフで効果を見せる。 colors: primary: '#C86B7E' secondary: '#8A64B0' background: '#F2F1F6' background-alt: '#F9E7E7' tint-1: '#F4CCD5' tint-2: '#F4EFF5' accent-1: '#DAC1DE' accent-2: '#E26A86' surface: '#FFFEFE' text: '#505055' text-muted: '#9A9A9A' line: '#7A5AA0' dark-section: '#BCBDCA' marker: '#7E5A9E' accent-2-accessible: '#D8375C' primary-accessible: '#BE5167' accent-1-accessible: '#9E5DA9' typography: display: fontFamily: Playfair Display fontSize: 54px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.01em headline-sm: fontFamily: Permanent Marker fontSize: 11px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 body-lg: fontFamily: Montserrat fontSize: 20px fontWeight: 700 lineHeight: 1.2 rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-tag: backgroundColor: '{colors.accent-2}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 20px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 36px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.surface}' typography: '{typography.headline-lg}' height: 26px sns-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 460px graph-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 230px ingredient-icon: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 70px before-after: backgroundColor: '{colors.accent-1}' textColor: '{colors.surface}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 220px compare-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 480px --- # DESIGN.md — ピンク×ラベンダーのキャラコラボ日焼け止め LP（Pastel Pink & Lavender Character Collab Sunscreen LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、やさしい・柔らかい、ポップ・元気、情報量多め・訴求型 - **キーワード**: くすみパステル・2色パート構成・セリフ英字ロゴ風・SNS・スマホUIモチーフ・ハート装飾・ポラロイド - **地の質感**: グレーのコンクリート地とやわらかなパステルの平塗りを組み合わせる。破れた紙のような境界線でラフさも足す。 - **形**: 角丸の白カード、ピル型の吹き出し、円形アイコン、ポラロイド風の白フレーム。 - **温度感**: 前半はピンクで温かく甘め、後半はラベンダーで涼しげに切り替える。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C86B7E` | ピンクパートの見出し・強調文字 | 2% | 画素の実測 | | `secondary` | `#8A64B0` | ラベンダーパートの見出し・強調文字 | 2% | 推定 | | `background` | `#F2F1F6` | ベースになる淡いグレー白 | 20% | 画素の主要色に補正 | | `background-alt` | `#F9E7E7` | ピンクパートの淡ピンク地 | 14% | 画素の実測 | | `tint-1` | `#F4CCD5` | ピンクの大判背景（タイトル帯） | 4% | 画素の実測 | | `tint-2` | `#F4EFF5` | ラベンダーパートの淡紫地 | 12% | 画素の実測 | | `accent-1` | `#DAC1DE` | ラベンダーのタイトル帯・表見出し帯 | 4% | 画素の実測 | | `accent-2` | `#E26A86` | ポイントラベル・帯見出しの濃ピンク | 1% | 推定 | | `surface` | `#FFFEFE` | カード・吹き出しの白 | 9% | 画素の実測 | | `text` | `#505055` | 本文・見出しのダークグレー | 2% | 画素の実測 | | `text-muted` | `#9A9A9A` | 注釈・小さな英字 | 1% | 推定 | | `line` | `#7A5AA0` | 吹き出し・カードの枠線（紫） | 1% | 推定 | | `dark-section` | `#BCBDCA` | ストリート風ビジュアルのグレー地 | 6% | 画素の実測 | | `marker` | `#7E5A9E` | サブ見出しの濃紫帯 | 1% | 推定 | | `accent-2-accessible` | `#D8375C` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#BE5167` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#9E5DA9` | AA を満たす補正値（計算） | | 計算 | - 商品ごとに色パートを分ける。前半はピンク系、後半はラベンダー系で統一する。 - 地は淡色にする（淡ピンク・淡紫・グレー白）。濃い色は見出しの文字、帯、ラベルだけに使う。 - 強調語は primary か secondary の太字にする。サブ見出しは濃い色の帯に白抜き文字で置く。 - グラフの棒は、比較前をグレー、比較後をパートの色にする。 - 白カードの上にのせる文字は、ダークグレーとパートの色の 2 色に絞る。 - `point-tag` は文字 `#FFFEFE` × 背景 `#E26A86` のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#D8375C`、4.51:1）を使う。 - `speech-bubble` は文字 `#C86B7E` × 背景 `#FFFEFE` のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#BE5167`、4.57:1）を使う。 - `before-after` は文字 `#FFFEFE` × 背景 `#DAC1DE` のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#9E5DA9`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の大型英字タイトル | 欧文セリフ | Playfair Display | 500 | 54px | 1.0 | -0.02em | | `headline-lg` | セクションの強調見出し（日本語） | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-md` | 見出しの前に置くリード文 | ゴシック | Noto Sans JP | 400 | 15px | 1.5 | 0.02em | | `accent` | 英字のサブ見出し・成分名 | 欧文セリフ | Playfair Display | 400 | 28px | 1.2 | -0.01em | | `headline-sm` | ポイントラベルの手書き風英字 | 装飾・ディスプレイ | Permanent Marker | 400 | 11px | 1.2 | 0.05em | | `body-md` | 本文・チェックリスト | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.0em | | `note` | 試験条件などの注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `body-lg` | グラフの数値強調 | 欧文サンセリフ | Montserrat | 700 | 20px | 1.2 | 0.0em | - 商品名の英字はセリフ体で大きく 2 行に組み、パートの色でベタ塗りにする。 - 日本語の見出しは 2 段組みにする。1 段目は細めのリード文、2 段目は太い色文字。 - 英字見出しの下に、同じ意味の日本語見出しを小さく添える。 - 本文は中央揃えで短く改行する。 - 数値は欧文太字で大きく出し、単位と補足は小さくする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ポイントは 3〜4 列の小グリッドにし、比較表は 4 列にする。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 画像は全幅で見せ、テキストブロックは左右に約 5% の余白をとる。 - ポイントは『ラベル→リード→強調見出し→チェックリスト→ビジュアル』の順で繰り返す。 - テクスチャ写真は 2 枚を左右に並べ、1 枚の角丸カードにまとめる。 - グラフは角丸の白カードに 1 指標ずつ入れ、縦に積む。 - 各ブロックの終わりに小さな著作権表記を左下に置く。 ## Elevation & Depth - 白カードには、ごく薄いぼかし影をつける。 - ポラロイド風フレームは、少し傾けて影を落とす。 - 商品の物撮りは、床に落ちる自然な影を残す。 - それ以外はフラットにする。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 角丸の矩形、ポラロイド風の白フレーム、円形アイコン。 - **セクション境界**: 直線で背景色を切り替える。ところどころに破れた紙のギザギザ境界を入れる。 - 吹き出しはピル型の枠線にし、端に小さな三角をつける。 - ポイントラベルは、斜めに切ったリボン風のタグにする。 - 成分アイコンは淡色の円の中に線画を入れる。 - グラフカードは二重枠（外側をパートの色にする）で角丸にする。 ## Components - **ポイントラベル**（`point-tag`）: 番号付きのリボン型タグ。英字は手書き風。 - **吹き出しキャッチ**（`speech-bubble`）: 白地のピル型に色枠をつけた吹き出し。下に入力欄風の枠を並べ、横にハートを散らす。 - **帯見出し**（`marker-heading`）: 濃い色の帯に、白抜きの太字見出しを置く。 - **SNS 投稿風カード**（`sns-card`）: 上部にストーリーズ風のバー、アイコン、名前を置き、イラストを 2 枚とチェックリストを入れる白カード。 - **効果グラフカード**（`graph-card`）: 見出しと棒グラフ 2 本で、比較前後の差を示す。中央には % を大きく入れる。 - **成分・試験アイコン**（`ingredient-icon`）: 淡色の円に線画を入れ、下に 2 行の短いラベルを置く。5 個まで横に並べる。 - **使用前後比較**（`before-after`）: 顔写真を 2 枚並べ、下に帯で英字のラベルをつける。使用後側はパートの色で強調する。 - **シリーズ比較表**（`compare-table`）: 上段に商品画像、行見出しに項目名を置いた 4 列表。色付きの小バッジとドット評価を使う。 ## Do's and Don'ts **Do** - 商品ごとにテーマ色を決め、背景・見出し・装飾をその色でそろえる。 - ハートや雲などの小さな装飾を、見出しの周りに散らす。 - 効果の訴求は、数値・グラフ・試験注釈をセットで載せる。 - 英字の大見出しをうすく透かして、背景に敷く。 - スマホ画面や SNS など、デジタル UI をモチーフにする。 **Don't** - 原色や濃い地色を、広い面に使わない。 - ピンクと紫を、同じブロックの中で混ぜない。 - 角ばったビジネス調のボタンや表を使わない。 - 本文を長い段落にせず、短い改行で中央に組む。 - 装飾フォントを本文に使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（モデルと商品で世界観を伝える）: モデル写真の下に大型のセリフ英字の商品名を置き、商品の物撮り、日本語の商品名、ハッシュタグ 3 つを続ける。 2. **コレクション紹介**（シリーズ全体を見せる）: 白い棚に商品とキャラクターを並べたビジュアル。続けて、ストリート風のグラフィティ英字ポスターを置く。 3. **コンセプト**（コラボのテーマを伝える）: 空色の背景にスマホ画面のモックアップ。英字見出しと短い日本語の 3 行を添える。 4. **商品パート扉**（1 品目の導入）: ピンクの全面地に白いセリフ英字。スマホ枠からキャラクターが飛び出すイラストを入れる。 5. **テクスチャ・特長まとめ**（質感とポイント 3 つを提示する）: 吹き出しキャッチ、テクスチャ写真 2 枚、帯見出し、物撮り、3 列のポイントタグを並べる。 6. **ポイント詳細**（効果を 1 つずつ証明する）: タグ、2 段見出し、チェックリスト、使用前後の写真、ポラロイド写真の順に置く。 7. **低刺激の訴求**（安心感を与える）: 英字と日本語の見出しの下に SNS 投稿風カードを置き、円形の試験アイコンを 5 つ並べる。 8. **2 品目パート**（もう 1 色の商品を訴求する）: 1 品目と同じ型をラベンダー色に置き換えて繰り返す。ポイントは 2×2 のグリッドにする。 9. **データ実証**（持続効果を数値で示す）: グラフカードを 3 枚縦に積み、カラーチャート図、使用前後の写真、試験書類の画像を続ける。 10. **成分・認証**（処方の安心感を補う）: 円形の成分アイコンを 3 つ『+』でつなぎ、SPF・PA の数値を 2 列のカードで見せる。 11. **シリーズ比較**（選び方を案内する）: 4 商品の比較表。項目は商品名・機能・評価ドット。 ## Imagery - モデルは白い服で、明るいグレー背景の前に立ち、ソフトな光で撮る。 - 商品は淡グレーのコンクリート壁にもたせかけ、2 本を並べて撮る。 - テクスチャは、クリームを伸ばした跡や指にとった様子を寄りで撮る。 - キャラクター風のイラストは、太い輪郭線とフラットな色で描く。スマホ枠から飛び出す構図にする。 - 装飾は、線画と塗りのハート、白い雲、音符を散らす。 - 肌の写真は、使用前後を同じ構図・同じライティングで撮る。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元 LP は SP の縦長画像を中心に作られている。PC では中央に幅 480〜750px のカラムを置き、左右は背景色で埋める。 - PC ではポイントのグリッドを 3〜4 列のまま広げ、グラフカードを横に 2〜3 枚並べる。 - 英字の大見出しは PC で 1.5 倍程度に拡大する。 - 比較表は PC で余白を広げ、文字を 12px 以上にする。 ## 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-bd9c7e47`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/espoirglobal/es-sc-500/?l-id=shoptop_widget_item_list/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。