DESIGN.md — 生成り×黄×レンガ色のペット投稿キャンペーンLP（Fluffy Pet Fur Warm Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、やさしい・柔らかい、親しみ・手作り感、ポップ・元気
• キーワード: 毛玉・ふわふわ・生成り・ペット写真・手書き見出し・投稿キャンペーン
• 地の質感: 生成りの無地に毛玉の切り抜き写真を散らす。中盤はうっすらレンガ目地の柄。
• 形: 黄セクションの上端は大きなアーチ。カードは大きめの角丸、ボタンはピル型。丸く切り抜いた写真と、少し傾けたポラロイド風の白枠写真を使う。
• 温度感: 暖色寄り。クリーム・黄・テラコッタでぬくもりを出す。

Colors

• 地は生成り → 黄 → レンガ色 → 生成りの順に切り替え、セクションの区切りを色で見せる
• キャンペーンごとに地の色を変えて、内容を区別する
• 主CTAだけ緑にする。暖色の地の上で目立たせるため
• 強調したい日付や景品は太字の黒か赤茶で書き、黄マーカーを引く
• レンガ色の地には白カードを重ね、文字は白カードの上に載せる
• button-primary は文字 #FFFFFE × 背景 #5DA362 のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#4A834E、4.52:1）を使う。
• speech-tag は文字 #FFFFFE × 背景 #7DB55A のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#55813A、4.57:1）を使う。

Typography

• 本文はすべて中央揃えにし、短い行で改行して詩のように読ませる
• 見出しは太くて丸みのある書体にし、手作り感を出す
• メインのキャッチだけ筆文字で、かすれた質感を出す
• 本文は字間を少し広め、行間は2.0にする
• 日付は大きな極太の数字で書き、曜日は小さめの括弧書きにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（ギャラリーは 3 列）
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文ブロックは中央揃えで幅を狭めに組む
• 写真は本文の左右に傾けて置き、余白を埋める
• キャンペーンの各ブロックは「ラベル → 見出し → 本文 → 日付 → CTA」の順に組む
• 白カードは画面端から16pxの余白を取って中央に置く
• ギャラリーは正方形サムネを等間隔のグリッドで並べ、カテゴリごとにハッシュタグ見出しを付ける

Elevation & Depth

• 白カードは影を付けず、地の色との差だけで浮かせる
• ポラロイド風の写真には薄い影を付ける
• CTAには下側に濃い緑の厚みを付けてもよい

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 丸型と、白枠付きで少し傾けた四角形、ギャラリーは正方形
• セクション境界: 黄セクションの上端は大きなアーチ。下端は毛玉の列で区切る
• ボタンとラベルはピル型にする
• 写真は丸型か白枠付きにし、-8〜8度ほど傾ける
• ハッシュタグ見出しはベージュの二重線で囲んだ角丸の枠にする
• レンガ色の地にはうっすら目地柄を入れる

Components

• 応募ボタン（button-primary）: 緑のピル型。右に丸い矢印アイコンを添える
• キャンペーン番号（campaign-label）: 白い英字を弧状に並べたラベル
• 吹き出しラベル（speech-tag）: 緑のピル型に下向きの三角を付けた、短い前置き用のラベル
• ハッシュタグ見出し（hashtag-heading）: ベージュの線で囲んだ白い角丸の枠
• コード表示枠（code-box）: 赤茶の枠線と赤茶の文字で、コードを目立たせる
• 白い角丸カード（info-card）: レンガ色の地の上に置く。上部に淡い黄色の帯を入れる
• 傾けた写真（polaroid-photo）: 白枠付きで傾け、本文の左右に散らして置く
• 毛玉の区切り（fur-divider）: 毛玉の切り抜き写真を横一列に並べ、セクションの境目にする

Do's and Don'ts

Do - 毛玉やふわふわした素材を余白に散らす - 本文は中央揃えにし、短い行で改行する - キャンペーンごとに地の色を変える - 日付は大きく太く書く - 写真は丸型か傾けた白枠で見せる

Don't - 寒色や彩度の高い原色を地に使わない - 角のとがった四角いボタンにしない - 本文を左揃えで長く組まない - 細い明朝体を使わない - 濃い影やグラデーションを多用しない

Page Structure

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

1. ファーストビュー（テーマを感情に訴えて伝える）: 生成りの地に筆文字のキャッチと吹き出しのサブコピーを置く。ペット3匹の切り抜き写真を並べ、下に毛玉の列を敷く
2. 想いの導入（ペット目線の語りで共感を得る）: 中央揃えの短い行を2段落。丸く切り抜いた写真を左右にずらして置く
3. キャンペーン1（写真投稿）（投稿キャンペーンを説明する）: 黄色の地を上端のアーチで始める。番号ラベル、吹き出し、太い見出し、本文の順に並べ、周りに傾けた写真を散らす。採用例のビフォーアフター図も入れる
4. 応募期間とCTA（応募へ誘導する）: 大きな日付の下に、緑のピル型ボタンと規約へのリンクを置く
5. キャンペーン2（会員登録）（会員登録の特典を伝える）: レンガ柄の地に白い見出しを置く。白カードの中に特典、商品写真、注意書きを入れる
6. 登録方法（手順とコードを示す）: 番号付きの2ステップと、コードを入れた枠。点線で区切り、適用期間と会員サイトへのバナーを続ける
7. フォトギャラリー（投稿例を見せる）: 英字の見出しの下に、ハッシュタグごとの正方形写真グリッドを置く
8. 関連商品バナー（関連サービスへ送客する）: 手書き風のコピーの下に横長バナーを置く
9. フッター（締めとコピーライト）: 小さな文字のコピーライトの下に、ペットの切り抜き写真を並べる

Imagery

• ペットは白背景で切り抜き、明るく笑顔の表情を選ぶ
• 毛玉は色とりどりの実写の切り抜きにし、ぼかしを付けて大小散らす
• 投稿写真は自然光の家庭のスナップで、生活感があってよい
• キャラクターは線の太い、ゆるい犬のイラストにする
• 商品写真は白背景に置き、周りにきらめきの小さな装飾を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版は中央の幅約480px相当の範囲にSPのレイアウトをそのまま置き、左右の地の色だけを広げる
• SPでは散らした写真を小さくし、本文と重ならないようにする
• ギャラリーはPCで4列、SPで3列にする
• 白カードはSPで左右16pxの余白を取る

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