DESIGN.md — 黒地×赤青黄ストライプの漫画コラボ懸賞LP（Bold Black Manga Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 黒地・三色斜めストライプ枠・極太ゴシック・黄色帯見出し・傾いた赤CTA・漫画コラボ
• 地の質感: ベタ塗りの黒地。縁取り付きの文字と斜めストライプで、漫画やゲームのような勢いを出す
• 形: 平行四辺形のボタン、太い帯の見出し、円形の商品台座、角丸の白カード
• 温度感: 高温。赤と黄が強く、熱量の高いお祭り感

Colors

• 地は全面を黒にし、左右の縁に赤・青・黄・白の斜めストライプを細く入れる
• 黄は見出しの帯・ラベル・当選数の数字だけに使う
• 赤は主CTAと作品紹介ブロックの地に絞る
• 赤・青・黄の3色は作品ごとのタブに割り当てて見分けられるようにする
• 情報量の多い手順・規約は白カードに置き、黒文字で読みやすくする
• 商品台座の淡色ストライプは商品ごとに色を変える
• product-disc は文字 #FFFFFF × 背景 #F6C6CC のコントラスト比が 1.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-dark-accessible（#595959、4.63:1）を使う。

Typography

• ほぼすべての文字を太字か極太にし、細い字は規約だけにする
• 見出しは白文字に黒の太い縁取りを付け、少し斜体にする
• 当選数などの数字は黄の極太で大きくし、単位は小さくする
• STEPの番号は斜体の欧文で大きく見せる
• 本文は中央揃えで短く改行する
• 規約と問い合わせは左揃えの小さな字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧と手順は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の縁に約12pxの斜めストライプ枠を固定する
• セクション見出しは横いっぱいの黄の線の中央に置く
• 商品は2列で、円の台座の上に写真、下に2行の商品名
• 賞品は1つずつカルーセルにし、点線の区切りで並べる
• セクション内へ移る3つのアンカーボタンを横に並べる

Elevation & Depth

• 影はほぼ使わない。縁取りと色の差で階層を表す
• 白カードは黒地の上に置き、影は付けない
• CTAは平行四辺形にして、立体感の代わりに傾きで目立たせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き写真を円形の淡いストライプ台座に重ねる。キービジュアルは長方形
• セクション境界: 黄の水平線の中央に見出しを重ねる。賞品同士は白の点線で区切る
• 主CTAは右上がりに傾けた平行四辺形にし、右端に三角の矢印を付ける
• ラベルは黄の帯で、両端を切り欠いたリボン形にする
• カルーセルの番号は円形。選択中は白、それ以外は暗い灰色
• SNSボタンは白い枠線だけの角丸四角

Components

• 傾いた主CTA（button-primary）: 赤い平行四辺形に白い斜体の極太文字と右向きの三角を置く
• 黄帯のセクション見出し（heading-band）: 横いっぱいの黄の線に、白文字＋黒縁取りの見出しを重ねる
• 黄色リボンラベル（label-ribbon）: 期間などの項目名を黄の帯に黒字で載せる
• 作品切替タブ（tab-work）: 赤・青・黄の3色タブに白縁取りの文字を載せる
• アンカーボタン（anchor-nav）: 黄の平行四辺形に黒縁取りの文字、下に白い矢印を3つ並べる
• 商品円台座（product-disc）: 淡いストライプの円に商品写真を重ね、下に商品名を白文字で入れる
• コース月桂冠バッジ（course-badge）: 黄の円に月桂冠と星を付け、中にアルファベットとコース名を入れる
• 番号付きカルーセル（carousel-dots）: 左右に灰色の円形矢印、下に円形の番号1〜5を並べる
• 手順カード（step-card）: 白カードの中に、黄の下線付きSTEP番号・線画アイコン・説明を2×2で並べる
• 規約スクロール枠（terms-box）: 白い角丸の枠にスクロールバーを付け、小さな文字の規約を入れる

Do's and Don'ts

Do - 地は黒に固定し、縁に三色の斜めストライプを入れる - 見出しは極太の縁取り文字にする - CTAは傾けた赤い平行四辺形にし、ページ内で2回以上置く - 数字や期間は大きく太く見せる - 作品ごとに赤・青・黄のどれかを割り当てる

Don't - 細い明朝体や繊細な書体を使わない - 淡い色の地や余白の多い上品な構成にしない - グラデーションや影を多用しない - 黄を本文に使わない - 角丸の大きいピル型ボタンにしない

Page Structure

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

1. ファーストビュー（コラボの世界観とタイトルを一目で伝える）: 上部に商品の帯。作品イラストを縦に3段重ね、間に傾けた極太のタイトル文字を挟む
2. 応募期間（期間と条件を明示する）: 黄のリボンラベルの下に白い極太の日付を2組置く
3. CTA（応募に誘導する）: 傾けた赤い平行四辺形のボタン
4. 作品紹介（コラボ作品と限定パッケージを見せる）: 3色タブで切り替える。赤い地にキャラクター・ロゴ・説明文・パッケージの2列グリッド
5. アンカーナビ（主要セクションへ移動させる）: 黄のボタン3つを横に並べ、下に矢印
6. 対象商品（対象となる商品を示す）: 円形台座に載せた商品写真を2列で並べ、最後に注記を入れる
7. SNSシェア（拡散を促す）: 白い枠線のボタン3つを横に並べる
8. 賞品（コースと賞品の魅力を伝える）: 月桂冠バッジと黄の当選数で示し、作品ごとのカルーセルを点線で区切る
9. 応募方法（手順をわかりやすく示す）: リード文のあと、白カードの中に4ステップを2×2で並べ、矢印でつなぐ
10. CTA（手順を読んだ人を応募へ導く）: 主CTAを再び置く
11. 応募規約（法的な情報を載せる）: 白い角丸のスクロール枠
12. お問い合わせ（問い合わせ先を案内する）: 黒地に白の極太見出し、本文は箇条書きの小さな白文字

Imagery

• コラボするキャラクターのイラストは、断ち切りで大きく使う
• 商品は切り抜き写真にし、少し傾けて動きを出す
• 賞品は白い背景の物撮りを黒地にそのまま置く
• 手順アイコンは黒い太線のアウトラインで、同じ線幅に揃える
• 漫画風の吹き出しや擬音の飛び散りで勢いを足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約900px幅で置き、左右の縁のストライプ枠はそのまま残す
• PCのファーストビューは、作品イラスト3枚を横に並べ、上にタイトルの帯を置く
• 対象商品はPCで3〜4列にする
• 賞品のカルーセルはPCで3列に並べ、縦の点線で区切る
• 手順はPCで4つを横一列に並べる
• 作品紹介は、PCではキャラクターと説明文を横に並べ、パッケージも6つを横一列にする

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