DESIGN.md — くすみピンク×紺の写真投稿キャンペーン LP（Soft Pink and Navy Photo Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、信頼・誠実
• キーワード: くすみピンク・紺の見出し帯・波形の区切り・薄い透かし欧文・写真投稿・SP幅の中央列
• 地の質感: 生成り地にうっすら六角形の地紋。ピンク面には上下に白いグラデーションをかける
• 形: 波形のセクション境界、ピル型 CTA、丸い数量バッジ、角丸が小さいカード
• 温度感: 暖かめ。ピンクと生成りを主に、紺で引き締める

Colors

• 地は生成りとくすみピンクの交互にし、境界は波形でつなぐ
• 賞のランク見出しは紺の全幅帯に白文字で出す
• 賞品名と数量バッジだけをコーラル赤にし、他の強調には使わない
• 主 CTA は紺から青への横グラデのピル型、サブは白地にグレー線
• 規約エリアはベージュの見出し帯と白地で、彩度を抑える
• PC の外側は青灰の単色で埋め、中央列を浮かせて見せる
• button-primary は文字 #FCFBFA × 背景 #527CAB のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#4F77A4、4.51:1）を使う。
• badge-quantity は文字 #FCFBFA × 背景 #E0525A のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DA323B、4.51:1）を使う。

Typography

• 見出しは薄い白の大きな欧文セリフに和文ゴシックを重ねる 2 層構成
• 本文は中央揃えにし、短い行で改行する
• 日付などの数字は大きく、曜日・時刻は小さくする
• ナビは和文太字の下に小さな欧文大文字を添える
• 規約は左揃えの箇条書きにし、文字は小さめにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は左に写真、中央に SP 幅の列、右にナビの 3 分割
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅の 90% で中央に置く
• 賞品は写真→数量バッジ→赤い賞品名→説明の順で縦に積む
• STEP カードは左上に丸い番号を重ね、中に線画イラストを入れる
• CTA ブロックは各セクションの終わりに繰り返す
• 規約はスクロール枠に収めて高さを抑える

Elevation & Depth

• カードは影なし、白面と地色の差だけで分ける
• CTA ボタンにだけ薄いドロップシャドウを付ける
• 数量バッジは写真の右下にはみ出して重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸のない長方形。FV はひし形グリッドのコラージュにする
• セクション境界: ゆるい波形カーブ
• CTA はピル型にし、左にギフトのアイコン、右に白丸の矢印を入れる
• 数量バッジは赤い正円
• STEP 番号は紺の正円に白文字
• カードの角丸は小さく抑える

Components

• 応募 CTA（button-primary）: 紺から青へのグラデのピル型。左にギフトアイコン、右に白丸の矢印
• 詳細リンクボタン（button-secondary）: 白地にグレー線の小さなピル型。下向き矢印付き
• 透かし欧文見出し（heading-section）: 白く大きな欧文セリフの上に、紺の和文見出しを重ねる
• 賞ランク帯（band-rank）: カード上端に付ける紺の全幅帯。白文字を中央に置く
• 当選数バッジ（badge-quantity）: 赤い正円に白文字で人数を入れ、写真の角に重ねる
• 賞品カード（card-prize）: 白から淡いピンクへのグラデ面。写真・赤い賞品名・説明を置く
• STEP カード（card-step）: 白面に線画のスマホイラスト。左上に紺の番号円を置く
• 規約見出し帯（band-rule）: ベージュ帯に太字の見出しを中央に置き、下に箇条書きを続ける
• ハッシュタグ表示（hashtag-box）: 紺の小ラベルと白枠を組み、タグとコピーアイコンを並べる

Do's and Don'ts

Do - 地色は生成りとピンクを波形で交互に切り替える - 見出しには必ず薄い欧文の透かしを重ねる - 主 CTA はセクションの終わりごとに同じデザインで繰り返す - 写真は子どもと家族の自然光の日常シーンを使う - 強調の赤は賞品名と人数だけに使う

Don't - 原色や蛍光色を使わない - 直角の境界でセクションを切らない - 濃い影や立体的な装飾を使わない - 本文を大きな太字で埋めない - 赤を CTA の色に使わない

Page Structure

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

1. ファーストビュー（キャンペーンの世界観と名前を伝える）: ひし形グリッドに写真を並べたコラージュに、手書き風の白いハッシュタグを重ねる
2. 導入（キャンペーンの趣旨を説明する）: 生成り地に写真 1 枚と中央揃えの短文、下に写真を 2 枚並べる
3. 賞品紹介（賞品で応募意欲を高める）: ピンク地に、紺帯付きの賞品カードをランクごとに縦に積む
4. CTA（応募へ誘導する）: ピル型グラデボタンとサブボタン。下に商品写真を並べる
5. 応募方法（参加手順を示す）: 3 つの STEP カードに線画イラストと番号円を付ける
6. キャンペーン詳細（期間・条件・当選者数を伝える）: ベージュの見出し帯と箇条書きを繰り返す
7. 応募規約（法的な注意事項を示す）: 白いスクロール枠に小さな文字で載せる
8. クロージング CTA（最後にもう一度応募を促す）: ピンク地にタイトル・CTA・写真 2 枚を置く

Imagery

• 自然光で撮った子どもと親の日常写真。彩度は低めでやわらかく
• パステル色の商品をきれいに並べた物撮り
• 手順説明は細い紺の線画に、ピンクを少し差す
• 写真には「画像はイメージです」の注記を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 375px 幅の SP 列を固定し、外側を青灰で埋める
• PC の左側にはファーストビュー写真を固定表示する
• PC の右側には、和欧併記のアンカーナビと CTA を固定する
• SP はファーストビューを先頭に置き、1 カラムで縦に積む

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