--- version: alpha name: Soft Pink Feminine Beauty Lip Care LP description: 淡いピンクの地と白いカード、細い明朝の見出しで作った、女性向けリップ美容の縦長 LP。ピンクの欧文ラベル、波線の飾り、丸や角の一部を丸めた写真の切り抜きで、やわらかく上品な印象にまとめている。 colors: primary: '#E76092' background: '#FFFFFF' background-alt: '#FED3DC' tint-1: '#FBE9E9' tint-2: '#FDD3DD' surface: '#F9F6F3' text: '#353534' accent-1: '#E0548A' accent-2: '#2E3C4B' accent-3: '#D9B44A' line: '#DE7EA6' marker: '#FDD3DD' text-muted: '#EFEFEF' secondary: '#9D7579' accent-1-accessible: '#DA3172' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em headline-lg: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.15em accent: fontFamily: Playfair Display fontSize: 18px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: Cormorant Garamond fontSize: 18px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: Kaushan Script fontSize: 18px fontWeight: 400 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: M PLUS Rounded 1c fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-label: textColor: '{colors.primary}' typography: '{typography.accent}' height: 28px wave-divider: textColor: '{colors.line}' height: 8px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px detail-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 900px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px check-list: textColor: '{colors.text}' typography: '{typography.body-md}' height: 90px letter-badge: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px ranking-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' height: 380px caution-box: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.md}' height: 50px --- # DESIGN.md — 桜ピンク×明朝の女性向けリップケア LP（Soft Pink Feminine Beauty Lip Care LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、上品・高級、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: 桜ピンク・明朝見出し・波線装飾・白カード・モデル写真・ふっくら感 - **地の質感**: フラットな淡ピンクの面に、ごく弱い影の白カードを重ねる。ランキング帯だけ金色の箔の質感を使う - **形**: 円形の切り抜き、写真の一角だけを大きく丸める形、細いピンクの波線、カード角の L 字飾り - **温度感**: 暖かくやわらかい。甘さは明朝体とグレージュの文字色で抑える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E76092` | 欧文セクションラベル・強調文字 | 2% | 画素の実測 | | `background` | `#FFFFFF` | 白地のセクション | 22% | 画素の主要色に補正 | | `background-alt` | `#FED3DC` | 濃いめピンクの地 | 18% | 画素の実測 | | `tint-1` | `#FBE9E9` | 淡ピンクの地 | 20% | 画素の実測 | | `tint-2` | `#FDD3DD` | やや濃いピンク帯（成分表の背景） | 6% | 画素の実測 | | `surface` | `#F9F6F3` | グレージュのカード面（特長カード） | 4% | 画素の主要色に補正 | | `text` | `#353534` | 見出し・本文の文字 | 3% | 画素の実測 | | `accent-1` | `#E0548A` | 特長カードの番号・L 字飾り・小見出し | 1% | 推定 | | `accent-2` | `#2E3C4B` | ランキング見出しの濃紺 | 0% | 画素の実測 | | `accent-3` | `#D9B44A` | 金の装飾（王冠・月桂樹） | 1% | 推定 | | `line` | `#DE7EA6` | 波線・下線 | 0% | 画素の実測 | | `marker` | `#FDD3DD` | 見出し下の淡ピンクのマーカー | 0% | 画素の主要色に補正 | | `text-muted` | `#EFEFEF` | 曜日円などの淡グレー面 | 3% | 画素の実測 | | `secondary` | `#9D7579` | くすみローズの補助色 | 1% | 画素の主要色に補正 | | `accent-1-accessible` | `#DA3172` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡ピンク・濃いめピンクをセクションごとに交互に置き、区切りを作る - 文字は純黒を使わず、こげ茶グレー（#4A3F3F）で柔らかくする - 濃いピンク（#F0508C）は欧文ラベル・番号・数字の強調だけに使う - 金と濃紺はランキングの実績帯だけに使い、他のセクションには持ち込まない - ピンクの地の上には白カードを置き、本文が読める明るさを保つ - 成分表のような情報ブロックは、一段濃いピンクの帯で囲む - `speech-bubble` は文字 `#E0548A` × 背景 `#FFFFFF` のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DA3172`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチコピー | 明朝 | Shippori Mincho | 500 | 26px | 1.5 | 0.1em | | `headline-lg` | セクションの日本語見出し | 明朝 | Noto Serif JP | 400 | 20px | 1.6 | 0.15em | | `accent` | セクションの欧文ラベル（CONCEPT など） | 欧文セリフ | Playfair Display | 800 | 18px | 1.2 | 0.05em | | `headline-md` | 特長名の欧文サブ見出し | 欧文セリフ | Cormorant Garamond | 500 | 18px | 1.3 | 0.03em | | `headline-sm` | カード内の小見出し・ステップ名（筆記体） | 欧文スクリプト | Kaushan Script | 400 | 18px | 1.2 | 0.0em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.08em | | `note` | 注釈・※印の補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `label-button` | 吹き出し・バッジの文字 | 丸ゴシック | M PLUS Rounded 1c | 500 | 12px | 1.4 | 0.05em | - セクション冒頭は、ピンクの太い欧文セリフのラベル → 明朝の日本語見出し → 小さなゴシックのリードの 3 段で組む - 見出しは字間を 0.1em 以上あけ、中央揃えにする - 本文は中央揃えか左揃えの短い行にし、行間は 1.8 以上にする - 数字や重要な語は見出しの中で大きくし、ピンクにする - 注釈には ※ 番号を付け、小さな文字でカードの下にまとめる - ステップ名や曜日には筆記体の欧文を添え、手書きの軽さを出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長カードの 1・2 だけ 2 カラムに並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションごとに地の色を切り替える - 白カードは左右に 6% の余白を取って中央に置く - 見出しブロックとコンテンツの間は 32px あける - 写真と本文を交互に縦へ積むシーン構成にする - ステップは左に円形のイラスト、右に番号と本文を置く ## Elevation & Depth - カードはごく弱い影（0 2px 8px rgba(0,0,0,0.05)）か影なしにする - 強い立体感は使わず、地の色の差で重なりを表す - 写真の重ね置き（コラージュ）では白フチと薄い影で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 円形の切り抜きと、四角の一角だけを大きく丸めた写真。お客様の声は白フチ写真を傾けて重ねる - **セクション境界**: 直線で地の色を切り替える。区切りに細い波線やくの字の矢印を添える - 成分写真やステップのイラストは正円に切り抜く - モデル写真は一角だけを 40px 前後丸める - カードの角にピンクの L 字飾りを付ける - 吹き出しは白い楕円に小さなしっぽを付ける ## Components - **欧文セクションラベル**（`section-label`）: ピンクの太い欧文セリフの大文字ラベル。下に明朝の見出しを置く - **波線の飾り**（`wave-divider`）: 見出しの下や写真の横に置く、ピンクの細い波線 - **番号付き特長カード**（`feature-card`）: グレージュの面に、ピンクの筆記体の番号・円形写真・欧文名・説明を縦に並べる。角に L 字飾りを付ける - **詳細解説の白カード**（`detail-card`）: 番号と欧文名の見出し、マーカー付きの大見出し、本文、注釈を収めた縦長の白カード - **口コミの吹き出し**（`speech-bubble`）: 写真のコラージュの上に置く白い楕円の吹き出し。中に短い感想を入れる - **チェックリスト**（`check-list`）: 四角のチェックボックスに短い悩みやメリットを 3 つ並べる - **アルファベットの丸バッジ**（`letter-badge`）: シーンの区切りに置く、濃いピンクの正円に白文字の A/B/C - **ランキング実績帯**（`ranking-band`）: 金の王冠と月桂樹の飾りに、赤ピンクの大きな順位、ランキング画面のキャプチャを重ねる - **注意事項ボックス**（`caution-box`）: 白の角丸の帯に、警告アイコンと小さな注意書きを入れる ## Do's and Don'ts **Do** - 見出しは明朝を使い、字間を広めに取って上品さを出す - 欧文ラベル・波線・円形の切り抜きを各セクションで繰り返して統一感を出す - ピンクの濃さを 3 段階で使い分け、セクションにリズムを付ける - モデル写真は明るく柔らかい自然光で、唇の質感が見える寄りの構図にする - 仕組みの説明は、番号付きのステップ図で順に見せる **Don't** - 純黒の太いゴシック見出しを使わない - 原色の赤や青を広い面積で使わない - ピンク以外の強い色をランキング帯以外に持ち込まない - 角の鋭い四角い写真だけで構成しない - カードに強い影や太い枠線を付けない - 本文の行間を詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の印象と、使った後の唇の状態を伝える）: くすみピンクの地に、左にモデルの顔の寄り写真、右に明朝のキャッチと商品パッケージを置く 2. **商品の導入**（新しさと 3 つのメリットを示す）: 明朝の大見出しの一部を大きくし、拡大イラストとチェックリスト 3 項目を並べる 3. **実績**（ランキング実績で信頼を得る）: 金の王冠と月桂樹、斜線の飾り、大きな順位、キャプチャ画像を重ねる 4. **コンセプト**（ブランドの世界観を伝える）: 欧文ラベル、明朝の見出し、一角を丸めたモデル写真、中央揃えの詩的な本文の順に置く 5. **お客様の声**（使用者の写真と感想で共感を生む）: 傾けた白フチ写真を重ねたコラージュに、白い吹き出しを散らす 6. **3 つの秘密**（商品の構成要素を整理して見せる）: 中央の商品写真の周りに円形の要素写真を 3 つ置き、その下に番号付きの特長カードを並べる 7. **詳細解説**（技術と成分の根拠を説明する）: 白カード 3 枚で、マーカー付きの見出し、成分表、受賞マーク、ステップ図を見せる 8. **悩みの提起**（唇の悩みに共感し、解決へつなぐ）: モノクロのモデル写真にピンクの筆記体を添え、チェックリスト、下向き矢印、線画イラストを置く 9. **利用シーン**（使う場面を想像させる）: A/B/C の丸バッジ、短い文、角を丸めた写真、波線を交互に縦へ積む 10. **継続の提案**（使用頻度の目安を示す）: 曜日のラベルを付けた円をジグザグに並べ、使う日だけ商品写真の円にして線でつなぐ 11. **使い方**（3 ステップの手順を示す）: 左に白い円の線画イラスト、右に番号・筆記体のステップ名・説明を置き、最後に注意事項ボックスを付ける 12. **動画・評価**（使い方動画と総合評価で後押しする）: ピンクのグラデーションの動画サムネイルと、大きな評価点の数字を見せる ## Imagery - モデル写真は白やベージュの背景で、柔らかい自然光で撮る。唇のツヤとふっくら感を強調する - 成分や素材は、ピンクの光沢がある接写を円形に切り抜く - 手順の説明は、細い黒線のシンプルな線画で唇と指を描き、ピンクを差し色にする - お客様の声は、自撮り風の写真を白フチのポラロイド風に傾けて重ねる - 悩みのパートだけはモノクロ写真で、明るい解決パートとの対比を作る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元のデザインは PC でも幅 820px 前後の 1 カラムで、スマホ表示とほぼ同じ構成 - SP では左右に約 6% の余白を取り、カードを全幅に近く広げる - 特長カード 1・2 は SP 375px でも 2 カラムを保てるが、狭い場合は 1 カラムにする - ファーストビューは写真の上に文字を重ねるか、写真と文字を上下に分ける - PC に広げる場合は、内容幅 750〜820px で中央に寄せ、左右を地の色で埋める ## 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-94185138`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/cosme-lakushodo/li001/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。