DESIGN.md — クリーム×水色の手描き風ペットケアLP（Soft Cream and Sky Blue Pet Care Editorial LP）

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

Overview

• 業種: ペット ／ 雰囲気: やさしい・柔らかい、かわいい、親しみ・手作り感、ナチュラル
• キーワード: クリーム地・水色アクセント・切り抜き写真・網点ドット・手描き線画・吹き出し
• 地の質感: 平塗りの面に、ベージュの網点パターンと手描き風の線を重ねる。影はほぼ付けない
• 形: 角丸の大きな白カード、波形のセクション境界、雲形や吹き出しの装飾
• 温度感: 暖かいクリームと涼しい水色を組み合わせた、明るく中間的な温度感

Colors

• 地は白とクリームを交互に使い、その上に白か淡い水色の角丸カードを置く
• 強調はすべて水色の文字にする。赤や黄色の強調色は使わない
• 見出しの基本色は紺。強調したい語だけを水色にし、淡い水色のマーカーを下に引く
• ベージュの網点は写真の背景だけに使い、文字の背景には敷かない
• 主ボタンは水色の地に白文字。下にベージュの影を付けて浮き上がって見せる
• button-primary は文字 #F1FDFE × 背景 #328DD4 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2678B7、4.54:1）を使う。

Typography

• 見出しは中央揃えの丸ゴシック太字で、2行に分けて組む
• 見出しの強調語だけ一回り大きくし、水色にする
• 英字の小見出しは肉球アイコンを添えて、日本語見出しの上に置く
• 本文は左揃えで行間を広く取り、大事な一文だけ太字にする
• 大きな番号は細い水色の数字で、見出しの左に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。選び方やポイントは 2×2 のグリッドにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• コンテンツは白か淡い水色の大きな角丸カードにまとめ、地の色の上に浮かせる
• 切り抜き写真は左右に少しずらして置き、リズムを出す
• セクションの頭には「英字の小見出し＋日本語の見出し」をセットで置く
• 注意喚起は上下を点線で挟み、左に丸い「!」アイコンを置く

Elevation & Depth

• 影はほとんど使わず、色の面の違いで階層を分ける
• 主ボタンだけ、真下にベージュの影をずらして付ける
• スライダーのカードは、背面に網点のベージュ面をずらして重ねる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 犬は背景を抜いた切り抜き写真にし、傾けた網点四角か雲形の背景を敷く。人物は円形に切り抜く
• セクション境界: ファーストビューの下だけ緩い波形。それ以外は直線で地の色を切り替える
• 吹き出しは淡い水色の不規則な形にし、手書き風の文字を入れる
• Before/After のカードは点線の枠で囲む
• 見出しのラベルは、片側を斜めに切ったリボン形にする

Components

• 主CTAボタン（button-primary）: ピル型の青いボタン。左にアイコンを置き、下にベージュの影を付ける
• 悩みの吹き出し（speech-bubble）: 淡い水色の不定形の吹き出し。中に手書き風の短い言葉を入れ、キーワードに下線を引く
• 番号付き解説（numbered-card）: 大きな細字の番号、マーカーを引いた見出し、本文、切り抜き写真を縦に並べる
• タイプ別おすすめカード（type-card）: 上半分は淡い水色の地にリボン形のラベルと問いかけ。下半分は水色の地に商品写真とタイプ名を白文字で置く
• ポイントのスライダー（point-grid）: 青いリボンの見出しを付けたカード。中に 2×2 の白い番号ボックスを並べ、左右に丸い矢印、下にドットのページ送りを置く
• 注意喚起ボックス（caution-box）: 上下を水色の点線で挟み、丸い「!」アイコンと強調付きの見出し、補足文を入れる
• 監修者プロフィール（expert-profile）: 円形の顔写真の右に、名前と肩書きを小さく添える
• 英字の小見出し（section-eyebrow）: 肉球アイコンと英字の短い一文を、日本語見出しの上に置く

Do's and Don'ts

Do - 犬の写真は切り抜きにし、網点の背景と手描きの効果線を添える - 強調は水色の文字とマーカーだけで表す - カードは大きめの角丸にし、クリーム地か白地の上に浮かせる - 問いかけと吹き出しを多めに使い、読み手に話しかける調子にする - 専門家の解説には円形の写真と肩書きを添えて、信頼感を出す

Don't - 赤・黒・ビビッドな配色は使わない - 四角い角のボックスや濃い影は使わない - 背景付きの写真を四角いまま並べない（人物との生活シーンの写真だけは例外） - 本文を中央揃えで長く組まない - 明朝体や硬いゴシック体を見出しに使わない

Page Structure

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

1. ヘッダー（サイト名と取材依頼への導線を示す）: 白地。左にロゴ文字、右に NEWS のリンクと水色のピル型ボタンを置く
2. ファーストビュー（テーマとメッセージを伝える）: 白地に切り抜いた犬の写真を置き、その上に弧状の英字コピーを載せる。下は波形でクリーム地に切り替え、円形のバッジ・大見出し・導入文・散歩のイラストを並べる
3. 悩みの提起（よくある困った行動に共感させる）: 円形写真付きの問いかけ見出しの下に、吹き出しと網点背景の切り抜き写真を 3 組並べる
4. 専門家の解説（行動の理由を専門的に説明する）: 淡い水色の大きなカードに、雲形アイコン付きの結論、本文、監修者のプロフィールを入れる
5. 解決策の提示（正しい対処法を番号付きで紹介する）: クリーム地に白いカードを置き、番号付きで 3 項目を並べ、最後に注意喚起ボックスを置く
6. 始め方・ポイント（習慣化のコツを示す）: 本文と注釈の下に、2×2 グリッドのスライダーを置く
7. Before/After（商品特性の変化を見せる）: 点線枠のカード 2 枚を矢印でつなぎ、犬の写真と雲形の吹き出しで結論を添える。下に Q&A 形式の解説を続ける
8. タイプ別の選び方（好みに合う商品タイプを案内する）: 白いカードの中に、上下 2 色に分けたタイプ別カードを縦に 5 枚並べる
9. 締めのメッセージ（暮らしの幸せを想起させる）: 線画のイラスト付きの見出しの下に、人と犬の生活写真を全幅で置き、手書き風の吹き出しを重ねる
10. お知らせ（更新情報を見せる）: 淡い水色の地に、日付と見出しの一覧を線で区切って並べ、小さなピル型ボタンを置く
11. シェア・CTA・フッター（拡散と問い合わせにつなげる）: SNS の丸アイコンを並べ、クリーム地に大きなピル型ボタンを置く。最後にロゴ、リンク、青いコピーライト帯を置く

Imagery

• 犬は白背景で撮った全身写真を切り抜く。動きのあるポーズにする
• 写真の背後には、ベージュの網点で塗った傾いた四角か雲形を敷く
• 写真の周りに、水色の手描きの効果線・音符・汗マーク・擬音の文字を添える
• 人と犬のイラストは淡いグレーと紺の線画にし、木はベージュのシルエットで描く
• 生活シーンの写真は、窓辺の自然光で明るく柔らかい色調にする
• 商品は白背景で切り抜き、水色の面の上に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px に収め、左右にクリーム地を見せる
• PC では悩みの 3 枚を横並びにする
• PC では番号付き解説を、写真とテキストの左右交互の 2 カラムにする
• PC ではタイプ別カードを 2 カラムのグリッドにし、説明文のブロックも同じグリッドに組み込む
• PC では Before/After と Q&A を横に並べ、締めのメッセージは左にテキスト・右に写真の配置にする

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