---
version: alpha
name: Galaxy Night Collab Ice Cream LP
description: 前半は深い宇宙ネイビーに星のきらめきを重ねて没入感を出し、後半は水色の地にピンクのピル型ボタンと紫の表で情報を整理する。新作フレーバーを紹介する期間限定のコラボ LP。
colors:
  primary: '#1C253B'
  background: '#C3EBF3'
  cta: '#F04E9A'
  on-cta: '#FFFFFF'
  secondary: '#743BBC'
  tint-1: '#BD9FDE'
  surface: '#FFFFFF'
  accent-1: '#C9BB98'
  dark-section: '#0B2647'
  on-dark: '#FFFFFF'
  accent-2: '#0F4CB0'
  text: '#202D31'
  background-alt: '#BCE9EE'
  text-muted: '#999999'
  cta-accessible: '#E31375'
  text-muted-accessible: '#757575'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.1
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.2
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.5
    letterSpacing: 0.02em
  accent:
    fontFamily: Playfair Display
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 6px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-pill:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  button-bar:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 40px
  point-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    height: 32px
  circle-photo:
    rounded: '{rounded.full}'
    height: 260px
  story-panel:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 300px
  product-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 220px
  badge-new:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.cta}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 70px
  allergy-grid:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 330px
  part-label:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    height: 24px
---

# DESIGN.md — 星空ネイビー×ピンクのコラボアイス LP（Galaxy Night Collab Ice Cream LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型
- **キーワード**: 宇宙・星のきらめき・コラボ・新作フレーバー・ポップ・グラデーション
- **地の質感**: 写真の星空とレンズフレアの光彩。後半はフラットな水色地。
- **形**: 円形の写真切り抜き、角丸カード、ピル型ボタン、斜めのセクション境界。
- **温度感**: 前半は寒色で幻想的。後半はピンクが入って明るく、親しみやすい。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#1C253B` | 宇宙背景の濃紺 | 30% | 画素の実測 |
| `background` | `#C3EBF3` | 後半の水色地 | 20% | 画素の実測 |
| `cta` | `#F04E9A` | ピンクのボタン・見出し | 3% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン文字 | 1% | 画素の主要色に補正 |
| `secondary` | `#743BBC` | 表ヘッダーの紫 | 2% | 画素の実測 |
| `tint-1` | `#BD9FDE` | 表ヘッダーの淡紫 | 1% | 画素の実測 |
| `surface` | `#FFFFFF` | カード・表セルの白 | 8% | 画素の主要色に補正 |
| `accent-1` | `#C9BB98` | ポイント見出しの金 | 1% | 画素の実測 |
| `dark-section` | `#0B2647` | 開発秘話の半透明パネル | 4% | 画素の主要色に補正 |
| `on-dark` | `#FFFFFF` | 暗い地の白文字 | 2% | 画素の主要色に補正 |
| `accent-2` | `#0F4CB0` | おすすめ帯の鮮やかな青 | 6% | 推定 |
| `text` | `#202D31` | 明るい地の本文 | 1% | 画素の実測 |
| `background-alt` | `#BCE9EE` | 注意書きの淡い水色帯 | 2% | 画素の実測 |
| `text-muted` | `#999999` | 表セルの灰色文字 | 0% | 推定 |
| `cta-accessible` | `#E31375` | AA を満たす補正値（計算） |  | 計算 |
| `text-muted-accessible` | `#757575` | AA を満たす補正値（計算） |  | 計算 |

- 前半の商品紹介は濃紺の星空写真を全面に敷き、文字は白にする。
- ポイント見出しは金色の欧文セリフ体にし、細い金の線を添える。
- 後半の情報エリアは水色地にして、白いカードと白枠の動画を置く。
- 主ボタンと見出しはピンク一色に統一する。
- アレルギー表とカロリー表は紫系でまとめ、該当するセルだけ濃い紫で塗る。
- おすすめのブロックは青から黄色への鮮やかなグラデーション地にする。
- `button-pill` は文字 `#FFFFFF` × 背景 `#F04E9A` のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E31375`、4.55:1）を使う。
- `button-bar` は文字 `#FFFFFF` × 背景 `#F04E9A` のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E31375`、4.55:1）を使う。
- `badge-new` は文字 `#F04E9A` × 背景 `#FFFFFF` のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E31375`、4.55:1）を使う。
- `allergy-grid` は文字 `#999999` × 背景 `#FFFFFF` のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#757575`、4.61:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 商品名ロゴ風タイトル | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.0em |
| `headline-lg` | セクションの大見出し（斜体の白文字にピンクの影） | ゴシック | M PLUS Rounded 1c | 900 | 34px | 1.2 | 0.0em |
| `headline-md` | リード文・ピンク見出し | ゴシック | Noto Sans JP | 900 | 22px | 1.5 | 0.02em |
| `accent` | Point 番号 | 欧文セリフ | Playfair Display | 700 | 22px | 1.2 | 0.02em |
| `headline-sm` | カード見出し・部位ラベル | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.9 | 0.05em |
| `note` | 注釈・表セル | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.02em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.0 | 0.05em |

- 本文も太字寄りにし、暗い地の上でも読みやすくする。
- 見出しは中央揃え、本文は左揃えで均等割り付け気味にする。
- 小見出しは「＼ ／」で挟む装飾にする。
- 欧文セリフ体は Point 番号だけに使う。
- 大見出しは斜体のゴシックにピンクの影を付けて立体感を出す。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。ポイント部分は写真と文章を左右交互に配置する。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- ポイントは円形の写真と文章を左右交互に並べる。
- おすすめのカードは写真をカードの外へはみ出させる。
- ボタンは横幅 88% の 1 本か、2 本並びにする。
- アレルギー表は 4 列のグリッドにする。
- セクションの間は十分に空けて、星空写真を見せる。

## Elevation & Depth

- 白いカードには、青みのある淡い影をずらして付ける。
- 動画枠は白い太枠に、灰色の影を付ける。
- 商品写真には白い光彩とレンズフレアを付ける。
- 暗いパネルは半透明の濃紺にし、影は付けない。

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 拡大写真は細い銀枠付きの円形に切り抜く。商品写真は背景を抜く。
- **セクション境界**: 宇宙エリア内は斜めの光の線で区切る。明るいエリアとの境は直線にする。
- サブボタンはピル型のピンクにし、右端に白丸の矢印を付ける。
- 大きなボタンは角丸 sm の長方形にする。
- カードは角丸 lg にする。
- 表は紫の細線で囲み、外枠を角丸にする。

## Components

- **ピンクのピルボタン**（`button-pill`）: 白文字に白丸の矢印アイコンを付けた詳細リンク
- **情報見出しのボタンバー**（`button-bar`）: 横幅いっぱいのピンクの帯で、情報見出しを兼ねる
- **Point 見出し**（`point-heading`）: 金色の欧文セリフ体に、細い金の下線を付ける
- **円形の拡大写真**（`circle-photo`）: 素材のアップを銀枠付きの円に収め、吹き出し型の小円を添える
- **開発秘話パネル**（`story-panel`）: 半透明の濃紺パネル。上部にアイコン付きの見出しを置く
- **おすすめ商品カード**（`product-card`）: 白いカードにピンク見出しとピンクの下線を付け、商品写真をはみ出させる
- **新作バッジ**（`badge-new`）: 白丸に月数と NEW のピンクのリボンを付けたバッジ
- **アレルギー表**（`allergy-grid`）: 4 列の白いセル。該当するセルだけ紫地に白文字
- **部位ラベル**（`part-label`）: 商品の部位を、金色の文字と細い引き出し線で示す

## Do's and Don'ts

**Do**
- 前半は星空の写真を途切れさせずにつなげる。
- 商品写真は大きく中央に置き、光彩を付ける。
- ボタンと見出しのピンクは 1 色に揃える。
- 注釈は淡い水色の帯にまとめる。
- 写真と文章は左右交互に配置して、リズムを作る。

**Don't**
- 宇宙エリアに白いベタ地を挟まない。
- ピンク以外の色をボタンに使わない。
- 細い明朝体を本文に使わない。
- 表の該当セル以外を濃い色で塗らない。
- 写真を四角いままベタ貼りしない。

## Page Structure

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

1. **ファーストビュー**（コラボであることと新作の商品名を一目で伝える）: 上部にロゴと新作バッジ、その下に多色のディスプレイ書体の商品名を置く。星空の上に光る商品写真とキャラクターを配置する。
2. **商品の概要**（味の組み合わせを伝える）: 白い太字のリード文を 3 行、中央揃えで置き、その下に左揃えの本文を続ける。
3. **商品の構成図**（素材の内訳を見せる）: 商品の拡大写真に、金色の引き出し線と部位ラベルを付ける。
4. **特長（Point）**（色やお菓子のこだわりを伝える）: 円形の写真と金色の Point 見出しの文章を、左右交互に配置する。
5. **開発秘話**（開発のストーリーで共感を得る）: 半透明の濃紺の角丸パネルに、虫眼鏡アイコン付きの見出しを置く。
6. **キャンペーンバナー**（特設サイトへ誘導する）: 白枠の角丸バナーの下部に、リンクの帯を付ける。
7. **注意事項**（着色料の注意を伝える）: 淡い水色の帯に、黒い太字の注釈を置く。
8. **おすすめの組み合わせ**（一緒に買う商品を提案する）: グラデーション地に斜体の大見出しを置き、白いカードと商品写真を左右交互に並べる。
9. **動画**（CM と商品紹介の動画を見せる）: ピンクの見出しの下に、白枠の動画埋め込みを置く。
10. **シェアとリンク**（SNS での拡散と回遊を促す）: 丸い SNS アイコン 2 つと、ピンクのピルボタン 2 つを並べる。
11. **新作の説明**（新作の取り組みを説明する）: ピンク系グラデーションのカードに、バッジと点線で区切った文章を置く。
12. **アレルギー・カロリー情報**（成分の情報を提供する）: ピンクのバー見出しの下に、紫の表とボックスを置く。

## Imagery

- 商品は真上やや斜めから撮り、背景を抜いて白い光彩を付ける。
- 背景は青い星雲と白い十字のきらめきで構成する。
- トゲのある宝石状の小物を、四隅に散らす。
- 素材の質感は極端なアップにして、円の中に見せる。
- キャラクターや星のモチーフは、立体的な CG 調にする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像はないため、中央に幅 480〜600px のカラムを置き、左右は星空を延長する。
- ポイントの交互配置は PC でもそのまま使い、写真を大きくする。
- おすすめのカードは PC では 2 列に並べてよい。
- 表とボタンは最大幅 640px に制限する。

## 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-59783720`（元 LP の URL から採番）
- **元 LP**: https://www.br31.jp/contents/topics/260401_01.html
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。