DESIGN.md — 漆黒×虹色グラデのガジェット新製品 LP（Dark Cinematic Gadget Launch LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト
• キーワード: 漆黒・シネマティック・3Dレンダー・グラデーション文字・テック・遊び心
• 地の質感: マットな黒の地に、光沢のある 3D 物体と暗めにトーンを落とした写真を重ねる。
• 形: 角丸 12px 前後のダークパネルと、ピル型の黒ボタン。
• 温度感: 冷たく静かな黒を基調に、虹色のアクセントで熱を加える。

Colors

• 地は純黒 #000 に統一する。区切りたいときはパネルを #161616 にして、明るさの差だけで分ける。
• 見出しは白にする。各見出しで 1〜3 文字のキーワードだけを紫→ピンク→オレンジのグラデーション文字にする。
• 数値の強調色はセクションごとに 1 色に絞る（翻訳性能は青、電池性能は蛍光ライム）。
• 虹色グラデーションの面は購入バナーの 1 箇所だけに使う。
• 製品らしさを出すブラウンとライムは、3D レンダーと写真の中だけに出す。

Typography

• 大見出しは極太で短く区切り、2〜3 行に改行する。
• グラデーション文字は background-clip:text で作る。
• 本文は小さめ（11px）にして、行間を広くとる。
• 根拠が必要な表現には上付きの ※番号を添える。
• 数値は大きくし、単位は小さめの太字にしてベースラインを揃える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はテキストと画像の左右 2 カラム。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しと本文は左揃え。ヒーローだけ中央揃えにする。
• 写真やレンダーは画面幅いっぱいまで広げ、黒地へフェードさせる。
• 機能パネルは左右 10px の余白を取った角丸ボックスで並べる。
• 仕様表は項目名を左列、値を右列にした 2 列の行リストにする。
• 注釈はページ最下部にまとめる。

Elevation & Depth

• 影はほぼ使わない。奥行きは明るさの差と光の演出で表現する。
• 3D 製品には柔らかい反射光と落ち影を付ける。
• パネルは #161616 の面のみで、境界線は付けない。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は長方形で裁ち落とし、端を黒へグラデーションで溶かす。
• セクション境界: 直線の区切り線は使わない。黒地へのフェードと余白で区切る。
• パネルは角丸 12px にする。
• ボタンは完全なピル型にする。
• 機能アイコンは半透明の円の中に置く。

Components

• グラデーション強調見出し（gradient-keyword-heading）: 白の極太見出しのうち、キーワードだけを紫→ピンク→オレンジのグラデーション文字にする。
• ダーク機能パネル（feature-panel）: #161616 の角丸ボックス。中に見出し、本文、画像を収める。
• 大型数値（stat-number）: 小さなラベルの下に、色付きの大きな数値と単位を置く。
• 機能アイコン円（icon-bubble）: 写真の上に浮かべる半透明の円。中に線画アイコンと小さなラベルを入れる。
• 虹色購入バナー（rainbow-cta-banner）: 水色→ピンク→黄のグラデーション角丸枠。黒文字の告知と黒いピル型ボタンを中央に置く。
• 購入ボタン（button-primary）: 黒のピル型ボタン。白い太字の下に、赤い小さな補足文を入れる。
• 仕様表（spec-table）: 見出しの下に細い線を引き、項目名と値の 2 列を罫線なしで並べる。
• 注釈リスト（footnote-list）: ※番号付きの小さなグレー文字。ページの最後に並べる。

Do's and Don'ts

Do - 黒地で写真や 3D を主役にし、文字は少なく大きく扱う。 - 見出しのグラデーションはキーワード 1 箇所に限定する。 - 数値は大きく見せ、※番号で根拠を添える。 - 機能ごとにパネルや写真ブロックで 1 テーマずつ区切る。 - 購入枠だけを明るく派手にし、そこへ視線を集める。

Don't - 白や淡色の背景セクションを挟まない。 - 見出し全体をグラデーションにしない。 - 影の強いカードや太い枠線を使わない。 - 可愛い丸文字や手書きフォントを使わない。 - 強調色を 1 セクションに何色も混ぜない。

Page Structure

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

1. ファーストビュー（製品の意外性を一目で伝える）: 黒地の中央に製品パッケージを浮かべ、その下に巨大な 3D の曲面を置き、白い中央揃えのキャッチと短い文を重ねる。
2. 多機能の紹介（主な機能を一覧で見せる）: グラデーション見出しの下に横顔の写真を置き、周りに機能アイコンの円を浮かべる。
3. 音質訴求（サウンド体験を感じさせる）: 極太の見出しの下に、色煙と音の波形を背景にした人物写真を全幅で置く。
4. 翻訳機能（コミュニケーションの価値を伝える）: 見出しと本文の下にビジネスシーンの写真を全幅で置き、下端を黒へフェードさせる。
5. モード説明パネル（2 つの使い方を説明する）: ダークパネルの中に小さなアイコン付きの小見出しを 2 つ並べ、アプリ画面の画像とストアバッジを添える。
6. 性能数値（翻訳精度を数値で示す）: グラデーション見出しの下に、青い大型数値を 3 つ縦に並べる。背景には地球と国旗をあしらった 3D 画像を置く。
7. バッテリー（持続時間を示す）: 上部に稲妻のビジュアルを置いたパネルに、蛍光ライムの数値を 3 段並べる。
8. 接続・軽量・防水（その他の特長を補足する）: パネルを 3 枚続け、それぞれ写真や 3D と短い見出しを組み合わせる。
9. 仕様（詳細スペックを示す）: 線付きの見出しの下に 2 列の仕様リストを置き、横に製品レンダーを添える。
10. CTA（購入へ誘導する）: 虹色グラデーションの角丸バナーに、限定数の告知と黒いピル型ボタンを入れる。
11. 次回予告（続編への期待をつくる）: 巨大な英字の上に、シルエットの黒い 3D と ? を重ね、その下に「近日公開」を小さく添える。
12. 注釈・会社情報（法的な補足をまとめる）: ※番号付きの小さなグレー文字を並べ、最後に会社名を置く。

Imagery

• 製品は光沢のある 3D レンダーにし、黒背景に浮かべて少し傾ける。
• 人物写真は暗めに露出を落とし、横顔や動きのあるポーズで撮る。
• 背景には色煙、稲妻、水しぶき、地球などのドラマチックな VFX を使う。
• アイコンは細い白線のミニマルなものにする。
• 写真の端は黒へグラデーションで溶かし、地と馴染ませる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では見出しと本文を左、写真を右に置く 2 カラムにする（ブロックごとに左右を入れ替える）。
• PC ではモード説明パネルを、画像とテキストの横並びにする。
• PC では電池性能の数値を 3 つ横並びにする。
• PC では軽量と防水のパネルを 2 枚横に並べる。
• PC では仕様表を右側、製品レンダーを左側に配置する。
• 見出しの文字サイズは PC で約 1.5 倍にする。

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