DESIGN.md — コーラル×ミントのやさしいペットケア LP（Soft Coral and Mint Pet Care LP）

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

Overview

• 業種: ペット ／ 雰囲気: やさしい・柔らかい、ナチュラル、かわいい、信頼・誠実
• キーワード: コーラル・ミント・泡・犬猫写真・白カード・肉球
• 地の質感: 泡やタオルのふわっとした白、淡いグレージュの紙っぽい地。光沢は控えめで、マットで柔らかい。
• 形: 角丸カード、ピル型 CTA、六角形の悩みカード、雲のような泡の波形の区切り、片側だけ大きく丸めた写真。
• 温度感: 暖色寄り。コーラルの温かさにミントで清潔感を足している。

Colors

• 地は白とグレージュ（#F3EEE9）を交互に使い、コーラルの面は FV と価格ブロックだけに絞る。
• 見出しの強調語はコーラル。補足の吹き出しやタグはミントで分ける。
• 購入ボタンはミントで、コーラルの価格ブロックの上で補色の対比をつくる。
• 文字は真っ黒にせず、ウォームグレーとトープを使う。
• 比較表は自社の列をコーラルの塗り、他社の列を淡いグレーにする。記号もコーラルとグレーで色分けする。
• お客様の声だけ、少し濃いベージュの地にして区切る。
• button-primary は文字 #FFFFFF × 背景 #6CCBB6 のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2F8471、4.51:1）を使う。
• price-block は文字 #FFFFFF × 背景 #F0845D のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D34614、4.51:1）を使う。
• speech-label は文字 #FFFFFF × 背景 #6CCAB6 のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2F8271、4.61:1）を使う。
• step-item は文字 #8F8175 × 背景 #FEFEFE のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#807368、4.56:1）を使う。
• faq-item は文字 #8F8175 × 背景 #FEFEFE のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#807368、4.56:1）を使う。
• vertical-caption は文字 #8F8175 × 背景 #FEFEFE のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#807368、4.56:1）を使う。

Typography

• 見出しは 2〜3 行に分け、強調語だけをコーラルにして 1.3 倍ほど大きくする。
• 英字のラベルは字間を広く取り、細く淡い色で日本語見出しの上に置く。
• 写真の横に白帯の縦書き見出しを添え、鉤括弧も使う。
• 本文は中央揃え、行間は 1.8 以上にする。
• キーワードの下に、ミントの太いマーカー線を敷く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分と比較表のみ 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右に 5% ほどの余白を残して置く。
• 写真は画面の端まで広げるか、片側だけ角丸にしてずらして並べる。
• 価格ブロックの後ろに CTA を置き、ページ内で 2〜3 回繰り返す。
• 活用シーンは、写真 2 枚と丸いラベルを互い違いに重ねる。
• STEP は左に縦線を引き、番号の円をつなぐ。

Elevation & Depth

• 白カードには、ごく薄くぼかした影をつける。
• お客様の声のカードは、右下にずらしたベタの影で浮かせる。
• CTA ボタンには、下方向に柔らかい影をつける。
• それ以外の面は基本的にフラットにする。

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。片側の角だけを大きく丸めたり、円形のラベルを重ねたりする。
• セクション境界: 泡のような波形、緩やかなカーブ、肉球柄の波で区切る。
• 直角の角は避ける。
• 悩みは六角形の白カード 3 つを重ねて見せる。
• 吹き出しには下向きの小さな尻尾をつける。
• 価格ブロックは右上を大きく丸めたコーラルの面にする。

Components

• 購入 CTA（button-primary）: ミントのピル型ボタン。白文字で字間を広く取り、右端に「>」を置く。
• 価格ブロック（price-block）: コーラルの面に商品ボトル、商品名、大きな白い価格を載せる。
• ミントの吹き出し見出し（speech-label）: ミントの角丸ラベルに白文字を載せ、下に小さな丸を添える。
• 特長アイコンカード（feature-badge）: 白の角丸カード 3 枚。コーラルの線画アイコンと短いラベルを入れる。
• 無添加タグの一覧（free-tag-grid）: ミントの枠で囲み、中に淡いミントのタグを 3 列で並べる。
• STEP 番号（step-item）: グレーの線で描いた円に STEP と番号を入れ、縦線でつなぐ。
• 比較表（compare-table）: 自社の列はコーラルの見出しにし、◎○△× の記号で比べる。
• お客様の声の吹き出しカード（voice-card）: 白カードにペットのイラスト、コーラルのラベル、コーラルの見出しを入れ、下に尻尾をつける。
• FAQ カード（faq-item）: 白カードの左端に、コーラルの四角い Q アイコンを置く。
• 縦書きの白帯見出し（vertical-caption）: 写真の端に重ねる白帯の縦書きキャプション。

Do's and Don'ts

Do - コーラルの面は FV と価格ブロックに限る。 - 見出しは強調語 1 つだけ色を変える。 - 犬猫の写真は、自然光の柔らかい写真を使う。 - 白い泡のビジュアルを繰り返し使い、製品の特徴として印象づける。 - 本文は中央揃えにし、行間を広く取る。 - セクションは波形や泡の形で柔らかく区切る。

Don't - 純黒の文字や、強いコントラストの配色にしない。 - 鋭い角や直線的な区切りを使わない。 - コーラルとミント以外の、彩度が高い色を足さない。 - スタジオ撮影のような硬い商品写真を、メインにしない。 - 文字を写真の上に詰め込まない。 - 派手なグラデーションや光沢の効果を使わない。

Page Structure

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

1. ファーストビュー（商品の特徴と価格を一目で伝える）: コーラルの地にペットの写真と泡を置く。白の大見出し、ミントの帯コピー、3 つのアイコンカード、大きな価格を並べる。
2. 共感のリード（選ぶ基準を提示する）: 淡い写真の地に大見出しを置き、強調語はコーラル、鉤括弧も添える。下に商品ボトルの写真。
3. 悩みの提起（既存品への不満を言語化する）: ミントの吹き出し見出しを置き、悩む人のイラストに六角形カード 3 枚を重ねる。
4. ブランドの想い（信頼感を醸成する）: グレージュの地に白カードを置き、英字ラベルと見出し、鉤括弧で囲んだ強調文を入れる。
5. 社会貢献（共感を深める）: 白カードにハートのイラストを添える。
6. 利用シーン（日常での使い方をイメージさせる）: 泡の波形で区切り、手描き風の見出しを置く。写真と丸ラベルを互い違いに並べる。
7. 価格 CTA（購入を促す）: コーラルの価格ブロックに、ミントのピル型ボタンを置く。
8. 無添加の訴求（安全性を示す）: 写真の地に見出しを置き、ミント枠のタグ一覧とマーカー線で強調する。
9. 成分紹介（中身の根拠を見せる）: 角丸写真の 2 列グリッドにし、各写真に成分名と短い説明を添える。
10. 使い方（手軽さを示す）: 大きな 3STEP の見出しを置き、番号の円を縦線でつなぐ。各 STEP に写真を添え、最後に POINT の注意を置く。
11. 使用感・ベネフィット（使ったときの感覚を伝える）: 写真と白帯の縦書き見出しを、左右交互に並べる。
12. 比較表（他社品との違いを示す）: 自社の列をコーラルにし、◎○△× の記号で比べる。最後は丸バッジと結論の文で締める。
13. お客様の声（口コミで後押しする）: ベージュの地に白の吹き出しカード 3 枚。ペットのイラストと縦書きの英字通し番号を添える。
14. よくある質問（不安を解消する）: 白カードに、コーラルの Q アイコンをつけて縦に並べる。

Imagery

• 犬猫の写真は、自然光で明るく柔らかく撮る。背景は白やベージュの室内にする。
• 手のひらに乗せた白い泡のアップを、象徴的なカットとして使う。
• 人と動物が触れ合う、温かい場面を入れる。
• フラットで手描き風の犬猫や人物のイラストを、温かい色で描く。
• コーラルの細い線画アイコンと、集中線や肉球の装飾を添える。
• 成分の写真は白い背景で清潔に撮り、角丸で切り抜く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 500px）の 1 カラムをそのまま置く。
• PC の左右の余白は、パステル調の犬猫イラストを敷き詰めた柄で埋める。
• 中身のレイアウトは SP と同じにし、拡大はしない。
• 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 行書くと起動時に読み込まれる。