DESIGN.md — 濃紺×シャンパンゴールドの高級時計買取 LP（Midnight Navy & Champagne Gold Luxury Buyback LP）

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

Overview

• 業種: その他 ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、信頼・誠実
• キーワード: 濃紺の夜・シャンパンゴールド・明朝見出し・細罫線・鑑定士の手元・静かな高級感
• 地の質感: マットな濃紺の地に、金のグラデーションカードとごく薄いドロップシャドウを重ねる。全体は平坦で光沢は控えめ。
• 形: 角丸なしの長方形が基本。ボタンは細い枠線だけの矩形にし、矢印を添える。
• 温度感: 冷たい濃紺に暖かい金とベージュを差し、落ち着いていながら少し温かみがある

Colors

• 濃紺 #12121E を基調にし、ページの約4割を占めさせる。
• 見出しと番号はシャンパンゴールドにして、本文はオフホワイトにする。
• 中盤はオリーブグレーと生成りベージュの帯に切り替えて、情報の種類を分ける。
• 金のグラデーション（明るいクリームから金）はサービスカードと問い合わせ枠だけに使う。
• 電話CTAは紺のグラデーション、問い合わせCTAは金にして、2色を並べる。
• LINEのミント色は店舗カード内に限る。
• button-primary は文字 #FCF8F2 × 背景 #A6926D のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#82704F、4.53:1）を使う。

Typography

• 見出しは明朝にし、字間をやや広げて格調を出す。
• POINT・番号・価格は欧文セリフにする。
• 見出しは中央揃え、本文は左揃えにする。
• 価格は大きめの欧文セリフで、オフホワイトにする。
• 口コミや解説などの長文はゴシックにして読みやすくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（サービスカードと買取例のみ 2 カラム）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• POINTブロックは、番号、見出し、本文、画像の順に縦へ並べる。
• 画像はコンテンツ幅の約85%で中央に置く。
• 買取例は2列グリッドで、商品画像、ブランド名、型番、価格ラベル、価格の順にする。
• 店舗カードは横幅いっぱいにし、カード同士は16px空ける。
• セクション見出しの上下には40px前後の余白をとる。

Elevation & Depth

• サービスカードと問い合わせ枠には濃いドロップシャドウ（0 4px 10px rgba(0,0,0,.5)）をつける。
• 店舗カード内の電話・LINEボタンには、ごく薄い影をつける。
• それ以外は影なしのフラットにする。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。商品は切り抜き画像を黒地に置き、下に反射をつける。
• セクション境界: 直線で背景色を切り替える
• ボタンは細い枠線だけの矩形にし、右に長い矢印を添える。
• 買取方法カードの上下には、両端がひし形の金のライン装飾を入れる。
• 丸い要素はアイコンの円ボタンとスライダーのドットだけにする。

Components

• POINT番号見出し（point-label）: 小さなPOINTの文字と2桁番号を中央に置き、左右に細い横線を引く。
• 金の飾り罫（ornament-divider）: 見出しの下に置く、細い金の装飾ライン。
• 金グラデのサービスカード（service-card）: クリームから金へのグラデーション面に、アイコン、明朝の見出し、小さな説明を載せる。2列とその下に中央1枚の配置。
• 買取例アイテム（price-item）: 切り抜き商品、ブランド名、型番、枠線付きの価格ラベル、大きな価格の順に並べる。
• 枠線サブボタン（button-outline）: 白の細い枠線の矩形。中央にラベル、右に長い矢印を置く。
• 店舗カード（store-card）: 生成り地に、店名、白い電話ボタン、ミント色のLINEボタン、枠線付きの詳細トグルを並べる。
• 買取方法カード（method-card）: グレージュ面の上下に金の飾り罫を入れる。見出しの右に白い円の矢印ボタンを置き、チェック付きのリストを添える。
• 口コミスライダー（review-slider）: 人物シルエット、属性、星、商品名、罫線、太字タイトル、本文の順。左右に隣のカードを少し見せ、下にドットを置く。
• 問い合わせCTA枠（contact-cta-box）: 金グラデーションの枠に、明朝の見出し、金の問い合わせボタン、紺の電話ボタンを縦に並べる。
• 金の主CTA（button-primary）: 金グラデーションの矩形に白い明朝の文字を載せ、右に矢印を置く。

Do's and Don'ts

Do - 地は濃紺にし、見出しは金の明朝にする。 - ボタンやカードは角丸なしの矩形にする。 - 商品写真は背景を抜いて黒地に浮かせる。 - 装飾は細い金の罫線とひし形に限る。 - 余白を広くとり、静かな高級感を保つ。

Don't - 原色やビビッドな赤のCTAは使わない。 - 丸ゴシックやポップなイラストは使わない。 - ピル型ボタンや大きな角丸は使わない。 - 金を広い面のベタ塗りに使わない。 - 1画面に強調色を3色以上並べない。

Page Structure

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

1. ファーストビュー（鑑定の真剣さと高級感を伝える）: 白手袋で時計を鑑定する手元のクローズアップ写真を全面に敷く。右下に白い明朝の2行コピーと欧文サブコピーを置き、左下にScrollの表示。
2. 選ばれる理由（高価買取の根拠を3つ示す）: 濃紺地に、POINT番号、金の明朝見出し、本文、画像を3回繰り返す。
3. サービス特長（安心材料を短く示す）: 明朝の中央見出しの下に、金グラデーションのカードを3枚置く。
4. 買取例（具体的な価格で信頼を得る）: 2列グリッドに切り抜き商品と大きな価格を並べ、最後に枠線ボタンを置く。
5. 店舗情報（最寄り店舗へ連絡させる）: 地域のセレクトの下に、生成り地の店舗カードを縦に並べる。各カードに電話とLINEのボタン。
6. 買取方法（3つの方法から選ばせる）: オリーブグレー地に、グレージュのカードを3枚縦に並べる。
7. お客様の声（実体験で安心させる）: ベージュ地に、横スライドの口コミカードとドットを置く。
8. 査定額アップのポイント（準備を促し、来店へのハードルを下げる）: グレー地に、写真、Point番号、見出し、本文を3回繰り返す。最後に必要書類を2列のリストで示す。
9. CTA（問い合わせを促す）: 濃紺地の中に金の枠を置き、金ボタンと紺の電話ボタンを入れる。
10. フッター（ナビと会社情報）: 濃紺地に欧文のロゴ、アコーディオン形式のメニュー、住所、コピーライトを置く。

Imagery

• 白手袋やルーペで鑑定する手元を、浅い被写界深度で撮る。
• スーツ姿の鑑定士を落ち着いた室内光で撮る。
• 世界地図やチャートは、暗い青とシアンの光るCG調にする。
• 商品は白背景を抜いた切り抜きにし、下に鏡面の反射をつける。
• 付属品やメンテナンスの写真は、木目や大理石の上で俯瞰で撮る。
• アイコンは金色の小さなフラットアイコンにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではPOINTブロックを、画像とテキストが左右交互になる2カラムにする。
• PCではサービスカード・買取方法・査定ポイントを3列に並べる。
• 買取例はPCで4列にする。
• 店舗カードはPCで1行の横長にし、店名・電話・LINE・詳細を横に並べる。
• PCではコンテンツ幅を約60%の中央寄せにし、左右の余白を広くとる。
• PCではCTA枠の2つのボタンを横に並べる。

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 行書くと起動時に読み込まれる。