---
version: alpha
name: Bright Yellow & Aqua Summer Beverage Recipe LP
description: 鮮やかなイエローと水面のような水色を地に使い、紺の太字ゴシックで読ませる飲料ブランドのレシピ型 LP。斜めカットの白カード、手描き線画イラスト、赤い手書き風見出しで、夏らしく明るいおうちカフェ感を出している。
colors:
  primary: '#FEE600'
  secondary: '#064D8C'
  text: '#154171'
  background: '#FEFEFE'
  background-alt: '#89DEF3'
  accent-1: '#F20303'
  cta: '#FEE600'
  on-cta: '#1F446F'
  on-dark: '#FBFEFD'
  tint-1: '#CBDAEA'
  line: '#2C527D'
  surface: '#FBFBFB'
  accent-2: '#FDBB2C'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.1
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.06em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.08em
  body-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.12em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.04em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 16px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  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}'
    rounded: '{rounded.full}'
    height: 46px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  heading-marker:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 28px
  label-dark:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 30px
  ingredient-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 40px
  note-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 110px
  step-badge:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 72px
  tip-panel:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 480px
  product-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 340px
---

# DESIGN.md — 黄×水色×紺の夏向け飲料レシピ LP（Bright Yellow & Aqua Summer Beverage Recipe LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、清潔・爽やか、親しみ・手作り感
- **キーワード**: 夏・イエロー・水面・レシピ・手描き線画・斜めカット
- **地の質感**: 水面や空の写真テクスチャの上に、フラットな白・黄の面を重ねる。影はほぼ使わず、色の面で区切る。
- **形**: 四角いカードの上下辺を少し斜めにカットする。見出しの下に斜めの平行四辺形マーカーを敷き、ボタンだけはピル型。
- **温度感**: 明るく爽やかで、少し温かい。黄の元気さと水色の涼しさを組み合わせる。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#FEE600` | ブランドイエロー（帯・カード・ボタン） | 18% | 画素の実測 |
| `secondary` | `#064D8C` | 紺の帯セクション・ラベル地 | 6% | 画素の実測 |
| `text` | `#154171` | 見出し・本文の紺文字 | 3% | 画素の実測 |
| `background` | `#FEFEFE` | 基本の白地・白カード | 41% | 画素の実測 |
| `background-alt` | `#89DEF3` | レシピセクションの水色地 | 12% | 画素の実測 |
| `accent-1` | `#F20303` | 手書き風見出しの赤 | 1% | 画素の実測 |
| `cta` | `#FEE600` | 購入ボタンの黄 | 1% | 画素の実測 |
| `on-cta` | `#1F446F` | 購入ボタンの文字 | 0% | 画素の主要色に補正 |
| `on-dark` | `#FBFEFD` | 紺帯の上の白文字 | 1% | 画素の実測 |
| `tint-1` | `#CBDAEA` | 空背景の淡い水色 | 5% | 画素の実測 |
| `line` | `#2C527D` | アウトラインボタン・注釈枠の線 | 0% | 画素の実測 |
| `surface` | `#FBFBFB` | フッターの薄グレー | 2% | 画素の実測 |
| `accent-2` | `#FDBB2C` | 比較ラベルのオレンジ黄 | 0% | 画素の実測 |

- 地はセクションごとに白・水色・黄・紺を切り替えて、レシピのまとまりを分ける。
- レシピの中身は白カードにまとめ、水色や黄の背景の上に浮かせる。
- 文字は紺を基本にする。紺地の帯では白文字にする。
- 赤は手書き風の大見出しにだけ使い、それ以外では使わない。
- 見出しの下には黄の斜めマーカーを敷いて強調する。
- 購入ボタンは黄の塗り、サブ導線は白地に紺線のアウトラインにする。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | レシピ名の大見出し（赤・手書き風） | 装飾・ディスプレイ | Dela Gothic One | 400 | 30px | 1.3 | 0.08em |
| `headline-lg` | 英字見出し・大きな比率数字 | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.0em |
| `headline-md` | セクション見出し（紺・太字） | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.5 | 0.08em |
| `headline-sm` | カード見出し・リード文 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.06em |
| `body-md` | 本文・材料リスト | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.8 | 0.08em |
| `body-lg` | 黄色パネル内の説明文 | ゴシック | Zen Kaku Gothic New | 500 | 16px | 1.9 | 0.12em |
| `note` | 注釈・目安 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.04em |
| `label-button` | ボタン・ラベル | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.4 | 0.08em |

- 見出しは小さなリード行、斜めマーカー付きのラベル、大見出しの 3 段で組む。
- 英字の大見出しには、淡い水色のずらし影を付ける。
- 文字は中央揃えを基本にする。紹介パネルの本文だけ左揃えにする。
- 材料リストは左に項目、右に分量を置き、間を点線でつなぐ。
- 数字（01〜04、比率）は太い欧文で大きく見せる。
- 字間はやや広め（0.06〜0.12em）にする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。冒頭の 3 レシピ導線だけ 3 列
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
- カードは画面端から約 16px 内側に置き、背景色が左右に見えるようにする。
- 1 つのレシピは、写真、材料、購入ボタン、3 ステップのカルーセルの順で 1 枚のカードにまとめる。
- コツは黄のパネルを縦に積み、パネル同士は 24px あける。
- 紺の帯は全幅にし、最後に下向きの二重矢印を置く。
- ステップは 1 枚ずつのカルーセルにし、左右の矢印とドットを付ける。

## Elevation & Depth

- 基本はフラット。影ではなく色の面で層を作る。
- 商品カードだけ、柔らかい薄い影（0 4px 12px rgba(0,0,0,.1)）を付ける。
- グラスなどの切り抜き写真には、自然な落ち影を残す。

## Shapes

- **角丸**: 小 0px ／ 中 16px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: グラス写真は四角に切り、下辺を斜めにカットする。人物は白フチ付きで切り抜く。イラストは斜めの白い台形の上に載せる。
- **セクション境界**: 上下辺を少し傾けた斜めカットで区切る。
- カードの角は基本 0 にし、上下辺だけ数度傾ける。
- 注釈枠は紺の細線で囲み、対角の 2 隅に紺の三角を付ける。
- 見出しの下には、傾けた黄の平行四辺形マーカーを敷く。
- STEP 番号は紺の正方形で示し、黄のずらし影を付ける。

## Components

- **黄ピル購入ボタン**（`button-primary`）: 黄の塗りのピル型。文字は中央、右端に「>」を置く。
- **アウトラインボタン**（`button-outline`）: 白地に紺の細線のピル型。コツや製品一覧への導線に使う。
- **斜めマーカー見出し**（`heading-marker`）: 小さなラベル文字の下に、黄の斜め帯を敷く。
- **紺地の帯ラベル**（`label-dark`）: 見出しの下に置く、紺の長方形に白文字のサブコピー。
- **点線の材料リスト**（`ingredient-list`）: 項目と分量を点線でつなぐ。目安は右寄せの小さな注釈にする。
- **角飾り付き注釈枠**（`note-box`）: 紺の細線の枠。左上と右下に紺の三角を付ける。
- **STEP 番号**（`step-badge`）: 紺の正方形に白で STEP と数字を入れ、黄の影を付ける。
- **コツの黄パネル**（`tip-panel`）: 黄の面に番号、見出し、斜めの白台に載せたイラスト、注釈枠を縦に並べる。
- **商品カルーセルカード**（`product-card`）: 黄地の上に置く角丸の白カード。商品画像、名称、アウトラインボタンを並べる。

## Do's and Don'ts

**Do**
- 黄・水色・白・紺の 4 色で構成する。
- カードの上下辺を少し傾け、軽やかな動きを出す。
- 工程やコツは、黄をアクセントにした手描き線画イラストで描く。
- 見出しは「リード、マーカー付きラベル、大見出し」の 3 段で組む。
- セクションの切り替わりに、紺の帯と下向き矢印で区切りを入れる。

**Don't**
- 赤を大見出し以外に多く使わない。
- 黒文字を使わず、紺で統一する。
- 強いドロップシャドウや立体的なボタンを使わない。
- 角丸カードを多用しない（商品カードだけにする）。
- くすんだ色や暗い写真を使わない。

## Page Structure

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

1. **ファーストビュー**（季節感と商品を一目で伝える）: 青空と海を背景にした人物写真。上に白い太字のコピーを黄の下線付きで載せ、下部に商品パッケージと実績バッジを置く。
2. **動画紹介**（作り方を動画で見せる）: 白地に、マーカー付きの見出しと全幅の埋め込み動画を置く。
3. **レシピ導線**（3 種のレシピへジャンプさせる）: 水面写真の上に 3 列の縦長カードを並べる。上半分が黄地にグラス、下が白地に見出しと下向き矢印。下にコツへの角丸バナーを置く。
4. **レシピ1（基本）**（基本の作り方を示す）: 赤の手書き風大見出しと紺の帯ラベルを置く。水色地の白カードに写真、材料、商品紹介と購入ボタン、3 ステップのカルーセルを入れる。
5. **中間の訴求帯**（アレンジへ話をつなぐ）: 上が黄、下が紺の斜め分割の帯。グラスとティーバッグの切り抜きを置き、白文字の見出しと矢印を入れる。
6. **レシピ2（ミルク）**（比率の訴求とアレンジのレシピ）: 水色地の白カードに、大きな比率数字と黄マーカーを置く。続けて材料と 3 ステップを入れる。
7. **レシピ3（レモン）**（夏のアレンジを提案する）: 黄の背景に、レモンの切り抜きを散らした白カードを置く。
8. **コツの導入**（コツのパートへ導く）: 全幅の紺帯に白文字を置き、二重矢印で締める。
9. **4つのコツ**（おいしく作る手順のポイントを伝える）: 番号付きの黄パネル 4 枚に、線画イラストと注釈枠を入れる。
10. **商品一覧**（購入へ誘導する）: 黄地に、角丸の白い商品カードのカルーセルを置く。
11. **こだわり紹介**（品質の根拠を示す）: 空の写真を背景に、写真と黄の斜めパネルの説明を交互に置く。比較写真とレーダーチャートも入れる。
12. **実績バナー・フッター**（信頼を補強し、関連リンクを置く）: 黄のグラデーションの実績バナーを置き、その下に薄グレーで 3 列のテキストリンクを並べる。

## Imagery

- グラス入りドリンクは、黄と水色のツートン背景で撮り、明るい自然光で氷の透明感を出す。
- 背景から切り抜いた茶葉・レモン・ミルク瓶を、カードの端からはみ出すように散らす。
- 工程とコツのイラストは、黒の手描き線画に黄と淡い水色の塗りを部分的に入れる。
- 背景には、水面のきらめきや青空と雲の写真を薄く敷く。
- 人物は笑顔の白シャツ姿にし、白フチで切り抜く。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では、ステップのカルーセルを 3 列に並べる。
- PC では、コツの黄パネルを 2×2 のグリッドにする。
- PC では、商品カードを 3 枚横に並べる。
- PC では、材料リストと商品紹介を左右 2 カラムにする。
- PC では、こだわり紹介の写真と説明を左右交互に 2 カラムで置く。
- コンテンツ幅は PC で約 80%（最大 900px 程度）にする。

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