---
version: alpha
name: Monochrome Spec Catalog Camera LP
description: 白地のカードを薄いグレーの地に並べる、カタログ型の機材LP。明朝の大きな型番見出しと、赤い丸バッジ＋グレー帯の特長見出しを繰り返す。スペック表・図解・作例写真を詰め込み、精密さと信頼感を出す。
colors:
  background: '#F0F0F0'
  surface: '#F6F6F6'
  primary: '#C8161D'
  background-alt: '#FFFFFF'
  text: '#2C2625'
  text-body: '#3A3A3A'
  text-muted: '#78706B'
  line: '#E7E6E5'
  accent-1: '#D0262B'
  dark-section: '#3B3B3B'
  tint-1: '#B0B5B7'
  on-primary: '#FCFDFD'
  tint-1-accessible: '#F7F7F7'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 24px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  badge-feature:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 44px
  heading-band:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 32px
  product-title:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 90px
  compare-row:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 40px
  point-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 44px
  price-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 36px
  photo-caption:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    height: 110px
---

# DESIGN.md — 白×グレーに赤丸ラベルのカメラ機材LP（Monochrome Spec Catalog Camera LP）

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

## Overview

- **業種**: 家電・ガジェット ／ **雰囲気**: クール・先進的、信頼・誠実、情報量多め・訴求型、上品・高級
- **キーワード**: カタログ・精密・モノトーン・赤のアクセント・スペック訴求・明朝見出し
- **地の質感**: フラットな白とグレー。製品は白背景の切り抜きで、影と反射だけで立体感を出す
- **形**: 四角いカードと帯が基本。円形のバッジと一部の角丸ラベルだけがやわらかい形
- **温度感**: やや冷たい無彩色に、赤の差し色で熱量を少し足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F0F0F0` | ページ左右の地色 | 20% | 画素の実測 |
| `surface` | `#F6F6F6` | コンテンツカードの白地 | 45% | 画素の実測 |
| `primary` | `#C8161D` | 特長バッジ・型番の強調文字の赤 | 2% | 推定 |
| `background-alt` | `#FFFFFF` | 特長見出しのグレー帯 | 7% | 画素の実測 |
| `text` | `#2C2625` | 見出し・型番の濃い文字 | 4% | 画素の実測 |
| `text-body` | `#3A3A3A` | 本文の文字 | 4% | 推定 |
| `text-muted` | `#78706B` | 大きな型番ロゴ風数字・注釈 | 3% | 画素の主要色に補正 |
| `line` | `#E7E6E5` | 価格情報ボックスの枠線 | 1% | 画素の主要色に補正 |
| `accent-1` | `#D0262B` | 比較ボックスの赤枠 | 1% | 推定 |
| `dark-section` | `#3B3B3B` | 目盛り・ポイントラベルの暗色面 | 2% | 推定 |
| `tint-1` | `#B0B5B7` | 写真周りの淡いグレー | 3% | 画素の主要色に補正 |
| `on-primary` | `#FCFDFD` | 赤バッジ上の白文字 | 0% | 画素の実測 |
| `tint-1-accessible` | `#F7F7F7` | AA を満たす補正値（計算） |  | 計算 |

- 地は薄いグレー、内容は白カードに載せる
- 赤はバッジ・型番の1文字・比較枠だけに使う
- 見出し帯は淡いグレーで、文字は濃い茶黒
- 大きな数字や英字は中間グレーで装飾的に置く
- 写真以外に彩度の高い色を足さない
- 暗色は目盛りや小ラベルに限定する
- `photo-caption` は文字 `#78706B` × 背景 `#B0B5B7` のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#F7F7F7`、4.53:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大きな型番数字 | 欧文サンセリフ | Montserrat | 800 | 56px | 1 | -0.02em |
| `headline-lg` | 商品名・型番の大見出し | 明朝 | Noto Serif JP | 500 | 26px | 1.3 | 0.04em |
| `headline-md` | セクション冒頭のリード見出し | 明朝 | Shippori Mincho | 500 | 16px | 1.5 | 0.05em |
| `headline-sm` | グレー帯内の特長見出し | 明朝 | Noto Serif JP | 500 | 14px | 1.5 | 0.04em |
| `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em |
| `note` | スペック・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0em |
| `accent` | 赤丸バッジの短いラベル | ゴシック | Noto Sans JP | 700 | 10px | 1.2 | 0em |

- 見出しは明朝、本文と注釈はゴシック
- 型番は英数字を大きく、1文字だけ赤にしてよい
- スペックは小さい文字で詰めて並べる
- 注釈は米印つきで最小サイズにする
- 太字は控えめ。強調はサイズと色で出す
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。図解と写真は 2 列まで
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 24px、基本単位 8px、カード内 16px（375px 幅換算）
- 白カードをグレー地に縦に積む
- 各特長は赤バッジ＋グレー帯見出し＋本文＋図の順
- 本文と図は左右並び、SPでは縦積み
- 比較は赤枠ラベル＋説明の横並び行で示す
- スペックの小文字列を見出し直下に置く

## Elevation & Depth

- 影はほぼ使わない
- 製品切り抜きの接地影だけで立体感を出す
- カードは影なしの白面で地と分ける

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 作例は四角、製品は白背景の切り抜き
- **セクション境界**: グレー地の余白で白カードを区切る直線境界
- バッジは正円で赤
- 見出し帯は右端だけ半円状に丸めてもよい
- 枠は細い1px線
- 写真に角丸をつけない

## Components

- **赤丸特長バッジ**（`badge-feature`）: 2行の短いラベルを入れた赤い円。見出し帯の左に重ねる
- **グレー帯見出し**（`heading-band`）: 淡いグレー帯に明朝の一文見出し。バッジと組で使う
- **型番見出しブロック**（`product-title`）: 小さなリード＋大きな明朝型番＋右に製品切り抜き
- **赤枠比較行**（`compare-row`）: 赤枠の小ラベル箱と、右に数値入りの説明を並べる行
- **ポイント注記ボックス**（`point-box`）: 左に暗色ラベル、中央に説明、右に目盛り図の横長枠
- **価格・コード情報枠**（`price-box`）: 細枠の中に商品名と価格・コードを小さく並べる
- **作例写真＋ラベル**（`photo-caption`）: 写真の上に小さな灰色ラベル、矢印で切替を示す

## Do's and Don'ts

**Do**
- 見出しは明朝で静かに組む
- 赤は小面積に絞って要点だけ示す
- 数値・スペックは具体的に並べる
- 製品は白背景切り抜きで大きく見せる
- 図解と作例をセットで置き機能を説明する

**Don't**
- 丸ゴシックやポップな書体を使わない
- 赤を背景の大面積に使わない
- グラデーションや派手な影を足さない
- イラストやキャラクターを入れない
- 写真を角丸や円形に切らない

## Page Structure

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

1. **ファーストビュー**（製品を印象づけ型番を示す）: 白背景に製品切り抜きを大きく、下に巨大な灰色の型番数字と明朝の商品名
2. **リードと価格情報**（概要と価格・コードを伝える）: 明朝のリード2行と細枠の情報ボックス
3. **付属品の紹介**（セット品の性能を示す）: 白カードに型番見出し、スペック小文字列、右に製品写真
4. **特長1（撮影域）**（使い方の幅を示す）: 赤バッジ＋帯見出し、作例写真を横並び、操作図に番号注釈
5. **特長2（補正機能）**（技術の効果を数値で示す）: 本文＋図解、赤枠比較行を上下に並べ矢印で切替を示す
6. **特長3（画質・軽量）**（構造と携帯性を示す）: 2列でバッジ見出し、レンズ断面図と製品サイズ比較
7. **本体の紹介**（本体性能を順に伝える）: 新カードにロゴ風見出し、バッジ見出し＋本文＋右写真を繰り返す
8. **その他の特長**（細かい機能を補足）: 四角マーカー付きの小文字列を横に並べる
9. **新機能のお知らせ**（更新情報を伝える）: 明朝見出し＋黒四角の小見出しリスト、右に告知バナー

## Imagery

- 製品は白背景の切り抜き、斜め前から撮り床に淡い映り込み
- 作例は風景・花・夜景など色の鮮やかな写真を四角で
- 内部構造は線画の断面図に引き出し線とラベル
- 操作説明は製品写真に丸数字と矢印を重ねる
- 目盛りやグラフは黒地に白の細い線
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央固定幅カード、左右はグレー地
- SPではカードを画面幅いっぱい近くに広げる
- 本文と写真の横並びはSPで縦積みにする
- 2列の特長はSPで1列にする
- 巨大型番はSPで56px程度に縮める
- スペック小文字は10px以下にしない

## 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-dd4056b6`（元 LP の URL から採番）
- **元 LP**: https://rdlp.jp/archives/otherdesign/lp/4540
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（5/12 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-19、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。