DESIGN.md — 桃色×オレンジのやさしい泡ペットシャンプーLP（Soft Pastel Gradient Pet Care LP）

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

Overview

• 業種: ペット ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、ナチュラル
• キーワード: パステルグラデーション・縦書き明朝・泡と光・白い角丸カード・色枠のセクション・犬の写真
• 地の質感: ぼかしたピンクとオレンジの光のグラデーションに、ふわっとした泡と水滴のつやを重ねる
• 形: 角丸の白カード、円形の写真切り抜き、細いフレーム枠で囲んだセクション
• 温度感: 暖かく柔らかい。ピーチ寄りの暖色が中心

Colors

• 地は白〜淡ピンクのグラデーションを基本にする
• セクションごとに外枠の色をピンク・ミント・クリーム・グレーで切り替える
• 見出しはくすみピンクか濃いブラウンの2色に限る
• 強調語には黄橙のラベル面かサーモンのマーカーを使う
• 原色や彩度の高い色は使わない
• circle-stamp は文字 #BC898C × 背景 #FEFEFD のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A66266、4.56:1）を使う。

Typography

• 大見出しは明朝で字間を広くとる
• FVと訴求見出しには縦書きを使う
• 本文と成分表はゴシックで小さめにする
• 欧文の帯はセクション番号と組み合わせる
• 強調語だけ文字を大きくし、マーカーを敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。特長カードは3列の小カード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 24px、基本単位 8px、カード内 12px（375px 幅換算）
• 各セクションを細い色枠で囲み、カードのように積み重ねる
• 写真と縦書き見出しを左右に振り分ける
• 特長は円形写真と短いキャプションを3つ並べる
• 帯状の白いバーにブランド名とセクション番号を入れる
• 成分リストは点線区切りの縦並びにする

Elevation & Depth

• 白カードにはごく薄い影をつけるか、影なしにする
• 製品写真はグラデーション地にやわらかい落ち影をつける
• 強い立体感は使わない

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 円形・大きな角丸の写真と、全幅の写真を併用
• セクション境界: 直線。セクションごとに色付きの枠で囲む
• 実績バッジは角丸の白カードで作る
• 特長アイコンは円形の切り抜き写真にする
• ビフォーアフターは大きな角丸の写真枠に入れる
• 細い円形の線スタンプで訴求点を囲む

Components

• 実績バッジ（trust-badge）: 白い角丸カードに月桂樹風の飾りを添え、実績や監修を2つ並べる
• 円形特長カード（feature-circle）: 円形写真と2行のキャプションを3列に並べる
• コンセプト帯（concept-bar）: 白い帯に欧文のブランド名とセクション番号を入れる
• ポイントチップ（point-chip）: 白い角丸の小カードに短い特長を3行で書く
• 円形スタンプ（circle-stamp）: 細線の円や放射状の縁に訴求語を入れる
• マーカーラベル（marker-label）: 黄橙の面に濃い文字を載せて強調する
• 成分リスト行（ingredient-row）: 円形写真と成分名・効果を点線で区切って縦に並べる
• ビフォーアフター（before-after）: 角丸の写真2枚に欧文ラベルと手書き風キャプションを添える
• スラッシュ見出し（slash-heading）: 見出しの左右に斜線を置く明朝見出し

Do's and Don'ts

Do - 淡いピンク〜オレンジのぼかしグラデーションを地に敷く - 見出しは明朝で字間を広くし、縦書きを効果的に使う - 泡・水滴・果実など、質感が伝わる写真を添える - セクションごとに外枠の色を変え、テーマを区切る - 犬の写真は濡れた毛や泡を見せて、やさしい表情を選ぶ

Don't - 彩度の高い赤や青のボタンは置かない - 太い極太ゴシックの見出しにしない - 黒ベタの暗い面は作らない - 角の鋭い四角カードを多用しない - 文字を詰め込みすぎず、余白を削らない

Page Structure

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

1. ファーストビュー（製品と主な価値を一目で伝える）: ピンクのグラデーション地に縦書き明朝の見出しと製品ボトル、円形スタンプを置く
2. 実績・特長サマリー（信頼性と3つの特長を示す）: 白い実績バッジ2つと円形写真の特長3つ。下に原産国の帯を置く
3. コンセプト1：肌へのこだわり（やさしさの理由を伝える）: 犬の写真に縦書き見出しとポイントチップ3つを重ね、コンセプト帯で締める
4. 成分開示・無添加（安心感を与える）: ピンクの明朝見出し、製品写真、円形スタンプ、小さな成分表を並べる
5. コンセプト2：泡（使い心地を伝える）: 泡を持つ手の写真に手書きの吹き出しと点線の箇条書き、明朝のキャッチを置く
6. 香り訴求（香りの魅力を伝える）: オレンジの果実と製品の写真に明朝見出しと白いラベルを添える
7. 技術解説（機能の根拠を示す）: ミント枠のセクション。巨大な縦書き見出し、イラストでの良い状態・悪い状態の比較、マーカー強調
8. 成分の紹介（保湿成分の効果を伝える）: クリーム色の地に、毛と水滴のビジュアル、円形写真付きの成分リストを並べる
9. プロ品質の訴求（サロンでの実績を示す）: 写真と白帯の太字テキストを横に並べる
10. 関連商品（セット購入を促す）: グレー枠のセクション。ビフォーアフター写真と、成分写真を3列に並べる

Imagery

• 明るい浴室で、濡れた犬が泡で洗われている自然光の写真
• 白くきめ細かい泡を手のひらに載せたクローズアップ
• 半割りのオレンジ、オイル瓶、葉を組み合わせた素材写真
• 金色の水滴やオイルのしずくのつやのあるCG
• 線の細い淡い色調の犬のイラストで状態を比べる
• 写真の端はピンクやクリームのぼかしで地になじませる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも約480px幅の縦長1カラムを中央に置く構成
• SPではセクションの外枠を4〜6pxに細くして保つ
• 縦書き見出しはSPでも維持し、文字サイズを36〜44pxにする
• 3列の特長カードはSPでも3列を保ち、キャプションを2行に収める
• 成分表は10px程度にし、行間を確保する

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