--- version: alpha name: Pop Coral Red Pastel Haircare LP description: コーラルレッドを主役に、淡ピンク・生成り・ペールブルーの面を交互に敷いたポップなヘアケアLP。太い丸みのあるゴシック見出しと赤帯の手書き風コピー、不定形に切り抜いた写真、SNS投稿風カードで若い女性向けの親しみを出している。購入ボックスは白カードに赤いピル型ボタンを重ねた形で何度も繰り返す。 colors: primary: '#E94340' cta: '#EA443D' on-cta: '#FFF3EB' background: '#F9F6F1' background-alt: '#FEEAEC' surface: '#FEFEFE' secondary: '#DEE8EE' accent-1: '#2463A4' accent-2: '#6B91CC' accent-3: '#ED6976' tint-1: '#FEE0E0' line: '#F3C3BF' text: '#503C39' dark-section: '#3B92C2' primary-accessible: '#E52320' cta-accessible: '#DC2018' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 52px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Montserrat fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.06em accent: fontFamily: Yomogi fontSize: 22px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.15em rounded: sm: 8px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 24px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' purchase-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 110px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px pain-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 34px tab-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 40px badge-new: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 600px ingredient-pill: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 44px step-number: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px product-arch-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 320px sns-photo-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' height: 230px --- # DESIGN.md — コーラルレッド×淡ピンクのポップなヘアケアLP（Pop Coral Red Pastel Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: ポップ・元気、かわいい、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: コーラルレッド・パステル・ポップ・SNS風・不定形切り抜き・繰り返しCTA - **地の質感**: 淡いグラデーションのピンク地や方眼紙柄の生成り地に、つやのある商品写真と水滴・クリームの質感素材を重ねる - **形**: 大きめの角丸カード、ピル型ボタン、円バッジ、波形の境界、上が丸いアーチ型の商品カード - **温度感**: 暖かめ。赤とピンクが主で、ペールブルーと濃紺のアクセントで締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E94340` | ブランドの赤（見出し・赤帯セクション） | 14% | 画素の主要色に補正 | | `cta` | `#EA443D` | 購入ボタンの塗り | 2% | 画素の実測 | | `on-cta` | `#FFF3EB` | ボタン上の文字 | 0% | 画素の実測 | | `background` | `#F9F6F1` | 生成りの基本地 | 20% | 画素の実測 | | `background-alt` | `#FEEAEC` | 淡ピンクのグラデ地 | 16% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード・購入ボックス | 10% | 画素の実測 | | `secondary` | `#DEE8EE` | ペールブルーの地 | 8% | 画素の実測 | | `accent-1` | `#2463A4` | 濃紺のバッジ・番号・成分ピル | 2% | 画素の実測 | | `accent-2` | `#6B91CC` | 比較列のブルー文字・ボタン | 1% | 画素の実測 | | `accent-3` | `#ED6976` | 比較列のピンクボタン | 0% | 画素の実測 | | `tint-1` | `#FEE0E0` | 比較列のピンク面 | 4% | 画素の実測 | | `line` | `#F3C3BF` | カード枠・下線の赤細線 | 0% | 画素の主要色に補正 | | `text` | `#503C39` | 濃い茶の本文 | 1% | 画素の主要色に補正 | | `dark-section` | `#3B92C2` | 青空の締めビジュアル | 2% | 画素の実測 | | `primary-accessible` | `#E52320` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#DC2018` | AA を満たす補正値（計算） | | 計算 | - 見出し・コピーは基本すべてブランドの赤で書く。黒い見出しは使わない - 地色は生成り→淡ピンク→ペールブルー→赤を交互に切り替え、セクションの区切りを色で見せる - 赤い地の上では購入ボックスを白にし、中のボタンは赤のままにする - 濃紺は New バッジ・手順番号・成分ピルだけに絞る - 2商品の比較は左右をピンク／ブルーに塗り分け、文字やボタンの色も列に合わせる - 悩みのコピーは赤帯に白抜きの手書き風文字で載せる - `purchase-box` は文字 `#E94340` × 背景 `#FEFEFE` のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E52320`、4.53:1）を使う。 - `button-primary` は文字 `#FFF3EB` × 背景 `#EA443D` のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DC2018`、4.52:1）を使う。 - `pain-label` は文字 `#FFF3EB` × 背景 `#E94340` のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E52320`、4.52:1）を使う。 - `tab-heading` は文字 `#FFF3EB` × 背景 `#E94340` のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E52320`、4.52:1）を使う。 - `feature-card` は文字 `#E94340` × 背景 `#FEFEFE` のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E52320`、4.53:1）を使う。 - `product-arch-card` は文字 `#E94340` × 背景 `#FEE0E0` のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E52320`、4.5:1）を使う。 - `sns-photo-card` は文字 `#E94340` × 背景 `#FEFEFE` のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E52320`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ・大見出し（斜めに配置） | ゴシック | Zen Kaku Gothic New | 700 | 52px | 1.1 | 0.0em | | `headline-lg` | 英字の大見出し・数字 | 欧文サンセリフ | Montserrat | 900 | 44px | 1.1 | 0.0em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.4 | 0.08em | | `headline-sm` | サブ見出し・カード内見出し | ゴシック | Noto Sans JP | 600 | 18px | 1.5 | 0.06em | | `accent` | 悩みの赤帯コピー・手書き風の添え書き | 手書き・筆 | Yomogi | 400 | 22px | 1.5 | 0.05em | | `body-md` | 手順・説明の本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.04em | | `note` | 成分の注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `label-button` | 購入ボタンのラベル | 欧文サンセリフ | Noto Sans JP | 600 | 16px | 1.0 | 0.15em | - 見出しは中央揃え。字間を広めにとって軽く見せる - FVのキャッチは太字の段組で斜めに傾け、勢いを出す - 大きく見せたい語だけを1.5倍に拡大し、前後は小さく添える - 強調語は傍点、または白い帯に赤文字を抜く - 赤地の端に巨大な英字を縦向きの淡い透かしで敷く - 英字の見出しは極太で丸みのあるサンセリフを使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較・商品一覧のみ 2〜3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は左右に交互に寄せ、反対側にコピーを重ねる - 購入ボックスはセクションごとに繰り返し置く - 特長は大きな角丸の白カードにまとめ、上端にタブ見出しを重ねる - 比較は画面を縦に二分し、左右の列を色で塗り分ける - 商品一覧はアーチ型カードを2〜3列で並べる ## Elevation & Depth - 影はほぼ使わず、色の面で階層を作る - 円バッジは白〜ピンクのグラデーションと淡い影で、ぷっくりした立体感を出す - SNS風の写真カードは白い枠と弱い影で重ね置きする ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 不定形の有機的な形で切り抜く／角丸の長方形／上が半円のアーチ - **セクション境界**: 波形の曲線と大きな円弧。一部は直線で色を切り替える - 購入ボタンはピル型で、白い角丸ボックスの中に置く - 見出しタブは平行四辺形の赤帯に、吹き出しの尾を付ける - 特長カードは角丸32px程度に赤の細い枠線 - New バッジは濃紺の正円で、文字を斜めに入れる ## Components - **購入ボックス**（`purchase-box`）: 白い角丸ボックスの上段に赤文字の案内と下向き矢印、下段に赤いピル型の通販ボタンを置く - **通販ボタン**（`button-primary`）: 赤いピル型。左にカートアイコン、中央に字間を広げたラベル - **悩みの赤帯コピー**（`pain-label`）: 赤い帯の上に手書き風の白文字を、行ごとにずらして重ねる - **斜めタブ見出し**（`tab-heading`）: 傾けた赤い平行四辺形に白文字。尾を付けてカードの上端に重ねる - **Newバッジ**（`badge-new`）: 濃紺の正円に白い極太の英字を斜めに入れる - **特長カード**（`feature-card`）: 白地に赤の細い枠。中に見出し、下線付きの説明、図解、成分ピルを置く - **成分ピル**（`ingredient-pill`）: 濃紺の角丸ラベルを2列×2段に並べ、白文字に注釈番号を付ける - **手順番号**（`step-number`）: 濃紺の楕円に白の2桁英数字。赤地の上に縦に並べる - **アーチ型商品カード**（`product-arch-card`）: 上が半円のパステル地に商品写真を置き、下部の赤い帯に購入ボタンを入れる - **SNS投稿風カード**（`sns-photo-card`）: 白い枠付きの写真の下にハート・コメント・送信アイコンを並べ、カードを散らして重ねる ## Do's and Don'ts **Do** - 見出しと強調は赤で統一する - 購入ボックスを数セクションおきに繰り返す - 写真は不定形やアーチ型に切り抜き、柔らかく見せる - 水滴・クリーム・キラキラ星を余白に散らす - 地色をセクションごとに交互に切り替える **Don't** - 黒や濃いグレーの太い見出しを使わない - 影の強いカードや角張ったボタンにしない - 濃紺を広い面に使わない - 写真を単純な四角だけで並べない - ピンクとブルー以外の比較色を足さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（仕上がりの効果を一目で伝える）: ペールブルー地に横顔のモデル。斜めの赤い大キャッチと円バッジ2つを置き、波形の境界から淡ピンクにつなげて商品と購入ボックスを見せる 2. **持続効果の訴求**（長時間キープできることを示す）: 太陽から月へ回る円弧の矢印に、巨大な数字と短い説明を添える 3. **口コミ・SNS実例**（仕上がりの実例と話題性）: SNS投稿風の写真カードを散らして重ね、下に赤い一言を置く 4. **新商品の告知**（新タイプを紹介して購入へ導く）: 円弧で始まる赤地に白抜きの見出しと縦向きの英字透かし。商品写真と白い購入ボックスを置く 5. **悩みの提起**（共感を得る）: 生成り地に不定形の写真4枚を左右交互に置き、赤帯の手書き風コピーを重ねる 6. **解決の提示**（商品を解決策として示す）: 赤い大見出しの下に、モデルが商品を持つ写真 7. **2タイプ比較**（自分に合う方を選ばせる）: 吹き出しタブと英字の大見出しの下で、ピンクとブルーの2列に分けて商品・特徴・購入ボタンを並べる 8. **特長・成分**（仕組みの説得）: 方眼紙柄の地に角丸の白カード。図解と成分ピルを入れる 9. **香り**（使い心地の情緒的な訴求）: 手書き風のサブ見出しに、写真2枚を段違いに並べる 10. **締めの購入**（再度の購入導線）: モデル写真から波形の境界で淡ピンクにつなぎ、2商品と購入ボックスを並べる 11. **使い方**（使うタイミングと手順の説明）: 英字の大見出しとピル型ラベル。タブで切り替えられる赤地に動画風の写真と番号付きの手順 12. **併用の提案**（まとめ買いを促す）: 白いカードに円バッジ2つを×でつなぐ 13. **商品ラインナップ**（シリーズ全体を見せる）: パステル色のアーチ型カードを2〜3列で並べる 14. **ブランドメッセージ・フッター**（世界観を伝えて締める）: 青空に浮かぶ商品写真。中央揃えの赤いメッセージ文、ロゴ、リンク ## Imagery - モデルは黒髪ロングのつやのある髪。明るく柔らかい自然光で撮る - 商品は白背景で切り抜き、少し傾けて浮かせるように配置する - 水滴・クリームのテクスチャ素材を商品の周りに添える - 線画の星やキラキラ、太陽・月の簡単なアイコンをあしらう - 図解は赤・ピンク・濃紺の単純なフラットイラストで描く - 締めのビジュアルは青空に商品が浮かぶ構図 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅のカラムを置き、左右に背景を広げる形を推奨 - 比較や商品一覧は PC で 3〜4 列に広げてもよい - 不定形の写真はサイズを大きくし、コピーを横並びに配置する - 見出しサイズは PC で約1.3倍にする ## 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-5cf760f1`（元 LP の URL から採番） - **元 LP**: https://lp.moist-diane.jp/076/?utm_source=Insta&utm_medium=banner&utm_campaign=DianePB_image_cv&utm_content=2509_banner&utm_id=120232640585050213&utm_term=120232640585040213&fbclid=PAaWdyZAMudXNleHRuA2FlbQEwAGFkaWQBqybzN46-NQGnHl7lxifgM9l7AUEKr3y7-U_7mfgnp - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。