DESIGN.md — 生成り×焦げ茶線画のペット投稿キャンペーン LP（Warm Beige Hand-Drawn Pet Photo Contest LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: やさしい・柔らかい、かわいい、親しみ・手作り感、ナチュラル
• キーワード: 生成り・線画イラスト・リボン見出し・写真フレーム・ゆるい手書き感
• 地の質感: 紙のような無地の淡色面。グラデーションや影はほぼ使わない
• 形: アーチ型・楕円の写真マスク、細線のずらし枠、角丸小さめのカード
• 温度感: 暖色寄りでやわらかい

Colors

• 地色は白・生成り・ピンクベージュ・淡グレーをセクションごとに切り替える
• 線画・見出し装飾はすべて焦げ茶の単色細線にする
• オレンジは主 CTA ボタンだけに使う
• ピンクはハッシュタグなど1点だけの強調にする
• 濃い色の面は使わない。全体を明るく保つ
• button-primary は文字 #FFFFFF × 背景 #F59900 のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A66800、4.56:1）を使う。
• hashtag-chip は文字 #F08DC0 × 背景 #FEFEFE のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DE1D80、4.53:1）を使う。
• button-secondary は文字 #918C87 × 背景 #F0F4F5 のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#736F6A、4.5:1）を使う。

Typography

• 本文は小さめで行間を広く取り、中央揃えにする
• 見出しは字間を少し広げて落ち着かせる
• 日付は欧文の数字を大きくし、曜日は小さい英字にする
• キャプションは少し傾けて手書き感を出す
• 太字はボタンと見出しだけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（中央 90% 幅の帯）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 50px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションは左右に余白がある地色帯として置く
• 見出し・本文は中央揃え
• 賞品カードは左にテキスト、右に商品写真を少しはみ出させる
• 投稿例は縦長と横長の写真を左右ジグザグに配置する
• 注意事項は左揃えのテキストで最下部にまとめる

Elevation & Depth

• 影はほぼ使わずフラットにする
• CTAボタンだけ下にやや濃いオレンジの影をつけて立体感を出す
• 写真は細線の枠をずらして重ね、奥行きを出す

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: FVは楕円・アーチ型マスク、投稿例は四角写真に細線のずらし枠と少しの傾き
• セクション境界: 線画イラストの横帯（猫・麦・器）でセクションを区切る
• 中央のロゴ枠は縦長アーチの細線枠にする
• 見出しはリボン端のある細線フレームで囲む
• カードの角はほぼ直角にする

Components

• 応募CTAボタン（button-primary）: オレンジのピル型ボタン。右端に白丸の肉球アイコン、左右に線画の動物を添える
• リボン見出し（heading-ribbon）: 焦げ茶細線の横長フレームと、両端に折り返したリボン端
• 賞品カード（prize-card）: 王冠アイコン付きの賞名の下に、白カードで中黒の箇条書きと商品写真を置く
• 期間バッジ（date-badge）: 白地に細枠と少しずらした影線をつけた横長ボックスに期間を書く
• ハッシュタグ枠（hashtag-chip）: ピンクの細枠とピンク文字で囲んだタグ
• コピーボタン（button-secondary）: 淡いグレーの小さなピル型ボタン
• SNS共有アイコン（share-icons）: 斜線で挟んだ小見出しの下に、丸いアイコンを3つ並べる
• ずらし枠写真（photo-frame）: 写真の後ろに細線枠をずらして重ね、縁に斜線のハッチを入れる

Do's and Don'ts

Do - 線画は焦げ茶の単色の細い線でゆるく描く - 地色はセクションごとに淡色を切り替える - CTAは1つの色だけにして大きく目立たせる - 写真には傾きやずらし枠をつけて遊びを出す - 余白は大きめに取り、文字は小さく品よく見せる

Don't - 原色や濃い色の面を広く使わない - 太い影やグラデーションを入れない - 見出しを塗りの帯にしない - オレンジをCTA以外に使わない - 写真を楕円・フレームなしの全幅でだけ並べない

Page Structure

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

1. ファーストビュー（企画名と開催期間を伝える）: 中央にアーチ枠のロゴを置き、左右に楕円マスクのペット写真をコラージュする。下に期間バッジを置く
2. リード（参加すると得られるものを一言で示す）: 中央揃えの2行テキストの下に、線画イラストの横帯を入れる
3. 賞品紹介（賞のランクと内容を見せる）: 生成り地にリボン見出しを置き、王冠付きの賞名と白カードを3段並べる
4. キャンペーン概要・期間（企画の内容と日程を伝える）: ピンクベージュ地にリボン見出しを2つ置き、短い中央揃えの文を入れる
5. 応募方法（参加のしかたとハッシュタグを案内する）: 中央揃えの文、ピンクのタグ枠、小さいコピーボタンを並べる
6. CTA（応募へ誘導する）: 白地に線画の動物を添えたオレンジのピル型ボタンを置き、下にSNS共有アイコンを並べる
7. 投稿例（どんな投稿をすればいいか例を見せる）: 生成り地に、ずらし枠の写真と斜めの手書きキャプションをジグザグに配置する
8. 注意事項（規約と個人情報の扱いを示す）: 淡グレー地に【】で区切った小見出しと、※付きの小さい文を左揃えで並べる

Imagery

• 家庭で撮った自然光のペット写真を使い、生活感を残す
• 線画は猫・麦の穂・器などを焦げ茶の一筆書き風で描く
• 線画は区切りの帯やボタンの脇にゆるく散らす
• 商品は白背景の切り抜きにしてカードの右下からはみ出させる
• 写真の脇には小さい丸や波線の手描き装飾を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは SP の幅のまま中央に置き、左右は淡グレーの地にする想定
• PCに広げる場合も、本文の幅は最大480〜600px程度に抑える
• 投稿例のジグザグ配置はPCで2カラムのグリッドにしてもよい
• FVのコラージュは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 行書くと起動時に読み込まれる。