---
version: alpha
name: Dark Chocolate Collab Goods LP
description: ほぼ黒に近いチョコレート色を全面の地色にしたLPです。クリーム色の帯ラベル、金色の細線、くすんだ金色のピル型ボタンで、甘く上品な印象にまとめています。商品写真は波形や円形のブロブで切り抜き、モデル写真と組み合わせて並べます。周年記念コラボのファッション雑貨を、1商品ずつカタログのように見せる構成です。
colors:
  background: '#2E0002'
  primary: '#7A4B34'
  surface: '#FDF4DB'
  cta: '#D4C56C'
  on-cta: '#291210'
  text: '#FFFFFF'
  text-body: '#3E2D1A'
  text-muted: '#DFD2A9'
  line: '#C8B27A'
  accent-1: '#B0202A'
  accent-2: '#DFD2A9'
  background-alt: '#FDF6DA'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.7
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.7
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
  accent:
    fontFamily: Playfair Display
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
  label-button:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.02em
rounded:
  sm: 0px
  md: 16px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 0px
  section: 60px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-more:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 28px
  label-band:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-md}'
    height: 32px
  vertical-band:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-md}'
    height: 300px
  product-info:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 260px
  blob-photo:
    backgroundColor: '{colors.primary}'
    rounded: '{rounded.lg}'
    height: 400px
  divider-gold:
    backgroundColor: '{colors.line}'
    height: 1px
  fv-frame:
    textColor: '{colors.text-body}'
    typography: '{typography.display}'
    rounded: '{rounded.md}'
    height: 320px
  anniversary-badge:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.background}'
    typography: '{typography.accent}'
    rounded: '{rounded.sm}'
    height: 110px
---

# DESIGN.md — 深いチョコ色地×クリームラベルのコラボ雑貨LP（Dark Chocolate Collab Goods LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、かわいい、ラグジュアリー・ダーク、レトロ
- **キーワード**: チョコレート色・クリーム帯ラベル・波形ブロブ切り抜き・縦書きコピー・カタログ型商品紹介・周年記念
- **地の質感**: 地はフラットな濃茶の単色。質感はチョコの写真やタイル柄の写真だけで出し、グラデーションは使わない
- **形**: 波形・円形のブロブで写真を切り抜く。ラベルは角丸なしの長方形。ボタンだけピル型
- **温度感**: 暖色。濃茶・ブラウン・クリーム・くすんだ金でまとめる

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#2E0002` | ページ全体の濃いチョコ色の地 | 55% | 画素の実測 |
| `primary` | `#7A4B34` | ミルクチョコ色のブロブ背景 | 8% | 画素の実測 |
| `surface` | `#FDF4DB` | コピー用のクリーム色帯ラベル | 3% | 画素の実測 |
| `cta` | `#D4C56C` | More Info.ボタンのくすんだ金色 | 0% | 画素の実測 |
| `on-cta` | `#291210` | ボタン上の文字色（濃茶） | 0% | 画素の主要色に補正 |
| `text` | `#FFFFFF` | 濃色地の見出し・本文の白文字 | 3% | 画素の主要色に補正 |
| `text-body` | `#3E2D1A` | クリームラベル上の濃茶文字 | 0% | 画素の実測 |
| `text-muted` | `#DFD2A9` | 価格・注記のベージュ文字 | 0% | 画素の主要色に補正 |
| `line` | `#C8B27A` | 商品ブロックを区切る金色の細線 | 0% | 推定 |
| `accent-1` | `#B0202A` | ファーストビュー見出しの強調色（深紅） | 0% | 推定 |
| `accent-2` | `#DFD2A9` | 周年ロゴのゴールドベージュ | 2% | 画素の主要色に補正 |
| `background-alt` | `#FDF6DA` | PCの歴史セクションのクリーム地 | 4% | 画素の実測 |

- 地はページ全体を濃いチョコ色の単色にする。白地のセクションは作らない
- ミルクチョコ色は、写真の背後に置くブロブの面にだけ使う
- コピーを強調するときは、クリーム色の帯ラベルに濃茶の文字をのせる
- CTAはくすんだ金色の塗りに濃茶の文字。鮮やかな色にはしない
- 深紅はファーストビュー見出しの強調語だけに限定する
- 商品ブロックの区切りは金色の1px線にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのフレーム内の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.3 | 0.02em |
| `headline-lg` | コンセプトの中央見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.7 | 0.15em |
| `headline-md` | クリーム帯ラベル・縦書きのキャッチ | ゴシック | Zen Kaku Gothic New | 400 | 20px | 1.5 | 0.08em |
| `headline-sm` | 商品名（2〜3行） | ゴシック | Noto Sans JP | 700 | 14px | 1.7 | 0.03em |
| `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em |
| `note` | 価格・注記 | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.03em |
| `accent` | 周年表記・ブランド名などの欧文 | 欧文セリフ | Playfair Display | 700 | 14px | 1.3 | 0.05em |
| `label-button` | More Info.ボタン | 欧文サンセリフ | Montserrat | 500 | 11px | 1 | 0.02em |

- コンセプト見出しは字間を広め（0.15em）にして中央に揃える
- キャッチは細めのゴシックにする。2行を左右にずらし、クリーム帯に1行ずつのせる
- 写真の横に縦書きのキャッチをクリーム帯で2列置く
- 商品名は太字。価格は細字で「（税込み）」を添える
- 本文は行間1.9前後のゆったりした組みにする
- ブランドロゴの代わりに細い欧文ロゴ風テキストを商品名の上に置く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム。商品情報は「テキスト＋丸い写真」の2カラム
- **本文ブロックの幅**: 画面幅の約 82%
- **余白**: セクション間 60px、基本単位 8px、カード内 0px（375px 幅換算）
- 商品ブロックは「大きい切り抜き写真→帯キャッチ→本文→商品情報」の順に繰り返す
- 商品情報は左テキスト・右写真と、左写真・右テキストを交互に入れ替える
- ブロックの間は金色の細線で区切る（左右に約30pxの余白）
- 本文ブロックは左右に約45pxの余白をとり、中央に寄せる
- コンセプト部はロゴ→縦線→見出し→本文の順に中央揃えで積む

## Elevation & Depth

- 影は基本的に使わない。フラットに作る
- 奥行きは、切り抜き写真をブロブの上に重ねることで出す
- ファーストビューのフレームは白い装飾枠を写真の上に重ねて浮かせる

## Shapes

- **角丸**: 小 0px ／ 中 16px ／ 大 999px。ボタンはピル型。
- **写真の切り抜き**: モデル写真は円形・角丸の不定形ブロブで切り抜く。商品は背景を抜き、波形ブロブの上に置く
- **セクション境界**: 金色の1px水平線。セクション境界は直線
- ラベル帯は角丸なしの長方形にする
- ボタンは小さめのピル型にする
- ブロブの輪郭は、チョコが溶けたような波形か角丸の不定形にする
- ファーストビューの見出しは、レトロな飾り枠（白）で囲む

## Components

- **詳細ボタン**（`button-more`）: 商品情報の下に置く小型のピル型ボタン。左に寄せる
- **クリーム帯キャッチ**（`label-band`）: 2行のコピーを1行ずつクリーム帯にのせ、左右に段差をつける
- **縦書き帯キャッチ**（`vertical-band`）: 写真の横に縦書きのクリーム帯を2列、上下にずらして配置する
- **商品情報ブロック**（`product-info`）: 欧文ブランドロゴ、太字の商品名、価格、ボタンを縦に並べる。横に丸切り抜き写真を置く
- **ブロブ背景写真**（`blob-photo`）: ミルクチョコ色の波形ブロブの上に、切り抜いた商品やモデルを重ねる
- **金色区切り線**（`divider-gold`）: 商品ブロック間に入れる、細い金色の水平線
- **装飾フレーム見出し**（`fv-frame`）: 白いレトロな飾り枠の中に、周年リボンと大見出しを置く。強調語は深紅にする
- **周年ロゴバッジ**（`anniversary-badge`）: ゴールドベージュの角丸四角に、濃茶で数字ロゴを入れる。下に縦線を引く

## Do's and Don'ts

**Do**
- 地色は全編を濃いチョコ色1色で通す
- 写真は必ず切り抜くかブロブで囲み、四角いまま置かない
- キャッチはクリーム帯にのせ、段差をつけて配置する
- 商品ごとに同じ型（写真→キャッチ→本文→情報→ボタン）を繰り返す
- ボタンは控えめな金色のピル型にする

**Don't**
- 白地や明るい原色のセクションを挟まない
- 大きく目立つ赤やオレンジのCTAボタンを使わない
- 強いドロップシャドウやグラデーションを使わない
- 太すぎる見出しを多用しない（太字はファーストビューと商品名だけ）
- 角ばった四角い写真をグリッドに並べない

## Page Structure

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

1. **ファーストビュー**（企画の主旨と周年記念を一目で伝える）: 濃茶地に白い飾り枠で大見出しを置き、モデルの切り抜きを添える。下に商品のアップ写真を全幅で敷く
2. **コンセプト紹介**（企画の背景と世界観を伝える）: 周年ロゴバッジ→縦線→字間を広げた白見出し→本文を中央揃えで積む
3. **商品紹介1（小物）**（主力商品の魅力と価格を示す）: 円形ブロブ写真に縦書き帯を重ね、本文と商品の切り抜きを並べた後、テキスト＋丸写真の商品情報を置く
4. **商品紹介2（大型商品）**（体験イメージを見せて購入を促す）: 波形ブロブに斜めに置いた商品写真、段差のある帯キャッチ、本文、丸写真付きの商品情報の順
5. **商品紹介3（着用アイテム）**（着用シーンで楽しさを伝える）: モデル2人をブロブの上に置き、右に縦書き帯キャッチ。下に商品情報と本文
6. **商品紹介4（小物・ギフト）**（パッケージの再現度とギフト需要を訴求する）: 不定形ブロブの上に商品を俯瞰で配置し、帯キャッチ、本文、商品情報と続ける
7. **パッケージの歴史（PC）**（ブランドの歴史で特別感を補強する）: クリーム地に細い二重枠。斜体セリフの見出しと、年代・パッケージ画像・説明の3列グリッドを置く

## Imagery

- 暖色の柔らかい自然光で撮る。背景はベージュ〜ブラウンで統一する
- モデルは笑顔か目を閉じた幸せそうな表情。商品を抱く・着る・寝そべるなど体験している場面にする
- 商品は背景を抜き、俯瞰や斜めの構図で置く
- チョコレートの凹凸をアップにした写真を、帯状の装飾やPCの背景タイルに使う
- 装飾はブロブ・飾り枠・ハートの小アイコン程度にとどめる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央に約480px幅の濃茶カラムを置き、SPと同じ1カラムの内容を流す
- PCのカラムの左右には、チョコ板の写真をタイル状に繰り返して背景にする
- PCのファーストビューは見出しフレームを上に置き、その下に商品写真を横一列で並べる
- PCでは最後にクリーム地の歴史セクションを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-5d7ad221`（元 LP の URL から採番）
- **元 LP**: https://www.felissimo.co.jp/collect/mchoco_fsc?tid=sbn_fc_MEIJICHOCOLATE2609_L
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-15、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。