---
version: alpha
name: Pirate Treasure Map Collab Sweets LP
description: 赤い荒れた地図柄を地にして、破れた羊皮紙のパネルを縦に積む冒険風のコラボ商品 LP。茶色の巻物リボン見出し、黄色の限定特典ボックス、太い茶色の価格表示を繰り返す。後半は黄色の地図柄でキャンペーンを告知する。
colors:
  primary: '#CC010C'
  background: '#F9E2AC'
  background-alt: '#F9EDD2'
  secondary: '#FAC203'
  cta: '#662601'
  on-cta: '#FFFAF0'
  text: '#5B2200'
  text-body: '#3A2A20'
  accent-1: '#E50113'
  accent-2: '#F20C90'
  surface: '#FDFEFD'
  line: '#612720'
  text-muted: '#5E4A3A'
  secondary-accessible: '#FFF7DC'
  accent-2-accessible: '#DC0B83'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.1
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.25
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  accent:
    fontFamily: Dela Gothic One
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
rounded:
  sm: 4px
  md: 12px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 50px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  scroll-heading:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 70px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 46px
  limited-box:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 210px
  price-block:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 130px
  badge-new:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 64px
  circle-label:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 60px
  notice-banner:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-lg}'
    height: 56px
  link-button:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 44px
---

# DESIGN.md — 赤×古地図羊皮紙のアニメコラボ菓子 LP（Pirate Treasure Map Collab Sweets LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、レトロ
- **キーワード**: 宝の地図・羊皮紙・巻物リボン・コラボ限定・冒険感
- **地の質感**: 古紙の染み、破れた紙の縁、かすれた地図柄の赤い地。
- **形**: 破れ縁の紙パネル、巻物型の見出し、角丸の黄色ボックス、ピル型の茶色ボタン。
- **温度感**: 暖色。赤・黄・茶でにぎやかで熱い。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#CC010C` | 地図柄の赤い地 | 18% | 画素の実測 |
| `background` | `#F9E2AC` | 羊皮紙パネル | 35% | 画素の実測 |
| `background-alt` | `#F9EDD2` | パネル中央の明るい紙色 | 8% | 画素の主要色に補正 |
| `secondary` | `#FAC203` | キャンペーン地・特典ボックスの黄 | 12% | 画素の実測 |
| `cta` | `#662601` | 詳細ボタン・価格帯の焦茶 | 4% | 画素の実測 |
| `on-cta` | `#FFFAF0` | 茶ボタン上の文字 | 1% | 画素の実測 |
| `text` | `#5B2200` | 価格・見出しの焦茶文字 | 2% | 画素の実測 |
| `text-body` | `#3A2A20` | 本文 | 3% | 推定 |
| `accent-1` | `#E50113` | 限定ラベル・赤帯 | 3% | 画素の実測 |
| `accent-2` | `#F20C90` | 新作バッジのマゼンタ・下部リンクボタン | 2% | 画素の実測 |
| `surface` | `#FDFEFD` | 黄ボックス内の白ラベル | 2% | 画素の実測 |
| `line` | `#612720` | 価格欄の区切り線 | 0% | 画素の主要色に補正 |
| `text-muted` | `#5E4A3A` | 注釈 | 1% | 推定 |
| `secondary-accessible` | `#FFF7DC` | AA を満たす補正値（計算） |  | 計算 |
| `accent-2-accessible` | `#DC0B83` | AA を満たす補正値（計算） |  | 計算 |

- 外側の地は赤の地図柄。中身はすべて羊皮紙パネルの上に置く。
- 見出し・価格・ボタンは焦茶にして、紙色と同系でまとめる。
- 数量限定の特典は黄ボックスで囲み、赤ラベルを添える。
- キャンペーン告知のエリアは地を黄の地図柄に切り替える。
- マゼンタは新作バッジと末尾の公式導線だけに使う。
- 注釈は小さい茶系文字にし、赤は使わない。
- `limited-box` は文字 `#E50113` × 背景 `#FAC203` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#FFF7DC`、4.51:1）を使う。
- `badge-new` は文字 `#FFFAF0` × 背景 `#F20C90` のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DC0B83`、4.57:1）を使う。
- `link-button` は文字 `#FFFAF0` × 背景 `#F20C90` のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DC0B83`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 価格の大きな数字 | ゴシック | Noto Sans JP | 900 | 40px | 1.1 | 0.0em |
| `headline-lg` | キャンペーンの大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.2 | 0.02em |
| `headline-md` | 巻物リボン内の商品名 | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.25 | 0.04em |
| `headline-sm` | 特典ボックスの赤い見出し | ゴシック | Noto Sans JP | 900 | 16px | 1.3 | 0.02em |
| `body-md` | 商品説明 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.02em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `label-button` | ボタン・価格帯の文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.04em |
| `accent` | 手描き風の注記（付き!など） | 手書き・筆 | Dela Gothic One | 400 | 13px | 1.2 | 0.0em |

- 見出しは極太ゴシックで 2 行に組む。
- 価格は円記号つきで巨大にし、上に細い線で囲んだサイズ名を添える。
- 注記は斜めに置き、短い斜線を添えて手描き風にする。
- 本文は 13px 前後で、1 段落 3〜4 行にする。
- 注釈は ※ で始めて行をそろえる。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品紹介の一部は文章と写真を左右に分ける
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 50px、基本単位 8px、カード内 24px（375px 幅換算）
- 羊皮紙パネルを画面の約 90% 幅で置き、両側に赤い地をのぞかせる。
- 1 パネル＝1 商品にする。順番は見出し→写真→特典→説明→価格→注釈。
- 価格欄は上下を太線で挟む。
- 写真は紙からはみ出すほど大きく見せる。
- 特典カードなどの一覧は 4 列グリッドにする。

## Elevation & Depth

- 商品の切り抜き写真に白フチと薄い影をつける。
- パネルは影なし。破れた縁で立体感を出す。
- 黄ボックスはフラットにする。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 背景を抜いた商品切り抜きと、白フチのキャラクター切り抜き
- **セクション境界**: 破れた紙の縁を使い、地図柄の赤地へ切り替える
- 見出しは両端が巻いた巻物リボン形にする。
- 数字のバッジは円形で焦茶にする。
- 特典ボックスは角丸 12px の黄色にする。
- 吹き出しは白地に焦茶の枠をつける。

## Components

- **巻物リボン見出し**（`scroll-heading`）: 茶色の縁取りをした巻物の形の中に、商品名を 2 行で置く。
- **詳細ボタン**（`button-primary`）: 焦茶のピル型ボタン。右端に白丸の矢印アイコンを置く。
- **限定特典ボックス**（`limited-box`）: 黄色の角丸ボックス。上に赤い限定タブ、中に白ラベルと吹き出しを入れる。
- **価格ブロック**（`price-block`）: 線で挟んだサイズ名と巨大な価格。下に焦茶帯の補足を置く。
- **新作丸バッジ**（`badge-new`）: マゼンタの円に白文字で新作であることを示す。
- **手描き丸ラベル**（`circle-label`）: 細い茶色の線の円に、カップデザインなどの短い注記を入れる。
- **予告バナー**（`notice-banner`）: 赤の平行四辺形に白文字の日付、横に黄色の帯を並べる。
- **公式導線ボタン**（`link-button`）: 末尾に置くマゼンタの角丸横長ボタン。右に矢印をつける。

## Do's and Don'ts

**Do**
- 地は赤の地図柄、中身は羊皮紙パネルという 2 層構造を守る。
- 商品ごとに巻物見出しで区切る。
- 価格は極太の焦茶で大きく示す。
- 限定特典は必ず黄ボックスに入れる。
- 斜めの手描き注記と矢印でにぎやかにする。

**Don't**
- 白無地の背景だけにしない。
- 細い明朝や淡い配色を使わない。
- 価格を小さくしない。
- パネルの縁を直線のままにしない。
- マゼンタを多用しない。

## Page Structure

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

1. **ファーストビュー**（コラボと期間を伝える）: 青空にキャラクターの集合絵。縦書きのコピーと赤い期間タグを置き、下に羊皮紙上の商品の集合写真を並べる。
2. **キャンペーン予告帯**（特典へ誘導する）: 黄色の帯に赤い日付と下矢印の丸を置く。
3. **新作フレーバー**（主力商品を訴求する）: パネルに巻物見出し、大きな写真、新作バッジ、説明文、茶ボタンを置く。
4. **商品紹介（カップ）**（限定カップを紹介する）: 写真とカップの展開図、黄色の特典ボックス、価格ブロック、注釈の順に置く。
5. **商品紹介（サンデー）**（複数のサンデーを見せる）: 文章と写真を左右に分けた組み、続けて各商品の価格を示す。
6. **セット商品**（まとめ買いを促す）: 箱の写真と付属バッグを見せ、サイズ表と 2 段の価格を置く。
7. **購入特典キャンペーン**（特典で来店を促す）: 黄色の地図柄の地に、赤い予告バナー、ステッカー画像、赤帯のプレゼント文言を置く。
8. **特典カード一覧**（集めたくなる気持ちを高める）: 4 列×5 段の茶色の枠つきカードを並べる。
9. **注意事項**（条件を明示する）: 赤地に白文字の※リストを置く。
10. **公式導線・SNS**（店舗・アプリへ送客する）: マゼンタのボタン、ピンクと青の 2 分割のアプリ枠、丸い SNS アイコンを並べる。

## Imagery

- 商品は真上から少し斜めに撮った切り抜きにし、色鮮やかに見せる。
- キャラクターは白フチの切り抜きで、紙からはみ出させる。
- 背景は古地図の線画を赤や黄の地にかすらせる。
- 羊皮紙には染みとムラ、破れた縁をつける。
- 手描きの矢印や斜線で注記を足す。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に幅 600〜750px のカラムを置き、両側を地図柄の赤い地で埋める。
- 特典カードは PC で 5 列にしてもよい。
- サンデー紹介は PC で写真と文章を左右に交互に並べる。
- 価格の数字は PC で 56px 程度まで拡大する。

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