--- version: alpha name: Dark Leather Automotive Accessory EC LP description: 黒いレザーの車内写真と、明るいグレーの地を交互に並べる EC 商品ページ型の LP。見出しは太いゴシックで、黒から銅色へのグラデーションを差す。POINT の大きな透かし文字、黒い角丸ラベル、赤い点線で区切った部位図、カラー別の全面写真で、機能と素材をくり返し見せる。 colors: primary: '#1A2C2C' background: '#DEDEDE' background-alt: '#DEDEDE' dark-section: '#000000' text: '#2A2B24' secondary: '#B5652E' accent-1: '#E2401E' accent-2: '#C40102' accent-3: '#0293E4' surface: '#FDFDFC' on-dark: '#FEFFFF' tint-1: '#623939' text-muted: '#625B58' line: '#625B58' accent-1-accessible: '#D73C1C' typography: display: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.0 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Playfair Display fontSize: 10px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 110px label-dark: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 30px badge-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' rounded: '{rounded.full}' height: 26px zone-diagram: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 400px material-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 150px compare-block: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 220px color-plate: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 70px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px --- # DESIGN.md — 黒革×銅グラデの車用クッション通販 LP（Dark Leather Automotive Accessory EC LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自動車・バイク ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型 - **キーワード**: 黒レザー・銅色グラデ見出し・POINT透かし文字・赤い点線ガイド・カラーバリエーション写真 - **地の質感**: スエードやパンチングレザーの接写と、白い低反発素材のやわらかい質感。背景はうすいグレーのグラデーション。 - **形**: 角丸 16px 前後の写真カード、黒い角丸ラベル、丸いバッジ。 - **温度感**: 黒とグレーの冷たいベースに、銅・赤の暖色を差してやや温かく見せる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1A2C2C` | 濃い緑がかった黒のセクション地 | 12% | 画素の実測 | | `background` | `#DEDEDE` | 明るいグレーの基本地 | 25% | 画素の実測 | | `background-alt` | `#DEDEDE` | やや濃いグレーの地 | 10% | 画素の実測 | | `dark-section` | `#000000` | カラー別写真の黒い地 | 30% | 画素の実測 | | `text` | `#2A2B24` | 見出し・本文の濃い文字 | 3% | 画素の実測 | | `secondary` | `#B5652E` | 見出しのグラデーションに入れる銅色 | 1% | 推定 | | `accent-1` | `#E2401E` | 部位の丸バッジ・矢印の赤橙 | 1% | 推定 | | `accent-2` | `#C40102` | 比較で「悪い例」を示す赤 | 2% | 画素の実測 | | `accent-3` | `#0293E4` | 比較で「良い例」を示す青 | 2% | 画素の実測 | | `surface` | `#FDFDFC` | 白いカード・比較枠 | 7% | 画素の主要色に補正 | | `on-dark` | `#FEFFFF` | 暗い面の上の白文字 | 2% | 画素の実測 | | `tint-1` | `#623939` | カラー名プレートの半透明ワイン色 | 0% | 画素の主要色に補正 | | `text-muted` | `#625B58` | 補足・注記の文字 | 1% | 画素の主要色に補正 | | `line` | `#625B58` | 仕様表の下線 | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#D73C1C` | AA を満たす補正値（計算） | | 計算 | - 明るいグレーの地と黒い写真セクションを交互に置き、リズムを作る - 大見出しは黒から銅色へのグラデーションで塗り、高級感を出す - 部位の指示は赤い点線・赤橙の丸バッジ・矢印にそろえる - 比較ブロックは赤＝悪い例、青＝良い例で塗り分ける - カラーバリエーションの名前プレートは、その商品色に寄せた半透明の色面にする - 黒いラベルの文字は白に統一する - `badge-circle` は文字 `#FEFFFF` × 背景 `#E2401E` のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D73C1C`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビュー・セクションの大見出し | ゴシック | Noto Sans JP | 900 | 32px | 1.3 | 0.05em | | `headline-lg` | POINT の機能名見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.03em | | `headline-md` | サブ見出し・写真カードのタイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `accent` | POINT の英字と、漢字の透かし | 欧文サンセリフ | Montserrat | 800 | 40px | 1.0 | 0.0em | | `body-md` | 機能の説明文 | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.0em | | `note` | カラー名の英字（セリフ体） | 欧文セリフ | Playfair Display | 400 | 10px | 1.2 | 0.1em | | `label-button` | 黒い角丸ラベルの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.02em | - 見出しは極太ゴシックにして、行間を詰める - POINT の英字は濃いグレー、漢字の透かしは白抜きの線文字にして重ねる - 説明文は短い改行で 2〜4 行に収める - カラー名は和文の太字に、英字の小さなセリフ体を添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較とビフォーアフター写真は 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - 画像主体で、セクションはほぼ全幅で積む - 部位図は図と A〜D の説明リストを左右に分けて配置する - 素材の写真カードは横長の帯にし、テキストを左右交互に寄せる - カラー別写真は全幅で連続させ、右下に名前プレートを置く ## Elevation & Depth - 写真カードはフラットで、影は付けない - 商品の切り抜き写真の下にだけ、薄い接地影を付ける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸の横長カード、または全幅の四角 - **セクション境界**: 直線で切り替える。黒い帯の下に小さな三角の切り欠きを入れる - ラベルは角丸 6px の黒い帯 - 部位の番号は円形のバッジ - 素材カードは角丸 16px ## Components - **POINT 見出し**（`point-heading`）: 大きな POINT の英字と漢字の透かしを重ね、その上に黒いラベルと太字見出しを置く - **黒い角丸ラベル**（`label-dark`）: 見出しの上に置く短い訴求語の帯 - **部位の丸バッジ**（`badge-circle`）: 赤橙の円に白い漢字 1 文字。縦の点線でつなぐ - **部位の点線図**（`zone-diagram`）: 商品写真に赤い点線で領域を描き、A〜D の記号と説明リストを付ける - **素材カード**（`material-card`）: 暗い接写写真の角丸カードに、白い見出しと説明を重ねる - **比較ブロック**（`compare-block`）: 赤と青の 2 カラムで、使わない場合・使う場合を図と白文字で比べる - **カラー名プレート**（`color-plate`）: 写真の右下に置く半透明の四角。素材名・カラー名・英字の 3 段 - **仕様表**（`spec-table`）: 項目名と値を下線で区切った、シンプルな表 ## Do's and Don'ts **Do** - 黒レザーの写真と明るいグレーの地を交互に並べる - 大見出しは黒から銅色へのグラデーションにする - 機能説明は記号付きの部位図で見せる - カラー展開は全幅写真で 1 色ずつ見せる **Don't** - パステル調やポップな配色を使わない - 細い明朝の見出しにしない - 赤・青を比較ブロック以外で多用しない - 写真に過度な装飾枠を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（支える部位とサポート範囲を一目で伝える）: 車内の写真に、極太の 2 行見出しと黒いラベルを重ねる。左側に部位の丸バッジを縦に並べ、右下に機能アイコンを置く 2. **信頼の根拠**（第三者機関の認証で安心感を出す）: グラデーション見出しの下に、金縁の証明書画像を 2 枚並べる 3. **特長 POINT（素材）**（低反発素材のやわらかさを訴求する）: 暗い枠の中に角丸の白い面を置き、POINT 見出しと素材の接写写真を見せる 4. **特長 POINT（部位設計）**（首・腰をどう支えるかを説明する）: 赤い点線の部位図と、A〜D の説明リストを並べる 5. **細部へのこだわり**（素材や付属品の品質を見せる）: 黒い帯の見出しの下に、暗い接写の角丸カードを縦に 5 枚重ねる 6. **硬さの比較**（最適な硬さであることを示す）: 手で押す写真の下に、5 段階の円形写真とスケールを置く 7. **フィット感**（包み込むような装着感を示す）: 車内写真を 2 枚並べ、赤橙の矢印を重ねる 8. **使用前後の比較**（姿勢改善の効果を伝える）: ワイン色の地に、骨格図の比較と赤青の説明ブロックを置く 9. **カラーバリエーション**（素材とカラーの選択肢を見せる）: 黒い地に全幅の車内写真を連続させ、右下に名前プレートを置く 10. **商品情報**（寸法と仕様を伝える）: 寸法線入りの商品写真と、下線区切りの仕様表を置く ## Imagery - 黒いレザーシートに装着した状態を、斜め前から撮る - スエードやパンチングレザーを暗い照明で接写し、赤いステッチを見せる - 白い低反発素材は明るい背景で、やわらかい陰影を付けて撮る - 部位の説明には赤い点線と赤橙の太い矢印を重ねる - 骨格の説明は半透明の 3D イラストを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないので、PC では中央に幅 750px 前後の 1 カラムを置き、左右は背景色で埋める - PC ではカラーバリエーションを 2 カラムのグリッドにしてもよい - 部位図と説明リストは、PC で左右の比率を広げる ## 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-318180e6`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/ryohinseikatsukan/tsuhan-123-qckd1/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。