--- 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/）からご連絡ください。