---
version: alpha
name: Cinematic Gradient Gadget LP
description: 青緑・ピンク・金色が斜めに混ざる映画風グラデーションを全面の地にして、白いカードと黒い帯で情報を区切るガジェット紹介 LP。製品写真は白い地の上に切り抜きで置く。差し色は蛍光イエローとグラデーション文字で、若い層向けのクリエイティブな印象をつくる。
colors:
  primary: '#1F98A9'
  secondary: '#CB728C'
  accent-1: '#CEA172'
  background: '#FFFFFF'
  background-alt: '#FFFFFF'
  accent-2: '#F3FE02'
  dark-section: '#010101'
  on-dark: '#FDFDFD'
  text: '#110F10'
  cta: '#FDFEFE'
  on-cta: '#110F10'
  accent-3: '#E0457B'
  text-muted: '#A5A6A8'
  marker: '#FFF27A'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Montserrat
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 44px
  tab-nav:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 56px
  speech-heading:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 110px
  feature-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 260px
  highlight-panel:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 600px
  check-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 28px
  number-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 160px
  hashtag-chip:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 20px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#1F98A9` | グラデーションの基調の青緑 | 20% | 画素の主要色に補正 |
| `secondary` | `#CB728C` | グラデーションのピンク | 10% | 画素の実測 |
| `accent-1` | `#CEA172` | グラデーションの金色 | 8% | 画素の実測 |
| `background` | `#FFFFFF` | コンテンツカードの白地 | 20% | 画素の実測 |
| `background-alt` | `#FFFFFF` | ナビ帯・動画セクションの薄いグレー | 5% | 画素の実測 |
| `accent-2` | `#F3FE02` | 特集枠の蛍光イエロー | 4% | 画素の実測 |
| `dark-section` | `#010101` | メッセージ帯・アクティブタブの黒 | 6% | 画素の実測 |
| `on-dark` | `#FDFDFD` | 黒帯の上の白文字 | 1% | 画素の実測 |
| `text` | `#110F10` | 見出し・本文の黒文字 | 3% | 画素の主要色に補正 |
| `cta` | `#FDFEFE` | ボタンの白地 | 1% | 画素の実測 |
| `on-cta` | `#110F10` | ボタンの文字・矢印部分の黒 | 0% | 画素の主要色に補正 |
| `accent-3` | `#E0457B` | 強調テキストのオレンジ・マゼンタ | 0% | 推定 |
| `text-muted` | `#A5A6A8` | 英字ラベルの淡い色・注釈 | 1% | 画素の実測 |
| `marker` | `#FFF27A` | 機能リストの黄色マーカー下線 | 0% | 推定 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の大見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.04em |
| `headline-lg` | セクション見出し（斜線で挟む） | ゴシック | Noto Sans JP | 800 | 22px | 1.4 | 0.03em |
| `headline-md` | 特長カードの見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em |
| `accent` | 見出し横の大きな淡い英字ラベル | 欧文サンセリフ | Montserrat | 700 | 20px | 1.1 | 0.05em |
| `headline-sm` | 英字のメッセージ見出し・特集タイトル | 欧文サンセリフ | Montserrat | 600 | 20px | 1.3 | 0.0em |
| `body-md` | 特長の箇条書き・本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em |
| `note` | ※注釈・キャプション | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em |

- 見出しは極太ゴシックで、短く言い切る。
- 製品名は英字の太字で大きく出し、グラデーション文字も使う。
- セクション見出しは左右を斜線「＼ ／」で挟む。
- 特長の見出しの右に、淡い色の大きな英字キーワードを添える。
- 本文は箇条書きの「・」で短くまとめる。
- 注釈の番号は＊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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-f62ad305`（元 LP の URL から採番）
- **元 LP**: https://www.sony.jp/vlogcam/special/ZV-1M2/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（9/14 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。