DESIGN.md — 黒×オレンジの脳活テック家電 LP（Black and Orange Tech Gadget LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: クール・先進的、信頼・誠実、情報量多め・訴求型、力強い・インパクト
• キーワード: 黒の面・オレンジのマーカー・青灰の地・点線の下線・脳波・音波のモチーフ・大きな番号
• 地の質感: 白と青灰のフラットな地に、黒のグラデーション面と粒子状の金色の波線を重ねる。
• 形: 四角を基本にして、角丸を小さく抑える。ボタンには黒い枠とオレンジの下影を付ける。セクションの境界はゆるい曲線か三角の切り込みにする。
• 温度感: クールな地にオレンジで温かみを足す、中間からやや寒色寄りの印象。

Colors

• 地の色は白と淡い青灰を交互に使い、セクションごとに切り替える。
• 強調はオレンジに一本化する。文字を塗りつぶすマーカーとして使う。
• 黒の面は、帯見出し・特長の目次カード・デモ音源・FAQ・スペックのカードに使う。
• 赤は価格表示にだけ使う。
• オレンジの見出し文字の下には、オレンジの点線を引く。
• 黒い面の上の文字は白にし、強調部分はオレンジにする。

Typography

• 見出しは太いゴシックで書く。キーワードは大きく、助詞は小さくしてメリハリを付ける。
• キーワードはオレンジ地に白文字の帯で囲む。
• 本文の重要な一文は、オレンジのマーカーで塗る。
• 特長の番号は、グレーの巨大な数字を見出しの背後に重ねる。
• 科学的な説明パネルでだけ明朝を混ぜる。
• 注釈には※を付け、10px のグレー文字で書く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スペックカードだけ 2 カラムにする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真と黒いカードは左右 18px ほどの余白を空けて置く。
• 購入ボックスは幅 75% ほどで中央に置き、黒い枠で囲む。
• 購入ボックスはページ内に 4〜5 回くり返す。
• 各セクションの先頭に、音波アイコン入りの丸い区切りを置く。
• 特長の 3 項目は、先に黒いカードで目次として並べる。

Elevation & Depth

• 基本はフラットで、影は使わない。
• 購入ボタンは下辺に 4px のオレンジのずれ影を付ける。
• 吹き出しの白いカードは影なしで、淡い地との差で浮かせる。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの横長の長方形にする。製品は切り抜きで大きく見せる。
• セクション境界: ゆるい曲線の波、または中央が下がる三角の切り込みにする。
• 購入ボタンは角丸 10px の白地に黒枠を付け、右端に »を置く。
• デモ音源のボタンは、白い線で囲んだピル型にする。
• 吹き出しには下向きの三角を付ける。
• スペックカードは黒のグラデーションで、角丸 6px にする。

Components

• 価格入りの購入ボックス（purchase-box）: 上部に黒い帯のバッジを置き、キャッチ・製品・赤い価格を並べる。下段の生成り地に購入ボタンを 3 つ縦に並べる。
• 購入ボタン（button-primary）: 白地に黒枠とオレンジの下影を付け、右端に »を置く。
• オレンジ帯の見出し（marker-heading）: キーワードだけをオレンジ地の白文字にする。
• 番号付き特長の目次（feature-index-card）: 黒いグラデーション面にグレーの番号を置き、白とオレンジの2行見出しと下向き矢印を添える。
• アコーディオン（accordion）: 白地に黒枠とオレンジの下線を付け、右にVマークを置く。
• FAQ（faq-item）: 黒い面に、オレンジのQ.・白い質問文・右端の＋を並べる。
• 吹き出し見出し（speech-bubble）: 白い角丸の吹き出しに、オレンジのアイコンを角に重ねる。
• スペックカード（spec-card）: 黒い面に白い線画アイコンと2行の説明を入れ、2列に並べる。
• デモ音源の切替（audio-demo）: 写真の下の黒い面に、白い枠のピル型を3つ並べる。右端に再生の丸ボタンを置き、モード名を色で分ける。

Do's and Don'ts

Do - 強調はオレンジのマーカーと点線の下線に統一する。 - 購入ボックスはセクションの区切りごとに同じデザインでくり返す。 - 研究の出典は注釈として明記し、信頼感を出す。 - 製品は黒の切り抜き画像で大きく見せ、画面からはみ出させる。 - 黒い面と淡い地を交互に置き、リズムを作る。

Don't - オレンジ以外の強調色を増やさない。 - ボタンをグラデーションや丸いピル型にしない。 - 本文を中央揃えにした長文にしない。 - 価格以外に赤を使わない。 - 写真に大きな角丸や影を付けない。

Page Structure

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

1. ファーストビュー（製品の役割を一言で伝える）: ビジネスマンの写真に太い白文字のキャッチを重ね、キーワードはオレンジのグラデーションにする。下に製品の切り抜きとロゴを置く。
2. 購入ボックス（価格と購入先を早めに示す）: 黒枠のボックスに赤い価格と3つの購入ボタンを入れる。
3. 悩みの提起（対象者と科学的な背景を示す）: 大見出しの下に、マーカー付きの本文と出典の注釈を置く。
4. 製品紹介（製品のコンセプトを示す）: オレンジ帯の見出しと製品の大きな写真を置く。黒い帯の上に利用シーンの写真とボタンを重ね、その下にアコーディオンを3つ並べる。
5. 仕組みの解説（脳波の基礎知識を伝える）: 濃紺の背景にベージュのパネルを置く。明朝見出しと、2色の比較カードを並べる。
6. 技術紹介（独自技術を示す）: 月桂樹の装飾付きの見出しを置き、黒い背景に白い図解カードを重ねる。
7. 特長の目次（3つの特長を予告する）: 番号付きの黒いカードを縦に3つ並べる。
8. 特長01（体験を伝える）: グレーの大きな番号を置く。写真の下にデモ音源のボタンを並べる。
9. 特長02（音質と装着感を伝える）: 監修者の写真の帯、吹き出し見出し、分解図、マーカー付きの本文を順に置く。
10. 機能一覧（スペックを伝える）: 文字を重ねた写真の帯を3つ置き、その下に黒いスペックカードを2×2で並べる。
11. 特長03（アプリ連携を伝える）: 白い角丸パネルにイラストの人物、写真、アプリストアのボタンを入れる。
12. よくある質問（不安を解消する）: 黒いFAQの帯を縦に並べる。
13. CTA・フッター（最後に購入を促す）: 購入ボックスの下に、注釈・ロゴ・リンク一覧を置く。

Imagery

• 製品はマットな黒の切り抜きにし、白地に大きく配置する。
• 人物は働く大人やランナーなど、日常で使う場面の写真を使う。
• 人物の頭に、青く光る脳波の合成エフェクトを重ねる。
• 製品の背後に、金色の粒子でできた波線を流す。
• アイコンは白またはオレンジの線画にする。
• 人物の素朴な線画イラストは、問いかけの場面にだけ使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% の幅に収め、左右は淡い地にする。
• PC の購入ボックスは横長にし、購入ボタンを3つ横に並べる。
• PC のアコーディオン・特長目次・デモ音源・機能写真は、横に並べる。
• PC の特長02は、写真と本文を左右2カラムにする。
• PC のスペックカードは4列にする。

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