DESIGN.md — 青×ピンク二色分けの就活スーツフェア LP（Blue and Pink Dual-Gender Fresher Suit Campaign LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型、力強い・インパクト
• キーワード: 男女で色分け・斜めの境界・桜の花びら・クーポン券・春の新生活・セット価格の訴求
• 地の質感: 白〜淡い水色の地に、青やピンクのなめらかなグラデーション面を重ねる。写真は切り抜きで影は弱め。
• 形: 角丸カード、ピル型ボタン、斜めにカットした帯、両側に切り欠きのあるチケット形
• 温度感: 明るくさわやか。青で信頼感、ピンクで華やかさを出す

Colors

• メンズは青系、レディースはピンク〜紫系で必ず分ける
• 主 CTA は濃紺のピル型にし、ページ全体で統一する
• セクションの面は縦グラデーションで深みを出す
• 金額や割引率はピンクか青の大きな数字にし、下に黄色マーカーを引く
• 特典など別の企画だけ緑を使い、他の要素と区別する
• フッターは濃紺の地に白いカードを置く

Typography

• 見出しは太いゴシックで、強調したい語だけ大きくし、助詞は小さくする
• 強調語の上に色付きの点を並べて目を引く
• 英字の大見出しの下に小さな和文の補足を添える
• 価格は数字を大きく、円や税込は小さくする
• ロゴ風の見出しは斜体の筆風で、矢印を組み合わせる
• 注釈は※で始め、10px で詰めて並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。セット商品は 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• CTA は左右 16px の余白で横幅いっぱいに置く
• 見出しの下に、中央に小さな切り欠きのある線を引く
• 商品は切り抜き写真＋品名＋税込バッジ＋価格の縦積みにする
• クーポンは全幅カードを縦に並べる
• CTA はセクションの間に 4 回以上入れる

Elevation & Depth

• カードには下方向に弱い影（0 4px 12px、透明度 10%）をつける
• ボタンは下に濃い色の 2px の影を入れて立体感を出す
• 切り抜き商品写真には柔らかい落ち影をつける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物は角丸の長方形、商品は背景を抜いた切り抜き
• セクション境界: 斜めのカット（左上がり・右上がり）でつなぐ
• カラー帯は斜めにして動きを出す
• クーポンは両側を半円で切り欠き、点線のミシン目を入れる
• プレゼント品の背後には星形やギザギザの形を置く
• 数量バッジは白い線の円で囲む

Components

• 店舗検索 CTA（button-primary）: 濃紺のピル型で、左に地図ピンのアイコン。上にスラッシュで挟んだリード文を置く
• 詳しく見るボタン（button-secondary）: 色面の上に置く白いピル型。右端に矢印
• 男女の入口カード（gender-card）: 上半分が人物写真、下半分が青またはピンクのグラデーション面。英字ラベルとボタンを載せる
• クーポン券（coupon-ticket）: 色の太枠に白い面。左上に斜めのリボン、中央に巨大な割引表記、下にミシン目とバーコード
• 税込バッジ（price-badge）: 白い小さな四角に色文字で「税込」と入れ、価格の前に置く
• 切り欠き線つき見出し（heading-underline）: 紺の大見出しの下に、中央を吹き出し状に折った線を引く
• 応募ステップ（step-card）: 淡い水色のカードに白い円のイラストと STEP 番号。カードの間に下向きの三角を置く
• 着用商品リンク（link-pill-list）: 白い全幅のピル型を縦に3つ並べる。文字はセクションの色
• 斜め帯見出し（slanted-band）: 青またはピンク〜紫のグラデーションで斜めの帯を作り、白文字を載せる

Do's and Don'ts

Do - 男女の情報は必ず青とピンクの面で分ける - セクションの境目は斜めのカットで区切る - 価格と割引は大きな数字で目立たせる - CTA は同じデザインで何度も繰り返す - 空いた所に桜の花びらや星を散らして春らしさを出す

Don't - 暗い色やくすんだ色を大きな面に使わない - 細い明朝体で見出しを作らない - 男女の色を混ぜたり入れ替えたりしない - CTA の色を濃紺以外に変えない - 注釈を本文と同じ大きさにしない

Page Structure

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

1. ファーストビュー（男女のモデルでフェアの印象を伝える）: 男性と女性の写真を縦に積み、ロゴ風の見出しを重ねる。下に紺の帯とCTA
2. 男女の入口（男女別のページへ誘導する）: 左に写真、右に色面と英字ラベルを置いたカードを2枚
3. セット価格の訴求（一式の価格を見せる）: 紺の枠のカードに大きなピンクの価格
4. メンズのセット内容（含まれる品目と価格を示す）: 青のグラデーション面に商品の切り抜きを 2 カラムで並べ、最後に点数の円バッジ
5. レディースのセット内容（同じく女性用の品目を示す）: ピンクのグラデーション面で、構成はメンズと同じ
6. 店舗クーポン（来店時の割引を示す）: CTA の下に、青とピンクのチケット形カードを縦に並べる
7. プレゼントキャンペーン（抽選の景品と応募方法を伝える）: 雲形のタイトル、景品カード、黄色マーカーの金額、期間、STEP カード、規約のスクロール枠
8. 限定特典（おまけの品をアピールする）: 緑の枠と緑のポップな文字で、ほかと区別する
9. スタイルの選択（男女のページへもう一度誘導する）: 切り欠き線つきの見出しと、男女のカード
10. 動画（CM で話題性を高める）: 星を散らした白い地に縦型スライダー。続いて青とピンクに斜めで分けた面に動画のサムネイル
11. 着用商品の紹介（スタイルごとの商品へ誘導する）: スタイルごとに色を変えたグラデーション面に全身の切り抜きとロゴを置き、リンクのピルを並べる
12. フッター（SNS・アプリ・公式サイトへ誘導する）: 濃紺の地に CTA と白いカードを置き、アイコンを並べる

Imagery

• 人物は明るいスタジオ光で撮り、背景に桜の花びらを合成する
• 商品は白い地で撮って切り抜き、柔らかい落ち影をつける
• 全身写真は足元に淡い影をつけ、色面の中央に立たせる
• イラストは紺の線に淡いピンクで塗った、太めの線画にする
• 星、キラキラ、桜を散らしてにぎやかさを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 70% 幅で配置し、男女のコンテンツを左右 2 カラムに並べる
• PC では斜めの面を左右で青とピンクに分ける
• PC ではクーポンを横長にし、バーコードを右端に置く
• PC では景品やステップを横並びにする
• PC では CTA の横幅を約 70% に抑えて中央に置く

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