--- version: alpha name: Crimson Red Elegant Scalp Care LP description: 深紅の光沢背景のファーストビューに、白地と淡いピンク地を交互に重ねる薬用ヘアケア LP。明朝体の見出しと赤い小見出し、ベージュの枠線で、上品さと清潔感を両立させている。 colors: primary: '#CD1C2E' dark-section: '#7F0310' background: '#FFFFFF' background-alt: '#FDF7F7' secondary: '#C69C6C' tint-1: '#DBC7AA' cta: '#FEFEFD' on-cta: '#2D221A' text: '#3A2A24' accent-1: '#CC1026' marker: '#FFF363' on-primary: '#FFFFFF' line: '#C0A28B' secondary-accessible: '#996D3B' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.12em headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.15em headline-sm: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 20px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.2em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em label-button: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.15em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 4px md: 12px lg: 999px full: 999px spacing: unit: 8px card: 24px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px cta-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' height: 110px badge-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px feature-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 220px ingredient-frame: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 1000px effect-box: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.md}' height: 110px section-label-en: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 30px step-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 90px --- # DESIGN.md — 深紅×ベージュの上品な頭皮ケア LP（Crimson Red Elegant Scalp Care LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、清潔・爽やか、信頼・誠実 - **キーワード**: 深紅・明朝体・ベージュ枠・淡ピンク地・余白多め・医薬部外品 - **地の質感**: FV は光沢のある赤い布や紙のような斜めのグラデーション。本文は白地にごく薄い菱形の格子柄を敷く - **形**: 赤い正円のバッジ、角丸の少ないボックス、ずらして重ねたベージュの影付き写真 - **温度感**: 赤の情熱とベージュの温かみを合わせた、やや暖色寄りの印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CD1C2E` | ブランドの赤（円バッジ・小見出し・CTA帯） | 9% | 画素の実測 | | `dark-section` | `#7F0310` | FVの深い赤い影 | 5% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 49% | 画素の実測 | | `background-alt` | `#FDF7F7` | 香り・使い方セクションの淡ピンク地 | 13% | 画素の実測 | | `secondary` | `#C69C6C` | 成分枠線・効能ボックスのベージュ | 6% | 画素の実測 | | `tint-1` | `#DBC7AA` | 写真背後のずらし影・見出し下のマーカー | 5% | 画素の実測 | | `cta` | `#FEFEFD` | 購入ボタンの白 | 1% | 画素の実測 | | `on-cta` | `#2D221A` | 購入ボタン上の文字 | 0% | 画素の実測 | | `text` | `#3A2A24` | 見出しと本文の濃い茶黒 | 3% | 推定 | | `accent-1` | `#CC1026` | 英字見出し・成分名の赤 | 0% | 画素の主要色に補正 | | `marker` | `#FFF363` | 使い方見出しの黄色マーカー | 0% | 画素の実測 | | `on-primary` | `#FFFFFF` | 赤い円バッジ上の白文字 | 0% | 画素の主要色に補正 | | `line` | `#C0A28B` | 手順の区切り線 | 0% | 画素の主要色に補正 | | `secondary-accessible` | `#996D3B` | AA を満たす補正値（計算） | | 計算 | - 地の色は白と淡ピンクだけにし、赤は FV・円バッジ・CTA 帯で面として使う - 小見出しと英字見出しは赤い文字にして、本文は濃い茶黒にする - 成分セクションはベージュの太枠で囲み、効能ボックスもベージュで塗る - 写真の背後にベージュのずらし影を敷いて温かみを足す - 黄色のマーカーは使い方の見出しだけに限定する - `effect-box` は文字 `#FFFFFF` × 背景 `#C69C6C` のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#996D3B`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大きなキャッチ | 明朝 | Shippori Mincho | 700 | 40px | 1.3 | 0.1em | | `headline-lg` | 商品の訴求見出し（下線マーカー付き） | 明朝 | Shippori Mincho | 700 | 30px | 1.5 | 0.12em | | `headline-md` | セクション見出し | 明朝 | Noto Serif JP | 600 | 24px | 1.5 | 0.15em | | `headline-sm` | 赤い小見出し（効果名・成分名） | 明朝 | Noto Serif JP | 700 | 20px | 1.4 | 0.05em | | `accent` | 英字セクションラベル | 欧文サンセリフ | Montserrat | 500 | 20px | 1.2 | 0.2em | | `body-md` | 本文説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.03em | | `label-button` | 購入ボタンの文言 | 明朝 | Noto Serif JP | 600 | 18px | 1.2 | 0.15em | | `note` | 商品名・価格・フッター | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.02em | - 見出しは明朝体にして字間を広めに取る - 本文は 14px 前後のゴシックで行間を広く取る - 英字ラベルは大文字にして字間を大きく空ける - 訴求見出しには下半分だけのベージュマーカーを引く - 手順番号は手書き風の斜体数字にして黄色いマーカーを添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長セクションはテキストと写真を左右交互に並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算） - 特長は文章と写真を左右交互に並べてリズムを作る - 成分は丸い写真と文章を交互に配置する - 淡ピンクのボックスは左右に約 6% の余白を残して浮かせる - 商品写真は中央に大きく置き、その下に商品名と価格を添える ## Elevation & Depth - 影はほとんど使わず、平面的に作る - 写真の右下または左下にベージュの面をずらして重ね、奥行きを出す - CTA ボタンだけ下側に薄い影を付ける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 特長写真は四角形にしてずらし影を付ける。成分写真は正円で切り抜く - **セクション境界**: 直線で区切り、背景色の切り替えと枠線で分ける - 悩みバッジは赤い正円を 3 つ横に並べる - 成分ブロックはベージュの 3px 前後の角なし枠で囲む - 効能ボックスは角丸 12px のベージュ塗りにする ## Components - **購入ボタン**（`button-primary`）: 赤い帯の上に置く白いピル型ボタン。左にカートアイコン、右に矢印を付ける - **CTA 帯**（`cta-band`）: 幅いっぱいの赤い帯の中央にボタンを置く - **悩み円バッジ**（`badge-circle`）: 赤い正円の中に白い明朝体の 2 行テキストを入れ、3 つ並べる - **特長の交互行**（`feature-row`）: 赤い小見出しと本文、ずらし影付きの写真を左右交互に配置する - **成分枠**（`ingredient-frame`）: ベージュの太枠の中で、丸写真と成分名・説明を交互に並べる - **効能ボックス**（`effect-box`）: ベージュ塗りの角丸ボックスに白い見出しと小さな効能一覧を入れる - **英字見出し**（`section-label-en`）: 赤い大文字の欧文を字間を広げて中央に置く - **使い方ステップ**（`step-list`）: 斜体数字と黄色マーカー、明朝の手順文、細いベージュの区切り線で構成する ## Do's and Don'ts **Do** - 赤は面で大胆に使い、本文エリアは白と淡ピンクで清潔に保つ - 見出しは明朝体で字間を広くし、上品さを出す - 写真にはベージュのずらし影を付けて統一する - 白地にごく薄い菱形の格子柄を敷いて質感を足す - 商品写真は白背景で切り抜いて中央に大きく置く **Don't** - 赤以外の鮮やかな色を増やさない - 見出しを太いゴシックにしない - カードに強い影や大きな角丸を付けない - 黄色のマーカーを多用しない - 余白を詰めて情報を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（カテゴリーと商品を印象づける）: 深紅の光沢背景に白い明朝体キャッチを置く。右に商品ボトル、中央に線画イラストの白い円、下部に商品カテゴリー名を大きく配置する 2. **悩みバッジ**（対応する悩みを一目で伝える）: 白地に赤い正円を 3 つ並べ、悩みを短い言葉で入れる 3. **商品紹介**（使い心地と効果を情緒的に伝える）: 斜めに崩した手書き風の明朝コピーとマーカー付きの見出し、右に商品画像、下に商品名と価格を置く 4. **特長**（3 つの効果を説明する）: 格子柄の白地に、赤い小見出しと本文、ずらし影付きのモデル写真を左右交互に並べる 5. **香り**（香りの特徴を伝える）: 赤い英字見出しの下の淡ピンクボックスに、明朝の見出し、商品画像、ハーブの線画を並べる 6. **成分**（配合成分で信頼を高める）: ベージュ枠の中に丸写真と赤い成分名を交互に並べ、最後に効能ボックスを置く 7. **使い方**（手順を簡潔に示す）: 淡ピンク地に英字見出しと黄色マーカー付きの見出しを置き、3 つの番号付き手順を区切り線で分ける 8. **商品とCTA**（購入へ誘導する）: 大きな商品画像と商品名・価格の下に、赤い帯と白いピル型ボタンを置く 9. **フッター**（会社情報と規約を示す）: 白地に小さな文字のリンクを中央揃えで縦に並べる ## Imagery - 商品は白背景で切り抜き、柔らかい影を付ける - モデル写真は白背景・自然光で、頭皮や髪に触れる仕草を撮る - 成分は植物や素材をクローズアップで撮り、正円で切り抜く - 黒い線の手描き風ハーブイラストと、線画の人物アイコンを添える - FV は赤い布や紙の斜めの光沢グラデーションにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に約 375px 幅の SP 版カラムをそのまま置く - PC の左右の余白は FV と同じ赤い光沢背景で埋める - PC の左側には固定でロゴ・商品画像・商品名・購入ボタンを置く - PC では FV 直後にも CTA 帯を追加する ## 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-2e8cae0d`（元 LP の URL から採番） - **元 LP**: https://lp.moist-diane.jp/070/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。