DESIGN.md — 漆黒×夕焼けグラデのカメラ製品 LP（Dark Gradient Cinematic Gadget LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: クール・先進的、ラグジュアリー・ダーク、シンプル・ミニマル
• キーワード: 漆黒の地・夕焼けグラデーション・光の帯・極細イタリック英字・製品切り抜き・シネマティック
• 地の質感: フラットな黒に、ぼかしたグラデーションの光が滲む。ノイズや紙の質感はない
• 形: 角のない長方形のグラデ帯と細い横線。ボタンだけがピル型
• 温度感: 地は冷たい黒、差し色は暖色から寒色へ移るグラデで温度差がある

Colors

• 地は常に純黒。白い面のセクションは作らない
• 色はコーラル→ピンク→紫→青のグラデーションでのみ使い、単色の面は置かない
• グラデは細い横帯・見出し下線・写真背後の光として画面端から差し込む
• セクション末尾は黒から紺や暖色へ滲ませて次へつなぐ
• 文字は白が基本。注釈だけグレー、和文の小見出しにピンクを使う
• ボタンは半透明の暗い面に、濃いマゼンタの矢印チップを添える

Typography

• 英字見出しは極細の斜体で大きく組み、2行に段ずらしする
• 英字見出しのすぐ下にグラデの細い下線を引く
• 和文は小さく、行間を広くとって静かに見せる
• 本文中の数値やキーワードだけ大きく太くする
• 注釈は※付きの最小サイズでグレーにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は文字と写真の左右振り分け
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面端まで裁ち落とし、文字は反対側に寄せる
• 左右交互に写真とテキストを配置してリズムを作る
• グラデ帯を画面の端から短く飛び出させる
• 仕様表は2列のリストを細線で区切る
• 余白を大きくとり、1画面に要素を詰めない

Elevation & Depth

• 影はほぼ使わない
• 奥行きは黒への暗転グラデと光のぼかしで表現する
• 製品写真は背面のグラデの光で浮かせる

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 製品は背景を抜いた切り抜き。人物・風景は長方形で、端を黒にフェードさせる
• セクション境界: 直線の境界は作らず、グラデで黒へ溶け込ませる。一部は大きな円形グラデで区切る
• カードや枠の角丸は使わない
• ボタンだけを完全なピル型にする
• グラデの帯は角のない細長い長方形にする

Components

• 極細斜体の英字見出し（heading-italic-en）: 2行に段ずらしした大きな英字。下にグラデの細線、その下に和文サブを添える
• グラデの光の帯（gradient-bar）: 画面端から差し込む幅短めの帯。コーラルから青へ移るグラデ
• ピル型ボタン（button-primary）: 半透明の暗い面に白文字、右端にマゼンタの矢印チップ
• 下線付き矢印リンク（link-arrow）: 白文字の右に細い矢印、下に細線を引くテキストリンク
• 新機能の矢印リスト（feature-list）: 先頭に点を付けた機能名と右端の矢印を細線で区切る。PCは2列
• スペック表（spec-table）: 数値を強調した2列のリスト。行間を細いグレー線で区切る
• センサーサイズ比較図（size-compare）: 大きさの違う四角を3つ並べ、倍率を中に表示。下に製品写真とNEWバッジ
• 注釈（note-text）: 本文直下に置く※付きのグレー小文字

Do's and Don'ts

Do - 地は純黒で統一する - 色はグラデの帯と光だけで入れる - 英字見出しは極細の斜体で大きく見せる - 製品は切り抜きにし、背後にグラデの光を置く - 写真の端は黒へフェードさせる - 注釈は※付きの小さなグレー文字で添える

Don't - 白や明るい色の背景セクションを作らない - 原色の単色ボタンを置かない - 太いゴシックの大見出しを多用しない - カードに角丸や影を付けない - グラデを派手なレインボーにしない - 和文本文を大きくしすぎない

Page Structure

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

1. ファーストビュー（製品と世界観を一目で伝える）: 全面グラデの背景に製品切り抜きを中央に置き、左上に和文キャッチ
2. コンセプト（ブランドの姿勢を示す）: 黒地に極細斜体の英字コピーと、グラデ背景の製品写真
3. 製品ギャラリー（外観をいろんな角度から見せる）: 切り抜き写真を左右交互に置き、グラデ帯を添える
4. 製品紹介（シリーズ内での位置づけを説明する）: 英字見出しと短い説明文、センサーサイズ比較図
5. 特長（画質）（主要性能を訴える）: 英字見出し、数値を強調した本文、作例写真3枚、背景は暗転グラデ
6. 特長（色・AI・小型）（機能を1つずつ見せる）: 写真を片側に裁ち落とし、反対側に見出しと本文を交互に配置
7. 利用シーン（使う場面を想像させる）: 人物写真から夕焼けグラデへ溶け込み、円形グラデの中に製品を置く
8. 新機能一覧（機能を一覧にまとめる）: 2列の矢印リストとピル型ボタン、下線付きリンク
9. スペック（詳しい仕様を伝える）: 英字見出しの下に2列のスペック表と注釈
10. 関連サービス（関連サービスへ誘導する）: ロゴバナー画像と短い説明を中央に置く

Imagery

• 製品は黒い本体を背景を抜いて撮り、斜め前やいろんな角度から見せる
• 人物や風景は夜景・ネオン・夕景など光の強いシネマティックな写真
• 写真の端は黒へグラデで溶かす
• 装飾はぼかした夕焼けグラデの帯と大きな円形の光
• イラストやアイコンは使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは写真を全幅にし、その下にテキストを積む
• 英字見出しはSPで40px前後、PCは約2倍
• 左右交互の配置はSPで縦1列にする
• 機能リスト・スペック表はSPで1列にする
• グラデ帯は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 行書くと起動時に読み込まれる。