DESIGN.md — ミント×オレンジの爽やかUVヘアケアLP（Fresh Aqua Citrus Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 清潔・爽やか、ナチュラル、情報量多め・訴求型、やさしい・柔らかい
• キーワード: ミントグラデーション・オレンジの注意喚起・白カード・ティール見出し・太陽と紫外線・透明感
• 地の質感: 光が差し込むような淡いグラデーション地に、フラットな白カードを重ねる。影はほとんどつけない。
• 形: 角丸カード、斜めカットの写真、円形の成分写真、三角形の香りピラミッド
• 温度感: 涼しげなミントが主役。オレンジで温度とアクセントを足す。

Colors

• 地の色はミント→ライムの縦グラデーションにする。白カードを浮かせて見せる。
• オレンジは悩み・事実の訴求帯と悩みラベルだけに使う。
• 見出しの文字とラベル帯はティールで統一する。
• オレンジ面やティール面の上の文字は白にする。
• 強調したい本文はティールの太字に下線を引く。
• Q&Aは白地に濃いグレーの文字。Qマークだけティールにする。
• alert-band は文字 #FEF8E7 × 背景 #F3AA5D のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AA5E0D、4.59:1）を使う。
• concern-tile は文字 #FEF8E7 × 背景 #F3AA5D のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AA5E0D、4.59:1）を使う。
• price-card は文字 #02ABB2 × 背景 #FFFFFF のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#028287、4.62:1）を使う。
• section-ribbon は文字 #FEF8E7 × 背景 #02ABB2 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#028287、4.52:1）を使う。
• point-card は文字 #02ABB2 × 背景 #FFFFFF のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#028287、4.62:1）を使う。
• round-badge は文字 #02ABB2 × 背景 #FFFFFF のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#028287、4.62:1）を使う。

Typography

• 見出しは字間を0.1em前後と広めにとり、中央に揃える。
• 数字や「3倍」など大事な語は一回り大きくし、下線を引く。
• 欧文は細めのジオメトリックサンセリフで、POINTや番号に使う。
• 注釈は※付きの小さい文字で、カードの外の右下か左下に置く。
• 価格の数字はティールの太字で大きくし、円・税込は小さくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分写真だけ 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右16pxの余白で横いっぱいに置く。
• 悩みの写真は2×2のグリッドにし、左下にオレンジのラベルを重ねる。
• スタッフボイスは写真と吹き出しカードを左右交互に配置する。
• POINTのカードは見出しの上に欧文で番号をつけ、カードの上部に見出し・下部に写真を置く。
• Q&Aは区切り線で分けたリストにする。

Elevation & Depth

• 基本はフラット。影はつけない。
• 白カードは地のグラデーションとの色差だけで浮かせる。
• Q&Aの外枠だけ、ごく薄いドロップシャドウをつける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きで置く。人物写真は大きめの角丸か、片側だけ丸めた形にする。成分は円形に切り抜く。
• セクション境界: 基本はまっすぐ切り替える。転換帯は下向きの三角（V字）にし、FVには斜めの面を重ねる。
• ラベル帯は角丸なしか、ごく小さい角丸の長方形にする。
• バッジは円形で、ゴールドの縁に白い地を合わせる。
• 香りの説明は三角形のピラミッド図で示す。

Components

• 事実訴求帯（alert-band）: 左に紫外線の矢印が入った人物写真、右に大きな数字コピーを置くオレンジの帯。
• 悩み写真ラベル（concern-tile）: 髪のアップ写真の左下に、白文字のオレンジ帯を重ねる。
• 価格カード（price-card）: 白い角丸カード。左に商品の切り抜き、右に品名、下にティールの送料ラベルと大きな価格を置く。
• スタッフボイス（voice-bubble）: 白の吹き出しカードに、ティールの下線つき強調文を入れる。ティールの面に大きな欧文番号を重ねる。
• ティール見出し帯（section-ribbon）: 横幅いっぱいのティールの帯に白い太字の見出しを入れる。
• POINTカード（point-card）: 欧文のPOINT番号の下に白カードを置き、ティールの見出しと写真を入れる。
• 円形バッジ（round-badge）: ゴールドの縁取りがある円に、ティールの短い文字を入れる。
• Q&A項目（faq-item）: 小さいティールのタグ、ティールのQマーク付きの質問、グレーの回答を並べ、区切り線で分ける。

Do's and Don'ts

Do - 地にはミント〜ライムのグラデーションを使い、白カードで情報を区切る。 - 悩みや事実の訴求はオレンジの帯で目立たせる。 - 成分は円形の写真に名前を添えてグリッドで並べる。 - 注釈は※付きの小さい文字で丁寧に入れる。 - 見出しは中央揃えで、字間を広めにとる。

Don't - 濃い原色や黒い地を使わない。 - オレンジを見出しや本文に多用しない。 - カードに強い影や太い枠線をつけない。 - 明朝体や手書き書体を混ぜない。 - 写真を暗く加工しない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. 事実訴求の帯（冒頭で驚きを与える）: オレンジの帯に写真と大きな数字コピーを置く。
2. ファーストビュー（商品と主なコピーを見せる）: ティールのグラデーションに斜めの面を重ね、商品を切り抜きで大きく置く。円形バッジとセット案内も添える。
3. 悩みの提起（髪の悩みに気づかせる）: 問いかけを白文字で置き、悩み写真を2×2で並べてオレンジのラベルを重ねる。
4. 事実の提示（本当の原因を示す）: 斜線で挟んだ見出しの下に、オレンジの帯を置く。
5. 解決の提示と価格（商品を紹介し、価格を見せる）: グレーの帯をV字で切って話を転換する。その下に3つの価格カードを縦に並べる。
6. 開発者の声（使った実感を伝える）: 写真と吹き出しカードを左右交互に置き、欧文番号を添える。
7. 原因の解説（ダメージの仕組みを説明する）: オレンジの全面に角丸の写真と白文字の本文を置く。
8. 独自処方（技術を図で説明する）: ティールの帯見出しの下に髪の断面イラストを置き、成分カードを線でつなぐ。
9. イメージ写真（使った後の姿を想像させる）: 青空と人物の写真を全幅で置き、白文字コピーを重ねる。
10. 商品ポイント（特長を詳しく伝える）: 円形バッジ付きの見出しの下に、POINT番号付きの白カードを縦に並べる。成分写真のグリッドと香りのピラミッド図も入れる。
11. よくある質問（不安を解消する）: 白地に、タグ付きのQ&Aリストを区切り線で並べる。

Imagery

• 人物は自然光の下で、ツヤのあるロングヘアの後ろ姿や手元を写す。
• 青空を背景にした明るいハイキー写真にする。
• 紫外線はオレンジ〜赤の矢印イラストで、写真に重ねて示す。
• 成分は果実や植物のマクロ写真を円形に切り抜く。
• 商品は明るい背景に、柔らかい影をつけた切り抜きで置く。
• 太陽はフラットなオレンジのアイコンにし、細い線で図解する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもSPと同じ約480px幅のカラムを中央に置く。
• PCの左右の余白は、淡いグリーンのグラデーションで埋める。
• PCで中身を多カラムにはしない。

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 行書くと起動時に読み込まれる。