DESIGN.md — 星空ネイビー×ゴールドのコラボスイーツ LP（Cosmic Night Collab Dessert Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、かわいい、情報量多め・訴求型
• キーワード: 星空・宇宙・立体見出し・切り抜き商品写真・ゴールド囲み・期間限定
• 地の質感: 粒状の星が散る深紺の宇宙グラデーション背景に、光るグロー付き切り抜き写真を重ねる
• 形: ピル型ナビボタン、角丸大のベージュ囲みパネル、円弧のセクション境界
• 温度感: 寒色主体で、金色と黄色の星で暖かみを差す

Colors

• 地は深紺の星空で統一し、白地のセクションは作らない
• 特典・付属品の囲みはゴールドベージュの面で目立たせる
• 見出しは白文字に紺の太い縁取りと影で立体化する
• 価格帯はさらに暗い紺の帯に白の大きな数字
• 黄色の星・宝石型のカラフルな装飾を余白に散らす
• 強調文字はマゼンタや水色のグラデで限定特典のみに使う

Typography

• 見出しは極太で縁取り＋ドロップシャドウ
• 見出しは2行に改行し中央揃え
• 説明文は白の細めゴシックで左揃え
• 価格は円記号込みで特大の太字、サイズ名を上に小さく
• 注釈は※付きで小さく価格帯の下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、FV直下のナビのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品ごとに見出し→写真→付属品→説明→価格→注釈を繰り返す
• 写真は画面幅いっぱい近くまで大きく配置
• 付属品は写真の右下に円形や星型で重ねる
• 価格帯は全幅の暗帯で区切る
• セクション間に細い明色ラインまたは円弧を入れる

Elevation & Depth

• 切り抜き写真に白〜水色の外側グロー
• 見出し文字に紺の厚い影
• ナビボタンに軽い下影
• パネル類は影なしのフラット

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品・キャラは背景を抜いた切り抜き、付属品は円形やギザ星型フレーム
• セクション境界: 上向き円弧の明るい境界線、または細い水平ライン
• ナビとリンクはピル型
• 特典囲みは大きめ角丸
• ラベルは楕円ピル
• 番号・個数は円バッジ

Components

• 商品ナビボタン（nav-pill）: 左に商品サムネ、中央に紺太字、右に紺丸の下矢印を置いたピル
• 詳細リンクボタン（button-link）: 淡色ピルに紺文字と右矢印の丸アイコン
• 立体商品見出し（heading-3d）: 白の極太文字に紺の縁取りと影をつけ中央に2行で置く
• 価格帯（price-band）: 暗紺帯にサイズ名と特大価格、下に白線ピルで選び方を案内
• 特典パネル（bonus-panel）: ゴールドベージュの角丸囲みに、期間タブ・青帯の対象商品・マゼンタ見出しを重ねる
• 商品名ラベル帯（item-label）: 青い角丸帯に白文字で付属品名を表示
• 円・星形バッジ（badge-circle）: 数量限定・個数・裏面などを白円やギザ星の中に短く書く
• 注釈リスト（note-list）: ※始まりの小さな白文字を行頭揃えで並べる

Do's and Don'ts

Do - 背景は常に星粒のある深紺の宇宙で統一する - 商品写真は大きく切り抜き、光のグローを付ける - 各商品ブロックは同じ順序で反復する - 限定・期間情報は円バッジや期間タブで強調する - 余白にカラフルな星や宝石の装飾を散らす

Don't - 白やグレーの無地背景セクションを作らない - 細い明朝体を見出しに使わない - 価格を小さく本文に埋め込まない - ゴールド囲みを特典以外に多用しない - 写真を四角いまま枠に入れて並べない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 宇宙背景にキャラ大写真と極太白キャッチを斜め配置
2. コラボロゴ・期間帯（コラボ相手と販売期間を示す）: 斜めの紺帯にロゴ2つと円形の期間バッジ
3. 商品ナビ（各商品へジャンプさせる）: 2列のピルボタン、特典は全幅のゴールドボタン
4. 新作フレーバー（主役商品を紹介）: 明るい紺地に多色ロゴ見出し、光る球体写真、説明文、詳細ボタン
5. 限定カップ商品（デザインカップを訴求）: 円弧で区切り、立体見出し、付属品の吹き出し、価格帯、注釈
6. 購入特典（購入で貰える特典を伝える）: ゴールド角丸パネルに期間タブ、青帯、マゼンタ見出し
7. サンデー商品（トッピングや付属品を紹介）: 写真横にピック一覧の紺カード、スリーブ展開図をベージュ囲みで
8. セット商品（大容量セットとおまけを訴求）: 箱写真、カップ並び、ベージュ囲みにエコバッグ表裏
9. アプリ連動キャンペーン（来店チェックインを促す）: グレーの吹き出し帯、立体見出し、ステッカー画像、注釈、外部リンクボタン
10. フッター注意事項（法的注意を伝える）: 円弧で明るい紺に切替え、著作表記と注釈リスト

Imagery

• 商品は背景を抜いた切り抜き写真に白く発光する外側グローを付ける
• 背景は深紺〜青のグラデーションに細かい星粒と星雲
• カラフルな宝石型・星型の小さなオブジェを余白に散らす
• 付属品は円形やギザ星型の淡色フレームで拡大表示
• 表裏や組み立てを白い曲線矢印でつなぐ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅程度のコンテンツ列を置き、左右に宇宙背景を広げる
• ナビは PC で 3〜4 列に広げる
• 商品写真と説明文は PC で横並び 2 カラムも可
• 見出し・価格は PC で 1.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 行書くと起動時に読み込まれる。