DESIGN.md — 水色×コーラルの泡感ペットシャンプーLP（Soft Aqua and Coral Pet Shampoo LP）

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

Overview

• 業種: ペット ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 泡・シャボン玉・くすみ水色・サーモンコーラル・丸バッジ・白タイル
• 地の質感: 泡の写真、白タイル、木目調の明るい背景をセクションの地に敷く。シャボン玉を散らして透明感を出す
• 形: 円形バッジ、角丸の白カード、帯状の見出しラベル、【】やカギ括弧の飾り枠
• 温度感: 明るく涼しげな地にコーラルのあたたかさを足した、中間よりやや冷たい温度

Colors

• 地は白・淡グレー・淡水色・木目ベージュを交互に切り替え、セクションの区切りにする
• 水色は見出し帯・FAQバー・ブランド名の文字色に使う
• コーラルは円形バッジ、価格、本文中の強調語に使う
• 悩みや課題のパートだけグレーのモノトーンにして、解決パートとの差をつける
• 購入ボタンは緑にして、ページ内のほかの色と混ざらないようにする
• 黒はベタで使わず、濃いグレーを使う
• button-primary は文字 #FFFFFF × 背景 #4CB23C のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#39862D、4.54:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #837E75 のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#7B766E、4.51:1）を使う。
• badge-ingredient は文字 #5AAFD0 × 背景 #FDFEFD のコントラスト比が 2.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2D7D9D、4.58:1）を使う。
• price-box は文字 #E8846E × 背景 #FAF5EC のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CB3F20、4.53:1）を使う。

Typography

• 見出しは1行の中で濃グレーと水色・コーラルを混ぜ、キーワードだけ色を変える
• 強調語には白文字＋水色の帯をかける
• ゴシックが基本。価格や情緒的な見出しにだけ明朝を使う
• 背景にうすい水色の大きな英字を敷いて、見出しを重ねる
• 本文中の強調はコーラルの太字にする
• 縦書きの帯見出しも部分的に使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジは 3〜4 列、口コミ写真は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅、または片側だけ画面端まで伸ばす
• 白カードは左右に約6%の余白をとって中央に置く
• セクションの頭に小さな点線を縦に入れて、見出しへ視線を流す
• 特長は01〜03の番号を見出しの背面に大きく敷く
• 比較表は自社の列をコーラルの枠で囲む

Elevation & Depth

• 白カードにはぼかしの大きい薄い影（0 4px 16px rgba(0,0,0,0.08)）をつける
• CTAボタンには下方向の濃い影で立体感を出す
• 円形バッジは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の四角か、片側だけ角を大きく丸める。円形の吹き出しを写真に重ねる
• セクション境界: 直線で背景色を切り替える。泡写真の境目をフェードさせることもある
• 特長は円形のバッジで見せる
• 見出しは【】やカギ括弧の細い線で囲む
• 接続語（でも／そこで）は小さな角丸タブに入れる
• FAQは右端に▼のある角丸の水色バーにする

Components

• 申込CTA（button-primary）: 緑のピル型ボタン。上段に小さな補足、下段に大きな行動文言を置き、右端に白丸の矢印アイコンをつける
• サブ購入ボタン（button-secondary）: グレーの角丸ボタンに右向き矢印をつけた、別プランへの導線
• 円形特長バッジ（badge-circle）: コーラルの円に白文字で2〜4字の特長を書く。3〜4個を横に並べる
• 無添加バッジ（badge-ingredient）: 淡い水色の円に水色の文字で、除外した成分を書く。上に斜線を引き、4列2段に並べる
• 帯見出し（heading-band）: 水色の帯に白文字をのせ、周りに濃グレーの文字を組み合わせる
• 価格ボックス（price-box）: 淡いベージュのカードの頭に水色の帯でプラン名を入れる。割引率はコーラルの面、価格はコーラルの明朝で大きく見せる
• FAQ項目（faq-bar）: 左にグレーの大きなQ、右に水色の角丸バーを置き、端に▼をつける
• 口コミ（voice-card）: VOICE番号＋水色帯の見出し＋右に写真。名前は手書き風の文字をカギ括弧で囲み、本文は罫線の上に書く
• 接続タブ（connector-tab）: 話の転換で使う、小さな角丸タブ

Do's and Don'ts

Do - 泡やシャボン玉のモチーフを、各セクションに少しずつ入れる - 水色とコーラルを見出しの中で組み合わせる - 主張は2〜4字の円形バッジに落とし込む - 専門家の推薦は白カードに写真・肩書き・本文をまとめる - 口コミには個人の感想である旨の注釈を必ずつける

Don't - 原色の赤や黒ベタを使わない - CTAの緑をほかの装飾に使わない - 角ばった硬い表組みを多用しない - 暗いグレーは悩みのパート以外で使わない - 余白を詰めすぎない

Page Structure

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

1. ファーストビュー（商品の価値を一目で伝える）: 水色の帯にコピーを置く。泡で洗われている犬の写真に円形バッジ3つと実績の角丸ラベルを重ね、商品ボトルを添える
2. コンセプト・無添加（やさしさを示す）: 泡の地に白カードを置き、無添加の成分バッジを4列で並べる
3. 成分訴求（植物由来であることを示す）: 全幅の自然写真に、角丸の半透明ラベルを重ねる
4. 使用感（泡立ちなどの体験を伝える）: 犬の写真を交互に並べ、コーラルの円で機能名を見せる
5. 専門家の推薦（権威づけ）: 木目の地に白カード。帯見出し・写真・本文を入れる
6. SNS口コミ（社会的証明）: 3列の写真グリッドを置き、背面に英字を敷く
7. オファー（購入へ誘導する）: 価格ボックスに緑のCTA、その下にグレーのサブボタン
8. 悩みの提起（シャンプーの必要性とリスクを伝える）: イラストのカードとグレーのモノトーン写真に、×印のついた円を4つ並べる
9. 解決策（仕組みを図で説明する）: 肌の断面図を2つ比べ、そのあと商品写真に円形ラベルを重ねる
10. 特長01〜03（詳しい効果を伝える）: 番号を背面に敷き、【】見出し・写真・成分表で構成する
11. 開発者の声・比較（差別化）: コメントカードのあと、自社の列をコーラルで囲んだ◎○△の比較表を置く
12. 製造・お客様の声（安心感を与える）: 工場の写真と、VOICEカード3件
13. よくある質問（購入前の不安を解消する）: 大きなQ＆Aの見出しと水色のバー
14. 最終CTA・フォーム（申込）: まとめのビジュアル、価格ボックス2種、LINE誘導、商品情報、紺色見出しの申込フォーム

Imagery

• 白い小型犬が泡に包まれて気持ちよさそうにしている、明るく柔らかい写真
• サロンでトリマーが施術している手元の写真
• 植物・果実・ハーブは高彩度の寄りで撮る
• 商品ボトルは白タイルの上か、白背景で撮る
• 虹色に光るシャボン玉を画面の端に散らす
• 悩みのパートは、くすんだ線画風の犬イラストやモノクロ写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に480px前後のSPカラムを固定し、左右は淡い水色かグレーの地にする
• PCに広げる場合、バッジや口コミ写真のグリッドは列を増やす
• 価格ボックスは最大幅を600px程度に抑える
• 見出しの文字は1.2倍程度にとどめる

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