DESIGN.md — 銀灰×青の先進ガジェット訴求 LP（Cool Metallic Gadget Feature LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: クール・先進的、情報量多め・訴求型、清潔・爽やか
• キーワード: 銀灰グラデーション・メタリック製品写真・青アクセント・数値の大写し・機能アイコン・スペック図解
• 地の質感: 金属光沢と霧がかった寒色グラデーション。HUD 風の線画やホログラムを背景にあしらう。
• 形: 角丸 8〜12px のカード、円形アイコン、ラベル帯。直線的で整然とした構成。
• 温度感: 寒色寄りで冷たく、清潔で精密な印象。

Colors

• 地は銀灰〜青灰のグラデーションで統一し、純白はカードのみに使う
• 青はラベル帯・チェック・矢印など点で差し、面積は 5% 以内
• 見出しはほぼ黒の濃灰、本文は中灰で階層を作る
• 数値やグラフは水色の塗り＋灰の比較線で対比させる
• 暖色は使わない。製品の金属色と寒色で揃える
• 保証・認証などの信頼要素はスチールブルー帯に白文字
• tech-label は文字 #F9FAFB × 背景 #3C89CB のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#3077B3、4.55:1）を使う。
• step-card は文字 #767A81 × 背景 #F9FAFB のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#6F7279、4.61:1）を使う。
• trust-band は文字 #F9FAFB × 背景 #5F7F9C のコントラスト比が 4.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#587691、4.55:1）を使う。
• guarantee-badge は文字 #3C89CB × 背景 #F9FAFB のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#3077B3、4.55:1）を使う。

Typography

• セクション見出しは二重かぎ括弧『』で囲み、中央揃えにする
• 見出しは「機能名・効果」の形で中黒でつなぐ
• 数値は欧文太字で特大にし、単位は小さく添える
• 本文は中央揃えで 3〜4 行に収める
• 技術名は青ラベル帯に白文字で文頭に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコンは 4 列グリッド、比較写真は 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• 1 セクション 1 機能。見出し→ビジュアル→短文の順
• 製品写真は画面幅いっぱいに大きく置く
• 機能アイコンは円形で 4 列 2 行に並べる
• グラフは白い角丸カードに収める
• 手順は 3 列の番号付きカードで示す

Elevation & Depth

• カードは影なしか、ごく薄い影（0 2px 6px rgba(0,0,0,.08)）
• 製品写真は切り抜きで落ち影をつけ浮かせる
• 認証画像は灰色の太枠フレームで囲む

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は角丸矩形か全幅、製品は背景切り抜き
• セクション境界: 直線で背景色やグラデーションが切り替わる
• 機能アイコンは濃灰の正円
• ラベル帯は角丸 4px の青長方形
• 保証バッジは白の角丸正方形
• 斜めや波形の区切りは使わない

Components

• 『』見出し（heading-bracket）: 二重かぎ括弧で囲む中央揃えの太字見出し
• 機能アイコングリッド（feature-icon-grid）: 濃灰の円に白い線アイコン、下に短いラベルを 4×2 で並べる
• 技術名ラベル（tech-label）: 本文の頭に置く青い帯に白文字
• おすすめチェックリスト（check-list-card）: 薄い青灰パネルに青いチェックと悩みを 5 行並べる
• 周波数グラフカード（graph-card）: 白カードに水色の塗りグラフと灰の比較線、凡例付き
• 数値大写し（big-number）: 時間や重量を特大の欧文数字で示し、単位と注釈を小さく添える
• 装着手順カード（step-card）: 白カードに図と番号、下に一行説明を 3 列で並べる
• 認証・説明帯（trust-band）: スチールブルーの帯に白の見出しと説明文
• 保証バッジ（guarantee-badge）: 白角丸正方形に青の大文字と小さな補足

Do's and Don'ts

Do - 見出しは毎回『』で囲み、トーンを統一する - 製品写真は金属の反射を活かした高解像度の切り抜きにする - スペックは数値とアイコンで視覚的に示す - 背景は寒色グレーのグラデーションで階調をつける - 人物写真は自然光で穏やかな表情を選ぶ

Don't - 赤やオレンジなど暖色を強調に使わない - 長い本文を段落で並べない - ピル型のポップなボタンを置かない - 手書き風・丸ゴシック書体を混ぜない - 背景に柄や派手なパターンを敷かない

Page Structure

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

1. ファーストビュー（製品と体験の印象づけ）: 人物の横顔と製品写真、商品名と特長 3 点を縦線区切りで配置、新登場バッジ
2. イメージビジュアル（ブランドの世界観提示）: グレー地に人物全身、英字セリフのキャプション
3. 機能一覧（主要機能を俯瞰させる）: 『』見出し＋サブコピー、円アイコン 4×2 グリッド
4. 装着感の訴求（快適さを伝える）: 左に角丸人物写真と吹き出し説明、右に製品写真
5. おすすめの人（悩みへの共感）: 青チェック付きで悩みを 5 行並べるパネル
6. 機能詳細（各機能を 1 つずつ深掘り）: 『』見出し、全幅写真、技術名ラベル付き短文を繰り返す
7. 音質・グラフ（性能を数値で証明）: 白カードの周波数グラフ、比較写真の前後対比
8. スペック大写し（防水・サイズ・再生時間・重量を印象づける）: 数値の特大表示と製品写真を交互に配置
9. 認証（安全性の信頼付け）: スチールブルー帯に見出し、認証書画像を灰枠で表示
10. 使い方（装着と操作の説明）: 3 列手順カード、タップ操作を 2 列アイコン表で整理
11. 同梱物（内容物の明示）: パッケージと付属品を寸法線付きで斜め配置
12. 保証・サポート（購入後の安心）: 白角丸バッジ 2 つを並べ、下に短い説明文

Imagery

• 人物は若い男女、白シャツや黒トップスで自然光の穏やかな表情
• 製品はクロームの光沢を強調したスタジオ切り抜き
• 分解図や青く光る内部構造で技術感を演出
• HUD 風の線画・ホログラム・音波を背景にあしらう
• 空や雲、街中の写真は寒色に色調補正
• 寸法線・矢印を図解に重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は PC 幅でも 1 カラムの縦長画像型。SP でもそのまま縦積み
• SP は機能アイコンを 4 列のまま縮小、ラベルは 10px
• PC では本文幅を最大 750px に抑え中央配置
• 2 列写真や手順 3 列は SP でも維持し、文字は画像外に出す
• グラフは SP で横幅いっぱいにして目盛を省略

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