--- version: alpha name: Elegant Mincho Salon Haircare LP description: 生成りと淡いグレーを地にして、明朝体の大見出しにマゼンタの強調語を差すヘアケアLP。黒髪の艶写真、ボトルの物撮り、えんじのランキング帯、金の月桂樹バッジを組み合わせ、サロン品質らしい上品さと訴求の強さを両立させている。 colors: primary: '#D6246E' background: '#FEFEFE' background-alt: '#F8F6E9' tint-1: '#F4F7FC' secondary: '#9A9E96' dark-section: '#08070C' accent-1: '#6F1E1D' accent-2: '#C9A24A' text: '#2C2C2E' text-muted: '#9A9E96' surface: '#BDC7C9' line: '#454042' on-dark: '#FFFFFF' marker: '#7E8A72' marker-accessible: '#6F7964' text-muted-accessible: '#6F736A' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Great Vibes fontSize: 28px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Montserrat fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 2px lg: 4px 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}' label-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 24px accent-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 28px bracket-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px laurel-badge: textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 110px ingredient-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px reason-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 420px text-marker: backgroundColor: '{colors.marker}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 20px review-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px free-circle: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.full}' height: 60px --- # DESIGN.md — 生成り×マゼンタ明朝の上品ヘアケアLP（Elegant Mincho Salon Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、情報量多め・訴求型、やさしい・柔らかい - **キーワード**: 明朝体・マゼンタ強調・生成り地・黒髪の艶・金の月桂樹・白カード - **地の質感**: マットな生成り地に、柔らかい影の白カードを重ねる。所々に金の紙吹雪や水滴のような泡を散らす - **形**: 角はほぼ直角。四角いカードと写真に、細い枠線の見出しフレームを合わせる - **温度感**: やや暖色寄りのニュートラル。ランキング帯だけ深いえんじで熱量を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D6246E` | 強調語・ブランドアクセント | 2% | 推定 | | `background` | `#FEFEFE` | 基本の白地 | 22% | 画素の実測 | | `background-alt` | `#F8F6E9` | 生成りのセクション地 | 12% | 画素の実測 | | `tint-1` | `#F4F7FC` | 成分カードの淡い青灰地 | 9% | 画素の実測 | | `secondary` | `#9A9E96` | くすみグリーンの帯・マーカー | 3% | 画素の主要色に補正 | | `dark-section` | `#08070C` | 実績訴求の黒帯 | 6% | 画素の実測 | | `accent-1` | `#6F1E1D` | ランキング帯のえんじ | 4% | 画素の主要色に補正 | | `accent-2` | `#C9A24A` | 金の月桂樹・バッジ | 2% | 推定 | | `text` | `#2C2C2E` | 見出し・本文の墨色 | 4% | 画素の主要色に補正 | | `text-muted` | `#9A9E96` | 注釈・英字の補助文字 | 0% | 画素の主要色に補正 | | `surface` | `#BDC7C9` | グレージュの地 | 6% | 画素の実測 | | `line` | `#454042` | 見出しフレームの細線 | 0% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒帯上の白文字 | 0% | 画素の主要色に補正 | | `marker` | `#7E8A72` | 本文中のグリーン背景マーカー | 0% | 推定 | | `marker-accessible` | `#6F7964` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#6F736A` | AA を満たす補正値（計算） | | 計算 | - 地は白・生成り・淡い青灰を交互に切り替えて、セクションを区切る - 強調語はマゼンタの文字色にする。1見出しにつき1〜2語まで - 本文の重要語には、くすみグリーンの背景マーカーに白文字を使う - 実績訴求だけ、えんじまたは黒の帯に金と白を合わせる - 小見出しの頭に、黒またはマゼンタのラベル帯を置く - `text-marker` は文字 `#FFFFFF` × 背景 `#7E8A72` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#6F7964`、4.57:1）を使う。 - `free-circle` は文字 `#9A9E96` × 背景 `#F4F7FC` のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#6F736A`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVや実績の大見出し | 明朝 | Shippori Mincho | 700 | 40px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 600 | 26px | 1.4 | 0.08em | | `headline-md` | カード見出し・成分名 | 明朝 | Noto Serif JP | 600 | 20px | 1.5 | 0.1em | | `headline-sm` | ラベル帯・小見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 400 | 14px | 1.9 | 0.05em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 見出し背面の英字筆記体 | 欧文スクリプト | Great Vibes | 400 | 28px | 1.0 | 0.0em | | `label-button` | 英字セクションタイトル | 欧文サンセリフ | Montserrat | 700 | 24px | 1.2 | 0.05em | - 見出しと本文は明朝体を基本にする - 強調語は周りより1.3〜1.5倍大きくし、マゼンタにする - 見出しの背面に、薄いグレーの英字筆記体を重ねる - 縦書きの見出しを部分的に使う - 注釈は「※」付きの小さなゴシック体で入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内で写真とテキストを左右2分割することもある - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードを生成り地の上に浮かせて配置する - 写真とテキストのカードは、左右を交互に入れ替える - 理由は大きな番号「1.」「2.」「3.」で区切る - 実績バッジは2〜3個を横に並べる - 声のカードは写真を少しはみ出させて重ねる ## Elevation & Depth - 白カードに、ぼかし大きめの薄い影（0 8px 24px rgba(0,0,0,0.08)）を付ける - 製品写真を浮かせるのは、ソフトシャドウのみにする - 帯やラベルはフラットにする ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角いトリミング。成分は円形の泡や水滴として描く - **セクション境界**: 直線で地色を切り替える。斜めや波形は使わない - カードとボタンは角丸なし、または極小の角丸にする - 見出しは細線のコの字フレームで囲む - 実績は金の月桂樹付きの円形メダルにする - 成分は透明な円形の泡に入れて並べる ## Components - **ラベル帯**（`label-band`）: 小見出しの上に置く黒地白文字の短い帯 - **マゼンタ帯**（`accent-band`）: キーワードを白抜きにするマゼンタの帯 - **枠線見出し**（`bracket-heading`）: 細線の角括弧で明朝見出しを囲み、下に英字の小見出しを添える - **月桂樹メダル**（`laurel-badge`）: 金の月桂樹で囲んだ実績数値 - **成分の泡**（`ingredient-bubble`）: 半透明の青い球体に成分名を入れたもの - **理由カード**（`reason-card`）: 大きな番号の下に白カードを置き、写真と本文を組む - **グリーンマーカー**（`text-marker`）: 本文中の重要語に敷く、くすみグリーンの背景 - **お客様の声カード**（`review-card`）: 人物写真とマゼンタ見出し、本文、注釈を組んだカード - **無添加の丸**（`free-circle`）: 淡色の円に成分名を入れ、斜線で打ち消したもの ## Do's and Don'ts **Do** - 見出しは明朝体で組み、強調語だけマゼンタで大きくする - 生成り・白・淡い青灰の地を交互に切り替える - 黒髪の艶が伝わる写真を大きく使う - 数値の実績は金の月桂樹で格調を出す - 注釈は必ず小さく添える **Don't** - ビビッドな色を多用しない - 丸ゴシックやポップな書体を使わない - 大きな角丸やピル型を多用しない - マゼンタを面で広く使わない - 濃い影や立体的なボタンを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と受賞歴を伝える）: 大人の女性とボトルの写真に、縦組みの明朝コピーを重ねる。強調語はマゼンタ、右上に受賞メダルを置く 2. **成分訴求**（独自の配合を印象づける）: 髪の写真の上に、成分名入りの泡を3つ並べる 3. **悩みへの対応**（1本で複数の悩みに応えることを示す）: 暗い髪の写真に、縦書きの悩みワードを4つ並べ、マゼンタ帯を添える 4. **ランキング実績**（人気を証明する）: えんじの地に金の明朝見出しと月桂樹のメダル、ランキング画像を組む 5. **SNSの声**（口コミの量を見せる）: 英字見出しの下に、投稿カードを4列のグリッドで並べる 6. **販売実績・メディア掲載**（信頼を補強する）: 生成り地に金の紙吹雪を散らし、メダルとコラージュ写真、雑誌の画像を置く 7. **問題提起**（サロン仕上げとの差に疑問を投げかける）: グレー地に縦組みの明朝問いかけと、美容道具の写真を組む 8. **専門家の推薦**（権威付けをする）: 生成りカードに人物写真と推薦文を入れ、サインを添える 9. **選ばれる理由**（3つの理由を詳しく説明する）: 大きな番号と白カードで区切り、成分の詳細カードと比較図を入れる 10. **こだわり**（安全性と品質を示す）: 枠線見出しの下に、無添加の丸グリッドと写真付きの説明を置く 11. **お客様の声**（使用感を伝える）: 人物写真とテキストのカードを、左右を交互にして配置する 12. **使用方法**（手軽さを伝える）: モデル写真に英字の筆記体を重ね、手順を説明する ## Imagery - 30〜50代女性の黒髪の艶を、自然光の柔らかい光で撮る - 黒いスプレーボトルの物撮りに、植物の葉を添える - 成分は透明な水滴・泡・とろみのある液体で表現する - 金の紙吹雪と月桂樹で、祝祭感を部分的に出す - 美容道具（ハサミ・コーム）を白い台の上で俯瞰で撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はPC中央の固定幅カラムで、左右は生成りの地で埋めている - SPでは同じカラムを全幅にし、本文は88%幅にする - 4列のSNSグリッドは、SPでは2列にする - 左右分割のカードは、SPでは縦積みにする ## 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-bf7e4c3a`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/chlorellasupply/hm120/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。