---
version: alpha
name: Dark-to-Ice Dual Edition Luxury Watch LP
description: 前半は黒の地に金属の質感を見せる製品写真、後半は白と氷のような青に切り替えて、2つのモデルを1ページで紹介する高級腕時計のLPです。大きな写真と中央揃えの短い説明文を交互に並べ、各パートの最後に製品情報カードとスペックボタンを置きます。
colors:
  background: '#000000'
  background-alt: '#FFFFFF'
  surface: '#141414'
  dark-section: '#262626'
  primary: '#1B2E7B'
  cta: '#022464'
  on-cta: '#FFFFFF'
  on-dark: '#FFFFFF'
  text: '#010101'
  text-body: '#393C44'
  text-muted: '#7B7B7B'
  accent-1: '#4C8FB8'
  tint-1: '#D3DAEA'
  secondary: '#393C44'
  background-accessible: '#A6A6A6'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.35
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 2.1
    letterSpacing: 0.03em
  accent:
    fontFamily: Montserrat
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.5em
  body-lg:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.04em
rounded:
  sm: 3px
  md: 4px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 70px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  hero-product:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 470px
  section-label:
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 40px
  archive-card:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text-muted}'
    typography: '{typography.headline-lg}'
    height: 210px
  feature-block:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 220px
  product-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-lg}'
    height: 440px
  button-secondary:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 28px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 28px
  limited-badge:
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 30px
  footer:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 170px
---

# DESIGN.md — 漆黒と氷青で二部構成の高級腕時計LP（Dark-to-Ice Dual Edition Luxury Watch LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、クール・先進的、シンプル・ミニマル
- **キーワード**: 漆黒・金属光沢・氷青・ヘリテージ・全幅写真・静かな余白
- **地の質感**: 黒の上にスポットライトを当てた金属の光沢と、氷や海を思わせる冷たい透明感。
- **形**: 角丸はほぼ使わない。四角い全幅写真と小さな角丸ボタンだけで構成する。
- **温度感**: 冷たく硬質。黒パートは重厚、青パートは澄んだ寒色。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#000000` | 黒パートの地色 | 30% | 画素の実測 |
| `background-alt` | `#FFFFFF` | 青パートの白い地色 | 22% | 画素の実測 |
| `surface` | `#141414` | 製品情報カードの面 | 4% | 画素の実測 |
| `dark-section` | `#262626` | フッターの面 | 2% | 画素の実測 |
| `primary` | `#1B2E7B` | 限定モデルの深い青 | 7% | 画素の実測 |
| `cta` | `#022464` | 青パートのスペックボタン | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の文字色 | 0% | 画素の主要色に補正 |
| `on-dark` | `#FFFFFF` | 黒の地の上の文字 | 2% | 画素の主要色に補正 |
| `text` | `#010101` | 白の地の見出し文字 | 1% | 画素の実測 |
| `text-body` | `#393C44` | 白の地の本文 | 2% | 画素の主要色に補正 |
| `text-muted` | `#7B7B7B` | アーカイブ注記のグレー文字 | 0% | 画素の実測 |
| `accent-1` | `#4C8FB8` | 英字ラベル下の短い青線 | 0% | 推定 |
| `tint-1` | `#D3DAEA` | 氷を思わせる淡い青灰色 | 6% | 画素の実測 |
| `secondary` | `#393C44` | 鋼の中間グレー | 6% | 画素の主要色に補正 |
| `background-accessible` | `#A6A6A6` | AA を満たす補正値（計算） |  | 計算 |

- ページを2つに分ける。前半は黒の地に白い文字、後半は白の地に濃いグレーの文字。
- 黒パートは純黒の地に、ほぼ黒のグラデーションや小さなスポットライトで奥行きをつける。
- 黒パートのボタンは白地に黒文字、青パートのボタンは濃紺地に白文字にする。
- 青は限定モデルのパートだけで使う。写真、帯のグラデーション、ラベル下の短い線に限る。
- 金・赤などの暖色は写真の中だけに残し、UIには使わない。
- 注記は中間グレーにして、主張を抑える。
- `page` は文字 `#393C44` × 背景 `#000000` のコントラスト比が 1.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#A6A6A6`、4.53:1）を使う。
- `archive-card` は文字 `#7B7B7B` × 背景 `#393C44` のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | モデル名の大きな英字ロゴ | 欧文サンセリフ | Montserrat | 400 | 36px | 1.1 | 0.08em |
| `headline-lg` | 製品カードの英字の正式名 | 欧文サンセリフ | Inter | 700 | 18px | 1.35 | 0.0em |
| `headline-md` | 各特長の和文見出し（2〜3行） | ゴシック | Noto Sans JP | 700 | 19px | 1.5 | 0.04em |
| `body-md` | 説明本文（中央揃え・行間広め） | ゴシック | Noto Sans JP | 400 | 10px | 2.1 | 0.03em |
| `accent` | 章を区切る字間の広い英字ラベル | 欧文サンセリフ | Montserrat | 700 | 10px | 1.4 | 0.5em |
| `body-lg` | 型番と価格 | 欧文サンセリフ | Inter | 400 | 14px | 1.5 | 0.02em |
| `note` | 税込表記・発売日・数量の注記 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em |
| `label-button` | スペックボタンの文字 | ゴシック | Noto Sans JP | 500 | 10px | 1.0 | 0.04em |

- 見出しは中央揃え・太字で、2行に改行して短く見せる。
- 本文は小さめの字で行間を2倍ほど取り、中央揃えにする。長い段落だけ左揃えにしてよい。
- 英字ラベルは大文字で字間を大きく広げ、下に短い線を添える。
- モデル名は細めのジオメトリック体を字間広めで大きく置く。
- 価格と型番は欧文書体、税込表記は小さく添える。
- 見出しを飾り（帯・枠）で囲まない。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム。写真は全幅、テキストは中央に寄せる。
- **本文ブロックの幅**: 画面幅の約 82%
- **余白**: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
- 全幅写真と短いテキストブロックを交互に積む。
- テキストブロックの上下に60〜80pxの余白を取る。
- 製品カードはモデル名・写真・価格・ボタンを縦に並べる。SPでは写真とスペックを左右に並べる。
- パートの切り替えは、大きな全幅のファーストビュー写真で行う。
- 英字ラベルで小さな章を区切り、その直後にクローズアップ写真を置く。

## Elevation & Depth

- 影は使わない。奥行きは写真の光と背景の濃淡で表現する。
- 製品カードは地の色より少し明るい黒にするだけで、浮かせない。
- 黒パートでは、ほぼ黒のグラデーションでスポットライトのような光を当てる。

## Shapes

- **角丸**: 小 3px ／ 中 4px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 四角い全幅の裁ち落とし。被写体を大きくはみ出させてクローズアップする。
- **セクション境界**: 直線で切り替える。写真の端がそのまま境界になる。
- カードと写真は角丸にしない。
- ボタンだけ小さく角を丸める。
- 動画には中央に丸い再生アイコンを重ねる。

## Components

- **製品ファーストビュー**（`hero-product`）: 製品を全幅写真で大きく見せ、下部にモデル名の大きな英字と2行の英字サブタイトルを重ねる。
- **英字章ラベル**（`section-label`）: 字間の広い大文字の英字ラベルを中央に置き、下に短い横線を引く。
- **旧モデル紹介パネル**（`archive-card`）: 暗いグレーの面に過去モデルの写真を置き、右側に年号と注記を添える。
- **特長テキストブロック**（`feature-block`）: 全幅写真の直後に、2行の見出しと中央揃えの本文を置く。
- **製品情報カード**（`product-card`）: 英字の正式名、写真、型番、価格、発売日、スペックボタンをまとめたカード。
- **白いスペックボタン**（`button-secondary`）: 黒パートで使う。白地に黒文字の小さな長方形。
- **濃紺のスペックボタン**（`button-primary`）: 青パートで使う。濃紺地に白文字の小さな長方形。
- **限定数の下線表記**（`limited-badge`）: 限定数を下線つきの文字で示し、内訳を小さな注記で添える。
- **フッター**（`footer`）: 濃いグレーの面に、SNSアイコン・ロゴ・コピーライトを中央に縦並びで置く。

## Do's and Don'ts

**Do**
- 製品写真を全幅で大きく見せ、細部をクローズアップする。
- テキストは短く区切り、写真と交互に並べる。
- 各パートの最後に製品情報カードを置く。
- モデルごとに地の色（黒／白と青）をはっきり切り替える。
- 広い余白を取り、静かで落ち着いた印象を保つ。

**Don't**
- 派手なバッジ、セール感のある赤や黄色を使わない。
- 大きな角丸やピル型のボタンを使わない。
- ドロップシャドウや立体的なボタンを使わない。
- 見出しを装飾的な帯や枠で囲まない。
- 黒パートと青パートの色を混ぜない。

## Page Structure

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

1. **ファーストビュー**（製品の存在感を一瞬で伝える）: 黒の地に製品の正面写真を置き、下部に大きな英字のモデル名と英字のサブタイトルを重ねる。
2. **ブランドの歴史**（伝統と信頼性を語る）: 中央揃えの本文を数段落並べ、下に旧モデルのアーカイブパネルを置く。
3. **ディテール動画**（質感を動きで見せる）: 全幅の動画サムネイルの中央に再生アイコンを重ねる。
4. **デザイン特長**（文字盤・外装の価値を説明する）: 英字ラベルの後に、クローズアップ写真と2行見出し＋本文を繰り返す。
5. **機能特長**（着け心地や内部機構を伝える）: 部品のクローズアップ写真と説明文を交互に置く。機構の写真は大きな円形の被写体を中央に置く。
6. **製品情報（1モデル目）**（価格と詳細への導線）: 暗い面のカードに写真・型番・価格・白いボタンを置く。
7. **限定モデルのファーストビュー**（2モデル目へ切り替える）: 氷原を背景にした製品写真に、白い英字のモデル名を重ねる。
8. **協業の背景**（限定モデルの物語を伝える）: 濃紺のグラデーション帯に白い本文を置き、下に情景写真を続ける。
9. **パートナー紹介**（協業相手の信頼性を示す）: 白の地にパートナーのロゴと中央揃えの本文を置く。
10. **限定モデルの特長**（デザインと機能を説明する）: 白の地で、英字ラベル・クローズアップ写真・見出し・本文を繰り返す。
11. **製品情報（限定モデル）**（購入検討への導線）: 白の地に写真・価格・限定数・濃紺のボタンを置く。
12. **フッター**（ブランドの締めくくり）: 濃いグレーの面に、SNSアイコン・ロゴ・コピーライトを中央揃えで置く。

## Imagery

- 黒背景にスポットライトを当て、金属の反射を強調した商品写真。
- 文字盤・ベゼル・留め具・機構を画面からはみ出すほど寄って撮る。
- 限定モデルは氷原・海氷・寒色の空を背景に合成する。
- 写真の背景は、その黒や白をそのまま地の色につなげる。
- イラストやアイコン類は最小限にする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは、写真とテキストを左右に並べる特長ブロックを交互に配置する。
- PCの本文は中央揃えのまま、1行を長くして段落の行数を減らす。
- PCの製品カードは中央に約60%幅で置き、写真とスペックを左右に並べる。
- PCのフッターは横一列（ロゴ・コピーライト・SNS）にする。
- 全幅写真は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-bfd214f1`（元 LP の URL から採番）
- **元 LP**: https://www.seikowatches.com/jp-ja/products/prospex/special/1968_mm_2026/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。