DESIGN.md — パステル虹色グラデのアイドルコラボ菓子 LP（Pastel Y2K Holographic Idol Collab Candy LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、クール・先進的
• キーワード: パステルグラデーション・Y2K・ホログラム・3D オブジェクト・ネオン紫・カルーセル
• 地の質感: つるっとした光沢と発光感。ぼかした光のハロー、グロス感のある 3D 小物、半透明の白いカード。
• 形: 大きな角丸カード、うさぎ耳のようなタブ付きフレーム、雲形の波線で区切るセクション境界、ピル型ボタン。
• 温度感: 明るく甘めのパステルで、ピンク・紫・ミントを行き来する。楽しく少し未来的。

Colors

• 地は縦方向にピンク→紫→青→ミントへ移るパステルグラデーションにする。
• 中央の本文レーンは左右帯より一段淡い色にし、白カードを浮かせる。
• 見出しは紫のネオン系グラデ文字で、白い縁と発光を付ける。
• 商品カードはフレーバー色（緑・灰・赤・黄・青）で枠とボタンを塗り分ける。
• 主 CTA は紫のピルに白文字。外部誘導だけ黒ピルにする。
• フッターは白地で装飾を減らす。
• ear-frame-carousel は文字 #FFFFFF × 背景 #56CAE4 のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#188198、4.53:1）を使う。
• label-ribbon は文字 #FFFFFF × 背景 #F27BC8 のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DD1697、4.53:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #9A5AE6 のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9653E5、4.5:1）を使う。

Typography

• 大見出しは丸みのある太い欧文にし、紫グラデ・白フチ・外側の発光を付ける。
• 見出しの背後にハート型の淡い光を置く。
• 本文は中央揃えの短い行で、紫系の色にする。
• 斜体の見出しは青紫グラデで白い縁取りを付ける。
• 商品説明は小さめにして、3〜4 行でまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。動画と商品は 2 列グリッドかカルーセル。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央にコンテンツレーンを置き、左右に色帯を見せる。
• 動画は白い角丸カードにまとめる。
• 人物ごとの動画は左右がはみ出すカルーセルにして、矢印とドットを付ける。
• 商品カードは 2 列で並べ、端数のカードは中央に寄せる。
• セクション見出しの周りに 3D 小物を浮かせる。

Elevation & Depth

• 白カードに淡い色付きの外側グロー（ぼかし 20px 前後）を付ける。
• 商品カードは同系色の淡い影を付けて浮かせる。
• 3D 小物にはやわらかい落ち影を付ける。
• ボタンの影はごく薄くする。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 動画サムネは角丸の長方形。縦長動画は太い色枠付きの角丸フレーム。
• セクション境界: 白い雲形の波線（スカラップ）で区切り、グラデーションでつなぐ。
• フレーム上部に 2 本の耳タブを付けて、うさぎ耳風にする。
• 再生ボタンは半透明の白い円にする。
• ラベル帯は横長のグラデーションピルにする。

Components

• 発光ネオン見出し（heading-glow）: 紫グラデの欧文の後ろにハート型の光を置き、3D 小物を添える。
• 動画まとめカード（video-card）: 白い角丸カードに 2 列のサムネを並べる。New バッジとキャプション付き。
• 耳付きフレームカルーセル（ear-frame-carousel）: 色枠付きの動画カードを横に並べ、上部に耳タブを付ける。下に矢印とドット。
• グラデラベル帯（label-ribbon）: ピンク→水色のピルに白文字で小見出しを入れる。
• フレーバー商品カード（product-card）: 人物写真とパッケージを載せ、フレーバー色の枠を付ける。説明文と四角い詳細ボタン入り。
• 商品詳細ピルボタン（button-primary）: 紫のピルに白文字と右矢印を入れる。
• New バッジ（badge-new）: 紫の小さな角丸に白い欧文。
• SNS 誘導黒ボタン（button-sns）: 黒いピルに白文字。フッター手前で使う。

Do's and Don'ts

Do - 地は必ずパステルの縦グラデーションにする。 - 見出しのまわりにハート・星・惑星・うさぎなどの 3D 小物を散らす。 - カードは白か淡い色にし、角丸とグローで浮かせる。 - 動画や人物はカルーセルで見せる。 - 商品はフレーバー色で塗り分ける。

Don't - 暗い色の大きな面を使わない。 - 角の立った四角いカードにしない。 - 明朝体や落ち着いた書体を使わない。 - 装飾で本文の可読性を落とさない。 - 原色のベタ塗り背景にしない。

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 人物の集合写真の周りに 3D 小物を配置し、下部にネオン調のロゴを重ねる。
2. コンセプト（メッセージを短く伝える）: ハートの光の上に見出しを置き、中央揃えで短いリード文を並べる。
3. 動画一覧（CM やメイキング動画を見せる）: 白い角丸カード 2 枚に 2 列のサムネを並べる。
4. メンバー別動画（人物ごとの動画を回遊させる）: 耳付きの色枠カードを並べたカルーセル。
5. 縦型ショート動画（SNS 向けの動画を見せる）: 縦長の色枠フレームを 3 枚並べたカルーセル。斜体の見出しを付ける。
6. 新商品紹介（主力の新商品を訴求する）: パッケージのカルーセルと説明カードに、詳細ボタンを付ける。
7. 商品ラインナップ（フレーバーごとの商品を紹介する）: ラベル帯の下に、色分けした 2 列の商品カードを並べる。
8. その他の商品（関連商品へ誘導する）: 紫系のパッケージ画像付き小カードに、詳細ボタンを付ける。
9. プロフィール（起用した人物を紹介する）: 白いカードに紫の小さな文字で紹介文を入れ、大きな写真を載せる。
10. SNS・フッター（公式 SNS と関連サイトへ誘導する）: 白地に黒ピルボタン、バナー 2 列、シェアアイコンを置く。

Imagery

• 人物は明るいスタジオ光で、パステル背景の上で撮る。
• うさぎ・ロケット・惑星・星・ハート・音符を、光沢のある 3D レンダーで描く。
• ぼかした光の玉、雲、きらめきを散らす。
• 商品パッケージは正面から撮り、フレーバーの果物を 3D で添える。
• 動画サムネには半透明の白い再生アイコンを重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左右に色帯を出し、中央のコンテンツ幅は約 75%。SP は帯を細くして幅 90%。
• PC の 2 列動画グリッドは、SP では 1 列か横スクロールにする。
• 商品カードは SP でも 2 列を保つか、1 列の大きいカードにする。
• 3D 小物は SP では数とサイズを減らす。
• カルーセルは SP で左右のカードを少しはみ出させる。

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