DESIGN.md — 紫ネオン×墨色の夜景系ガジェット LP（Neon Purple Night Gadget LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、上品・高級、シンプル・ミニマル
• キーワード: 夜のバー・紫ネオン・限定カラー・シネマティック・余白多め
• 地の質感: ボケた光と光沢布のある暗い写真。地は艶のない墨色のベタ塗り。
• 形: 角丸が小さめの縦長写真カードと、画面幅いっぱいの映像帯。ボタンは白の角丸長方形。
• 温度感: 寒色寄りで、紫とマゼンタの光にわずかな温かみがある

Colors

• 地は墨色 #2D2926 のベタ塗りに統一し、色は写真の紫ネオンにまかせる。
• フルブリードの映像帯は濃紺から紫のトーンで、墨色の区間と交互に並べる。
• 文字は基本的に白。注釈だけ半透明のラベンダーグレーにする。
• CTA は白い面に黒文字だけにし、有彩色のボタンは使わない。
• 限定などのバッジはラベンダーの面か、白い細枠の小さなラベルにする。

Typography

• テキストはすべて中央揃えにする。
• 欧文見出しは大文字にし、字間を広くとる。
• 和文の大見出しは細いウエイトで大きく組み、2〜3 行に改行する。
• 映像帯のコピーは太字で字間を極端に広くとり、短い一文だけにする。
• 注釈は小さく、カードの右下に右揃えで置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは中央に 1 枚ずつ縦に積む。
• 本文ブロックの幅: 画面幅の約 70%
• 余白: セクション間 50px、基本単位 8px、カード内 16px（375px 幅換算）
• 説明カードは画面幅の約 70%、CTA カードは約 53% にして、幅に差をつける。
• 説明カードと CTA カードの間は約 16px 空ける。
• 墨色区間の上下には約 50px の余白をとる。
• 映像帯は画面幅いっぱいで、高さは約 300px。

Elevation & Depth

• 影は使わない。奥行きは写真の明暗だけで出す。
• カードは墨色の地との明度差で浮いて見せる。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: カードは縦長の長方形に写真を全面敷き、角丸は小さくする。映像帯は横長の全幅にする。
• セクション境界: 直線で区切り、墨色と全幅映像帯を切り替える。
• カードの角丸は 4〜6px に控えめにする。
• ボタンは 4px 程度の角丸長方形にする。
• バッジは角の立った細枠のラベルにする。

Components

• 白い購入ボタン（button-primary）: CTA カードの下部に置く、白地に黒文字の横長ボタン。
• 購入 CTA カード（cta-card）: 縦長の写真カード。上部に欧文見出しと和文サブコピー、下部に限定ラベル・商品名・ボタン・注釈を置く。
• 特長写真カード（feature-card）: 暗い写真の上に、和文の大見出しと説明文を白で中央に重ねる。
• 新着・送料バッジ（badge-outline）: カードの左上に置く、白い細枠の小ラベル。
• 限定ラベル（badge-limited）: FV の商品名の横に置く、ラベンダー地の小ラベル。
• 映像帯（cinematic-band）: 全幅の暗い映像・写真に、字間の広い短いコピーを白で重ねる。
• 注釈（note-text）: カード下部に置く、※付きの右揃えの小さな注記。

Do's and Don'ts

Do - 墨色の地と紫ネオンの写真で、夜のムードを統一する。 - 1 枚のカードにはメッセージを 1 つだけ載せ、文字量を絞る。 - CTA カードは同じデザインのまま、特長ごとに写真だけ替えて繰り返す。 - 欧文は大文字にして字間を広くとる。

Don't - 明るい白背景のセクションは入れない。 - 赤やオレンジの派手な CTA ボタンは使わない。 - 影や立体的な装飾を多用しない。 - 長文の説明やアイコンを並べた機能一覧は入れない。

Page Structure

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

1. ファーストビュー（限定カラーの世界観を一目で見せる）: 紫ネオンの背景に、光沢布と商品を中央に縦に置く。ロゴ・欧文のカラー名・限定ラベルを重ね、スライダーの矢印を付ける。
2. コンセプト（カラーの情緒的な魅力を伝える）: 墨色の地に写真カードを置き、欧文見出しと 3 行の和文コピーを白で重ねる。
3. CTA（購入へ誘導する）: 幅の狭い縦長カードに、欧文見出し・限定商品名・白ボタン・注釈を置く。
4. ブランドメッセージ帯（テンポの切り替えと余韻をつくる）: 全幅の暗い映像帯に、短いコピーと光の線のモチーフを重ねる。
5. 特長1（使用時間などの性能を伝える）: 写真カードに、2 行の大見出しと 4 行の説明文、注釈を置く。
6. CTA（特長を読んだ直後に購入を促す）: 同じ形の CTA カードを、写真だけ替えて置く。
7. 情緒コピー帯（感情に訴える）: ボケた人物写真の全幅帯に、2 行のコピーを中央に置く。
8. 特長2（味わいと技術を伝える）: カクテルのある夜景写真カードに、3 行の大見出しと説明文を重ねる。
9. クロージング CTA（最後にもう一度購入を促す）: CTA カードを繰り返して、ページを締める。

Imagery

• 夜のバーやクラブでのボケた紫・マゼンタ・シアンの光を背景に撮る。
• 商品は手に持つカットか、光沢のある布と合わせたスタジオカットにする。
• 人物は顔の一部か手元だけを写し、匿名性と色気を残す。
• グラスやカクテルを小道具にして、大人の夜のシーンを演出する。
• 全体を暗く落とし、テキストを置く部分の明度を下げておく。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でもカードは中央に狭い幅のまま 1 カラムで積み、左右は墨色の余白にする。
• PC の FV は横長の人物写真にし、ロゴを左、カラー名を右に分けて置く。
• 映像帯は PC でも全幅のまま、横長の比率にする。
• 文字サイズは PC でも 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 行書くと起動時に読み込まれる。