DESIGN.md — 虹色グラデ×白カードのカメラ紹介 LP（Cinematic Gradient Gadget LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: クール・先進的、ポップ・元気、情報量多め・訴求型
• キーワード: シネマティック・グラデーション・白カード・蛍光イエロー・Vlog・若者向け
• 地の質感: ぼかしの効いた多色グラデーションの地に、白くフラットなカードを重ねる。影はほとんど付けない。
• 形: 角丸なしの四角いカードと細い枠線。見出しの左右に斜線、吹き出しの下に三角を付ける。
• 温度感: 青緑の寒色とピンク・金色の暖色が混ざった中間の温度。全体として明るく鮮やか。

Colors

• ページの地はすべて青緑・ピンク・金色の斜めグラデーションにする。
• 情報は白カードにまとめ、グラデーションの地とはっきり分ける。
• 特別な告知だけ蛍光イエローの面にして、目を引かせる。
• 人物のメッセージやアクティブ状態には黒帯を使う。
• 見出しの英字ロゴ風の文字は、青緑→ピンク→金のグラデーション文字にする。
• 強調語はマゼンタやオレンジの文字か、黄色のマーカー下線にする。
• ボタンは白地＋黒枠にし、右端に黒い矢印ブロックを付ける。

Typography

• 見出しは極太ゴシックで、短く言い切る。
• 製品名は英字の太字で大きく出し、グラデーション文字も使う。
• セクション見出しは左右を斜線「＼ ／」で挟む。
• 特長の見出しの右に、淡い色の大きな英字キーワードを添える。
• 本文は箇条書きの「・」で短くまとめる。
• 注釈の番号は＊1、＊2 の形にし、カード下部にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードは SP ではテキストと画像を縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• グラデーションの地の上に、白カードを中央に置く。
• 特長は見出し・箇条書き・動画（または写真）の 1 セットで並べる。
• セクションの間はグラデーションの地を広めに見せて、区切りにする。
• 製品バリエーションは 2 列のグリッドで並べ、色名のラベルを付ける。
• 機能一覧はチェック付きの 2 列リストにする。
• クリエイター紹介は横スクロールのサムネイル列にする。

Elevation & Depth

• 影はほぼ使わず、フラットな白カードにする。
• 階層は地のグラデーションとカードの白のコントラストで表す。
• 吹き出し型の見出し枠は白線または黒線で囲み、下に三角を付ける。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品は白地の切り抜き。人物・風景は四角い写真。FV は帯状にずらしたコラージュ
• セクション境界: 直線で区切る。グラデーションの地をそのまま見せて区切る
• カードとボタンは角丸なしの四角にする。
• ハッシュタグ型のタグだけ小さな角丸にする。
• 見出しの吹き出しは四角い枠＋下向きの三角。
• 動画埋め込みは 16:9 の四角。

Components

• 矢印付き四角ボタン（button-primary）: 白地に黒枠のボタン。右端に黒地の白い矢印ブロックを付け、2 つ並べる。
• 製品切替タブ帯（tab-nav）: 薄いグレーの帯に 5 つのタブを並べる。選択中のタブだけ黒地に白文字。
• 吹き出し見出し枠（speech-heading）: 線で囲んだ四角い枠に製品名とキャッチを入れ、下に三角を付ける。
• 特長カード（feature-card）: チェック付きの見出し、淡い英字ラベル、箇条書き、動画を 1 組にした白カード。
• 蛍光イエロー特集枠（highlight-panel）: 白枠で囲んだ蛍光イエローの面。極太見出し・動画・黒いメッセージ帯を入れる。
• マーカー付きチェックリスト（check-list）: チェック印＋太字の機能名を 2 列で並べ、黄色のマーカー下線を引く。
• 大きな番号付きポイント（number-card）: グラデーション色の大きな数字、短い見出し、写真を並べた 4 つのポイント。
• ジャンルタグ（hashtag-chip）: 濃いグレーの地に白文字で「#ジャンル」と入れる小さなタグ。

Do's and Don'ts

Do - 地は必ず多色の斜めグラデーションにし、白カードで情報を区切る。 - 製品写真は白地の切り抜きでくっきり見せる。 - 特長ごとに動画か写真を添えて、体験のイメージを見せる。 - 強調はマーカー下線と差し色の文字だけに絞る。 - 告知だけ蛍光イエローの面で目立たせる。

Don't - グラデーションの地に直接、長い本文を置かない。 - 角丸の大きいポップなボタンにしない。 - 影や立体的な装飾を多用しない。 - 差し色を一度に何色も使って、カード内を派手にしない。 - 製品写真の背景に柄を入れない。

Page Structure

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

1. ファーストビュー（製品と世界観を一目で伝える）: グラデーションの写真を帯状にずらしたコラージュの中央に、製品写真と極太コピーを置く。右に丸い告知バッジを付ける。
2. 製品ラインナップのナビ（シリーズ内の製品を切り替える）: グレーの帯に 5 つのタブを並べ、選択中の 1 つを黒地にする。
3. 製品バリエーション（色と同梱セットを見せる）: 吹き出し見出しの下に、白黒 2 色の製品写真を 2×2 で並べ、ボタンを 2 つ置く。
4. プロモーション動画（動きで魅力を伝える）: 白地にグラデーション文字の見出しを置き、16:9 の動画を中央に配置する。
5. 著名人の起用告知（話題性と共感を生む）: 蛍光イエローの枠に極太見出しと CM 動画を入れ、下の黒帯に英字見出し・メッセージ・プロフィールを置く。
6. 特長（使い方のシーン別に機能を説明する）: 白カード内に、チェック付きの見出し＋英字キーワード＋箇条書き＋動画のセットを 5 つ縦に並べる。
7. ポイントまとめ（主な性能を 4 つに要約する）: 大きな色付き数字と写真を、白カード内に 2×2 で並べる。
8. 新機能の比較（旧モデルとの違いを示す）: 製品写真を左、チェックリストを右に置いた白カード。
9. 作例・レビュー（使う人の実例で信頼を得る）: 吹き出し見出しの下に、ジャンルタグとクリエイターのサムネイル列、レビューのサムネイル列を置く。
10. CTA（製品情報と購入へ誘導する）: 矢印付きの白い四角ボタンを 2 つ横に並べる。

Imagery

• 人物写真は自然光のライフスタイル写真にし、カラーグレーディングで色かぶりをかける。
• FV は複数の写真を横帯状にずらしたコラージュにする。
• 製品は白背景の真正面の切り抜き。色違いを並べる。
• 動画のサムネイルは製品や人物のアップにする。
• 背景は青緑・ピンク・金色をぼかした大きな斜めグラデーション。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はカードの幅を約 75%（最大 720px 程度）にして中央に置き、左右にグラデーションの地を見せる。
• SP はカードの幅を 90% にし、特長はテキスト→動画の順に縦に積む。
• ナビのタブは、SP では横スクロールにする。
• 比較リストは、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 行書くと起動時に読み込まれる。