--- version: alpha name: Bright Citrus and Aqua Skincare Serum LP description: 生成りグレーの地に、オレンジ・山吹・水色の大きな色面を交互に置く縦長スキンケア LP。円形バッジと大きな数字で成分訴求を重ね、曲線の境界で区切るので明るく清潔に見える。 colors: primary: '#5FCCE9' secondary: '#F9852D' accent-1: '#FEB101' accent-2: '#2A9993' accent-3: '#C7B14B' background: '#FEFEFE' background-alt: '#F0EFEB' dark-section: '#252525' surface: '#35322A' text: '#040302' marker: '#E3D7C1' tint-1: '#ADCED2' on-dark: '#FFFFFF' primary-accessible: '#15809C' accent-2-accessible: '#24837E' accent-3-accessible: '#857529' typography: display: fontFamily: Montserrat fontSize: 72px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 24px 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}' point-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 64px benefit-circle: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 96px ingredient-band: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 44px ingredient-button: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px free-from-icon: textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px big-number: textColor: '{colors.text}' typography: '{typography.display}' height: 90px worry-list: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 200px quote-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 70px ranking-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.display}' height: 480px --- # DESIGN.md — オレンジ×水色の明るい美容液 LP（Bright Citrus and Aqua Skincare Serum LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、ポップ・元気、情報量多め・訴求型、やさしい・柔らかい - **キーワード**: 成分訴求・円形バッジ・大きな数字・曲線区切り・水面テクスチャ・色面切替 - **地の質感**: 水面の波紋写真や白背景の人物写真を使う。フラットな色面と合わせて、みずみずしい質感にする。 - **形**: 正円バッジ、大きな弧のセクション境界、白い角なしカード、ピル型ラベル。 - **温度感**: 暖色のオレンジ・山吹と寒色の水色を交互に使い、明るく中間的な温度感にする。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5FCCE9` | ブランド水色・主要セクション地 | 9% | 画素の実測 | | `secondary` | `#F9852D` | オレンジのグラデ面・帯 | 6% | 画素の実測 | | `accent-1` | `#FEB101` | 山吹色の大セクション地 | 9% | 画素の実測 | | `accent-2` | `#2A9993` | ティールの成分ボタン・見出し帯 | 2% | 画素の実測 | | `accent-3` | `#C7B14B` | ランキングの金色 | 1% | 画素の実測 | | `background` | `#FEFEFE` | 白の本文地・カード | 22% | 画素の実測 | | `background-alt` | `#F0EFEB` | 生成りグレーの地 | 12% | 画素の実測 | | `dark-section` | `#252525` | 悩み提起の黒地 | 4% | 画素の実測 | | `surface` | `#35322A` | 黒地上のブラウン枠 | 1% | 画素の実測 | | `text` | `#040302` | 見出し・本文 | 3% | 画素の実測 | | `marker` | `#E3D7C1` | 本文の淡黄マーカー | 1% | 画素の主要色に補正 | | `tint-1` | `#ADCED2` | 水色の淡い枠線・図解地 | 2% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 色面上の白文字 | 2% | 画素の主要色に補正 | | `primary-accessible` | `#15809C` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#24837E` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#857529` | AA を満たす補正値（計算） | | 計算 | - 地は白と生成りグレーを基本にする。訴求ブロックはオレンジ・山吹・水色の色面に切り替える。 - POINT ごとに地色を変え、山吹と水色を交互に置いてリズムを出す。 - 悩み提起だけは黒地にして空気を切り替える。 - 成分名の見出し帯はティール・水色・紺の3色で区別する。 - 強調はオレンジ地＋白文字のマーカーか、淡黄のマーカーで行う。 - ランキング実績は金色に限って使う。 - `point-badge` は文字 `#5FCCE9` × 背景 `#FEFEFE` のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#15809C`、4.53:1）を使う。 - `benefit-circle` は文字 `#FFFFFF` × 背景 `#2A9993` のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#24837E`、4.54:1）を使う。 - `ingredient-band` は文字 `#FFFFFF` × 背景 `#2A9993` のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#24837E`、4.54:1）を使う。 - `ingredient-button` は文字 `#FFFFFF` × 背景 `#2A9993` のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#24837E`、4.54:1）を使う。 - `quote-block` は文字 `#FFFFFF` × 背景 `#5FCCE9` のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#15809C`、4.57:1）を使う。 - `ranking-card` は文字 `#C7B14B` × 背景 `#FEFEFE` のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#857529`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 濃度％など大きな数字 | 欧文サンセリフ | Montserrat | 700 | 72px | 1.0 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.5 | 0.05em | | `headline-md` | カード内の小見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `headline-sm` | 帯ラベル・円バッジ内 | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.05em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | POINT 番号・欧文ラベル | 欧文サンセリフ | Montserrat | 500 | 13px | 1.2 | 0.05em | | `label-button` | 成分ボタン・帯 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - 見出しは太いゴシックで2行に収め、中央揃えにする。 - 数字は欧文の極太で巨大にし、横に漢字を縦組み2文字ずつ添える。 - 本文は字間を広めに取り、行間は1.9前後にする。 - 強調語はマーカーか色地反転で示す。 - 注釈には※を付けて小さく添える。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。円バッジは 3〜4 列、成分写真は 2〜3 列で並べる。 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは中央揃えで、見出しの上に POINT の円バッジを置く。 - 白カードは左右に約7%の余白を取って色面の上に置く。 - 人物写真は全幅か片側に寄せて裁ち落とす。 - セクション間に縦の細線や点を置いて流れをつなぐ。 - 無添加の項目は円形アイコンを4列×2段で並べる。 ## Elevation & Depth - 影はほぼ使わない。フラットな色面の重なりで階層を作る。 - 商品ボトルの写真だけに自然な落ち影を付ける。 - カードは白地のみで区別し、枠線も付けない。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 人物は角なしで全幅に裁ち落とす。成分の素材写真は正円で切り抜く。 - **セクション境界**: 大きな弧（楕円カーブ）で色面を切り替える。 - 成分・効果の訴求は白抜きの正円や白線の円で囲む。 - 見出し帯は角なしの長方形にして、カードの上端に重ねる。 - 成分ボタンは角丸10px前後にする。 - 引用は大きな「“」記号で挟む。 ## Components - **POINT 円バッジ**（`point-badge`）: 白地の正円の中に POINT と番号を入れる。色面と弧の境界に重ねて置く。 - **効果の円**（`benefit-circle`）: ティールの塗り円に白文字で効果語を入れ、3つ並べる。 - **成分見出し帯**（`ingredient-band`）: 白カードの上端に重ねる色帯。白文字で成分の分類名を入れる。 - **成分ボタン**（`ingredient-button`）: 角丸の塗りボタンで、補助成分の名前を2つ並べる。 - **無添加アイコン**（`free-from-icon`）: 色面の上に白線の円と斜線を描き、中に白文字で項目名を入れる。 - **大数字ブロック**（`big-number`）: 巨大な％数字の左右に縦組みの漢字2文字を添える。 - **悩みチェックリスト**（`worry-list`）: 黒地上のブラウン枠に、禁止記号と下線付きの白文字で悩みを4行並べる。 - **お客様の声の引用**（`quote-block`）: 大きな水色の引用符で挟み、下に水色帯と商品写真を置く。 - **実績カード**（`ranking-card`）: 白カードに金の王冠と巨大な No.1 を入れ、金色のL字枠を角に配置する。 ## Do's and Don'ts **Do** - 暖色の色面と水色の色面を交互に配置する。 - 成分・効果は円形の部品でまとめる。 - セクション境界は大きな弧にする。 - 強調語にはマーカーを引く。 - 商品ボトルは白地か水面の写真の上に置く。 - 注釈は小さく丁寧に添える。 **Don't** - 濃い影や立体的なボタンは使わない。 - 原色の赤や紫は加えない。 - 本文を色面の上に長く直接置かない（白カードに入れる）。 - 角丸を大きくしすぎない。 - 明朝体を混ぜない。 - セクション境界をすべて直線にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（配合濃度と商品を一目で伝える）: オレンジの細帯に悩みを書き、水面写真の上に大数字・ボトル・効果の円3つを置く。 2. **成分の全体像**（主要成分を一覧で見せる）: 人物写真の下のオレンジのグラデ面に、白円の成分と白枠の補助成分を並べる。 3. **無添加訴求**（肌へのやさしさを示す）: 水色の地に白線の円アイコンを4列×2段で並べる。 4. **実績**（ランキングの信頼を示す）: グレー地の白カードに金色の No.1 とシリーズ写真を入れる。 5. **お客様の声**（開発のきっかけを示す）: 引用符で挟んだ文と、水色帯・ボトルの組み合わせ。 6. **ブランド紹介**（理念を伝える）: 白い弧の中にロゴと本文を置き、淡黄のマーカーで強調する。 7. **悩みの提起**（共感を得る）: 人物写真から黒地へつなげ、悩みチェックリストを置く。 8. **解決提示**（商品を答えとして示す）: 水色の弧の見出しの下に、水面写真・ボトル・マーカー付きの文を置く。 9. **特長1**（主成分の効果を説明する）: 生成り地に人物写真・大数字・バリア機能の図解カードを置く。 10. **特長2**（成分の組み合わせを説明する）: 山吹地にベン図状の白線円を描き、色帯見出し付きの白カードを3枚置く。 11. **特長3**（使用感を伝える）: 生成り地に人物写真と、スポイトの写真を重ねて置く。 12. **特長4・品質**（無添加と製造品質を示す）: 水色地に円アイコンを並べ、青帯見出しの白カードに工場の写真を入れる。 ## Imagery - 水面の波紋を淡い水色トーンで撮った写真を背景に使う。 - 人物は白背景・自然光で、目を閉じて頬に触れるポーズにする。 - 成分素材（植物・テクスチャ）は寄りで撮り、正円で切り抜く。 - 商品ボトルは真上か正面から撮り、柔らかい影を付ける。 - 図解はフラットな淡いイラストで描き、矢印は青とピンクにする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は SP 想定の縦長 1 カラムなので、PC では中央に 480〜750px 幅で配置する。 - PC では色面と弧の境界を全幅に広げ、内容は中央に寄せる。 - 円アイコンは PC でも 4 列を保つ。 - SP の見出しは 22〜24px、大数字は 64〜72px を目安にする。 ## 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-5c78e1fd`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/levante/cna001/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。