--- version: alpha name: Fresh Lemon Yellow & Mint Haircare LP description: 鮮やかなレモンイエローとミントグリーンを交互に敷いた、元気で爽やかなドライシャンプー LP。手書き風の斜め見出し、円形バッジ、角丸の写真フレーム、香り別のカラーカードで軽快に見せる。 colors: primary: '#35D4A2' background: '#FDF860' background-alt: '#E0FEF4' cta: '#35D4A1' on-cta: '#F4FFFF' text: '#0C9A7D' text-body: '#4B3833' accent-1: '#B5CC2A' accent-2: '#E8649A' accent-3: '#456C9C' secondary: '#3DA5DD' tint-1: '#F0D585' surface: '#FFFFFF' marker: '#FFFA70' cta-accessible: '#1C8463' text-accessible: '#0A7B64' primary-accessible: '#1C8464' accent-1-accessible: '#6E7C19' secondary-accessible: '#1F7CAF' typography: display: fontFamily: Yomogi fontSize: 44px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 32px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.6 letterSpacing: 0.04em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.5 accent: fontFamily: Pacifico fontSize: 34px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Montserrat fontSize: 18px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.2em rounded: sm: 8px md: 16px lg: 40px 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: 52px badge-circle: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 96px heading-handwritten: textColor: '{colors.text}' typography: '{typography.display}' height: 120px scene-photo-frame: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 280px feature-pill: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 60px product-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 560px badge-new: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 64px before-after: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 200px --- # DESIGN.md — レモン黄×ミントの爽快ヘアケア LP（Fresh Lemon Yellow & Mint Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: ポップ・元気、清潔・爽やか、かわいい - **キーワード**: レモンイエロー・ミントグリーン・手書き風見出し・円形バッジ・香り別カラー・爽快感 - **地の質感**: フラットなベタ塗りが基本。ミント地には細い方眼グリッドを重ね、黄色地は光のにじみ程度のグラデーション。 - **形**: 正円バッジ、大きな角丸の写真枠、縦長のピル型商品カード、角丸の CTA。 - **温度感**: 明るく高彩度の爽やかな暖寒ミックス。黄色で元気さ、ミントで清涼感を出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#35D4A2` | ブランドのミントグリーン。セクション地と CTA | 18% | 画素の実測 | | `background` | `#FDF860` | メインのレモンイエロー地 | 30% | 画素の実測 | | `background-alt` | `#E0FEF4` | 淡いミントの地 | 11% | 画素の実測 | | `cta` | `#35D4A1` | 購入ボタン | 2% | 画素の実測 | | `on-cta` | `#F4FFFF` | ボタン上の文字 | 1% | 画素の実測 | | `text` | `#0C9A7D` | 見出しのグリーン文字 | 2% | 画素の実測 | | `text-body` | `#4B3833` | 注釈・バッジ内の濃茶文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#B5CC2A` | ライムの香りカラー | 2% | 推定 | | `accent-2` | `#E8649A` | ピンクの香りカラー | 2% | 推定 | | `accent-3` | `#456C9C` | ネイビー（無香料） | 1% | 画素の実測 | | `secondary` | `#3DA5DD` | 新登場バッジの青 | 1% | 推定 | | `tint-1` | `#F0D585` | クリーム色のフレグランス地 | 7% | 画素の実測 | | `surface` | `#FFFFFF` | フッター・白地 | 7% | 画素の実測 | | `marker` | `#FFFA70` | 手書き見出し下の黄色ライン | 1% | 画素の主要色に補正 | | `cta-accessible` | `#1C8463` | AA を満たす補正値（計算） | | 計算 | | `text-accessible` | `#0A7B64` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#1C8464` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#6E7C19` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#1F7CAF` | AA を満たす補正値（計算） | | 計算 | - 黄色地とミント地をセクションごとに交互に切り替える。 - 見出しは黄色地ならグリーン文字、ミント地なら白文字。 - 香りごとに色（ライム・ミント・ピンク・青・ネイビー）を決め、カード・ボタン・円を同じ色でそろえる。 - CTA はミントのベタ塗りに白文字。 - 注釈・補足は濃茶か小さなグリーン文字にする。 - 黒は使わず、濃い色は濃茶かネイビーで止める。 - `button-primary` は文字 `#F4FFFF` × 背景 `#35D4A1` のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1C8463`、4.55:1）を使う。 - `badge-circle` は文字 `#0C9A7D` × 背景 `#FDF860` のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#0A7B64`、4.66:1）を使う。 - `scene-photo-frame` は文字 `#F4FFFF` × 背景 `#35D4A2` のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#1C8464`、4.54:1）を使う。 - `feature-pill` は文字 `#F4FFFF` × 背景 `#B5CC2A` のコントラスト比が 1.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#6E7C19`、4.52:1）を使う。 - `product-card` は文字 `#0C9A7D` × 背景 `#E0FEF4` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#0A7B64`、4.57:1）を使う。 - `badge-new` は文字 `#F4FFFF` × 背景 `#3DA5DD` のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1F7CAF`、4.52:1）を使う。 - `before-after` は文字 `#0C9A7D` × 背景 `#FDF860` のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#0A7B64`、4.66:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・訴求の手書き風キャッチ | 手書き・筆 | Yomogi | 700 | 44px | 1.3 | 0.02em | | `headline-lg` | セクションの大見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 32px | 1.35 | 0.04em | | `headline-md` | 利用シーンの見出し・リード | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.6 | 0.04em | | `headline-sm` | 商品名・小見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.05em | | `body-md` | 説明文・ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.7 | 0.05em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 500 | 9px | 1.5 | 0.0em | | `accent` | 英字の筆記体見出し | 欧文スクリプト | Pacifico | 400 | 34px | 1.2 | 0.0em | | `label-button` | ボタン文字 | 欧文サンセリフ | Montserrat | 700 | 18px | 1.0 | 0.2em | - キャッチは手書き風で右上がりに少し傾ける。 - 大見出しは太い丸ゴシックで、手書きの小見出しを上に添える。 - 手書きの小見出しの下に黄色のラインを引く。 - 本文も太字寄りにして、高彩度の地に負けないようにする。 - 数字を強調するときは大きくする（No.1 など）。 - 注釈は ※ 番号付きで小さく添える。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。バッジやカードは 2〜3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションごとに地の色を全幅で切り替える。 - 利用シーンは写真枠を左右交互に配置し、反対側に斜めの見出しを置く。 - 商品ボトルの切り抜きを写真枠の境目に重ねて配置する。 - 特長はピル型の色付きラベルを縦に 3 つ並べる。 - ラインナップは縦長ピル型カードを 2 列でジグザグに並べる。 - CTA は幅 75% ほどで中央に置く。 ## Elevation & Depth - 影はほぼ使わず、フラットに仕上げる。 - 商品切り抜きには、床に落ちるソフトな影だけを付ける。 - 写真枠は黄色の太いフチで地から浮かせる。 ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 40px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は対角の 2 隅だけ大きく丸めた角丸枠に入れ、黄色のフチを付ける。他は円形か切り抜き。 - **セクション境界**: 直線で色を切り替える。FV 下は斜めの光グラデーション。 - バッジは正円にする。 - 商品カードは上下を半円にした縦長ピル型。 - CTA は角丸 16px 程度の横長ボタン。 - 特長ラベルは完全なピル型。 ## Components - **購入 CTA ボタン**（`button-primary`）: ミントのベタ塗りの角丸ボタン。左にカートアイコン、中央に字間を広げた英字ラベル。 - **円形の訴求バッジ**（`badge-circle`）: 黄色やミントの正円に、短い効能を 2 行で入れる。3 つ横に並べる。 - **手書き風見出し**（`heading-handwritten`）: 傾けた手書き文字に黄色ラインを添え、その下に太い丸ゴシックの大見出しを置く。 - **利用シーン写真枠**（`scene-photo-frame`）: 方眼のミント地に、黄色フチの角丸写真を左右交互に置く。白の斜め見出しと商品ボトルを重ねる。 - **特長ラベル**（`feature-pill`）: 香りカラーで塗ったピル型に、白文字で特長を 2 行入れる。 - **香り別商品カード**（`product-card`）: 淡い香りカラーの縦長ピル型。中に商品、商品名、色付きの購入ボックス（白ピルボタン入り）を置く。 - **新登場バッジ**（`badge-new`）: カードの左上に重ねる小さな正円バッジ。2 行の白文字。 - **比較ボックス**（`before-after`）: 黄色の角丸パネルの中に、水色とピンクの比較写真 2 枚を並べ、筆記体のラベルを付ける。 ## Do's and Don'ts **Do** - 黄色とミントを交互に使い、爽快なリズムを作る。 - 見出しは手書き風と太丸ゴシックの 2 段にする。 - 香り別のカラーをカード・ボタン・円で統一する。 - 商品ボトルの切り抜きを各所に重ねて、立体感を出す。 - 効能は短いフレーズにして円やピルに入れる。 **Don't** - 黒や暗い地を使わない。 - 明朝体や細い書体で見出しを組まない。 - 角張った長方形の写真を並べるだけにしない。 - 香りカラー以外の色を増やさない。 - 長文の説明を詰め込まない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と世界観を一目で伝える）: モデルが商品を持つ全幅写真。縦書きコピーとロゴを重ねる。 2. **キャッチと実績**（主な効能と販売実績を訴求する）: 黄色地に傾けた手書きキャッチ、月桂樹の No.1 表記、商品写真、香りの円バッジを置く。 3. **効能の要約と CTA**（特長を 3 つにまとめて購入へ誘導する）: 淡ミント地に黄色の円バッジを 3 つ、リード文、商品、ミントの CTA を配置する。 4. **ラインナップスライダー**（香りの選択肢を見せる）: 黄色地に香り色の縦長ピルカードを横スクロールで並べ、下にプログレスバーを置く。 5. **利用シーン**（使う場面を具体的に想像させる）: 方眼のミント地に角丸写真を左右交互に置き、白の斜め見出しを添える。 6. **ビフォーアフター**（効果を視覚的に示す）: 黄色パネルに比較写真 2 枚を並べる。 7. **特長詳細**（成分と使用感を説明する）: 黄色地にスプレー写真を置き、香りカラーのピルラベルを 3 つ縦に並べる。ミニサイズの円写真と CTA も配置する。 8. **使い方**（使用方法を伝える）: ミント地に筆記体の英字見出し、白帯の説明文、黄色ピルの用途ラベル、モデル写真を置く。 9. **香りの訴求**（フレグランスとしての価値を見せる）: クリーム地に商品を並べた写真と、香り色の円を 5 つ配置する。 10. **ラインナップと購入**（香りごとに購入へ導く）: 黄色地に香り別ピルカードを 2 列のジグザグで並べ、各カードに購入ボックスを付ける。 11. **フッター**（企業情報）: 白地にロゴ、リンク、コピーライトを中央寄せで置く。 ## Imagery - 明るい自然光のもとで撮った、透明感のある女性モデル写真。髪がなびく動きを入れる。 - 白いボトルの切り抜きを少し傾けて浮かせる。 - 利用シーンは朝のシャワー、運動、キャンプ、夜の街など、日常の場面にする。 - 香り色の円には果物やハーブの線画を薄く入れる。 - スプレーのミストを白いぼかしで表現する。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP の縦長構成を中央 480〜600px 幅に収め、左右に背景色を敷く想定。 - PC に広げる場合、利用シーンは写真と見出しを 2 カラムにする。 - ラインナップは PC で横に 5 枚並べ、スライダーをやめる。 - 見出しは 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-eca80e87`（元 LP の URL から採番） - **元 LP**: https://lp.moist-diane.jp/091/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。