--- version: alpha name: Pastel Color-Coded Skincare Lineup LP description: 温かみのあるグレージュの地に、イエロー・グリーン・ピンクの3色で商品ラインを色分けした韓国系スキンケアLP。縦書きのコピー帯、レーダーチャート、丸く切り抜いた成分写真、白カードのチェックリストで、ラインごとの悩みと処方を淡々と比べられる構成にしている。 colors: background: '#E8E4E1' surface: '#FEFEFE' primary: '#F0CF80' tint-1: '#FEFAED' secondary: '#5E8C5E' tint-2: '#BECEB7' accent-1: '#E07888' background-alt: '#E4D5CE' accent-2: '#DBD4CD' text: '#363636' text-muted: '#8C8C8C' line: '#E5E3DB' secondary-accessible: '#568056' text-muted-accessible: '#767676' typography: display: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Playfair Display fontSize: 32px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 12px lg: 20px 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}' line-header: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 80px pill-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px vertical-copy: backgroundColor: '{colors.secondary}' textColor: '{colors.surface}' typography: '{typography.display}' height: 320px radar-chart: textColor: '{colors.text}' typography: '{typography.note}' height: 160px ingredient-circle: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 90px check-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px free-circle: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 100px step-row: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px renewal-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 20px --- # DESIGN.md — パステル3色で色分けするスキンケア LP（Pastel Color-Coded Skincare Lineup LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: やさしい・柔らかい、上品・高級、清潔・爽やか、シンプル・ミニマル - **キーワード**: パステル色分け・縦書きコピー・丸型成分写真・レーダーチャート・グレージュ地・余白多め - **地の質感**: マットでやわらかい質感。光をふわっと回した商品写真と、くすみ系の単色ベタ面を組み合わせる - **形**: ピル型のタグ、正円の成分写真、角丸の大きいカード - **温度感**: やや暖かい。くすみのある中間色で落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#E8E4E1` | ページ地のグレージュ | 20% | 画素の実測 | | `surface` | `#FEFEFE` | カード・チェックリストの白面 | 19% | 画素の実測 | | `primary` | `#F0CF80` | イエローライン色（帯・タグ） | 6% | 画素の主要色に補正 | | `tint-1` | `#FEFAED` | イエローライン薄地 | 5% | 画素の実測 | | `secondary` | `#5E8C5E` | グリーンライン色（帯・タグ） | 4% | 推定 | | `tint-2` | `#BECEB7` | グリーンライン薄地 | 6% | 画素の主要色に補正 | | `accent-1` | `#E07888` | ピンクライン色（帯・タグ） | 3% | 推定 | | `background-alt` | `#E4D5CE` | ピンクライン薄地 | 5% | 画素の主要色に補正 | | `accent-2` | `#DBD4CD` | フリー処方の丸・ラベル | 3% | 画素の実測 | | `text` | `#363636` | 見出し・本文文字 | 2% | 画素の実測 | | `text-muted` | `#8C8C8C` | 注釈の小さい文字 | 1% | 推定 | | `line` | `#E5E3DB` | チェックリストの区切り線 | 0% | 画素の主要色に補正 | | `secondary-accessible` | `#568056` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#767676` | AA を満たす補正値（計算） | | 計算 | - ページ全体の地はグレージュか白にし、ラインごとにイエロー・グリーン・ピンクの1色だけを割り当てる - 各ラインのセクションは、そのライン色の濃い帯（見出し）と薄地（本文の地）の2段階でまとめる - タグ・チャートの塗り・縦書きコピー帯は同じライン色にそろえる - 共通セクション（成分・フリー処方・使い方）は無彩色寄りのベージュにして、ライン色は使わない - テキストは黒に近いグレーにし、純黒は避ける。注釈は薄いグレーで小さく入れる - `vertical-copy` は文字 `#FEFEFE` × 背景 `#5E8C5E` のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#568056`、4.51:1）を使う。 - `renewal-badge` は文字 `#8C8C8C` × 背景 `#FEFEFE` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#767676`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きのメインコピー帯 | ゴシック | Noto Sans JP | 500 | 24px | 1.3 | 0.08em | | `headline-lg` | セクション大見出し | ゴシック | Noto Sans JP | 500 | 22px | 1.5 | 0.04em | | `headline-md` | ラインのタイトル帯 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em | | `headline-sm` | 商品名・成分の見出し | ゴシック | Noto Sans JP | 500 | 16px | 1.5 | 0.03em | | `body-md` | 本文・チェックリスト | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注釈・成分の表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字のサブ名・How to Useの見出し | 欧文セリフ | Playfair Display | 400 | 32px | 1.2 | 0.0em | | `label-button` | ピル型タグ・ラベル | ゴシック | Noto Sans JP | 500 | 14px | 1.2 | 0.02em | - 見出しはミディアムの細めのゴシックにし、太すぎるウェイトは避ける - メインコピーは縦書きで、ライン色の帯に白抜きで入れる - 英字のサブ名やHow toの見出しは細いセリフ体を添える - 注釈は※の番号を上付きで入れ、10px程度でまとめる - 番号（01〜04）は細い欧文セリフ体で大きく入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分の丸写真は2〜4個を横に並べ、フリー処方は3列のグリッドにする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - ラインごとのブロックは同じ構成を3回くり返す - 商品写真と縦書きコピーは左右に分けて重ねる - チェックリストは白カードの中で中央にそろえる - 成分の訴求は人物写真を左、成分の説明を右に置く2分割にする - 余白は広めにとり、詰め込まない ## Elevation & Depth - 影はほぼ使わず、色面の差で階層を表す - 白カードは影なしか、ごく淡い影にとどめる - 商品写真は柔らかい接地影だけにする ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 成分やテクスチャーは正円、人物や使い方の写真は角丸なしの矩形で切り抜く - **セクション境界**: 直線で地の色を切り替える。ライン帯の上端だけ緩い弧にする - タグはすべてピル型 - 成分の訴求は正円のバッジにする - カードの角丸は12〜20px - Newバッジは小さな円で写真の左上に重ねる ## Components - **ラインのタイトル帯**（`line-header`）: ライン色のベタ帯に、悩みタグ2つを「×」でつなぎ、ケア名を白抜きで入れる - **悩みタグ**（`pill-tag`）: 白地またはライン色のピル型ラベル。3つを横に並べる - **縦書きコピー帯**（`vertical-copy`）: ライン色の細長い帯に、白文字の縦書きを2列で入れる - **効果のレーダーチャート**（`radar-chart`）: 6軸の五角形チャートをライン色の半透明で塗る - **成分の丸写真**（`ingredient-circle`）: 正円に切り抜いた成分写真の下に成分名を入れ、Newバッジを重ねる - **悩みのチェックリスト**（`check-card`）: 白カードの中に見出しと、チェックボックス付きの4項目を区切り線で並べる - **フリー処方の丸**（`free-circle`）: グレージュの正円に配合しない成分名を入れ、斜線を重ねる - **使い方のステップ**（`step-row`）: 左に写真、右に大きな番号と説明文を置き、4段に並べる - **リニューアルラベル**（`renewal-badge`）: 白地に小さなセリフ体の英字を入れた矩形ラベル、またはライン色の円 ## Do's and Don'ts **Do** - ラインの色分けは3色で統一し、帯・タグ・チャートまで同じ色にする - ラインごとのブロックは同じ構成をくり返し、比べやすくする - 成分はすべて正円で切り抜き、サイズをそろえる - 注釈は小さく薄いグレーで、各ブロックの末尾にまとめる - 縦書きのコピーで化粧品らしい品のよさを出す **Don't** - 原色や蛍光色は使わない - 1つのブロックに複数のライン色を混ぜない - 太い極太の見出しや強いドロップシャドウは使わない - 角の立った派手なボタン装飾は使わない - 背景に柄やテクスチャーを敷き詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シリーズ全体と色の展開を見せる）: 積み上げた色違いの容器の写真に縦書きのコピーを重ね、下に4色のサムネイルと短い見出しを置く 2. **ラインナップ**（悩み別に商品を比べさせる）: ライン色の帯、レーダーチャート、成分の丸写真を入れたカードを3色ぶん縦に並べる 3. **商品詳細（イエロー）**（1つめのラインの世界観と悩みを伝える）: 薄いイエロー地に大きな商品写真と縦書きの帯、悩みタグ、白カードのチェックリストを置く 4. **成分訴求（イエロー）**（主な成分の根拠を示す）: 左に人物の写真、右にピル型のリード、太めの見出し、成分の丸写真を置く 5. **商品詳細（グリーン）**（2つめのラインを紹介する）: グリーン系で同じ構成をくり返す 6. **成分訴求（グリーン）**（成分の根拠を示す）: 人物と成分の2分割で同じ構成にする 7. **商品詳細・成分（ピンク）**（3つめのラインを紹介する）: ピンク系で同じ構成をくり返す 8. **共通成分**（ブランド独自の成分を説明する）: 白地に植物の俯瞰写真を置き、見出し、本文、4つの丸い植物写真を並べる 9. **フリー処方**（安心感を伝える）: グレージュ地に、斜線を入れた6つの正円を3列で並べる 10. **使い方**（使う手順を示す）: 大きなセリフ体の英字見出しの下に、写真と番号付きの4ステップを並べる ## Imagery - 容器はパステルのマットな質感に。白い背景かライン色の背景で、やわらかい光の中で撮る - 商品の横にテクスチャーやモチーフ（はちみつ・葉・水滴）を添えて、ラインの性格を見せる - 成分は寄りで撮り、正円で切り抜く - 人物は肌のツヤを見せるナチュラルメイクで、顔に手を添えるポーズにする - 使い方の写真は明るいグレーの背景で、手と顔の動作を見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元画像は狭めのPC幅で、ほぼSPと同じ1カラム構成 - PCでは本文の幅を最大約480〜600pxにして中央に置き、左右はグレージュの地にする - SPでは人物と成分の2分割を保つか、写真を上に置く縦積みに切り替える - フリー処方はSPで3列のまま、円の直径を約90pxにする ## 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-7dbc78ef`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/byurjapan/c500520-583250/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。