DESIGN.md — 銀灰×赤強調のガジェット機能訴求 LP（Silver Gray Tech Gadget Feature LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 情報量多め・訴求型、クール・先進的、力強い・インパクト
• キーワード: 銀灰グラデーション・極太ゴシック見出し・赤い数字の強調・全幅の合成写真・黒×金の技術セクション・半透明パネル
• 地の質感: 金属っぽい銀灰の地に、音波の渦や霧のような光のエフェクトを重ねる。技術パートは黒地に金色の回路が光る質感。
• 形: 四角い全幅ブロックが基本。半透明の角丸パネル、ピル型ラベル、円形のアイコンを組み合わせる。
• 温度感: 寒色寄りの銀灰に、製品のキャメル色と金が暖かさを足す。

Colors

• 地は銀灰の白系 2〜3 段階を基本にし、セクションごとに明るさを少し変える。
• 見出しは黒。キーワードや数字だけを赤にする。
• 大きな数字の主役は青にし、数字ごとに赤と青を使い分けてもよい。
• 技術の説明は黒地に金で、ページ中盤から終盤に 1〜2 回だけ入れる。
• 製品色のキャメルは写真の中で見せ、文字色には使わない。
• ラベルは濃紺のピル型に白文字を載せる。

Typography

• 見出しは極太（900）で画面幅いっぱいに大きく組み、左寄せか中央寄せにする。
• 見出しの中の 1 語か数字だけを赤にする。
• 説明文は見出しのすぐ下に 2〜3 行で短くまとめる。
• 数字は欧文の極太書体で、単位は小さくする。
• 日本語の見出しに文字間は付けず、詰めて力強く見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅で、アイコンは 2×3 のグリッド、写真カードは 3 列
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 32px、基本単位 8px、カード内 12px（375px 幅換算）
• 1 機能を 1 セクションにし、上から見出し・説明・全幅写真の順に並べる。
• 左右の余白は 8〜12px と狭くし、画像を大きく見せる。
• スペックは半透明パネルに 2 列で並べる。
• アイコンは角丸の枠に入れ、下に小さなラベルを付けてグリッドにする。
• セクションの境目は背景色を変えるだけで区切る。

Elevation & Depth

• 半透明の白パネルを写真の上に重ね、うっすら影を付ける。
• 黒地のセクションでは金色の発光で奥行きを出す。
• 通常の部品は影なしでフラットにする。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 全幅の長方形。製品の拡大は円形で切り抜く。
• セクション境界: 直線。背景色の切り替えのみ
• ラベルは濃紺のピル型にする。
• スペックのパネルは角丸 8〜12px の半透明にする。
• 製品の拡大図は白い円の中に入れる。
• 金のバッジは角丸 4px 程度の小さな長方形にする。

Components

• 機能の大見出し（feature-headline）: 極太の黒い見出しの一部を赤にし、下に説明文を添える。
• 巨大な数字（big-number）: 製品写真の中央に青い極太の数字と英字の単位を重ねる。
• スペックのパネル（spec-panel）: 半透明の白パネルに条件と数値を 2 列で並べる。
• 機能アイコンのグリッド（icon-grid）: 角丸の白い枠に赤いアイコンを入れ、下に小さなラベルを付ける。
• ピル型ラベル（pill-label）: 音声ガイドなどの項目を濃紺のピルに白文字で書き、写真の横に並べる。
• 金のバッジ（gold-badge）: 金色の帯に黒い太字を載せ、グラフや写真の見出しに使う。
• 黒地の比較グラフ（dark-chart）: 黒地に金の波形を描き、使用前と使用後を左右で比べる。
• 写真のキャプションカード（photo-caption-card）: 部分の写真を 3 列に並べ、下に濃い帯で白いキャプションを付ける。

Do's and Don'ts

Do - 1 機能＝1 見出し＋全幅写真のリズムを守る。 - 数字は大きく、色を付けて主役にする。 - 銀灰の明るい地で清潔感と先進感を出す。 - 技術の説明だけを黒×金の発光表現にする。 - 人物はヘッドホンを着けた横顔や目を閉じた表情で、没入感を見せる。

Don't - パステルや手書き風の柔らかい装飾は使わない。 - 見出しの色を何色も混ぜない。強調は赤か青の 1 色にする。 - 細い明朝体を使わない。 - 余白を広く取りすぎて画像が小さくなるのを避ける。 - 黒地のセクションを何度も繰り返さない。

Page Structure

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

1. ファーストビュー（代表的な機能と製品の世界観を一目で伝える）: 銀灰の地に極太の見出しを置き、人物 2 人の着用写真を入れる。下部に半透明パネルで機能アイコンのグリッドを付ける。
2. 音質の特長（音の技術の強みを伝える）: 赤い英字を含む 2 行見出しを置き、部品を分解した写真に寸法の注記を添える。最後に金バッジと周波数グラフを入れる。
3. 接続機能（複数の機器で使える便利さを見せる）: 大見出しの下に、デスクに機器を並べた写真を全幅で入れる。
4. パーツ交換（長く使えることを示す）: 人物写真に円形の拡大図を重ね、下に注意書きの半透明パネルを置く。
5. 軽さ・装着感（快適さを伝える）: 風になびく髪の人物写真に重量の円バッジを添え、下に部分の写真カードを 3 列で並べる。
6. バッテリー（長時間使えることを数字で示す）: 製品写真の中央に青い巨大な数字を置き、半透明パネルで 2 条件を比べる。
7. 音声ガイド（操作のしやすさを示す）: 中央寄せの見出しに赤い強調語を入れ、横顔写真の左に濃紺のピル型ラベルを縦に並べる。マイクのアイコンは円で囲む。
8. 通信・ノイズキャンセル（技術の高さを伝える）: 黒地に金の回路とチップの写真を置き、白い英字の見出しと金の波形グラフで比べる。
9. 携帯性（持ち運びやすさで締めくくる）: 生活シーンの写真に、90 度の回転を示す円形の拡大図と左下の黒い太字見出しを重ねる。

Imagery

• 人物写真は柔らかい自然光で撮り、ヘッドホンを着けて目を閉じるなど没入した表情にする。
• 製品は白とキャメルの配色で、3D 風の分解図や浮遊感のある合成にする。
• 背景に音波の渦や霧の光をうっすら重ねる。
• 技術パートは黒地に金の回路が光るイメージにする。
• 部分の説明には赤い矢印と円形の拡大図を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は画像を縦につないだ 1 カラムの構成で、SP でもそのまま縦に積む。
• PC では中央の幅を 480〜750px に固定し、左右は銀灰の地にする。
• SP では見出しを 26〜30px に収め、1 行 10 文字前後で改行する。
• アイコンのグリッドは SP で 2〜3 列にする。

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