--- version: alpha name: Cosmic Night Collab Dessert Campaign LP description: 深い紺の星空背景に、立体的な白抜きゴシック見出しとベージュゴールドの囲みを組み合わせた、ゲームコラボの期間限定スイーツ告知 LP。商品ごとに大きな切り抜き写真、説明文、価格帯、注釈を繰り返す構成。 colors: primary: '#14458D' background: '#062B44' dark-section: '#142A43' secondary: '#E3C293' surface: '#E8E9DA' accent-1: '#1269A0' on-dark: '#FFFFFF' text: '#1B3062' accent-2: '#E0459A' accent-3: '#F8D22A' line: '#E2E7ED' marker: '#E3243B' text-muted: '#C9CED8' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Dela Gothic One fontSize: 26px fontWeight: 900 lineHeight: 1.25 headline-md: fontFamily: Montserrat fontSize: 34px fontWeight: 900 lineHeight: 1.1 headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 6px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-link: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px heading-3d: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 70px price-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 130px bonus-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 480px item-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 44px badge-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 56px note-list: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 80px --- # DESIGN.md — 星空ネイビー×ゴールドのコラボスイーツ LP（Cosmic Night Collab Dessert Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、力強い・インパクト、かわいい、情報量多め・訴求型 - **キーワード**: 星空・宇宙・立体見出し・切り抜き商品写真・ゴールド囲み・期間限定 - **地の質感**: 粒状の星が散る深紺の宇宙グラデーション背景に、光るグロー付き切り抜き写真を重ねる - **形**: ピル型ナビボタン、角丸大のベージュ囲みパネル、円弧のセクション境界 - **温度感**: 寒色主体で、金色と黄色の星で暖かみを差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#14458D` | ブランド紺（セクション地） | 12% | 画素の実測 | | `background` | `#062B44` | 宇宙背景の深紺 | 35% | 画素の実測 | | `dark-section` | `#142A43` | 価格帯の暗い帯 | 7% | 画素の実測 | | `secondary` | `#E3C293` | ゴールドベージュの囲み・特典パネル | 8% | 画素の実測 | | `surface` | `#E8E9DA` | ナビボタンの淡い面 | 4% | 画素の主要色に補正 | | `accent-1` | `#1269A0` | 商品名帯の青 | 3% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗地上の白文字 | 3% | 推定 | | `text` | `#1B3062` | 明地上の紺文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#E0459A` | 特典見出しのマゼンタ | 1% | 推定 | | `accent-3` | `#F8D22A` | 星の黄色 | 1% | 推定 | | `line` | `#E2E7ED` | 価格下の白枠線 | 0% | 画素の実測 | | `marker` | `#E3243B` | NEWバッジの赤 | 0% | 推定 | | `text-muted` | `#C9CED8` | 注釈のグレー | 1% | 推定 | - 地は深紺の星空で統一し、白地のセクションは作らない - 特典・付属品の囲みはゴールドベージュの面で目立たせる - 見出しは白文字に紺の太い縁取りと影で立体化する - 価格帯はさらに暗い紺の帯に白の大きな数字 - 黄色の星・宝石型のカラフルな装飾を余白に散らす - 強調文字はマゼンタや水色のグラデで限定特典のみに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ | 装飾・ディスプレイ | Dela Gothic One | 900 | 34px | 1.2 | 0.0em | | `headline-lg` | 商品名の立体見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 26px | 1.25 | 0.0em | | `headline-md` | 価格の数字 | 欧文サンセリフ | Montserrat | 900 | 34px | 1.1 | 0.0em | | `headline-sm` | サイズ名・帯ラベル | ゴシック | Zen Kaku Gothic New | 900 | 15px | 1.3 | 0.02em | | `body-md` | 商品説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.05em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `label-button` | ナビ・リンクボタン | ゴシック | Zen Kaku Gothic New | 900 | 14px | 1.3 | 0.02em | - 見出しは極太で縁取り＋ドロップシャドウ - 見出しは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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-03fba7c1`（元 LP の URL から採番） - **元 LP**: https://www.br31.jp/contents/topics/260401_02.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（5/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。