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

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

Overview

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

Colors

• ページを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

• 見出しは中央揃え・太字で、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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。