DESIGN.md — 桜ピンク×山吹のキャラコラボ旅キャンペーン LP（Soft Pink Character Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、親しみ・手作り感
• キーワード: 淡ピンク地・山吹のピル見出し・こげ茶の手順枠・水色ボタン・波形の区切り・ゆるキャラ
• 地の質感: ベタ塗りのフラットな面。影はほぼなく、白カードと淡いピンクの濃淡で段差をつける
• 形: 大きな角丸カード、ピル型ボタン、波形のセクション境界、破線のアーチ見出し
• 温度感: 暖かい。ピンクと山吹が中心で、水色を少しだけ差して爽やかさを足す

Colors

• 地色は濃いピンク（#FFDDDE）と淡いピンク（#FFF1F1）を大きなセクション単位で交互に使い、境目は波形にする
• 企画ごとの大見出しには山吹色のピルを使い、ほかの場所では山吹色を多用しない
• 手順ボックスは白地＋こげ茶の太枠とこげ茶の見出し帯で固定する
• ボタンは水色の塗りか、白地＋こげ茶枠／水色枠の 2 系統だけにする
• 文字は真っ黒を避け、温かみのあるこげ茶グレーで統一する
• 赤は注意書きの文字と枠だけに使う

Typography

• 見出しとリード文は太い丸ゴシックで中央揃えにする
• 見出しは字間を 0.08〜0.12em と広めにとり、ゆったり見せる
• ピル見出しは小さなサブ行と大きなメイン行の 2 段にする
• STEP の表記は欧文を小さくし、数字だけを大きくする
• 注釈は 12px 前後で左揃えにし、行頭に※を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カード・ボタンは左右に約 22px の余白をとって中央に置く
• 大きなセクションの境目に波形の区切りとキャラクターを置く
• カード同士の間は 16〜20px 空ける
• ボタンの幅は画面の 60〜90% で中央に置く
• メディア見出しは破線＋アーチ状の英字で区切る

Elevation & Depth

• 影はほぼ使わず、地色との差でカードを浮かせる
• 期間ボックスだけ水色の太枠と紙めくれ風の角をつける
• フレーム風の写真には小さな落ち影と白いフチを付けてもよい

Shapes

• 角丸: 小 12px ／ 中 24px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの四角。特典画像は切り抜きにし、背景に大きな円をしく
• セクション境界: ゆるい波形の曲線。メディア見出しは破線がアーチ状に盛り上がる形
• ボタン・見出しはすべてピル型にする
• カードは 24〜32px の大きな角丸にする
• 番号は白い吹き出し型の円にし、ピルの左上に重ねる
• 地域ラベルは淡いピンクの円形吹き出しにする

Components

• 番号付き企画見出し（heading-numbered-pill）: 山吹色のピルに白フチを付け、左上に白い吹き出し型の番号を重ねる。文字は 2 段
• 手順ボックス（step-box）: こげ茶の見出し帯＋白地の太枠ボックス。STEP の行をこげ茶の線で区切る
• 主 CTA ボタン（button-primary）: 水色の大きなピル。右に白い三角、上にキャラクターを乗せる
• 開閉ボタン（button-accordion）: 水色のピルに、文字＋下向き三角
• 外部リンクボタン（button-outline）: 白地のピルにこげ茶か水色の枠線。左にピンの地図アイコン、右に別窓アイコン
• 会場カード（card-venue）: 白い角丸カード。左上に地域吹き出し、ピンクの下線付き見出し、時間、注釈を並べる
• 注意ボックス（notice-box）: 白地に赤い細枠の角丸。中の文字も赤
• 日付・回次チップ（label-chip）: 白か淡いピンクの小さなピルに日付や第◯弾を入れる
• 開催期間ボックス（period-box）: 水色の太枠＋右下がめくれた紙風。上に水色のタブ見出しを付ける

Do's and Don'ts

Do - ピンク 2 色の地を交互に使い、境目は波形にする - 企画ごとに山吹の番号付きピルで始める - 手順は STEP1〜4 のこげ茶枠ボックスでまとめる - セクションの区切りにキャラクターイラストを 1 体置く - 画像の下に『※イメージ』などの注釈を小さく添える

Don't - 純黒の文字や彩度の高い原色の面を使わない - 角張ったボタンやカードを作らない - 強い影やグラデーションを使わない - 山吹色を本文や細かい装飾に広げない - 赤を注意書き以外に使わない

Page Structure

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

1. ファーストビュー（企画名と世界観を伝える）: 空と海と乗り物のイラストに、手書き風のオレンジのタイトルを重ねる。右上にハンバーガーメニュー
2. 導入と開催期間（企画の趣旨と期間を示す）: 中央揃えのリード文と、紙めくれ風の期間ボックス
3. コンテンツ目次（3 つの企画へ移動させる）: アーチ状の英字＋破線の下に、番号付きの山吹ピルを 3 つ縦に並べ、右端に下向き三角
4. 企画 1 デジタル特典（特典の内容と入手手順を説明する）: 大きな円の背景に特典画像を並べ、手順ボックス、水色の主 CTA、赤枠の注意を続ける
5. 企画 2 ノベルティ特典（期間ごとのグッズを紹介する）: 白い角丸カードに回次チップ、品名、商品画像、引換期間をまとめる
6. 引換方法と会場（引き換えの手順と場所を示す）: 手順ボックスの後に水色ピルの見出しを置き、地域別の会場カードを縦に積む
7. 注意事項（規約を伝える）: 水色ピルの見出しと、小さい文字の注釈リスト
8. 企画 3 沿線イベント（各地のイベントを紹介する）: 地域吹き出し＋下線見出し、日付チップ、写真、外部リンクボタンを繰り返す
9. SNS プレゼント（投稿キャンペーンへの参加を促す）: アーチ状の英字見出し、白カードに賞品画像、応募手順ボックス、応募ボタン
10. 関連情報（関連作品と公式サイトへ誘導する）: 白カードにポスター画像を入れ、白いピル型の外部リンクを 2 つ置く
11. フッター（注記と問い合わせ先を示す）: 注釈文、下線リンク、オレンジの上に戻るボタン、灰色帯にコピーライト

Imagery

• 太い黒の輪郭線に頬のピンクを入れた、ゆるいキャラクターイラストを使う
• セクションの区切りに、制服などテーマに合う衣装のキャラクターを 1 体ずつ置く
• グッズは白背景の切り抜きにし、大きな淡ピンクの円の上に並べる
• イベント写真は明るい実写を四角くトリミングし、虫眼鏡などの装飾を添える
• 空は水色、雲は白のフラットな背景イラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文幅を約 700px に絞り、中央に置く
• PC では目次ピルを 2＋1 の横並びにする
• PC では手順ボックスを 4 列か 2×2 のグリッドにし、縦線で区切る
• PC では特典を大きな円の中にまとめ、キャラクターを左右に散らす
• PC では写真を 3 枚横に並べる

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