DESIGN.md — 赤×生成りと桜の青春キャンペーン LP（Pop Red Sakura Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、やさしい・柔らかい
• キーワード: 青春・桜の花びら・ポラロイド・傾いた紙片・赤文字・立体ロゴ
• 地の質感: フラットな生成りの地に、白い紙を少し傾けて重ね、薄い影をつけたコラージュ風の質感
• 形: 角丸カード、わずかに回転した白い紙面、赤い破線枠、ピンクの花びら形
• 温度感: 暖かく明るい。赤とピンクが主役で、水色がさわやかさを足す

Colors

• 地は生成り、要所を白い紙片で切り替える
• 文字は本文から見出しまでほぼ全て赤で統一する
• 水色はロゴとあそび方見出しなど限られた所だけに使う
• 対象商品だけは全面赤帯にして白文字で反転させる
• ピンクの花びらを各セクションの境界に散らす
• 黒やグレーの本文は使わない
• photo-polaroid は文字 #5FB3C1 × 背景 #FFFFFF のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#367F8C、4.59:1）を使う。

Typography

• 全体を太めの丸ゴシックで統一する
• 本文も太字で、字間を広め（0.1em 前後）にとる
• リード文は短い行で改行し中央揃えにする
• セクション見出しは左右を「---」で挟む
• STEP 数字は少し傾け、下に灰色の影文字を重ねる
• ロゴ見出しは水色の白縁取りと立体影で表現する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビボタンは 3＋2 のグリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文は中央揃え中心、STEP カードの中は左にテキスト・右に図
• STEP カードは縦に積み、間に 40px 前後を空ける
• FAQ は細い赤線で区切ったアコーディオンを全幅で並べる
• 期間とお問い合わせは画面幅をはみ出す傾いた白紙に載せる
• 写真は 2 枚をずらして重ね、矢印でつなぐ

Elevation & Depth

• 傾けた白紙とポラロイドに柔らかい薄い影をつける
• STEP カードはほぼ影なしのフラット
• ボタンは影なしのベタ塗り
• PC の固定サイドボタンにだけ下影をつける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 白枠ポラロイド風で少し回転、または角丸長方形
• セクション境界: 白紙を斜めに傾けて重ねる境界と、赤帯の直線切り替え
• カードは角丸 20px 前後で、わずかに回転させる
• ボタンは角丸 8〜10px の長方形
• 囲み注記は赤い破線の角丸枠にする
• 花びらは境界をまたぐ位置に置く

Components

• ページ内ナビボタン（button-nav）: 赤い角丸ボタン。上にラベル、下に丸囲みの下矢印
• 電話 CTA（button-tel）: 赤い横長の角丸ボタンに白文字
• 外部リンクボタン（button-outline）: 白抜きに赤い細枠と別窓アイコンをつける
• 破線挟み見出し（heading-dashed）: 見出しの左右を赤の「---」で挟み、下に短い説明を添える
• STEP カード（card-step）: 少し傾けた白い角丸カード。上に影つき STEP 数字、左に説明、右にイラストか写真
• ポラロイド写真（photo-polaroid）: 白枠の下に水色の小さなキャプションを入れ、回転させて 2 枚重ねる
• 破線注記ボックス（box-dashed）: 赤い破線の角丸枠に、説明や推奨環境を入れる
• Q&A アコーディオン（accordion-faq）: Q の頭文字と赤文字の質問、右端に下向き山形。上下を赤い細線で区切る

Do's and Don'ts

Do - 文字色は赤 1 色に絞る - 白紙やカードは 2〜5 度傾けて手作り感を出す - 桜の花びらをセクションの境目に散らす - リード文は短く改行し、中央に積む - 体験の手順は大きな STEP 数字＋イラストで見せる

Don't - 黒やグレーの本文を使わない - 角ばった明朝や細いゴシックを使わない - ボタンにグラデーションや強い影をつけない - 水色を本文や広い面に使わない - 全要素を水平にそろえて硬い印象にしない

Page Structure

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

1. ファーストビュー（世界観とキャンペーン名を伝える）: 赤い手書き風キャッチ、斜めに切ったアニメ調イラスト、水色の立体ロゴ
2. コンセプト文（体験の情緒的な価値を語る）: 生成り地に赤い太丸ゴシックを中央揃えで詩のように並べる
3. ビフォーアフター写真（体験結果をイメージさせる）: ポラロイド 2 枚をずらして重ね、手書き風の矢印と吹き出し文字を添える
4. キャンペーン期間とナビ（期間を示し各セクションへ誘導する）: 傾いた白紙の上に期間、赤ボタン 5 つ、破線枠の説明
5. あそび方（手順を 4 ステップで説明する）: 水色ロゴ見出しの下に STEP カードを縦に並べる
6. 体験の広がり訴求（繰り返し遊ぶよう促す）: 赤い見出しと集中線、フラットなカメラのイラスト
7. タイアップ紹介（楽曲やアーティストを紹介する）: 角丸写真、名前と枠線ボタン、赤い本文
8. 対象商品（対象パッケージを明示する）: 全面赤帯に白見出し、商品画像を 3 列グリッドで並べる
9. 注意事項（規約へ誘導する）: 破線見出しと 1 行のアコーディオン
10. よくある質問（疑問を解消する）: 赤線区切りの Q&A アコーディオンと推奨環境の破線ボックス
11. お問い合わせ（窓口を示す）: 傾いた白紙に事務局名、赤い電話ボタン、受付時間

Imagery

• 学生の青春を描くアニメ調イラスト。空と桜を背景に見上げる構図
• 自撮り風の明るい人物写真をポラロイド枠に入れる
• 手やスマホ、カメラは太い黒線のフラットイラスト
• ピンクの桜花びらを大小に散らす装飾
• 商品パッケージは切り抜きで正面からグリッドに並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP 幅のカラムを左寄せで配置し、左右を赤い破線で囲む
• PC の右側に体験案内の破線ボックスと、水色・赤のピル型ボタンを固定表示する
• PC の余白は生成りと白の傾いた紙面で埋める
• 文字サイズとレイアウトは SP と同じ比率を保つ

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