DESIGN.md — レモン黄×ミントの爽快ヘアケア LP（Fresh Lemon Yellow & Mint Haircare LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ポップ・元気、清潔・爽やか、かわいい
• キーワード: レモンイエロー・ミントグリーン・手書き風見出し・円形バッジ・香り別カラー・爽快感
• 地の質感: フラットなベタ塗りが基本。ミント地には細い方眼グリッドを重ね、黄色地は光のにじみ程度のグラデーション。
• 形: 正円バッジ、大きな角丸の写真枠、縦長のピル型商品カード、角丸の CTA。
• 温度感: 明るく高彩度の爽やかな暖寒ミックス。黄色で元気さ、ミントで清涼感を出す。

Colors

• 黄色地とミント地をセクションごとに交互に切り替える。
• 見出しは黄色地ならグリーン文字、ミント地なら白文字。
• 香りごとに色（ライム・ミント・ピンク・青・ネイビー）を決め、カード・ボタン・円を同じ色でそろえる。
• 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

• キャッチは手書き風で右上がりに少し傾ける。
• 大見出しは太い丸ゴシックで、手書きの小見出しを上に添える。
• 手書きの小見出しの下に黄色のラインを引く。
• 本文も太字寄りにして、高彩度の地に負けないようにする。
• 数字を強調するときは大きくする（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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。