DESIGN.md — ピンク柄×虹色アイドルのポップなキャンペーンLP（Pink Idol Pop Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、情報量多め・訴求型
• キーワード: ピンク柄背景・ハート装飾・虹色メンバーカラー・極太英字見出し・段ボール小物・動画埋め込み
• 地の質感: ハート・ダイヤ・ストライプ・ドットの細かい柄をセクションごとに変え、フラットで紙っぽい質感を出す
• 形: 角丸カード、ピル型ボタン、セクション下端の濃ピンク帯（床）
• 温度感: 暖色寄り。甘いピンクの中に原色をちりばめる

Colors

• 地はピンク系 3〜4 段の明度差で柄を作り、セクションごとに柄を変える
• 見出しと床帯とボタンは濃ピンクで揃える
• メンバーごとの色はカードの名前帯と写真の枠だけに使う
• 本文は白地またはごく淡いピンク地に濃いグレーで書く
• フッターだけ黒に近いグレーにして本編と区切る
• name-bar は文字 #FEF7F9 × 背景 #FB3324 のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E31404、4.55:1）を使う。
• button-hero-cta は文字 #CE4569 × 背景 #FEFDFD のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CD4367、4.5:1）を使う。
• button-primary は文字 #FEF7F9 × 背景 #E0466E のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DB2554、4.51:1）を使う。
• corner-badge は文字 #FEF7F9 × 背景 #E0466E のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DB2554、4.51:1）を使う。

Typography

• 英字見出しは極太で濃ピンクにし、左右に小さなハートを置く
• 本文はすべて中央揃えの太字にし、文末にハート記号を使う
• 透かし英字は淡いピンクで背景に大きく敷き、上下反転させてもよい
• フッターは細字で左揃えのリンク一覧にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メンバーカードは写真と名前ブロックを左右交互に置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 各セクションは中央揃えで英字見出し、リード文、本体の順に並べる
• 動画は 16:9 で幅いっぱい近くに、黒い角丸枠をつけて置く
• セクション末尾にメンバー集合写真を立たせ、濃ピンクの床帯で締める
• メンバーカードは写真と白い説明カードを少し重ね、左右交互にジグザグ配置する

Elevation & Depth

• 白カードに薄い影（0 2px 6px rgba(0,0,0,0.1)）
• 動画枠は濃色フチで浮かせ、影はほとんどつけない
• 切り抜いた小物にはごく弱い落ち影をつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: メンバー写真は角丸の正方形にし、メンバー色の太枠と縦書き英字ラベルをつける。集合写真は人物の切り抜き
• セクション境界: 直線で区切る。区切りの上には濃ピンクの床帯と切り抜き人物を置く
• ボタンは全部ピル型にし、右端に矢印をつける
• 名前帯は角丸の小さめバーにする
• 大きな誘導ボタンは白地のピル型にし、濃ピンクの文字を入れる

Components

• ハート挟み英字見出し（heading-heart）: 極太の英字を濃ピンクで書き、左右に小さなハートを 2 つずつ置く
• メンバーカード（member-card）: 色枠の角丸写真の横に白カードを置く。上にメンバー色の名前帯、その下に色付きの小見出しと説明を入れる
• メンバー色の名前帯（name-bar）: カードの上にメンバー色で塗った細いバーを置き、白文字で名前を書く
• 動画埋め込み枠（video-frame）: 黒い角丸フチで囲んだ 16:9 の動画を置く
• 大型白ピル誘導（button-hero-cta）: 白地のピル型ボタンに濃ピンクの太字と右矢印を入れる。人物写真の下端に重ねる
• 濃ピンクのボタンリスト（button-primary）: 濃ピンクのピル型ボタンを縦に 6 本並べる。白文字で、右に矢印、左上に小さな光沢点をつける
• 床帯（floor-band）: セクションの下端に濃ピンクの帯を敷き、切り抜いた人物と段ボールを立たせる
• 丸バッジ（corner-badge）: ファーストビューの右下に置く濃ピンクの円形バッジ。白フチと白文字を使う

Do's and Don'ts

Do - セクションごとにハート、ストライプ、ダイヤ、ドットと柄を変える - 段ボールやガムテープなどテーマの小物を切り抜いて散らす - メンバー色は名前帯と写真の枠だけに限定して使う - テキストは短い行で中央揃えにし、ハート記号で語尾を可愛くする

Don't - 寒色系やモノトーンを本編の地色に使わない - 細い明朝体や角ばった硬い見出しを使わない - 柄の上に直接小さな本文を置かない（白カードを敷く） - ボタンを四角にしない

Page Structure

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

1. ファーストビュー（キャラクター群で一目で惹きつける）: ピンクのパッチワーク柄の上にポップなロゴと集合写真を置き、右下に丸バッジをつける
2. ストーリー（キャラの世界観を説明する）: 淡いピンク地に透かし英字を上下に敷き、中央揃えの太字文を置く。周りに小物を散らす
3. TVCM 動画（広告動画を見せる）: ハート柄の地に見出しとリード、動画枠を置き、下に床帯と集合写真を入れる
4. ミュージックビデオ（楽曲動画を見せる）: ストライプ地の上に動画枠を置き、末尾に床帯をつける
5. メンバー紹介（各キャラとサービスの特長を結びつける）: ダイヤ柄の地にメンバーカード 9 枚を左右交互に並べる
6. SNS 動画（SNS での拡散を促す）: ドット地に縦長の SNS 埋め込みを白カードで縦に並べる
7. CTA（本サービスへ誘導する）: ストライプ地に人物の顔写真を置き、白い大型ピルボタンを重ねる。その下に濃ピンクのボタンを 6 本並べる
8. フッター（運営情報とサイトマップを示す）: 濃いグレー地に運営者の情報とリンクの階層リスト、注釈を置く

Imagery

• カラフルなドレス衣装の人物を明るく均一なライティングで撮り、背景は切り抜く
• 集合写真は横一列に立たせた全身ショットにする
• メンバー写真はバストアップで、メンバー色の背景にする
• 段ボール・軍手・ガムテープなどの小物をリアルな写真で切り抜いて散らす
• ロゴは虹色のハートと白フチの立体文字でステッカー風にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の約 75% 幅にコンテンツを収め、柄の背景は全幅に敷く
• PC のメンバー紹介は写真を上にした縦型カードを 3 列 × 3 段のグリッドで並べる
• PC の SNS 埋め込みは 2 列にし、左右の余白に注意ラベル風の装飾を置く
• PC の誘導ボタンは 3 列 × 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 行書くと起動時に読み込まれる。