DESIGN.md — 南国ティール×深緑のやさしいヘアケアLP（Tropical Teal Gentle Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、ナチュラル、情報量多め・訴求型
• キーワード: 南国ボタニカル・泡の円バッジ・ティール帯見出し・深緑×金の実績・低刺激・家族向け
• 地の質感: 平塗りの色面と、透明感のある写真を組み合わせる。泡や水滴はグラデーション付きの半透明の円で表す。
• 形: 円形バッジ、角丸の小さい白カード、ピル型タグ
• 温度感: 爽やかで明るい。中盤の灰色の悩みパートだけ少し冷たくする。

Colors

• 基本の地は生成りと淡グレーを交互に使い、境界はまっすぐな色の切り替えにする。
• 実績は深緑の地に金の数字。月桂樹の装飾と組み合わせる。
• 受賞はピンクの地に黄色の数字と白文字。
• 悩みと原因は暗灰の地に白カードを置き、原因のキーワードだけ赤文字にする。
• ポイント見出しはティールの帯に白文字。
• 強調色は面ではなく、文字・タグ・バッジに限って使う。
• bubble-badge は文字 #32BEBE × 背景 #FEFEFE のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#228181、4.6:1）を使う。
• pill-tag は文字 #FEFEFE × 背景 #32BEBE のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#228181、4.6:1）を使う。
• point-band は文字 #FEFEFE × 背景 #32BEBE のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#228181、4.6:1）を使う。

Typography

• 見出しは字間を0.08〜0.1em空け、2〜3行の中央揃えにする。
• 数字は欧文の太字で特に大きくし、単位は小さく添える。
• 見出しの中で強調したい語は、ティールにして一回り大きくする。
• ※注釈は小さく、グレーで添える。
• 本文は行間を1.9前後にして、ゆったり組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。悩みは2列グリッド、レビュー・セット紹介は縦積み。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは画面幅いっぱいの色面で区切る。
• 白カードは左右に5%の余白を取り、縦に16px間隔で並べる。
• 泡バッジは3〜4個を少しずらして、散らすように配置する。
• ポイント帯は左揃え。それ以外の見出しは中央揃え。
• 店舗写真や悩み写真は等幅のグリッドにする。

Elevation & Depth

• 白カードには、ごく淡い影をつけるか影なしにする。
• 泡バッジは、内側の白いハイライトとソフトな外側の影で立体感を出す。
• 製品パッケージの写真は、地面に薄く影を落とす。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの矩形か、軽い角丸。成分の写真は円形に切り抜く。
• セクション境界: 直線で色を切り替える。帯見出しの端には葉のイラストを重ねる。
• 特長は円の泡バッジで見せる。
• タグはピル型か小さい角丸にする。
• 強調する囲み見出しは、斜線の括弧で挟む。
• 円形の黄色バッジで補足情報を示す。

Components

• 泡の円バッジ（bubble-badge）: 半透明の水泡風の円。中に特長を短く2〜3行で書く。
• 成分ピルタグ（pill-tag）: ティールや青の地に白文字。成分名や特長を横に並べる。
• POINT見出し帯（point-band）: 全幅のティール帯。小さい英字の番号と、白の2行見出しを入れる。右端に葉の装飾を置く。
• 実績数値ブロック（stat-block）: 深緑の地に金の巨大数字。月桂樹で囲み、注釈を下に小さく添える。
• レビューカード（review-card）: 白いカード。上から黄色の星5つ、太字のタイトル（右端に年代・性別）、本文の順に並べる。
• 悩み写真タイル（concern-tile）: 2列の写真タイル。左下に黒の半透明帯を敷き、白文字で悩みを短く書く。
• 原因カード（cause-card）: 暗灰の地に置く白カード。中央揃えの文で、原因の語だけ赤字にする。
• 成分カード（ingredient-card）: 左に円形の素材写真、右に成分名と説明。右上にティールの円バッジを置く。
• 黄色の円バッジ（corner-badge）: 写真の端に重ねる黄色の円。中に短い強調を書く。

Do's and Don'ts

Do - FVと帯見出しには、ハイビスカスとモンステラの平塗りイラストを四隅に散らす。 - 特長は泡の円バッジにして、少しずらして配置する。 - 実績は深緑×金、受賞はピンクと、セクションごとに色面を切り替える。 - 注釈は※で小さく必ず添える。 - 人物写真は明るく、自然光でやわらかい肌と髪を見せる。

Don't - 鋭い角や重い影は使わない。 - ティール以外の寒色を見出しに多用しない。 - 本文を詰めて組まない。行間は狭くしない。 - 暗い地を連続させない。悩みパートだけに限定する。 - 写真に強いフィルターや彩度の上げすぎをしない。

Page Structure

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

1. ファーストビュー（対象と商品のやさしさを伝える）: 空色の地に白の太い見出し、筆記体のロゴ、製品2本、南国の花と葉。下部は砂浜色で、ピルタグの成分を並べる。
2. 特長と開発背景（低刺激の特長を一目で伝える）: 女性の写真に泡バッジを4つ重ね、短い開発背景を中央揃えで置く。
3. 実績（販売数・ランキング・リピート率で信頼を出す）: 深緑の地に金の巨大数字と月桂樹。ランキングのキャプチャも並べる。
4. 受賞（プロの店舗での評価を示す）: ピンクの地に黄色の大見出し。店舗写真を3列並べ、受賞履歴を添える。
5. お客様の声（使用感の口コミを見せる）: 赤の星と斜線で挟んだ件数の見出しの下に、白いレビューカードを縦に積む。
6. セット内容（内容量と特長を確認させる）: 淡黄の地に赤枠の白カード。製品写真、容量のリスト、ティールのタグを入れる。
7. ブランドの想い（やさしさへのこだわりを語る）: 白い地に中央揃えの文章。下に入浴写真を全幅で置く。
8. 悩みの提起（髪と頭皮の悩みに共感する）: 暗灰の地に、写真タイルを2列×3段で並べる。
9. 原因の解説（悩みの原因を3つに整理する）: 暗灰の地に白カードを3枚。原因の語を赤で強調する。
10. 解決の提示（3つのケアの方向を示す）: 白いタイル調の背景に、大見出しと泡バッジ3つを三角形に配置する。
11. ポイント解説（成分ごとの効果を説明する）: ティールのPOINT帯を置き、写真、図解、成分カード（円バッジ付き）の順に並べる。
12. 初回の方への案内（使い続けることを促す）: 緑の地に白いカード。見出しに黄色のマーカー線を引く。

Imagery

• 人物は、白い服の女性が自然光の中で髪をなびかせる写真にする。
• 背景は青空や白いタイルなど、明るく清潔に見える場所を選ぶ。
• 装飾は赤いハイビスカスと緑・黄緑のモンステラを平塗りで描く。
• 泡や水滴は、ハイライトの入った半透明の円で表す。
• 成分の素材写真（ヤシの実・トウモロコシ・綿など）は円形に切り抜く。
• 頭皮の構造は、パステル調のシンプルな断面イラストで図解する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPC版も1カラムの縦長構成なので、SPでもほぼそのまま縮小して使える。
• SPでは本文14px・見出し22〜26pxを目安にする。
• 悩みタイルはSPでも2列を保つ。
• 店舗写真の3列は、SPでは3列のまま小さくするか、横スクロールにする。
• PCは中央の固定幅（約750px）にし、左右は同系色の地で埋める。

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