DESIGN.md — 黒地×マゼンタ紫のアイドルコラボ菓子LP（Dark Neon Candy Idol Collaboration LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ラグジュアリー・ダーク、ポップ・元気、クール・先進的
• キーワード: 黒地・ネオンの斜めライン・マゼンタ×紫・明朝の白文字・商品パッケージを主役にする・光る球体の装飾
• 地の質感: 黒いフラットな地に、光の筋のような半透明の斜め帯と細い円を重ねる。艶のある3Dのグミ粒をアクセントにする
• 形: 斜め45度の太い帯、細い線の円、ピル型のラベル、角丸の白いリンクカード
• 温度感: クールな黒の地に、甘いピンクと紫で温度を足す

Colors

• 地は黒が基本。動画セクションだけ紫の全面に切り替え、最後のリンク集は白に切り替える
• 見出しと商品名は白の明朝にする。カテゴリ名だけマゼンタか水色にする
• マゼンタ・紫・水色・赤は斜めの帯や細い円の装飾に使い、文字には多用しない
• 購入ボタンは白いバナーにマゼンタ文字で、暗い地の中で一番目立たせる
• SNSアイコンは各サービスの公式色の丸を使う

Typography

• 日本語の見出しは明朝体にして、大人っぽさを出す
• セクション見出しは文字ごとに上下へずらし、細い円の線と光る球体を重ねる
• 英字のステータスは細い縦長書体にして、頭文字だけ太く大きくする
• 本文はほとんど使わない。商品名・カテゴリ名・詳細リンクの3段だけにする
• ボタンやリンクの文字はゴシック体の太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCでは商品を2カラムのグリッドに並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品は1点ずつ縦に並べる。英字ステータス、パッケージ画像、カテゴリ名、商品名、詳細リンクの順に置く
• 英字ステータスはパッケージの左上に重ねる
• 商品同士の間は60〜80pxあけて、ゆったり並べる
• 動画は横幅いっぱいの16:9にして、下に暗いピル型のタイトル帯を置く
• フッターのリンクカードは横幅いっぱいにして縦に積む

Elevation & Depth

• 影はほとんど使わない。奥行きは光る線と球体で出す
• パッケージ画像にはごく弱い影を落として浮かせる
• グミ粒の装飾は3Dのハイライトで立体的に見せる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージは切り抜きか四角のまま。人物は4人を均等な縦長の四角に並べる
• セクション境界: 黒から紫へは斜めの切り替え。白のフッターへは直線で切り替える
• 装飾の帯は約30〜45度の斜めにそろえる
• 詳細リンクには白い丸に再生三角のアイコンを付ける
• 発売日のバッジは白い縁取りのある暗いピル型にする
• リンクカードは白い面に細い灰色の枠線と角丸10pxを付ける

Components

• 明朝の見出しと軌道の装飾（section-title-orbit）: 明朝体の見出しの周りに細い円を重ね、青とマゼンタの小さな光る球体を置く。下に小さな英字を添える
• 英字のステータスラベル（status-label）: 新商品・リニューアルを示す白い英字。頭文字だけを太く大きくし、商品画像の左上に重ねる
• 商品ブロック（product-block）: パッケージ画像の下に、色付きのカテゴリ名、白い明朝の商品名、グレーの詳細リンクを中央ぞろえで置く
• 詳細リンク（link-detail）: 小さなグレーの文字の横に、白い丸と再生三角のアイコンを付ける
• 発売日のピル型バッジ（badge-date）: 暗い面に白い文字と白い縁取りを付けたピル型。商品名の下に置く
• 動画タイトルの帯（video-caption）: 動画の下に置く暗い半透明のピル型の帯。白い太字で作品名を入れる
• 購入誘導のバナー（button-primary）: 白い横長のバナー。左にカートと商品、中央にマゼンタの大きな文字、右に三角の矢印を置く
• SNSの丸アイコン（sns-icons）: 各サービスの公式色で塗った大きな丸を4つ横に等間隔で並べる
• 関連サイトのロゴカード（link-card）: 白い地に灰色の細い枠線を付け、ロゴを中央に置いたカード。SPでは縦に3枚積む

Do's and Don'ts

Do - 黒の地を広くとり、商品パッケージを一番鮮やかな要素にする - 斜めのネオン帯と細い円を背景にうっすら敷いて、動きを出す - 商品名は白の明朝、カテゴリ名はマゼンタか水色で、色と書体を分ける - 動画セクションは紫の全面にして、セクションの切り替わりをはっきり見せる - 購入バナーは白い面にして、暗いページの中で目立たせる

Don't - 明るいパステル調の地で全体を作らない - 長い説明文を並べない - 見出しを太いゴシック体にしない - 装飾の線を太くしすぎて商品に重ねない - 白い面のセクションをページの途中に挟まない

Page Structure

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

1. ヘッダー（コラボ相手を示し、メニューへ案内する）: 白い帯の中央左にブランドロゴ×コラボロゴを置き、右にハンバーガーメニューを置く
2. ファーストビュー（人物と商品で、コラボの世界観を一目で伝える）: 黒地の上部に白い明朝の短いコピーを置き、商品を持つ人物4人を横に並べる。下に商品パッケージを3点並べる
3. 商品紹介の見出し（商品一覧の始まりを示す）: 軌道の装飾付きの明朝の見出しと、小さな英字を中央に置く
4. 商品ラインナップ（リニューアル品と新商品を1点ずつ見せる）: 英字ステータス、パッケージ、カテゴリ名、商品名、詳細リンクのブロックを縦に繰り返す。背景にネオンの斜め帯を敷く
5. 新商品の告知（発売日を伝える）: 英字ステータスと赤い大きな円の装飾を背景に置き、商品名の下に発売日のピル型バッジを付ける
6. 装飾の区切り（商品紹介から動画への間をつなぐ）: 3Dのグミ粒を2つ、細い円に囲んで浮かべる
7. テレビCM（CM動画を見てもらう）: 紫の全面にぼかした商品写真の斜め帯を置き、埋め込み動画とピル型のタイトル帯を縦に並べる
8. 購入CTA（公式通販へ送る）: 黒い帯の上に、白い横長の購入バナーを1本置く
9. SNS・関連リンク（公式SNSと関連サイトへ回遊させる）: 白い地に4つのSNSの丸アイコンを並べ、その下に枠付きのロゴカードを積む
10. フッター（権利表記を示す）: 上に細い線を引き、中央にコピーライトを置く

Imagery

• 人物はモノクロ寄りの低彩度で、暗い背景に寄りで撮る。商品を指でつまんで見せるポーズにする
• 商品パッケージは正面から撮って切り抜き、鮮やかな色をそのまま見せる
• 背景の斜め帯は、マゼンタ・紫・水色・赤の光の筋のように半透明で描く
• 細い円の線と小さな光る球体を散らして、宇宙や軌道のような雰囲気を出す
• グミ粒は艶のある3DCGにして、ピンクや水色の粒を浮かべる
• 動画セクションの背景には、果物や商品の色を大きくぼかした斜めの帯を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは商品紹介を左の見出しと右の2カラムグリッドに分け、商品を2つずつ並べる
• PCでは見出しを左に寄せ、グミ粒の装飾も左側にまとめる
• PCでも動画は1カラムで大きく見せる。幅はコンテンツ幅の約90%にする
• PCの購入バナーは中央に置き、幅を約60%にする
• PCではSNSアイコンを小さくし、ロゴカードを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 行書くと起動時に読み込まれる。