DESIGN.md — パステル色面と手描き犬のペットケア LP（Pastel Block Pet Care LP with Line Illustrations）

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

Overview

• 業種: ペット ／ 雰囲気: やさしい・柔らかい、かわいい、清潔・爽やか、ナチュラル
• キーワード: パステル色面・手描き線画キャラ・雲形切り抜き・大きな角丸ブロック・斜め点線見出し・白い犬の写真
• 地の質感: グラデーションや影はほぼ使わない。マットな単色のパステル面と白カードだけで作る。
• 形: 上角に大きな角丸を付けた色ブロック、雲形やもこもこの写真切り抜き、ピル型ボタン、円形バッジ。
• 温度感: 暖かめでやわらかい。どの地色も彩度を落としたパステル。

Colors

• セクションごとに地色を変える。順番は ピンク/水色 → 白 → 若草 → 白 → クリーム → ピンク → 水色 → 若草 → クリーム → ピンク → 白 → 水色。
• 色ブロックの上には白い角丸カードを載せ、中身はカードの中に置く。
• 橙はクリーム地の特長セクション専用。POINT 番号・カード・グラフ・枠線にまとめて使う。
• 若草地では商品名を緑の文字にし、水色地では FAQ の帯や商品名を青にする。
• CTA は白地に黒枠のピル型にし、強い色で目立たせない。
• 本文は黒、実績の数字は濃紺。原色は使わない。

Typography

• 見出しは太字のゴシックで中央揃えにし、2 行に分けることが多い。
• 見出しの左右に、斜めの点線を「ハの字」に置く。
• POINT 番号は太い欧文数字で大きく、橙で表示する。上に小さく英字ラベルを添える。
• 本文は行間 2.0 前後とゆったり取る。
• ファーストビューのキャッチは縦書きで、青い帯の上に白抜きにする。
• 明朝体や手書き風フォントは使わない。手描きの印象はイラストで出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。利用シーンは 2×2 グリッド。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 色ブロックは全幅に敷き、上端の左右に大きな角丸を付けて重ねていく。
• ブロックの境目の上に線画キャラクターを 1 体乗せる。
• 白カードは左右 20px 前後の余白を空けて置く。
• POINT 一覧を見せた後、POINT ごとに詳細カードを並べる。
• 悩みの吹き出しは左右交互にずらして縦に並べる。

Elevation & Depth

• 影は基本的に使わない。
• CTA ボタンだけ、右下に黒い太いずれ影を付ける。
• お客様の声などのカードは、細い線の枠を少しずらして背面に重ね、浮いて見せる。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は雲形・もこもこの形や円で切り抜くか、角丸の長方形にする。橙や白の細い縁を付ける。
• セクション境界: 上の左右に大きな角丸を付けた色ブロックを重ねる。境目に線画の犬を乗せる。
• ボタンはピル型で、黒い枠線を付ける。
• バッジは白い円形にする。
• 悩みは水色の雲形の吹き出しで見せる。
• 直線的で鋭い装飾は避ける。

Components

• 購入ピルボタン（button-primary）: 白い面に黒の太枠、右下に黒いずれ影。右端に肉球アイコンを置く。
• 斜め点線見出し（heading-slash）: 中央の見出しの左右に、ハの字の斜め点線を置く。
• 実績の丸バッジ（badge-circle）: 白い円の中に、小さな説明と大きな数字や文字を入れる。2×2 で並べる。
• POINT 一覧カード（point-card）: 橙の角丸カード。左に POINT と大きな番号、右に白文字の見出しと補足を置く。
• POINT 詳細カード（point-detail）: 白の角丸カード。カード上端に大きな番号をかぶせ、橙の見出し、図、説明の順に並べる。
• 悩みの雲形吹き出し（worry-bubble）: 水色の雲形の中に、悩みを 2〜3 行で中央揃えに入れる。
• 価格ブロック（price-block）: 白い円に価格ラベルを入れ、右に特大の価格を並べる。下に点線を引き、スペックを続ける。
• 専門家コメント（expert-comment）: 円形の顔写真の下に、三角の吹き出し付きの橙カードを置き、白文字でコメントを書く。
• FAQ（faq-item）: Q の行は青の帯に白文字。A の行は白地に青い細枠で囲む。

Do's and Don'ts

Do - セクションの切り替えはパステルの色面で表し、境目に線画キャラクターを置く。 - 写真は白い動物を主役にし、雲形や円で切り抜く。 - 見出しには必ず斜め点線を添える。 - 数値の根拠は、橙の矢印グラフや禁止マークの図で見せる。 - 情報は白カードに入れ、余白を広く取る。

Don't - 濃い原色や黒い面を本文セクションに使わない（黒系はフッターだけ）。 - 強い影やグラデーションを付けない。 - 写真を四角いまま全幅で並べ続けない。 - CTA を赤やオレンジの塗りボタンにしない。 - 細い明朝体を使って、高級路線に寄せない。

Page Structure

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

1. ファーストビュー（商品の訴求と実績を伝える）: 上半分を淡いピンク、下半分を水色に分ける。雲形に切り抜いた犬と商品の写真を置き、青い帯に縦書きのキャッチを入れる。下に実績の数字と丸バッジ 4 つを並べる。
2. コラボ紹介（キャラクターの背景を説明する）: 白地にロゴと説明文を置き、大きな線画キャラクターを中央に配置する。
3. 商品紹介・価格（セット内容と価格を示し、購入へ導く）: 若草のブロック。英字を流すテキストと角丸の写真、白カードに緑文字の商品名。利用シーンを 2×2 の雲形写真で見せ、価格と CTA を置く。
4. 悩みの提起（飼い主の悩みに共感する）: 白のブロック。水色の雲形吹き出しを 5 つ交互に並べ、疑問符の付いた円の上に犬 2 匹の写真を置く。
5. 解決と 4 つのポイント（特長を一覧で見せる）: クリームのブロック。橙の POINT カードを 4 枚縦に並べる。
6. ポイント詳細（根拠を見せて納得してもらう）: 白カードの上端に橙の大きな番号を重ねる。矢印グラフ、禁止マークの図、写真、専門家のコメントを入れる。
7. お客様の声（社会的証明を示す）: ピンク地に白カードを並べる。年代・性別と黄色の星評価を付け、線を重ねて浮いた表現にする。
8. 導入施設の事例（信頼性を補強する）: 水色地に施設の写真、3 枚並びの写真、切り抜いた人物と吹き出しのコメントを置く。
9. 安全な理由・比較（技術と他社との違いを示す）: 若草地の白カードに丸い図解を入れる。比較表は自社の列を緑の縦帯で強調し、◎○△×で示す。
10. 使い方（手順を示す）: クリーム地に、STEP 番号付きの角丸写真を 3 枚並べる。
11. よくある質問（不安を解消する）: 白地に、Q は青い帯、A は枠囲みのカードを並べる。
12. 商品情報・CTA（購入へ導き、詰め替え品も紹介する）: 水色地に商品写真、価格、ピル型の CTA、詰め替え品の白カードを 2 枚置く。最後に濃紺のフッター。

Imagery

• 白い毛の小型犬を主役にした、明るく柔らかい自然光の写真。背景はレンガや木のデッキ、ラベンダー色のソファ。
• 商品は白いボトルとパウチ。犬の横に並べて撮る。
• 黒い線だけで描いた、ゆるい手描きの犬キャラクター。境目や見出しの上にちょこんと乗せる。
• 利用シーンの写真は雲形に切り抜き、白い縁を付ける。
• 図解は、橙の太い矢印、禁止マーク、パステルの円で作るフラットな表現にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px に収め、色ブロックは全幅のまま角丸を付ける。
• POINT 一覧は 4 列の横並び、利用シーンは 4 列にする。
• POINT 詳細は、左にテキスト、右に図や写真の 2 カラムにする。
• ファーストビューでは縦書きキャッチを左、写真を中央、バッジを右上に置き、右上に CTA を出す。
• 悩みの吹き出しは、写真の周りに円状に配置する。

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