--- version: alpha name: Tropical Teal Gentle Haircare LP description: 水色の空とハイビスカス・モンステラの南国イラストで始まる、縦長のヘアケア通販LP。深緑と金で実績を見せ、ピンクで受賞、灰色で悩みを出す。そのあとティールの帯でポイントごとの解説を重ねていく。泡の形をした円バッジと丸ゴシックで、やさしく清潔な印象にまとめている。 colors: primary: '#32BEBE' background: '#F4F0E5' background-alt: '#F4F4F4' surface: '#FEFEFE' secondary: '#87D7D8' dark-section: '#02513B' accent-1: '#FCE586' accent-2: '#F494B2' accent-3: '#F56162' marker: '#FDD54B' tint-1: '#FBF2DB' text: '#565759' text-body: '#5A5A5A' tint-2: '#3C3C3C' on-dark: '#FEFEFE' line: '#E06A6A' primary-accessible: '#228181' typography: display: fontFamily: Montserrat fontSize: 56px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 12px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.15em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px 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}' bubble-badge: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px pill-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px point-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 130px stat-block: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 200px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 180px concern-tile: backgroundColor: '{colors.tint-2}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 110px cause-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 90px ingredient-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 110px corner-badge: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px --- # DESIGN.md — 南国ティール×深緑のやさしいヘアケアLP（Tropical Teal Gentle Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、ナチュラル、情報量多め・訴求型 - **キーワード**: 南国ボタニカル・泡の円バッジ・ティール帯見出し・深緑×金の実績・低刺激・家族向け - **地の質感**: 平塗りの色面と、透明感のある写真を組み合わせる。泡や水滴はグラデーション付きの半透明の円で表す。 - **形**: 円形バッジ、角丸の小さい白カード、ピル型タグ - **温度感**: 爽やかで明るい。中盤の灰色の悩みパートだけ少し冷たくする。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#32BEBE` | ポイント帯・タグ | 6% | 画素の実測 | | `background` | `#F4F0E5` | 生成りの基本地 | 20% | 画素の実測 | | `background-alt` | `#F4F4F4` | 淡グレーの地（レビュー等） | 15% | 画素の実測 | | `surface` | `#FEFEFE` | カードの面 | 14% | 画素の実測 | | `secondary` | `#87D7D8` | FVの空色の地 | 7% | 画素の実測 | | `dark-section` | `#02513B` | 実績セクションの深緑 | 7% | 画素の実測 | | `accent-1` | `#FCE586` | 実績数字の金 | 1% | 画素の実測 | | `accent-2` | `#F494B2` | 受賞セクションのピンク | 4% | 画素の実測 | | `accent-3` | `#F56162` | 件数・悩みの原因の赤 | 1% | 画素の実測 | | `marker` | `#FDD54B` | 星評価・円バッジの黄 | 1% | 画素の実測 | | `tint-1` | `#FBF2DB` | セット紹介の淡黄地 | 3% | 画素の実測 | | `text` | `#565759` | 見出しの濃灰文字 | 2% | 画素の実測 | | `text-body` | `#5A5A5A` | 本文 | 3% | 推定 | | `tint-2` | `#3C3C3C` | 悩みセクションの暗灰地 | 5% | 画素の実測 | | `on-dark` | `#FEFEFE` | 暗い地の上の白文字 | 1% | 画素の実測 | | `line` | `#E06A6A` | セット枠の赤線 | 0% | 推定 | | `primary-accessible` | `#228181` | AA を満たす補正値（計算） | | 計算 | - 基本の地は生成りと淡グレーを交互に使い、境界はまっすぐな色の切り替えにする。 - 実績は深緑の地に金の数字。月桂樹の装飾と組み合わせる。 - 受賞はピンクの地に黄色の数字と白文字。 - 悩みと原因は暗灰の地に白カードを置き、原因のキーワードだけ赤文字にする。 - ポイント見出しはティールの帯に白文字。 - 強調色は面ではなく、文字・タグ・バッジに限って使う。 - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 実績の大きな数字 | 欧文サンセリフ | Montserrat | 700 | 56px | 1.1 | 0.0em | | `headline-lg` | セクション大見出し | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.5 | 0.1em | | `headline-md` | ポイント帯の見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.08em | | `headline-sm` | レビュータイトル、カード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em | | `accent` | POINT番号の英字 | 欧文サンセリフ | Montserrat | 500 | 12px | 1.3 | 0.15em | | `note` | 注釈・※表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ピル型タグ・成分ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.05em | - 見出しは字間を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 ```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-3e1b155e`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/raffi-hair/10000002/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（14/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。