DESIGN.md — パステル花柄×ピンクのキャラクターキャンペーンLP（Pastel Floral Character Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、親しみ・手作り感
• キーワード: パステル・ハート・花のイラスト・ピンク・キャラクター・お祝いムード
• 地の質感: 白地に水彩風のパステルグラデーション。フラットな花・葉のイラストを余白に散らす。
• 形: ハート型のぼかし背景、ピル型ラベルとボタン、角丸カード、リボン装飾
• 温度感: 明るく暖かい。ピンクを主に、水色・黄緑・黄を差し色にする

Colors

• 地は白。FVだけミント〜ピンク〜水色の虹色グラデーション。
• 見出しはピンクの文字で統一する。
• ステップや情報ブロックは、ピンク・水色・黄緑・ラベンダーのハート背景を交互に置く。
• 日付や項目名は水色・黄・ミントのピル型ラベルで区別する。
• 本文は黒ではなくブラウングレーにする。
• ボタンは水色・黄緑・ブラウンのやわらかいグラデーションにする。
• button-primary は文字 #FFFFFF × 背景 #93BCFE のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#126CFD、4.58:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #A88F6A のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#8A7250、4.56:1）を使う。
• button-outline は文字 #DA6B91 × 背景 #FFFFFF のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF4071、4.54:1）を使う。
• label-topics は文字 #FFFFFF × 背景 #FE659A のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#EA0252、4.54:1）を使う。
• badge-date は文字 #FFFFFF × 背景 #6FB2F0 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1677D1、4.57:1）を使う。
• card-topic は文字 #DA6B91 × 背景 #FEDCEA のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF4071、4.52:1）を使う。
• step-heart は文字 #DA6B91 × 背景 #CBEAF6 のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF4071、4.52:1）を使う。
• number-circle は文字 #FFFFFF × 背景 #6FB2F0 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1677D1、4.57:1）を使う。

Typography

• 見出しは太い丸ゴシックで、字間を少し広げる。
• セクション見出しの上に、欧文の筆記体か小さなラベルを添える。
• 本文は中央揃えで行間を2.0前後とり、短い行で改行する。
• 見出しを1文字ずつ丸枠に入れる演出を、小見出しに使ってよい。
• 日付は太い欧文の数字を大きく、曜日を小さくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。トピックカードは横スクロールか 1 列に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 中央揃えを基本にし、左右の余白に花のイラストを散らす。
• ステップは左右ジグザグに並べ、矢印でつなぐ（SPは縦1列）。
• 情報は『ラベル＋値』の行で並べる。
• セクションの間は広い白余白で区切る。
• ボタンは2つを横並び（SPは縦）にする。

Elevation & Depth

• 影はほとんど使わない。
• カードやボタンに、ぼかしの小さい淡い影をつける程度。
• ハート背景はぼかしのにじみで奥行きを出す。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: キャラクターは切り抜き。写真は円形か角丸に切り抜き、ハート型の枠も使う
• セクション境界: 直線で区切らず、白余白と散らしたイラストでつなぐ。FV下端だけグラデーションが白へ消える
• ボタン・ラベルはすべてピル型。
• ステップ背景はぼかしたハート型。
• 規約は角丸の白い枠の中でスクロールさせる。
• リボンや花を見出しの装飾にする。

Components

• 予約・リンクボタン（button-primary）: 水色グラデーションのピル型ボタン。白い文字に右矢印を添える。
• ブラウンの補助ボタン（button-secondary）: 落ち着いたブラウンのピル型ボタン。時刻表などのサブリンクに使う。
• 戻るボタン（button-outline）: 白地にピンクの枠と文字、左矢印のピル型ボタン。
• 吊り下げ見出しラベル（label-topics）: ピンクのピル型ラベル。リボンの吊り紐がついたように見せる。
• 日付バッジ（badge-date）: 水色のピル型の面に、白い太字の欧文数字で日付を入れる。
• トピックカード（card-topic）: イラストと見出しを組み合わせたカード。下に淡いピンクの『CHECK』帯をつける。
• ステップのハート背景（step-heart）: 淡い色のぼかしハートの上に、筆記体のSTEP番号とピンクの見出し、本文を置く。
• 情報行ラベル（info-row）: ミント・黄・ピンクのピル型の項目名と、右側の値で1行にする。
• 番号の円（number-circle）: 水色の円の中に白い数字を入れ、企画の番号として使う。
• 規約スクロールボックス（terms-box）: 細い線で囲んだ角丸の白い箱。中を縦スクロールさせる。

Do's and Don'ts

Do - 花・葉・キャラクターのイラストを余白に散らし、にぎやかにする。 - 見出しはピンクの丸ゴシックで統一する。 - ステップは色ちがいのハート背景で区別する。 - ボタンとラベルはピル型にする。 - 本文は中央揃えにして、短い行で改行する。

Don't - 黒い面や濃い原色の大きな面を使わない。 - 角ばったボタンや硬い直線の区切りを使わない。 - 明朝体や細いゴシックを見出しに使わない。 - 情報を表組みで詰め込みすぎない。 - 本文を純黒にしない。

Page Structure

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

1. ファーストビュー（企画の世界観とテーマを伝える）: 虹色のパステルグラデーション地。左にロゴと短いコピー、右にキャラクターと花束のイラストを置く。
2. メッセージ（企画の背景と想いを語る）: 筆記体の欧文見出しの下に、中央揃えの本文を置く。左右にキャラクターと乗り物のイラストを配置する。
3. キャンペーン紹介（企画全体のタイトルを示す）: 円形のエンブレムとキャラクターを並べ、2行のリードを添える。
4. 新着トピック（最新情報へ誘導する）: 吊り下げラベルの見出しの下に、3枚のトピックカードを横に並べる。
5. イベント詳細（日程・区間・号車を案内する）: 日付バッジ、ピンクの見出し、ハート枠のビジュアル、情報行、号車図、ボタン2つの順に置く。
6. 車内企画（番号つきの企画を紹介する）: 番号の円、見出し、写真を、左右交互か2列で並べる。
7. スペシャル企画（写真募集企画を告知する）: リボンと大きなハートのタイトル、円形写真、受付終了の帯を組み合わせる。
8. 参加方法（応募の4ステップを示す）: 1文字ずつ丸枠に入れた見出しの下に、ハート背景のステップをジグザグに置き、矢印でつなぐ。
9. 応募資格（条件を一覧で示す）: 黄色マーカー見出しの下に、ピンクの矢印つき箇条書きを並べる。
10. 応募規約（規約の全文を載せる）: 丸枠の見出しの下に、スクロールする規約ボックスを置く。
11. クロージング・SNS導線（次の企画への期待とSNSへの誘導）: キャラクターとピンクの予告コピー、戻るボタン、水色と黄緑の大きなSNSボタンを置く。

Imagery

• キャラクターは太めの主線のフラットなイラストを切り抜いて使う。
• 花・葉・チューリップ・クローバーを小さなフラットイラストにし、余白へランダムに散らす。
• 背景はパステルの水彩風グラデーションと、ぼかしのハート。
• 写真は明るい色調のグッズや車内の写真を、円形かハート形に切り抜く。
• リボン・花束・メッセージカードなど、お祝いのモチーフを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにし、トピックカードは縦に積むか横スクロールにする。
• FV はキャラクターのイラストを上、ロゴとコピーを下に縦積みする。
• ステップのジグザグはやめ、縦 1 列にして矢印を下向きにする。
• ボタン2つは縦に並べ、幅を 88% にする。
• 散らすイラストは数を減らし、画面の端に小さく置く。
• 情報行は、ラベルを上・値を下の 2 段にする。

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