---
version: alpha
name: Pastel Color-Coded Shapewear Lineup LP
description: ピンク・ミント・マスタード・ラベンダーのパステル色帯で商品カテゴリを色分けした、着圧ウェアのブランド LP。白とライトグレーの地に、縦長の欧文見出しと細い枠線のボタンを合わせて、軽くおしゃれにまとめている。モノクロ写真とカラーの面を組み合わせ、働く女性向けの清潔で親しみやすい印象を作る。
colors:
  primary: '#F4AEB8'
  background: '#FFFFFF'
  background-alt: '#E8E8E8'
  tint-1: '#FFEFF0'
  secondary: '#A6CEB6'
  accent-1: '#ECC256'
  accent-2: '#B5B6D4'
  tint-2: '#F4F4FD'
  accent-3: '#B2AB6E'
  marker: '#F3AFB5'
  text: '#060104'
  text-muted: '#919191'
  dark-section: '#000001'
  on-dark: '#FFFFFF'
  accent-3-accessible: '#7E7843'
  marker-accessible: '#E02E3E'
typography:
  display:
    fontFamily: Bebas Neue
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.04em
  accent:
    fontFamily: Bebas Neue
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.08em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 400
    lineHeight: 2.1
    letterSpacing: 0.1em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.1em
  label-button:
    fontFamily: Josefin Sans
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08em
rounded:
  sm: 4px
  md: 0px
  lg: 0px
  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}'
  button-purchase:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 38px
  category-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 900px
  product-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 270px
  badge-category:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 30px
  badge-new:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 18px
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 70px
  button-outline-more:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 40px
  store-link-grid:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 40px
---

# DESIGN.md — パステル色分けの着圧インナー商品一覧 LP（Pastel Color-Coded Shapewear Lineup LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、シンプル・ミニマル、清潔・爽やか、やさしい・柔らかい
- **キーワード**: パステル色分け・縦長欧文見出し・細枠ボタン・モノクロ写真・白カード
- **地の質感**: フラットな単色面。影もグラデーションも使わない。
- **形**: 角丸なしの矩形が基本。バッジだけ丸と小さい角丸。
- **温度感**: やや暖かいパステルで、軽く明るい

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#F4AEB8` | ブランドピンク（FV背景・外用カテゴリ帯） | 9% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 16% | 画素の実測 |
| `background-alt` | `#E8E8E8` | ライトグレー地（スライダー・動画・取扱店） | 12% | 画素の実測 |
| `tint-1` | `#FFEFF0` | ピンク帯の中の商品カード地 | 6% | 画素の実測 |
| `secondary` | `#A6CEB6` | ミントの家用カテゴリ帯 | 4% | 画素の実測 |
| `accent-1` | `#ECC256` | マスタードの家外用カテゴリ帯 | 4% | 画素の実測 |
| `accent-2` | `#B5B6D4` | ラベンダーのインナーカテゴリ帯 | 9% | 画素の実測 |
| `tint-2` | `#F4F4FD` | ラベンダー帯の中のカード地 | 12% | 画素の実測 |
| `accent-3` | `#B2AB6E` | オリーブ色の丸いカテゴリバッジ | 0% | 画素の実測 |
| `marker` | `#F3AFB5` | NEW バッジのピンク | 0% | 画素の主要色に補正 |
| `text` | `#060104` | 見出しと本文の黒文字 | 3% | 画素の実測 |
| `text-muted` | `#919191` | 日本語サブ見出しと注釈のグレー | 1% | 画素の実測 |
| `dark-section` | `#000001` | フッターの黒地 | 5% | 画素の実測 |
| `on-dark` | `#FFFFFF` | フッターの白文字 | 0% | 画素の主要色に補正 |
| `accent-3-accessible` | `#7E7843` | AA を満たす補正値（計算） |  | 計算 |
| `marker-accessible` | `#E02E3E` | AA を満たす補正値（計算） |  | 計算 |

- 商品カテゴリごとにパステル色を 1 つ割り当て、セクション全体の帯の色にする。
- 帯の上には白い枠を置き、中のカードは同じ色を淡くした色で塗る。
- セクション間の地は、白とライトグレーを交互に使う。
- 強調色はバッジの小さい面だけに使い、文字はほぼ黒とグレーに限る。
- ボタンは塗らず、黒い 1px の細い枠線だけにする。
- フッターだけを黒地にして、ページの終わりを締める。
- `badge-category` は文字 `#FFFFFF` × 背景 `#B2AB6E` のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#7E7843`、4.51:1）を使う。
- `badge-new` は文字 `#FFFFFF` × 背景 `#F3AFB5` のコントラスト比が 1.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#E02E3E`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの欧文大見出し | 装飾・ディスプレイ | Bebas Neue | 400 | 30px | 1.1 | 0.04em |
| `accent` | カテゴリ名の欧文（中抜きのアウトライン文字） | 装飾・ディスプレイ | Bebas Neue | 400 | 30px | 1.1 | 0.02em |
| `headline-md` | 商品名 | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.08em |
| `headline-sm` | コンセプトの見出しと日本語のカテゴリ名 | ゴシック | Zen Kaku Gothic New | 500 | 16px | 1.6 | 0.08em |
| `body-md` | 本文と商品説明 | ゴシック | Zen Kaku Gothic New | 400 | 13px | 2.1 | 0.1em |
| `note` | 日本語サブ見出し・キャプション・税込表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.1em |
| `label-button` | ボタンの文字と価格 | 欧文サンセリフ | Josefin Sans | 500 | 13px | 1.4 | 0.08em |

- 見出しは、縦長の欧文と小さいグレーの日本語訳を 2 段で中央揃えにする。
- カテゴリ名の欧文はアウトライン文字にして、帯の左上に大きく置く。
- 本文は字間 0.1em・行間 2 前後で、ゆったり組む。
- 価格は欧文フォントで大きくし、税込表記は小さくする。
- 太字は商品名と見出しだけに使う。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品カードは画像と文字の 2 列、取扱店ボタンは 2 列グリッド
- **本文ブロックの幅**: 画面幅の約 87%
- **余白**: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
- カテゴリ帯の右上に、モノクロ写真を帯からはみ出す形で重ねる。
- 帯の内側に白い枠（余白 10px 程度）を置き、その中に淡色のカードを縦に積む。
- 商品カードは、左に縦長のパッケージ画像、右に商品名・説明・価格を並べる。
- 購入ボタンはカード幅いっぱいにして、カードの下端に置く。
- 見出しの下に、4 色を横に並べた短いラインを置く。

## Elevation & Depth

- 影は使わない。
- 奥行きは、色の面と白い枠を重ねて表現する。

## Shapes

- **角丸**: 小 4px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの矩形。モノクロ写真はカテゴリ帯の角に重ねる
- **セクション境界**: 直線で色面を切り替える
- ボタン・カード・枠はすべて角丸 0 にする。
- カテゴリバッジは円形にする。
- NEW バッジは角丸 4px の小さい矩形にする。
- スライダーのページ送りは、細い枠線の円で作る。

## Components

- **購入ボタン**（`button-purchase`）: 黒 1px の枠線と右端の小さい下向き矢印を持つ、全幅の矩形ボタン
- **カテゴリ色帯**（`category-band`）: パステルの全幅帯。アウトラインの欧文と日本語のカテゴリ名を左上に置き、右上にモノクロ写真を重ねる
- **商品カード**（`product-card`）: 淡い色の面に、パッケージ画像・商品名・説明・価格・ボタンをまとめたカード
- **カテゴリ丸バッジ**（`badge-category`）: オリーブ色の円に白文字。パッケージ画像の左上に重ねる
- **NEW バッジ**（`badge-new`）: ピンク地に白抜きの欧文。商品名の横に置く
- **2 段見出し**（`section-heading`）: 縦長の欧文見出し、4 色のライン、グレーの日本語訳を中央にまとめた見出し
- **もっと見るボタン**（`button-outline-more`）: 白地の中央に置く、細枠の欧文ボタン
- **取扱店リンク**（`store-link-grid`）: グレー地の上に、細枠ボタンと右矢印を 2 列のグリッドで並べる

## Do's and Don'ts

**Do**
- カテゴリごとにパステル色を 1 色決め、帯・カード・パッケージの色をそろえる。
- 写真はモノクロを基本にして、色の面を引き立てる。
- ボタンは細い枠線だけにして、軽さを保つ。
- 見出しは欧文と日本語の 2 段にそろえる。
- 本文は中央揃えにし、行間を広く取る。

**Don't**
- 濃い色やビビッドな色でボタンを塗りつぶさない。
- 角丸の大きいカードや影を使わない。
- 1 つのカテゴリ帯の中で複数の地色を混ぜない。
- 本文を太字にしたり、詰めて組んだりしない。
- 装飾的なアイコンを多用しない。

## Page Structure

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

1. **ヘッダー**（ブランドを示し、メニューを開けるようにする）: ピンク地の左にスクリプト調のロゴ、右に二本線のメニューを置く
2. **ファーストビュー**（ブランドの世界観を伝える）: ピンクとグレーの境目に縦長のキービジュアルを重ね、下に丸い番号のページ送りを置く
3. **コンセプト**（開発の思いと価値を伝える）: 淡いモノクロ写真を背景に、中央揃えの短い文を数段重ねる
4. **動画**（使用シーンを映像で見せる）: グレー地に、縦長サムネイルを 2 列で並べ、下にキャプションを置く
5. **商品一覧**（カテゴリ別に商品を見せて購入へ誘導する）: 4 色のカテゴリ帯を順に並べ、各帯に白枠と商品カードを縦に積む
6. **もっと見る**（商品一覧の全体へ誘導する）: 白地の中央に細枠ボタンを置く
7. **取扱店**（外部の販売先へ誘導する）: グレー地に、2 列のリンクボタンを並べる
8. **ものづくり**（作り手を見せて信頼を高める）: 作り手のポートレートを 3 列 2 段のグリッドで並べ、キャプションを添える
9. **フッター**（会社情報とSNSへの導線）: 黒地に白いロゴ・テキストリンク・SNSアイコン・コピーライトを置く

## Imagery

- 働く女性の自然な仕事姿を、モノクロ写真で切り取る。
- キービジュアルは、淡い紫の背景に人物を立たせ、白い手描き線で着用部分を示す。
- 商品パッケージは、カテゴリ色の縦長タグにモノクロのポートレートを入れたデザインにする。
- コンセプトの背景は、脚や手を淡いグレーで撮り、うっすらと虹色の光をにじませる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では、本文の幅を 1000px 程度に抑えて中央に置く。
- PC では、商品カードを 2〜3 列のグリッドに広げる。
- 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-368c7da3`（元 LP の URL から採番）
- **元 LP**: https://ballelite.jp/sp=1
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。