---
version: alpha
name: Burgundy Gray Functional Footwear LP
description: 深いボルドーを主役にして、グレー・黒・白の無彩色とオリーブゴールドを組み合わせた男性向け機能性シューズの LP。縦書きの大きな見出し、斜めの帯、ボルドーの帯ラベルで理屈を一つずつ積み上げていく。ストリートスナップ風の写真と解剖図の CG を使い、健康とファッションの両方に訴える。
colors:
  primary: '#8B1E31'
  on-primary: '#FFFFFF'
  background: '#FFFFFF'
  background-alt: '#C2C2C2'
  secondary: '#A8ACAF'
  accent-1: '#968C4E'
  dark-section: '#323336'
  text: '#010101'
  text-body: '#323336'
  text-muted: '#918E82'
  line: '#D3D1D0'
  accent-2: '#C7B58A'
  surface: '#FEFEFE'
  accent-1-accessible: '#7F7642'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  accent:
    fontFamily: Syncopate
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  band-heading:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    height: 110px
  underline-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 70px
  slant-label:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 28px
  diamond-badge:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 110px
  number-stat:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 70px
  point-number:
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    height: 50px
  problem-list:
    backgroundColor: '{colors.dark-section}'
    height: 200px
  review-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 210px
  marker-highlight:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    height: 36px
---

# DESIGN.md — ボルドー×グレーの機能性シューズ LP（Burgundy Gray Functional Footwear LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: クール・先進的、力強い・インパクト、情報量多め・訴求型、上品・高級
- **キーワード**: ボルドー・モノトーン・縦書き見出し・斜め帯・解剖図 CG・ストリートスナップ
- **地の質感**: 石壁・コンクリート・黒い石目の質感と、マットなグレーのグラデーション
- **形**: 角丸なしの長方形、斜めの帯、下向き三角の吹き出し、ひし形のバッジ
- **温度感**: クールで硬派。ボルドーとゴールドで少し温かみを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#8B1E31` | ブランドのボルドー。帯・見出し下線・ラベルに使う | 9% | 画素の実測 |
| `on-primary` | `#FFFFFF` | ボルドーの面に載せる白文字 | 1% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | 基本の白い地 | 30% | 画素の実測 |
| `background-alt` | `#C2C2C2` | 淡いグレーのセクション地 | 10% | 画素の実測 |
| `secondary` | `#A8ACAF` | ブルーグレーのビジュアル帯 | 7% | 画素の主要色に補正 |
| `accent-1` | `#968C4E` | オリーブゴールド。数値・強調マーカー・バッジに使う | 3% | 画素の実測 |
| `dark-section` | `#323336` | 黒い石目の悩みセクション | 8% | 画素の主要色に補正 |
| `text` | `#010101` | 見出しの黒文字 | 2% | 画素の実測 |
| `text-body` | `#323336` | 本文のダークグレー | 2% | 画素の主要色に補正 |
| `text-muted` | `#918E82` | 注釈と英字サブタイトルのグレー | 1% | 画素の主要色に補正 |
| `line` | `#D3D1D0` | カードの枠・区切り線 | 1% | 画素の主要色に補正 |
| `accent-2` | `#C7B58A` | ゴールドの月桂樹・実績バッジ | 3% | 推定 |
| `surface` | `#FEFEFE` | レビューカードの白い面 | 5% | 画素の実測 |
| `accent-1-accessible` | `#7F7642` | AA を満たす補正値（計算） |  | 計算 |

- 地の色は白・淡いグレー・ブルーグレー・黒を交互に切り替え、セクションの違いを出す
- ボルドーは帯見出し・ラベル・下線・吹き出しに絞って使う
- 数値や大きなキーワードはボルドーかオリーブゴールドで強調する
- 強調したい文はゴールドのマーカー帯に白文字で載せる
- 黒地のセクションには白文字とボルドーの縦線を組み合わせる
- 原色や彩度の高いポップな色は使わない
- `marker-highlight` は文字 `#FFFFFF` × 背景 `#968C4E` のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#7F7642`、4.59:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV と写真の上に置く縦書きの大見出し | ゴシック | Noto Sans JP | 500 | 56px | 1.1 | 0.02em |
| `headline-lg` | セクションの見出し | ゴシック | Noto Sans JP | 700 | 28px | 1.35 | 0.03em |
| `headline-md` | 帯見出し・ポイントのタイトル | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.04em |
| `headline-sm` | ラベルと小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.05em |
| `note` | ※印の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em |
| `accent` | 英字のサブタイトル・番号・大きな数値 | 欧文サンセリフ | Syncopate | 400 | 16px | 1.2 | 0.08em |

- 見出しの下に、ボルドーの小さな英字サブタイトルを添える
- 写真の上の大見出しは縦書きの白い箱に入れ、写真の上に重ねる
- 大きな数値は欧文の幅広書体にし、単位は小さくする
- キーワードは「」で囲み、ほかの字より大きくする
- 本文は 14px 前後、行間は 1.8 でゆったり組む
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真の組み合わせだけ非対称のグリッドにする
- **本文ブロックの幅**: 画面幅の約 82%
- **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
- セクションの間はボルドーか黒の細い縦線でつなぐ
- ビジュアル帯は全幅、本文は左右に余白をとる
- 写真は左右にずらして配置し、雑誌のようなリズムを出す
- 理屈は「悩み → 原因 → 解決 → 商品」の順に積み上げる

## Elevation & Depth

- レビューカードだけ薄い影と細い枠をつける
- そのほかはフラットにし、影は使わない

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの長方形。商品は切り抜き写真にする
- **セクション境界**: 斜めのカット、下向き三角の吹き出し、細い縦線
- 角丸は使わない（例外は円形の Before/After バッジ）
- ラベルはボルドーの平行四辺形か長方形にする
- 特長はボルドーのひし形 3 つで示す
- 斜めの帯に白文字を載せて動きを出す

## Components

- **ボルドー帯の見出し**（`band-heading`）: 全幅のボルドー帯に白文字を置き、下に三角の吹き出しをつける
- **下線つきの見出し**（`underline-heading`）: 黒の太字の見出しにボルドーの下線を引き、下に英字サブタイトルを置く
- **斜めのラベル**（`slant-label`）: 平行四辺形のボルドーのラベルに白文字。つなぎの言葉に使う
- **ひし形の特長バッジ**（`diamond-badge`）: ボルドーのひし形 3 つに、特長を短く書く
- **数値の訴求**（`number-stat`）: 縦書きのボルドーラベルの横に、ゴールドの大きな % の数値を並べる
- **ポイント番号**（`point-number`）: 小さな縦書きの英字と、ボルドーの大きな 2 桁の番号を組み合わせる
- **悩みのリスト**（`problem-list`）: 黒い石目の地に、ボルドーの縦線と白文字で悩みを並べ、細い枠で囲む
- **レビューカード**（`review-card`）: 白いカードに、ボルドーの属性見出し・ゴールドの星・本文を入れる
- **ゴールドのマーカー**（`marker-highlight`）: オリーブゴールドの帯に白文字を載せて、強調したい文に使う

## Do's and Don'ts

**Do**
- ボルドー・グレー・黒・白・ゴールドの 5 色に絞る
- 見出しには必ず英字のサブタイトルを添える
- 写真の上の見出しは縦書きにし、大胆に置く
- セクションの間を縦線や三角でつなぎ、流れを見せる
- 数値には ※ 注釈を小さく添える

**Don't**
- 角丸やピル型のボタンを多用しない
- パステルや原色を使わない
- 影やグラデーションを付けすぎない
- ポップな手書き風の書体を使わない

## Page Structure

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

1. **ファーストビュー**（効果を一言で伝える）: 石壁の前のモデル写真に、縦書きの白い箱の見出しと、ゴールドの円形の数値バッジを重ねる
2. **商品名と特長**（商品と 3 つの効果を示す）: 白地に商品名と英字名、ボルドーのひし形 3 つを置く
3. **実績**（信頼を示す）: ベージュの地に紙吹雪とゴールドの月桂樹を配し、大きな数字で見せる
4. **悩みの提起**（ターゲットに共感させる）: 黒い石目の地に悩みを 3 行並べ、ボルドーの帯で年代とターゲットを示す
5. **解決の提示**（解決策を伝える）: グレーの地に筋肉の CG と縦書きの巨大な文字を置き、続けてボルドーの帯で説明する
6. **理由の説明**（効果の根拠を示す）: 写真と縦書きの見出し、その下に本文、を 3 回繰り返す
7. **仕組み**（足元からの理屈を説明する）: 骨格の CG に、線だけの大きな % 数字を重ね、ボルドーの帯で結論を示す
8. **技術の詳細**（パーツの機能を説明する）: 切り抜いたパーツ写真の周りに、ボルドーの注釈ボックスを引き出し線でつなぐ
9. **効果の数値**（数値で効果を証明する）: 歩くモデルの写真の横に、ゴールドの % の数値を縦に 3 つ並べる
10. **3 つのポイント**（そのほかのメリットを伝える）: 番号と見出しのあと、斜め帯と切り抜き写真でポイントを紹介する
11. **スタイリング**（コーディネートの幅を見せる）: 非対称のグリッドに写真を並べ、縦書きの大きな英字を添える
12. **お客様の声**（実感を共有する）: 白いカード 3 枚に星評価を入れる
13. **締めのビジュアル**（メッセージを再確認させる）: ローアングルの靴の写真に、縦書きのボルドーの箱を重ねる
14. **商品の仕様**（購入前に情報を確認させる）: 多角度の切り抜き写真、素材の一覧、サイズ表を置く

## Imagery

- 石壁や都市の街角で撮る、自然光のストリートスナップ
- モデルは 30〜40 代の男性。秋冬のアースカラーの服で、落ち着いたポーズをとる
- 商品は白かグレーの背景に切り抜き、真横・斜め・後ろの多角度で見せる
- 筋肉や骨格はリアルな 3D CG にし、対象の部位を赤く光らせる
- 装飾は月桂樹・紙吹雪・ジグザグの線にとどめる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 版の画像はないため、以下は推奨。PC では本文を中央 600〜750px 幅に収め、背景帯だけ全幅にする
- PC では理由の説明を、写真と本文の 2 カラムにする
- スタイリング写真は 3〜4 列のグリッドに広げる
- 縦書きの大見出しは縦書きのまま、サイズを 1.5 倍にする

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