--- version: alpha name: Pop Fresh Haircare Spray LP description: 淡い生成り地に、ピンク・ブルー・ティール・イエローの香り別カラーを差す明るいヘアケアLP。手書き風の見出しと人物写真、角のない色帯ラベルで、若い女性向けの軽くてポップな印象を出す。 colors: background: '#F6F8EB' background-alt: '#FFFCE9' primary: '#0567AB' secondary: '#EB5B91' accent-1: '#439DDA' accent-2: '#30B5B0' marker: '#FEE414' accent-3: '#E8961E' dark-section: '#151B17' surface: '#FFFFFF' text: '#30312B' text-muted: '#666666' on-primary: '#FEFEFD' secondary-accessible: '#E31C66' accent-1-accessible: '#247BB7' accent-2-accessible: '#22817D' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Yomogi fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Playfair Display fontSize: 40px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.4 rounded: sm: 0px md: 8px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' scent-feature-block: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 330px color-band-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 50px scene-circle-badge: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 95px highlight-box: backgroundColor: '{colors.secondary}' textColor: '{colors.marker}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 40px before-after-pair: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 170px howto-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 280px award-laurel: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 160px video-frame: backgroundColor: '{colors.dark-section}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 230px --- # DESIGN.md — 生成り地にピンク×ブルーの手書きポップなヘアケアLP（Pop Fresh Haircare Spray LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: ポップ・元気、清潔・爽やか、かわいい、親しみ・手作り感 - **キーワード**: 生成り地・香り別カラー・手書き見出し・人物写真・ビフォーアフター・線画イラスト - **地の質感**: フラットな単色面。紙っぽい生成り地に、果物の写真と線画イラストを重ねる - **形**: 四角い色帯ラベルと四角い写真。シーン提案だけ白い円形バッジにする - **温度感**: 明るく軽い。やや暖かい生成りに、寒色と暖色をバランスよく置く ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F6F8EB` | ページの基本地（生成り） | 35% | 画素の実測 | | `background-alt` | `#FFFCE9` | No.1セクションの淡いクリーム地 | 9% | 画素の実測 | | `primary` | `#0567AB` | 見出し文字と左帯のブルー | 4% | 画素の実測 | | `secondary` | `#EB5B91` | ピンクの色帯と強調 | 4% | 画素の実測 | | `accent-1` | `#439DDA` | ブルーの色帯（BEFORE背景） | 4% | 画素の実測 | | `accent-2` | `#30B5B0` | ティール（月桂樹・斜めの帯） | 6% | 画素の実測 | | `marker` | `#FEE414` | 見出しの黄色い強調ボックス | 1% | 画素の実測 | | `accent-3` | `#E8961E` | 香りのキャッチに使うオレンジ文字 | 0% | 推定 | | `dark-section` | `#151B17` | 動画セクションの黒い地 | 6% | 画素の実測 | | `surface` | `#FFFFFF` | 使い方カードの白い面 | 8% | 画素の実測 | | `text` | `#30312B` | 本文と手書き見出しの黒 | 2% | 画素の実測 | | `text-muted` | `#666666` | 注釈のグレー | 0% | 推定 | | `on-primary` | `#FEFEFD` | 色帯の上の白文字 | 0% | 画素の主要色に補正 | | `secondary-accessible` | `#E31C66` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#247BB7` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#22817D` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ生成りの#F6F8ECで統一する。No.1セクションだけ少し黄みのクリーム地にする - 香りの種類ごとにイエロー・ティール・ピンクを割り当て、キャップ色・装飾・キラキラアイコンの色をそろえる - ピンクとブルーは左右で対にして、シーン比較やビフォーアフターに使う - 大見出しはブルーで書く。強調する語だけピンク地に黄文字のボックスにする - 黒地は動画セクションだけに使い、ほかは明るさを保つ - 本文は黒、注釈はグレーの小さい文字で右寄せにする - `color-band-label` は文字 `#FEFEFD` × 背景 `#EB5B91` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E31C66`、4.5:1）を使う。 - `highlight-box` は文字 `#FEE414` × 背景 `#EB5B91` のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E31C66`、4.54:1）を使う。 - `before-after-pair` は文字 `#FEFEFD` × 背景 `#439DDA` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#247BB7`、4.53:1）を使う。 - `award-laurel` は文字 `#30B5B0` × 背景 `#FFFCE9` のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#22817D`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ（青とピンクの2色） | 丸ゴシック | M PLUS Rounded 1c | 800 | 30px | 1.3 | 0.02em | | `headline-lg` | セクション大見出し（ブルー） | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.3 | 0.05em | | `headline-md` | 香りの名前（手書き風） | 手書き・筆 | Yomogi | 700 | 24px | 1.3 | 0.02em | | `headline-sm` | 香りのサブキャッチ・シーン見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.4 | 0.08em | | `body-lg` | 商品説明の本文 | ゴシック | Noto Sans JP | 500 | 15px | 1.6 | 0.03em | | `body-md` | 使い方の本文・色帯の説明 | ゴシック | Noto Sans JP | 500 | 13px | 1.6 | 0.03em | | `accent` | BEFORE/AFTERやNo.1の英数字 | 欧文セリフ | Playfair Display | 900 | 40px | 1.1 | 0.02em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 9px | 1.4 | 0.0em | - 見出しは太い丸ゴシック、香りの名前は手書き風フォントにして、硬さを分ける - 1つの見出しの中で色を2色に分け、言いたい語だけ大きくする - 本文は2行程度の短い文を中央か左寄せで置く - 英字ラベルは太いセリフ体か、細いサンセリフ体を黒帯の中に置く - 注釈は※付きの小さい文字で、右下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品紹介は商品画像を左、説明を右に置く2分割。シーンとビフォーアフターは左右2つ並び、バッジは4つ並び - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - FVと人物写真は画面幅いっぱいに置く - 香りの紹介は同じ型を3回繰り返す - 左右2つの比較は8px程度の隙間でほぼ全幅に並べる - 円形バッジは等間隔で4つ並べる - No.1セクションは商品3本を横に並べ、下に斜めの色面を敷く ## Elevation & Depth - 影はほぼ使わずフラットにする - 白カードは生成り地との色の差だけで浮かせる - 商品画像だけ、ごく薄い影で立体感を出してよい ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの四角。商品は背景を切り抜く - **セクション境界**: 直線で色を切り替える。最後のセクションだけ斜めのティール面を入れる - 色帯ラベルは角丸なしの長方形にする - シーン提案のバッジは白い正円にする - 強調ボックスは角丸を小さく（約8px）する - 四角い4点のキラキラアイコンを見出しの脇に添える ## Components - **香り紹介ブロック**（`scent-feature-block`）: 左に商品2サイズ、右にサブキャッチ、手書きの香り名、果物の写真、2行の説明を縦に並べる - **色帯ラベル**（`color-band-label`）: 写真の下に大きな色文字の見出しを置き、その下にピンクかブルーの帯と白文字の説明を入れる - **シーン円形バッジ**（`scene-circle-badge`）: 白い円の中に青文字2行と、ピンク・黄の線画アイコンを入れる。4つ並べる - **強調ボックス見出し**（`highlight-box`）: ブルーの見出しの中で、強調語だけピンク地に黄色文字で囲む - **ビフォーアフター比較**（`before-after-pair`）: 左はブルー地、右はピンク地にする。上部に白いセリフ体の英字を置き、髪のアップ写真と黄色の手描き線を重ねる - **使い方カード**（`howto-card`）: 白カードに黒帯の英字ラベルと箇条の本文を置き、右に線画イラストと吹き出しを入れる - **No.1実績バッジ**（`award-laurel`）: ティールの月桂樹で囲み、大きなセリフ体のNo.1と小さな見出しを入れる - **動画枠**（`video-frame`）: 黒地の中央に動画を置き、手書き文字の説明と再生アイコンを重ねる ## Do's and Don'ts **Do** - 香りごとの色を、商品・アイコン・装飾まで一貫させる - 手書き風の見出しで、親しみやすさを出す - 左右の比較は必ずピンクとブルーの対にする - 地を生成りにして、全体を明るく軽く保つ - 効果をうたう表現には※注釈を付ける **Don't** - 暗い地や重いグラデーションを多用しない - ボタンやラベルに大きな角丸や濃い影を付けない - 香りの色を混ぜて使わない - 長い本文の段落を置かない - 明朝体を見出しに使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（手軽さと気持ちよさを一目で伝える）: 商品を使う女性の写真を全幅で置き、左上に青とピンクの丸ゴシックで3行のキャッチを重ねる 2. **香りのラインナップ**（香りの違いを見せて選ばせる）: 生成り地に香り紹介ブロックを3回繰り返す。それぞれ色を変える 3. **使い方動画**（使い方を動画で見せる）: 黒地に動画枠を置き、手書きのテロップを入れる 4. **利用シーン**（いつ使うかを想像させる）: 青の大見出し、2枚の人物写真と色帯ラベル、4つの円形バッジの順に並べる 5. **ビフォーアフター**（効果を目で見せる）: 強調ボックスの見出しの下に、ブルーとピンクの2枚を並べる 6. **使い方**（手順を簡潔に説明する）: 白カードに黒帯のラベル、本文、線画イラストと吹き出しを入れる 7. **実績・商品一覧**（売上実績で信頼を得る）: クリーム地に月桂樹のNo.1を置き、商品3本を並べる。背景にティールの斜めの面を敷き、下に出典の注釈を入れる ## Imagery - 人物は明るい白背景で撮り、笑顔や自然な表情で商品を手に持つ - 果物はみずみずしいアップで、断面を見せる - 商品は背景を切り抜き、大小2サイズを重ねて置く - 線画イラストは黒の単線で描き、ピンクと黄色を少し差す - 黄色の手描きの線やぐるぐるで動きを表す - 4点のキラキラ記号を見出しの脇に添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC画像はないため、SPの1カラムを中央に置く（最大幅約750px）ことを推奨する - PCでは、香りの3ブロックを横並びのカードにしてもよい - 円形バッジとビフォーアフターは、PCでもそのまま横並びにする - FV写真は横長に切り取り、キャッチを左側に置く ## 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-8730db99`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/naturelab/drysp-minion/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。