DESIGN.md — 水色×クリーム×ピンクのキャラ投稿キャンペーンLP（Pastel Character SNS Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、やさしい・柔らかい
• キーワード: パステル・キャラクター・太枠カード・格子柄背景・SNS投稿・ステップ
• 地の質感: 白いダイヤ格子線と渦巻き模様を薄く敷いたパステル地。フラットで影はない
• 形: 角丸の白カードに紺の太い枠線。右下に少し厚みを持たせ、ステップはピル型ラベルにする
• 温度感: 明るく甘めの暖かさ。水色とクリームとピンクで爽やかさと可愛さを両立する

Colors

• 地色は水色→クリーム→ピンクの順に区間で切り替え、それぞれに白い格子柄を重ねる
• 情報は必ず白カードに載せ、紺の太枠で囲む
• 見出しはティールの文字に白フチと紺の影を付ける
• 重要な文は太字にして黄色の下線マーカーを引く
• リンクはマゼンタの太字＋下線にする
• フッターだけ濃いティールで締める
• step-label は文字 #30A8B2 × 背景 #FFFFFF のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#25828A、4.53:1）を使う。
• button-primary は文字 #239C9C × 背景 #FDFEFE のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1D8181、4.61:1）を使う。
• footer は文字 #FFFFFF × 背景 #04898B のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#048486、4.52:1）を使う。

Typography

• 見出しは画像化したロゴ風の極太文字に白フチと紺の影を付ける
• 本文は中央揃えで、短い文ごとに改行する
• 強調は太字と黄色マーカーのセットで行う
• 規約などの長文は小さい文字にし、固定高のスクロール枠に入れる
• 日付は数字を大きく、年・月・曜日を小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは応募ステップのみ2列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出し（キャラ＋星）→白カードの順に縦に積む
• カードは画面の左右に約5%の余白を取る
• STEPラベルはカード上辺の枠線にまたがるよう重ねる
• カード内は中央揃えにする
• 区間ごとに背景色を切り替えて流れを区切る

Elevation & Depth

• 影は使わない
• カードは右下を太くした紺枠で、ずらし影風の厚みを出す
• ボタンは右下に黄色のずらし影を付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラクターと商品は切り抜きで配置し、カードの下端から少しはみ出させる
• セクション境界: 直線で背景色を切り替える。フッター上にはキャラクターの群れを並べて境界にする
• カードの角丸は約12pxで、枠線は3〜4px
• STEPラベルはピル型にする
• ボタンは小さい角丸の長方形で、右端に色付きの矢印ブロックを付ける

Components

• ロゴ風セクション見出し（section-title）: 極太ティール文字に白フチを付け、左右に星、上にキャラクターを乗せる
• 太枠情報カード（info-card）: 白地に紺の太枠を付けた角丸カード。中央揃えの本文を入れる
• STEPラベル（step-label）: 紺枠の白いピル型ラベル。ティールの英字に大きな番号を添え、カード上辺に重ねる
• 投稿ボタン（button-primary）: 白地にティール枠の横長ボタン。右端にティールの矢印ブロックと黄色のずらし影を付ける
• マーカー強調（marker-text）: 太字の下半分に黄色の帯を引く
• 規約スクロール枠（scroll-terms）: グレー細枠の固定高ボックス。右にティールのスクロールバーを付ける
• 期間バー（period-bar）: FV内に置く横長ピル。左に紺地の「期間」ラベル、右に日付を並べる
• キャラ群フッター（footer）: キャラクターの群れの下に、濃いティールの帯でコピーライトを入れる

Do's and Don'ts

Do - 背景には必ず薄い格子柄を敷く - 見出しごとにキャラクターや星を添える - 情報は紺太枠の白カードにまとめる - 応募手順は番号付きのSTEPカードで分ける - 賞品は切り抜き画像を大きく見せる

Don't - 濃い色の大面積背景を使わない（フッターを除く） - 細い明朝体や落ち着いた書体を使わない - ドロップシャドウやグラデーションで立体感を出さない - カードの枠線を細くしたり色を変えたりしない - 本文を左揃えの長文にしない（規約枠を除く）

Page Structure

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

1. ファーストビュー（企画名・賞品・期間を一目で伝える）: キャラ柄の水色地に吹き出しを置き、ポップな極太タイトル、賞品の大きな切り抜き、期間バーを並べる
2. キャンペーン概要（参加の流れと賞品を要約する）: 水色地に置いた太枠カード。中央揃えの文に黄色マーカーで賞品を強調し、注釈を添える
3. 参加資格（応募条件を示す）: クリーム地に置いた短い1行のカード
4. 応募期間（締切を明示する）: 日付を太い数字で2行に分けたカード
5. 応募方法（手順を4ステップで案内する）: STEPラベル付きカードを縦に4つ並べる。3番目に投稿ボタン、4番目にプレゼントのイラストを入れる
6. 賞品概要（賞品の魅力を見せる）: マーカー見出しの下に、キャラクターと商品の切り抜きを星を散らして配置する
7. 限定フレーム案内（応募用ツールへ誘導する）: ピンク地に置いたカード。URLリンク、注意事項のスクロール枠、キャラクターのイラストを入れる
8. 注意事項（規約を掲載する）: カード内に置いた小さい文字のスクロール枠
9. お問い合わせ（連絡先を示す）: 左揃えの文字の大きい連絡先カード
10. フッター（権利表記）: キャラクターの群れのイラストの下に濃いティールの帯を置く

Imagery

• キャラクターは太い輪郭線のフラットなイラストを切り抜きで使う
• 見出しの上にはキャラクターを小さくちょこんと乗せる
• 黄色とピンクの星を周囲に散らす
• 商品パッケージは正面から撮った切り抜き画像にする
• 背景はダイヤ格子線と渦巻きの白い模様を繰り返す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはコンテンツ幅を約900pxで中央寄せにし、両側にも柄背景を広げる
• PCのFVは横長にし、左にタイトル、右にキャラクターを配置する
• PCの応募方法は2列×2段のグリッドにする
• PCのカード本文は1行を長くして改行を減らす
• 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 行書くと起動時に読み込まれる。