DESIGN.md — 漆黒×赤アクセントの先進カメラ製品 LP（Pure Black Tech Gadget Product LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: クール・先進的、ラグジュアリー・ダーク、シンプル・ミニマル
• キーワード: 純黒背景・製品の物撮り・白太字見出し・赤いピルバッジ・ベントグリッド・スペック一覧
• 地の質感: フラットな黒地に、光沢のある製品写真と彩度の高い作例写真を置く。グラデーションは画像の中だけで使う。
• 形: 写真とカードは 12〜16px の角丸。バッジはピル型。区切りは細い灰色の罫線。
• 温度感: 冷たく無機質。赤のアクセントだけで熱量を出す。

Colors

• 地は全面 #000000 にする。白地のセクションは作らない。
• カードや引用のボックスは #1A1C21 前後のダークグレーにして、黒地から一段だけ浮かせる。
• 赤は機能名の小見出し、オンのラベル、注目バッジ、大きな数値だけに使う。
• 見出しは白、本文は明るい灰色、注釈はさらに暗い灰色の 3 段階にする。
• 鮮やかな色は作例写真と製品画像にまかせる。UI 側では色数を増やさない。
• pill-toggle-label は文字 #FFFFFF × 背景 #F3140C のコントラスト比が 4.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EC130C、4.5:1）を使う。
• badge-highlight は文字 #FFFFFF × 背景 #F3140C のコントラスト比が 4.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EC130C、4.5:1）を使う。
• bento-grid は文字 #D53836 × 背景 #1B1C21 のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#FAFAFB、4.53:1）を使う。

Typography

• 見出しはすべて太字のゴシックにする。明朝や丸ゴシックは使わない。
• 英数字は幾何学的なサンセリフ（Poppins 系）でそろえる。
• SP の見出しは左揃え。冒頭の区切り見出しだけ中央揃えにする。
• 本文は短い段落 2〜3 行にまとめ、行間 1.7 前後にする。
• 数値で訴求するときは赤の極太にし、画像と重ねて大きく見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。冒頭の特長一覧だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 22px で統一する。
• 機能ごとに「見出し → 説明 2〜3 行 → 角丸の写真」を繰り返す。
• 大見出しの下に、小見出し付きの機能ブロックをぶら下げる階層にする。
• スライダーは中央の写真を大きく出し、左右に隣の写真を少しのぞかせる。
• スペックは「項目名＋値」を罫線で区切って縦に並べる。

Elevation & Depth

• 影は使わない。奥行きは面の明るさの差だけで出す。
• カードは黒地より少し明るい #1A1C21 にする。
• 製品写真は黒背景と溶け合う切り抜きにして、浮いて見せる。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 作例写真は横長の角丸長方形。製品は背景なしの切り抜き。
• セクション境界: 直線。セクションの境界は余白だけで作り、帯や波形は使わない。
• 写真の上に載せるラベルは必ずピル型にする。
• グリッドのタイルは 6〜8px の小さい角丸にし、隙間を詰めてモザイク状に並べる。
• ボックスの枠線は基本的に付けない。

Components

• 特長グリッドカード（feature-grid-card）: 2 列に角丸の写真を並べ、下に太字の見出しと 2〜3 行の説明を置く。
• オン／オフ比較ラベル（pill-toggle-label）: 比較写真の下端に置くピル。オフ側は黒灰の面、オン側は赤の面にする。
• 注目バッジ（badge-highlight）: 写真の左上や見出しの下に置く、小さな赤いピル。
• メディア評価カード（press-quote-card）: ダークグレーの角丸ボックスに、媒体ロゴと一言の評価を中央揃えで置く。ドット付きのスライダーにする。
• アプリ機能カード（app-feature-card）: ダークグレーのカードの上部に見出しと説明、下半分に画面の写真を全幅で敷く。
• ベントグリッド（bento-grid）: 大小のタイルを組み合わせ、数値・アイコン・写真で性能を一覧させる。数値は赤の極太にする。
• タブ付きスライダー（tab-slider）: 写真スライダーの下にテキストタブを置く。選択中は白文字に下線、非選択は灰色にする。
• スペック行（spec-row）: 白の太字の項目名と、小さめの値を縦に並べ、下に細い罫線を引く。

Do's and Don'ts

Do - 背景は純黒で通し、製品写真を主役にする。 - 1 つの機能につき、見出し・短い説明・大きな写真の 1 セットにする。 - 比較写真は左右に分割し、オフ／オンのピルを付ける。 - 赤は 1 画面に 1〜2 か所までにする。 - 性能の要約はベントグリッドで視覚的にまとめる。

Don't - 白や明るいパステルの地のセクションを入れない。 - 影・グラデーションのボタン・装飾的な枠線を多用しない。 - 赤を本文の色や広い面に使わない。 - 手書き書体や丸ゴシックで柔らかくしない。 - 写真を角丸なしで詰め込まない。

Page Structure

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

1. ファーストビュー（製品と提携の価値を一目で示す）: 黒地の中央に製品名とキャッチを置き、製品 2 台の物撮りと提携ロゴを添える。
2. 選ばれる理由（主要な特長を 8 個で一覧させる）: 中央揃えの見出しの下に、2 列×4 段の特長カードを並べる。
3. メディア評価（第三者の評価で信頼を補う）: ダークグレーのカードに媒体ロゴと評価を一言。ドット付きのスライダーにする。
4. 製品コンセプト・技術提携（モジュール構造と光学性能を伝える）: 分解した製品の切り抜きやレンズのクローズアップを大きく見せる。
5. 画質・撮影機能（画質・暗所・手ブレ補正などを個別に訴求する）: 見出し・説明・角丸の作例写真を繰り返す。比較写真にはピルラベルを付ける。
6. AI 画像処理（処理の前後の差を見せる）: 左右に分割した比較写真に、オフ／オンのピルを付ける。
7. 耐久性・利便性（防水・操作・バッテリーを伝える）: 赤の小見出しを使い、大きな数値と製品の切り抜きを重ねる。
8. アプリ・編集機能（ソフト面の価値を見せる）: ダークグレーのアプリ機能カードを縦に積み、タブ付きスライダーで機能を切り替える。
9. 活用シーン（配信・Web カメラなどの用途を示す）: 角丸のカードに製品と使用の様子の写真、下に小さな注釈を置く。
10. 性能まとめ（主要スペックを視覚的に総括する）: 数値・アイコン・写真を混ぜたベントグリッドにする。
11. スペック（詳細な仕様を網羅する）: 項目名と値を罫線で区切った縦のリストにする。

Imagery

• 製品は黒背景で、低めのキーライトでの物撮りにする。素材の質感とレンズの反射を強調する。
• 作例写真は彩度の高い風景・夜景・アクションにして、黒地とのコントラストを最大にする。
• 比較写真は同じ構図を左右に分割し、違いを一目でわからせる。
• アプリ画面はスマホの枠ごと見せ、背景はぼかした実写にする。
• アイコンは白い線画の小さなピクトにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では見出しと説明を中央揃えにし、写真を約 70% 幅で中央に置く。
• PC の特長グリッドは 4 列×2 段にする。
• PC の耐久性・アプリ機能はカードを 2 列に並べ、一部を全幅にする。
• PC のスペックは 2 列に分けて縦の長さを抑える。
• 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 行書くと起動時に読み込まれる。