レモン黄×青空の爽快ビタミン飲料 LP

Vivid Lemon Yellow and Sky Blue Beverage Brand LP

鮮やかなレモンイエローの地と青空写真の帯を交互に重ねたブランドサイト型 LP。英字見出しは極太コンデンス書体に水色の立体影を付け、白い水玉のハーフトーンと斜めのセクション境界でポップで爽やかな動きを出す。

食品・飲料ポップ・元気清潔・爽やか力強い・インパクトSPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地はレモンイエローを基本とし、青空写真の帯を挟んでリズムを作る
英字見出しは黄地なら黄文字に水色の影、空の上なら黄文字に青の影
ボタンは水色のベタ面に白文字だけにする
黄地の下部や境界付近には白い水玉パターンを重ねる
本文は黄地では黒、空写真上では白で可読性を確保
オレンジは手書き風英字の装飾にのみ使う

TYPOGRAPHY

書体

displayセクション英字見出し(立体影付き)装飾・ディスプレイ／ Anton 400 ／ 54px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

headline-md空写真上のリードコピーゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

body-lg空写真上の本文(白・中央)ゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm動画タイトルゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-mdセクション説明文ゴシック／ Noto Sans JP 500 ／ 10px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

note商品下の果汁表示ゴシック／ Noto Sans JP 700 ／ 10px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

accent手書き風の装飾英字欧文スクリプト／ Pacifico 400 ／ 44px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタンの英字ラベル欧文サンセリフ／ Dela Gothic One 400 ／ 9px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

セクション見出しは英字の大文字だけで作り、日本語の見出しは付けない
英字見出しは右下方向にずらした立体影を付ける
本文は中央揃えにし、短い文ごとに改行する
FVのコピーは白地＋黒枠の箱に入れて、2行を段違いに置く
手書き風英字は斜めに傾けて商品の横に重ねる

PAGE STRUCTURE

セクション構成

ファーストビューブランドの明るい世界観と主力商品を印象づける淡い黄地に大きな楕円で人物写真を入れ、黒枠のコピー箱と商品ボトルを重ねたスライダー
動画一覧CMで親しみを持ってもらう黄地に立体影英字見出し、16:9サムネとタイトルを縦に並べる。下部は水玉地
コンセプトメッセージ味や飲みやすさを伝える全幅の青空写真に白太字の中央揃えコピーを5段で置く
商品紹介商品の種類を伝える黄地に見出しと2行の説明、手書き風英字と商品切り抜きを斜めに重ねる。水玉地
ラインナップ全商品を一覧で選ばせる斜めに切った青空写真の帯に、商品切り抜きを3列/2列で並べる
コラム導線読み物へ送る黄地に見出し、3行の説明、水色のMOREボタン
歴史導線ブランドの歴史ページへ送る黄地から白へ抜けるドットグラデーションに説明文とMOREボタン、斜めで終える

COMPONENTS

部品

立体影英字見出し heading-3d-en極太コンデンス体の大文字英字に水色のずらし影を付けた見出し
MOREボタン button-more水色の面に白の英字ラベル。右端に外部リンクアイコン
FVコピー枠 fv-copy-box白地に黒の太枠で、2行のコピーを段違いに置く
動画カード video-card16:9のサムネに再生アイコンを重ね、下に黒字でタイトル
商品切り抜きアイテム product-item商品ボトルの切り抜きの下に、白太字の短いラベル
水玉パターン地 dot-pattern黄地に白い水玉を重ねた装飾の地。下に向かってドットを大きくする
スライダードット carousel-indicatorFV下に小さな丸ドットと一時停止ボタン

守ること

黄と青空の2色の世界観を必ず交互に出す
英字見出しには必ず立体影を付ける
商品は切り抜き写真で、明るく正面から見せる
境界を斜めにして動きを出す
説明文は2〜3行に短くまとめる

DON'T

避けること

暗い色や重い背景のセクションを入れない
ボタンをピル型や派手なグラデーションにしない
細い明朝体を使わない
長い本文を左揃えで詰め込まない
黄・青以外の強い色をベタ面に使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — レモン黄×青空の爽快ビタミン飲料 LP（Vivid Lemon Yellow and Sky Blue Beverage Brand LP）

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

Overview

業種: 食品・飲料／ 雰囲気: ポップ・元気、清潔・爽やか、力強い・インパクト
キーワード: レモンイエロー・青空・水玉ハーフトーン・立体影の英字見出し・斜め切り替え・商品の切り抜き
地の質感: ベタ塗りの黄色に白い水玉パターンやドットのグラデーションを重ね、青空写真で抜け感を出す
形: 大きな楕円で人物を囲むFV、斜めに切った境界、角丸小さめの横長ボタン
温度感: 明るく暖かい黄色に、涼しげな空色を合わせた爽快な温度感

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#FFE900`	ブランドのレモンイエロー地	38%	画素の実測
`secondary`	`#4B9EE2`	英字見出しの立体影・空の色	20%	画素の実測
`cta`	`#00B6FF`	MOREボタンの面	1%	画素の実測
`on-cta`	`#FEFEF9`	ボタン上の文字	0%	画素の主要色に補正
`background`	`#FFEF98`	FV背景の淡いクリーム黄	6%	画素の実測
`background-alt`	`#FFFEE0`	動画サムネ内の生成り地	9%	画素の主要色に補正
`text`	`#1A1A1A`	見出し・本文の黒文字	1%	推定
`on-dark`	`#FEFEF9`	空写真上の白文字	1%	画素の主要色に補正
`accent-1`	`#F3A51B`	手書き風英字のオレンジ	1%	画素の実測
`accent-2`	`#FEE601`	空写真上のサブコピーの黄文字	0%	画素の主要色に補正
`tint-1`	`#FEFEF9`	水玉パターンの白ドット	3%	画素の主要色に補正
`line`	`#010101`	FVコピー枠の黒線	0%	画素の実測
`cta-accessible`	`#007EB0`	AA を満たす補正値（計算）		計算

地はレモンイエローを基本とし、青空写真の帯を挟んでリズムを作る
英字見出しは黄地なら黄文字に水色の影、空の上なら黄文字に青の影
ボタンは水色のベタ面に白文字だけにする
黄地の下部や境界付近には白い水玉パターンを重ねる
本文は黄地では黒、空写真上では白で可読性を確保
オレンジは手書き風英字の装飾にのみ使う
button-more は文字 #FEFEF9 × 背景 #00B6FF のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#007EB0、4.5:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	セクション英字見出し(立体影付き)	装飾・ディスプレイ	Anton	400	54px	1.0	0.02em
`headline-md`	空写真上のリードコピー	ゴシック	Noto Sans JP	700	18px	1.6	0.05em
`body-lg`	空写真上の本文(白・中央)	ゴシック	Noto Sans JP	700	17px	1.9	0.04em
`headline-sm`	動画タイトル	ゴシック	Noto Sans JP	500	14px	1.5	0.0em
`body-md`	セクション説明文	ゴシック	Noto Sans JP	500	10px	1.9	0.03em
`note`	商品下の果汁表示	ゴシック	Noto Sans JP	700	10px	1.4	0.0em
`accent`	手書き風の装飾英字	欧文スクリプト	Pacifico	400	44px	1.1	0.0em
`label-button`	ボタンの英字ラベル	欧文サンセリフ	Dela Gothic One	400	9px	1.0	0.1em

セクション見出しは英字の大文字だけで作り、日本語の見出しは付けない
英字見出しは右下方向にずらした立体影を付ける
本文は中央揃えにし、短い文ごとに改行する
FVのコピーは白地＋黒枠の箱に入れて、2行を段違いに置く
手書き風英字は斜めに傾けて商品の横に重ねる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、商品一覧は 3 列＋2 列の中央揃え
本文ブロックの幅: 画面幅の約 87%
余白: セクション間 70px、基本単位 8px、カード内 0px（375px 幅換算）
見出し・説明文・ボタンはすべて中央揃え
動画カードは幅いっぱいの16:9サムネの下にタイトルを左揃えで置く
商品は切り抜き画像を並べ、下に短いラベルを付けるだけ
空写真の帯は全幅で、文字は上半分に集めて下は写真を見せる
ボタンは画面幅の約半分で中央に置く

Elevation & Depth

影はほぼ使わずフラットにする
商品の切り抜き写真にだけ薄いドロップシャドウを付けてよい
立体感は英字見出しのずらし影で出す

Shapes

角丸: 小 3px ／中 4px ／大 200px。ボタンは角丸の長方形。
写真の切り抜き: FVの人物は大きな楕円で囲む。動画は角丸なしの長方形、商品は背景を抜いた切り抜き
セクション境界: 空写真の帯と黄地の境界は右上がり／右下がりの斜めにする
ボタンは角丸小さめの横長長方形
セクションの境界に斜めの線を多めに使う
動画サムネは角丸なし

Components

立体影英字見出し（heading-3d-en）: 極太コンデンス体の大文字英字に水色のずらし影を付けた見出し
MOREボタン（button-more）: 水色の面に白の英字ラベル。右端に外部リンクアイコン
FVコピー枠（fv-copy-box）: 白地に黒の太枠で、2行のコピーを段違いに置く
動画カード（video-card）: 16:9のサムネに再生アイコンを重ね、下に黒字でタイトル
商品切り抜きアイテム（product-item）: 商品ボトルの切り抜きの下に、白太字の短いラベル
水玉パターン地（dot-pattern）: 黄地に白い水玉を重ねた装飾の地。下に向かってドットを大きくする
スライダードット（carousel-indicator）: FV下に小さな丸ドットと一時停止ボタン

Do's and Don'ts

Do - 黄と青空の2色の世界観を必ず交互に出す - 英字見出しには必ず立体影を付ける - 商品は切り抜き写真で、明るく正面から見せる - 境界を斜めにして動きを出す - 説明文は2〜3行に短くまとめる

Don't - 暗い色や重い背景のセクションを入れない - ボタンをピル型や派手なグラデーションにしない - 細い明朝体を使わない - 長い本文を左揃えで詰め込まない - 黄・青以外の強い色をベタ面に使わない

Page Structure

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

ファーストビュー（ブランドの明るい世界観と主力商品を印象づける）: 淡い黄地に大きな楕円で人物写真を入れ、黒枠のコピー箱と商品ボトルを重ねたスライダー
動画一覧（CMで親しみを持ってもらう）: 黄地に立体影英字見出し、16:9サムネとタイトルを縦に並べる。下部は水玉地
コンセプトメッセージ（味や飲みやすさを伝える）: 全幅の青空写真に白太字の中央揃えコピーを5段で置く
商品紹介（商品の種類を伝える）: 黄地に見出しと2行の説明、手書き風英字と商品切り抜きを斜めに重ねる。水玉地
ラインナップ（全商品を一覧で選ばせる）: 斜めに切った青空写真の帯に、商品切り抜きを3列/2列で並べる
コラム導線（読み物へ送る）: 黄地に見出し、3行の説明、水色のMOREボタン
歴史導線（ブランドの歴史ページへ送る）: 黄地から白へ抜けるドットグラデーションに説明文とMOREボタン、斜めで終える

Imagery

人物は黄色の服で黄色背景、笑顔で商品を持つ明るく高い彩度の写真
青空と白い雲、レモンの木を下から見上げる構図の写真を帯に使う
商品は白背景を抜いた正面の切り抜き。傾けて重ねても良い
動画サムネは生成り地に小さな人物を散らした遊び心のある構成
装飾は白い水玉とハーフトーンのドットグラデーション
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCでは動画を2列×2行のグリッドにする
ラインナップはPCではボトルを5列、パウチを2列で並べる
コラムと歴史の導線はPCでは左右2列に並べる
FVはPCで横長の楕円になり、人物と商品を横に並べる
空写真の帯や斜めの境界はPCでも全幅で残す

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

---
version: alpha
name: Vivid Lemon Yellow and Sky Blue Beverage Brand LP
description: 鮮やかなレモンイエローの地と青空写真の帯を交互に重ねたブランドサイト型 LP。英字見出しは極太コンデンス書体に水色の立体影を付け、白い水玉のハーフトーンと斜めのセクション境界でポップで爽やかな動きを出す。
colors:
  primary: '#FFE900'
  secondary: '#4B9EE2'
  cta: '#00B6FF'
  on-cta: '#FEFEF9'
  background: '#FFEF98'
  background-alt: '#FFFEE0'
  text: '#1A1A1A'
  on-dark: '#FEFEF9'
  accent-1: '#F3A51B'
  accent-2: '#FEE601'
  tint-1: '#FEFEF9'
  line: '#010101'
  cta-accessible: '#007EB0'
typography:
  display:
    fontFamily: Anton
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.4
  accent:
    fontFamily: Pacifico
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.1
  label-button:
    fontFamily: Dela Gothic One
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.1em
rounded:
  sm: 3px
  md: 4px
  lg: 200px
  full: 999px
spacing:
  unit: 8px
  card: 0px
  section: 70px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
  heading-3d-en:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 60px
  button-more:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 30px
  fv-copy-box:
    backgroundColor: '{colors.on-cta}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 40px
  video-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 220px
  product-item:
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 190px
  dot-pattern:
    backgroundColor: '{colors.primary}'
    height: 300px
  carousel-indicator:
    rounded: '{rounded.full}'
    height: 12px
---

# DESIGN.md — レモン黄×青空の爽快ビタミン飲料 LP（Vivid Lemon Yellow and Sky Blue Beverage Brand LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、清潔・爽やか、力強い・インパクト
- **キーワード**: レモンイエロー・青空・水玉ハーフトーン・立体影の英字見出し・斜め切り替え・商品の切り抜き
- **地の質感**: ベタ塗りの黄色に白い水玉パターンやドットのグラデーションを重ね、青空写真で抜け感を出す
- **形**: 大きな楕円で人物を囲むFV、斜めに切った境界、角丸小さめの横長ボタン
- **温度感**: 明るく暖かい黄色に、涼しげな空色を合わせた爽快な温度感

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#FFE900` | ブランドのレモンイエロー地 | 38% | 画素の実測 |
| `secondary` | `#4B9EE2` | 英字見出しの立体影・空の色 | 20% | 画素の実測 |
| `cta` | `#00B6FF` | MOREボタンの面 | 1% | 画素の実測 |
| `on-cta` | `#FEFEF9` | ボタン上の文字 | 0% | 画素の主要色に補正 |
| `background` | `#FFEF98` | FV背景の淡いクリーム黄 | 6% | 画素の実測 |
| `background-alt` | `#FFFEE0` | 動画サムネ内の生成り地 | 9% | 画素の主要色に補正 |
| `text` | `#1A1A1A` | 見出し・本文の黒文字 | 1% | 推定 |
| `on-dark` | `#FEFEF9` | 空写真上の白文字 | 1% | 画素の主要色に補正 |
| `accent-1` | `#F3A51B` | 手書き風英字のオレンジ | 1% | 画素の実測 |
| `accent-2` | `#FEE601` | 空写真上のサブコピーの黄文字 | 0% | 画素の主要色に補正 |
| `tint-1` | `#FEFEF9` | 水玉パターンの白ドット | 3% | 画素の主要色に補正 |
| `line` | `#010101` | FVコピー枠の黒線 | 0% | 画素の実測 |
| `cta-accessible` | `#007EB0` | AA を満たす補正値（計算） |  | 計算 |

- 地はレモンイエローを基本とし、青空写真の帯を挟んでリズムを作る
- 英字見出しは黄地なら黄文字に水色の影、空の上なら黄文字に青の影
- ボタンは水色のベタ面に白文字だけにする
- 黄地の下部や境界付近には白い水玉パターンを重ねる
- 本文は黄地では黒、空写真上では白で可読性を確保
- オレンジは手書き風英字の装飾にのみ使う
- `button-more` は文字 `#FEFEF9` × 背景 `#00B6FF` のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#007EB0`、4.5:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクション英字見出し(立体影付き) | 装飾・ディスプレイ | Anton | 400 | 54px | 1.0 | 0.02em |
| `headline-md` | 空写真上のリードコピー | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.05em |
| `body-lg` | 空写真上の本文(白・中央) | ゴシック | Noto Sans JP | 700 | 17px | 1.9 | 0.04em |
| `headline-sm` | 動画タイトル | ゴシック | Noto Sans JP | 500 | 14px | 1.5 | 0.0em |
| `body-md` | セクション説明文 | ゴシック | Noto Sans JP | 500 | 10px | 1.9 | 0.03em |
| `note` | 商品下の果汁表示 | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.0em |
| `accent` | 手書き風の装飾英字 | 欧文スクリプト | Pacifico | 400 | 44px | 1.1 | 0.0em |
| `label-button` | ボタンの英字ラベル | 欧文サンセリフ | Dela Gothic One | 400 | 9px | 1.0 | 0.1em |

- セクション見出しは英字の大文字だけで作り、日本語の見出しは付けない
- 英字見出しは右下方向にずらした立体影を付ける
- 本文は中央揃えにし、短い文ごとに改行する
- FVのコピーは白地＋黒枠の箱に入れて、2行を段違いに置く
- 手書き風英字は斜めに傾けて商品の横に重ねる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、商品一覧は 3 列＋2 列の中央揃え
- **本文ブロックの幅**: 画面幅の約 87%
- **余白**: セクション間 70px、基本単位 8px、カード内 0px（375px 幅換算）
- 見出し・説明文・ボタンはすべて中央揃え
- 動画カードは幅いっぱいの16:9サムネの下にタイトルを左揃えで置く
- 商品は切り抜き画像を並べ、下に短いラベルを付けるだけ
- 空写真の帯は全幅で、文字は上半分に集めて下は写真を見せる
- ボタンは画面幅の約半分で中央に置く

## Elevation & Depth

- 影はほぼ使わずフラットにする
- 商品の切り抜き写真にだけ薄いドロップシャドウを付けてよい
- 立体感は英字見出しのずらし影で出す

## Shapes

- **角丸**: 小 3px ／ 中 4px ／ 大 200px。ボタンは角丸の長方形。
- **写真の切り抜き**: FVの人物は大きな楕円で囲む。動画は角丸なしの長方形、商品は背景を抜いた切り抜き
- **セクション境界**: 空写真の帯と黄地の境界は右上がり／右下がりの斜めにする
- ボタンは角丸小さめの横長長方形
- セクションの境界に斜めの線を多めに使う
- 動画サムネは角丸なし

## Components

- **立体影英字見出し**（`heading-3d-en`）: 極太コンデンス体の大文字英字に水色のずらし影を付けた見出し
- **MOREボタン**（`button-more`）: 水色の面に白の英字ラベル。右端に外部リンクアイコン
- **FVコピー枠**（`fv-copy-box`）: 白地に黒の太枠で、2行のコピーを段違いに置く
- **動画カード**（`video-card`）: 16:9のサムネに再生アイコンを重ね、下に黒字でタイトル
- **商品切り抜きアイテム**（`product-item`）: 商品ボトルの切り抜きの下に、白太字の短いラベル
- **水玉パターン地**（`dot-pattern`）: 黄地に白い水玉を重ねた装飾の地。下に向かってドットを大きくする
- **スライダードット**（`carousel-indicator`）: FV下に小さな丸ドットと一時停止ボタン

## Do's and Don'ts

**Do**
- 黄と青空の2色の世界観を必ず交互に出す
- 英字見出しには必ず立体影を付ける
- 商品は切り抜き写真で、明るく正面から見せる
- 境界を斜めにして動きを出す
- 説明文は2〜3行に短くまとめる

**Don't**
- 暗い色や重い背景のセクションを入れない
- ボタンをピル型や派手なグラデーションにしない
- 細い明朝体を使わない
- 長い本文を左揃えで詰め込まない
- 黄・青以外の強い色をベタ面に使わない

## Page Structure

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

1. **ファーストビュー**（ブランドの明るい世界観と主力商品を印象づける）: 淡い黄地に大きな楕円で人物写真を入れ、黒枠のコピー箱と商品ボトルを重ねたスライダー
2. **動画一覧**（CMで親しみを持ってもらう）: 黄地に立体影英字見出し、16:9サムネとタイトルを縦に並べる。下部は水玉地
3. **コンセプトメッセージ**（味や飲みやすさを伝える）: 全幅の青空写真に白太字の中央揃えコピーを5段で置く
4. **商品紹介**（商品の種類を伝える）: 黄地に見出しと2行の説明、手書き風英字と商品切り抜きを斜めに重ねる。水玉地
5. **ラインナップ**（全商品を一覧で選ばせる）: 斜めに切った青空写真の帯に、商品切り抜きを3列/2列で並べる
6. **コラム導線**（読み物へ送る）: 黄地に見出し、3行の説明、水色のMOREボタン
7. **歴史導線**（ブランドの歴史ページへ送る）: 黄地から白へ抜けるドットグラデーションに説明文とMOREボタン、斜めで終える

## Imagery

- 人物は黄色の服で黄色背景、笑顔で商品を持つ明るく高い彩度の写真
- 青空と白い雲、レモンの木を下から見上げる構図の写真を帯に使う
- 商品は白背景を抜いた正面の切り抜き。傾けて重ねても良い
- 動画サムネは生成り地に小さな人物を散らした遊び心のある構成
- 装飾は白い水玉とハーフトーンのドットグラデーション
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは動画を2列×2行のグリッドにする
- ラインナップはPCではボトルを5列、パウチを2列で並べる
- コラムと歴史の導線はPCでは左右2列に並べる
- FVはPCで横長の楕円になり、人物と商品を横に並べる
- 空写真の帯や斜めの境界はPCでも全幅で残す

## 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-51b1719c`（元 LP の URL から採番）
- **元 LP**: https://c1000.jp/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://c1000.jp/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

食品・飲料木目×ミルクベージュのカフェ風紅茶 LPWarm Wood Cafe Milk Tea LP 食品・飲料はちみつ色グラデの季節ドリンク LPHoney Gradient Seasonal Drink LP 食品・飲料レモン黄×銀灰の左右分割コラボ飲料 LPLemon Yellow Split Collab Beverage LP 食品・飲料赤白テントの食品ギフトブーケ LPRed Awning Gift Bouquet Food Shop LP 食品・飲料白地×赤細線の明朝縦書き食品記念日LPRed Hairline Editorial Food Heritage LP 食品・飲料オレンジと湯気の鍋レシピ食品 LPWarm Orange Hot-Pot Food Brand LP