--- version: alpha name: Misty Blue-Pink Gradient Haircare LP description: くすみブルーからくすみピンクへ流れるグラデーションと、白〜淡いラベンダーの地で上品にまとめたヘアケア定期通販 LP。金の月桂樹で実績を示し、悩みや原因はグレージュの暗い面で区切る。細めのゴシックと広い字間、ステップ番号の丸、ピンクの CTA で読み進めて購入へ導く。 colors: primary: '#6EA0B9' secondary: '#D395BC' cta: '#F42966' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#F2F7FB' tint-1: '#EAE9F1' dark-section: '#7C8277' on-dark: '#FDFFFA' accent-1: '#B8913F' text: '#6A6A6A' text-body: '#444444' text-muted: '#7D7D7F' surface: '#F3F3F2' marker: '#4C88B0' cta-accessible: '#E80C4E' primary-accessible: '#487B95' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.06em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Cormorant Garamond fontSize: 30px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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.md}' height: 56px offer-box: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.display}' rounded: '{rounded.md}' height: 180px gradient-label: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px laurel-badge: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 120px step-number: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 50px cause-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 130px benefit-panel: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 96px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 520px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 28px sticky-cta: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px --- # DESIGN.md — くすみ青×ピンクの霧感ヘアケア通販 LP（Misty Blue-Pink Gradient Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型 - **キーワード**: くすみブルー・くすみピンク・グラデーション・霧のような淡色・金の月桂樹・花びら - **地の質感**: 白〜淡いラベンダーのかすみ地に、光の粒・泡・花びらを薄く散らす。暗い面にはわずかな波状のテクスチャを入れる - **形**: 角丸は小さめのカード、ピル型ラベル、正円の写真、山形のセクション境界 - **温度感**: やや冷たい清潔感に、ピンクと金で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#6EA0B9` | ブランドのくすみブルー（帯・見出し地） | 6% | 画素の実測 | | `secondary` | `#D395BC` | くすみピンク（グラデの終点・強調文字） | 2% | 画素の実測 | | `cta` | `#F42966` | 主 CTA のローズピンク | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の白地 | 22% | 画素の実測 | | `background-alt` | `#F2F7FB` | 淡いブルーグレーの地 | 12% | 画素の実測 | | `tint-1` | `#EAE9F1` | 淡いラベンダーのかすみ地 | 10% | 画素の主要色に補正 | | `dark-section` | `#7C8277` | 悩み・原因セクションのグレージュ | 7% | 推定 | | `on-dark` | `#FDFFFA` | 暗い地の上の白文字 | 0% | 画素の実測 | | `accent-1` | `#B8913F` | 実績用のゴールド（月桂樹・第1位） | 2% | 推定 | | `text` | `#6A6A6A` | 見出しのグレー文字 | 1% | 画素の実測 | | `text-body` | `#444444` | 本文のダークグレー | 2% | 推定 | | `text-muted` | `#7D7D7F` | 注釈の薄いグレー | 0% | 画素の実測 | | `surface` | `#F3F3F2` | 原因カードの明るいグレー | 3% | 画素の実測 | | `marker` | `#4C88B0` | 本文の強調用ブルー文字 | 0% | 推定 | | `cta-accessible` | `#E80C4E` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#487B95` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡いブルーグレー・淡いラベンダーを交互に使い、全体を明るくかすんだ印象にする - ブランドの帯・吹き出し・ラベルには、くすみブルーからくすみピンクへの横グラデーションを使う - CTA だけは彩度の高いローズピンクにして、ほかの色と明確に分ける - ランキングや販売実績はゴールドの月桂樹と文字に限定して使う - 悩み・原因のパートはグレージュの暗い面に切り替え、ネガティブな話題を視覚的に分ける - 見出しのキーワードは、くすみブルーとピンクの文字色で一部だけ色を変える - `button-primary` は文字 `#FFFFFF` × 背景 `#F42966` のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E80C4E`、4.57:1）を使う。 - `offer-box` は文字 `#FFFFFF` × 背景 `#F42966` のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E80C4E`、4.57:1）を使う。 - `step-number` は文字 `#6EA0B9` × 背景 `#FEFEFE` のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#487B95`、4.58:1）を使う。 - `benefit-panel` は文字 `#6EA0B9` × 背景 `#F2F7FB` のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#487B95`、4.53:1）を使う。 - `sticky-cta` は文字 `#F42966` × 背景 `#FEFEFE` のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E80C4E`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 32px | 1.4 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 400 | 24px | 1.6 | 0.1em | | `headline-md` | ステップ名・カード見出し | ゴシック | Noto Sans JP | 500 | 20px | 1.5 | 0.06em | | `headline-sm` | 成分名・小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.06em | | `body-md` | 本文・お客様の声 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.04em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | ロゴ風の欧文・ステップ番号・Step 表記 | 欧文スクリプト | Cormorant Garamond | 400 | 30px | 1.2 | 0.02em | | `label-button` | CTA ボタン | ゴシック | Noto Sans JP | 700 | 18px | 1.3 | 0.08em | - 見出しは細め〜中くらいの太さにし、字間を 0.08〜0.1em と広く取る - 価格の数字だけを極太・大サイズにして、円・税込は小さく添える - ブランド名やステップ番号には、細い欧文のイタリック／スクリプト体を使う - 縦書きのコピーを白い短冊にのせて、写真に重ねる - 注釈は※番号で本文と対応させ、10px のグレーでまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。実績バッジ・雑誌の表紙は 3〜4 列の横並び - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 商品の解説は、白いカードを画面幅の約 90% で縦に連ねる - ステップは中央の丸い番号と左右の細線で区切る - 特長は左にテキスト、右に商品やテクスチャの写真を置く 2 分割 - メリットは、左にアイコン、右に大きな文字を置く横長のパネルを積み重ねる - 写真の上には白い短冊状の縦書きコピーを重ねる ## Elevation & Depth - 白いカードは淡くぼかした影で、地から少し浮かせる - CTA ボックスはやや強めの影と白いフチで目立たせる - 吹き出しやラベルは影を付けず、フラットにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は全幅の四角か正円で切り抜く。お客様の声のアバターは、グラデーションのリング付きの正円 - **セクション境界**: 下向きの山形（V 字）か、まっすぐな帯で切り替える - 見出しのラベルは、グラデーションのピル型に下向きの吹き出し尾を付ける - Point 見出しは、左右の細い角括弧のフレームで囲む - 特長は半透明の白い正円の中に短い文で入れる ## Components - **主 CTA ボタン**（`button-primary`）: ローズピンクの角丸ボタン。白い太字の文言に、右端の丸矢印を付ける。価格と割引バッジのボックス内に置く - **価格オファーボックス**（`offer-box`）: ピンクの面に、価格・送料無料などの白枠タグ・割引率の円形バッジをまとめる - **グラデーション吹き出しラベル**（`gradient-label`）: ブルーからピンクへのピル型に白文字。下に尾を付けて、次の見出しを指す - **月桂樹の実績表示**（`laurel-badge`）: 金の月桂樹で第1位や販売本数を挟み、大きな金の数字で見せる - **ステップ番号の丸**（`step-number`）: 白丸に細い線を付け、Step の欧文と数字を入れる。左右に細い水平線を伸ばす - **原因カード**（`cause-card`）: グレージュ地の上に置く明るいグレーのカード。上部に濃色の丸で原因番号を付け、右に円形のイラストを置く - **定期便メリットパネル**（`benefit-panel`）: 淡いグレーの横長パネル。左に円形の線画アイコン、右に小さな前置きと大きなブルー文字を置く - **お客様の声カード**（`voice-card`）: 白いカードの上辺にリング付きの丸アバターを重ねる。名前・本文・ハッシュタグの順に並べる - **FAQ アコーディオン**（`faq-item`）: ブルーの地に白いバーを並べる。頭に Q、右端に＋の丸を置く - **追従 CTA バー**（`sticky-cta`）: 画面下に固定し、割引率・商品のサムネイル・ピンクのボタンを横に並べる ## Do's and Don'ts **Do** - 淡色の地とブルーからピンクへのグラデーションを基調に、余白を多めに取る - 実績や数字は金の月桂樹で囲み、権威性を出す - 悩みと原因はグレージュの暗い面にまとめ、解決のパートで明るいラベンダーに戻す - 成分や処方は円形の写真と短いラベルで視覚化する - ※注釈を各所に丁寧に付ける **Don't** - CTA 以外に彩度の高い原色を使わない - 見出しを極太にしない（価格の数字は例外） - 黒ベタの背景を使わない（暗くしたいときはグレージュ） - 角丸を大きくしすぎてポップにしない - 写真に強いフィルターや縁取りを付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と商品・特典を一目で伝える）: ラベンダーのかすみ地に、髪をなびかせる女性と商品を並べる。大きなキャッチと特典の吹き出しを置き、特長 2 点を X 字の曲線で区切る 2. **実績・権威**（ランキングや受賞で信頼を得る）: 金の月桂樹で第1位を 2 つ、アワードのバッジを 3 つ、雑誌の表紙を 4 つ横に並べる 3. **初回オファー**（価格と特典を提示する）: 白いカードにセット写真・番号付きのセット内容・2回目以降の価格を載せ、ピンクの CTA ボックスで締める 4. **ブランド紹介**（作り手の信頼性を伝える）: 動画、スタッフの写真の横スクロール、販売本数の月桂樹で構成する 5. **コンセプト・香り**（研究の集大成と香りの魅力を伝える）: グラデーションの帯に見出しを置く。ブルー地に特長 3 つを白い正円で並べ、花びらを散らした写真を入れる 6. **お客様の声**（共感と体験を伝える）: リング付きのアバターを重ねた白いカードを縦に並べる 7. **定期便の説明**（お得さと安心感を伝える）: アイコンと大きな文字のパネルを、お得 3 つ・安心 3 つに分けて並べる 8. **よくある質問**（購入前の不安を解消する）: ブルー地に白いアコーディオンを並べる 9. **悩みの提起**（自分ごと化を促す）: グレージュ地の写真に、悩みを半透明の円で 4 つ散らす 10. **原因の解説**（悩みの根拠を示す）: 年代別の棒グラフと、番号付きの原因カード 3 枚で見せる 11. **解決ステップ**（3 段階のケアを示す）: 丸い番号と細線で区切り、テクスチャと商品を右に置く 12. **ステップ詳細・成分**（各成分の根拠を伝える）: 白いカードの中に、悩み→原因→解決→Point の順で並べる。成分は円形の写真、比較は横スクロールの表で示す ## Imagery - 人物は白い肌着姿で、自然光の浴室や白い背景の中で撮る。髪のツヤを強調する - 商品は白とくすみブルーのボトルを並べ、反射のある白い台の上で撮る - 成分は白い背景で切り抜き、正円にトリミングする - ピンクの花びらや光の粒、泡の円を画面の端に薄く散らす - 断面図などのイラストは柔らかな肌色とブラウンで、写実的に描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約 750px）のカラムを置き、左右に淡色の背景を敷く - PC では実績バッジやメリットパネルを横並びにして、段数を減らしてもよい - 追従 CTA は PC では右下に固定するか、中央下に配置する - 比較表は PC では横スクロールをやめ、全列を表示する ## 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-96c254eb`（元 LP の URL から採番） - **元 LP**: https://www.lasana.co.jp/smp/cp/premior2502onec - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。