DESIGN.md — ピンク×クレヨン調の子ども向け投稿キャンペーン LP（Pastel Crayon Kids Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: クレヨンのかすれ・ピンクのピル見出し・ポラロイド風カード・手描きイラスト・子ども向け・応募手順
• 地の質感: クレヨンで塗ったような水色・黄緑・ピンクのかすれ模様と、キラキラの星装飾を背景に散らす。カードはフラットに塗る。
• 形: 角丸カード、ピル型の見出しと CTA、波形のセクション区切り、吹き出し
• 温度感: 明るく暖かい。甘いパステル調

Colors

• 地は淡いピンクにし、前半の告知ゾーンだけクリーム色に切り替える
• 規約や手順は白いカードに入れ、ピンクの地から浮かせる
• 見出しの帯・CTA・ラベルはマゼンタピンク 1 色にそろえる
• 本文は黒ではなく紺色にして、やさしい印象にする
• 強調語はピンク文字か黄色マーカーの 2 種類だけにする
• ロゴ見出しは黄・ピンク・水色・緑のカラフルな文字にし、FV だけで使う
• button-primary は文字 #FFFFFF × 背景 #F30C91 のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E20B87、4.53:1）を使う。
• button-download は文字 #FFFFFF × 背景 #F30C91 のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E20B87、4.53:1）を使う。
• heading-pill は文字 #FFF7FF × 背景 #F20C91 のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DC0B84、4.52:1）を使う。
• speech-round は文字 #F20C91 × 背景 #FDFEFE のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DC0B84、4.52:1）を使う。

Typography

• 見出しは丸みのある太いゴシックにする
• 日付や当選人数の数字は一回り大きくしてピンクにする
• リード文は中央ぞろえにし、行ごとに紺の点線で区切る
• 規約本文は左ぞろえ。注釈はぶら下げインデントにする
• 斜線（＼ ／）で挟む小見出しを使ってよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品だけ 2 カラムのカード
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 概要以降は横幅いっぱいの白カードに縦に並べる
• 小見出しは中央のピル型にし、左右にピンクの点線を伸ばす
• 応募手順は左に灰色の番号帯を付けたカードにし、▼でつなぐ
• イラストとテキストは左右 2 分割で並べる
• カード内の区切りは灰色の点線にする

Elevation & Depth

• 影はほとんど使わず、色の面と線で階層を作る
• ポラロイド風の写真カードだけ薄い影と少しの傾きを付ける
• 手順カードは 1px の灰色の枠で示す

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 白枠付きのポラロイド風の四角に入れて傾ける。アイコンは丸く切り抜く
• セクション境界: 上に膨らむ大きな波形のカーブで地色を切り替える
• 見出しのラベルはすべてピル型にする
• カードの角丸は 12〜20px
• 吹き出しは白い丸型か紺の角丸にし、しっぽを付ける
• 案内ボックスはピンクの点線で囲む

Components

• アプリ誘導の帯ボタン（button-primary）: 横幅いっぱいのピンクの角丸帯。左にロゴ、右に＞を置く
• ダウンロード用のピル型ボタン（button-download）: ピンクのピル型ボタン。2 行の文字と、右端に白丸の矢印を置く
• 点線付きのピル見出し（heading-pill）: 中央のピンクのピルに白文字。左右にピンクのドット線を伸ばす
• 受付状況の吹き出し（status-bubble）: 紺の角丸吹き出し。白文字で、キーワードだけ黄色にする
• 賞品カード（prize-card）: 淡い黄色のカードに、商品写真・名称・左下のピンクの人数ラベルを入れる
• 番号付きの手順カード（step-card）: 白カードの左に灰色の番号帯を付ける。中は丸いイラストと説明文。カード同士は▼でつなぐ
• 応募期間のバッジ（badge-period）: FV 右上に置く紺の四角。日付は白と黄色で書く
• 丸い吹き出し（speech-round）: 白い楕円にピンクの手書き風文字を入れ、イラストの横に置く
• SNS シェアアイコン（share-icons）: 丸い SNS アイコンを 3 つ横に並べ、斜線で挟んだ見出しを付ける

Do's and Don'ts

Do - ピンク・黄・水色・黄緑のクレヨン模様と星のキラキラを背景に散らす - 応募手順は番号付きカードと手描きイラストで見せる - 強調語には黄色マーカーとピンク文字を使う - 本文は紺色で書き、行間は 1.7 以上にする - 子どもの絵はポラロイド風の白枠に入れ、斜めに置く

Don't - 黒の文字や無彩色だけの面を使わない - 鋭い角や細い明朝体を使わない - 強い影やグラデーションのボタンを使わない - ピンク以外の色を CTA に使わない - 写真を全面に敷いた重い FV にしない

Page Structure

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

1. ファーストビュー（企画名と応募期間を楽しく伝える）: カラフルなロゴ見出し、左上の回数バッジ、右上の期間バッジ。大きなアイスのイラストと作品写真カードを散らす
2. リード文（参加の流れを短く伝える）: クリーム地に中央ぞろえの太字の紺文字。行ごとに点線で区切り、強調語はピンクにする
3. 撮影方法（撮影のコツを図で伝える）: ピンクのパネルにタブ見出しを付け、手描きの手とスマホのイラスト、吹き出し、写真を添える
4. 賞品紹介（賞品と当選人数を訴求する）: 2 カラムの黄色いカード。カードの間に『または』の丸を置き、人数ラベルを付ける
5. CTA・台紙ダウンロード（アプリとダウンロードへ誘導する）: ピンクの帯ボタンと、点線で囲んだ黄色の案内ボックス内のピル型ボタン
6. 受付状況（受付状態を知らせる）: 波形の区切りの後に紺の吹き出しを置く
7. キャンペーン概要（概要・賞品・期間を整理して示す）: 上部にピンクの見出し帯が付いた白カード。ピル見出しで区切る
8. 応募方法（手順を順に説明する）: 番号帯付きのカードを▼でつなぎ、STEP ラベルとスクリーンショットを添える
9. 利用規約（条件と個人情報の扱いを示す）: 白カードに小さめの紺の本文を詰める。番号付きの小見出しと箇条書きを使う
10. シェア・注記（SNS で拡散してもらう）: ピンクの地に丸い SNS アイコン 3 つと注釈を置く

Imagery

• 子どもがクレヨンや色鉛筆で描いたような、塗りむらのあるアイスの絵
• 白い太枠のポラロイド風写真カードを少し傾けて重ねる
• ピンクの線で描いた手やスマホのイラスト。中は淡いピンクで塗る
• 背景に色鉛筆、クレヨンのかすれ、四芒星のキラキラを散らす
• 商品写真は白背景の切り抜きで、明るく鮮やかにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央に幅 750px 前後のカラムを置き、左右をピンクの地で埋める
• 賞品は横並びのまま、手順カードは横幅を広げてイラストを大きくする
• FV のイラストは左右に広げて散らし、見出しは 1 行化を検討する
• 規約本文は 1 行が長くなりすぎないよう、カード内の幅を 640px 程度に制限する

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