DESIGN.md — コーラル×ラベンダーの果実感ゼリー飲料 LP（Juicy Fruit Pop Jelly Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、かわいい、やさしい・柔らかい
• キーワード: 果実感・みずみずしさ・液体のような波形・コーラルピンク・ラベンダー・ポップ
• 地の質感: うっすらノイズが入ったマットな単色面に、果汁しぶきの写真素材を重ねる
• 形: 波打つ境界線、大きな角丸カード、ゼリーのような不定形の写真マスク、小さな水玉
• 温度感: 暖色寄り（コーラル・ピーチ）に、ぶどう系のラベンダーで寒色のアクセントを足す

Colors

• セクションごとに地の色を変える：コーラル→ラベンダー→ピーチ→コーラル
• 地の色の切り替えは必ず波線で行い、直線で区切らない
• 2つの味はそれぞれのテーマ色で塗り分ける（ピーチ系／ラベンダー系）。カードの面・文字・点線もその色にそろえる
• コーラル地の上の文字は白にし、要点だけピーチ色のマーカー下線を重ねる
• 黒に近い濃い文字はFVとフッターだけに使う
• button-pill は文字 #E07689 × 背景 #FEFDFC のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D33C57、4.54:1）を使う。
• heading-marker は文字 #FEF9F9 × 背景 #FC657A のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E70524、4.53:1）を使う。
• badge-tilted-en は文字 #FEF9F9 × 背景 #FC657A のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E70524、4.53:1）を使う。
• card-product は文字 #E07689 × 背景 #FED2D2 のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D33C57、4.5:1）を使う。
• sns-list は文字 #FEF9F9 × 背景 #FC657A のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E70524、4.53:1）を使う。

Typography

• 見出しは中央揃えにする。字間をやや広げ、親しみやすさを出す
• 強調したい語は文字を大きくし、ルビのように小さな語を上に添える
• シーン見出しは右上がりに数度傾け、下に点線を引く
• 英字見出しは太いディスプレイ書体を使い、斜めに傾けたピル型の中に白抜きで置く
• 注釈は※付きで小さく添え、本文と混ぜない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 果物の写真は左右の端に寄せ、本文を挟むように配置する
• 商品は2つ並べ、少しずらしてリズムをつける
• シーン提案は写真を左右交互にずらして縦に並べる
• SNSリンクはアイコンとテキストを横に並べたリストにする

Elevation & Depth

• 基本はフラットで、影は使わない
• 商品パッケージの切り抜き写真にだけ、ごく薄い落ち影をつける
• ボタンには薄いグレーの影を 2px ほどつける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: ゼリーやしずくのような不定形のマスクで切り抜く。商品と果物は背景を抜いた切り抜き写真にする
• セクション境界: 液体が揺れるような大きな波線。境界の近くに小さな水玉を 2〜3 個散らす
• 四角い写真枠は使わない
• 商品カードは縦長で、角丸を大きくとる
• 商品の背後に不定形の色面を敷く

Components

• 詳細リンクボタン（button-pill）: カード下に置く小さめの白いピル型ボタン。文字は各味のテーマ色
• マーカー下線見出し（heading-marker）: コーラル地に白い太字を置き、下半分にピーチ色の太い線を引く
• 傾いた英字ラベル（badge-tilted-en）: 斜めに傾けたコーラルのピル型に、白い英字を入れる
• 点線付き英字見出し（heading-dotted-en）: 白い英字の左右に、白い点線を伸ばす
• 商品カード（card-product）: 縦長の角丸カード。上に商品写真、その下に味名・点線・スペック・ボタンの順で並べる
• シーン見出し（scene-caption）: 傾けた手書き風の文字に、点線の下線を引く。横に不定形の写真を添える
• SNSリンク一覧（sns-list）: 白い正方形アイコンと白い文字、末尾に「〉」をつけたリスト

Do's and Don'ts

Do - 地の色の切り替えはすべて波線で行う - セクションごとに果物の切り抜き写真と果汁しぶきを散らす - 2つの味ごとに色をそろえる（ピーチ系／ラベンダー系） - 写真は不定形のマスクで柔らかく切り抜く - コーラル地の文字は白にし、マーカー下線で強調する

Don't - 四角い写真枠や直線の区切りを使わない - 黒や濃紺の大きな面を使わない - 寒色の青や緑をメインの色にしない - 細い明朝体を使わない - 強い影や立体的なボタンを使わない

Page Structure

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

1. ファーストビュー（人物と商品で興味を引き、主要な価値を短く伝える）: 淡いピンクの地に、人物と大きな果物の写真を重ねる。右上に手書き風のコピーと吹き出し状のラベルを置き、右下に商品2つ
2. 特長（食感と栄養のポイントを訴求する）: コーラル地に白い太字の見出しを並べ、マーカー下線で強調する。上部の左右に果物を配置
3. 利用シーンのリード（誰がいつ飲むかを示す）: 白い文字の2行のリード文。下に、不定形の色面に載せた商品2つと果物を配置
4. ラインナップ（味ごとのスペックと詳細への導線を示す）: 波線の下にラベンダー地。点線付きの英字見出しを置き、2カラムの角丸商品カードを並べる
5. おすすめのシーン（飲むシーンを具体的に想像させる）: ピーチ地に傾いた英字ラベルを置く。傾けたシーン見出しと不定形写真を3つ、左右交互に並べる
6. 公式サイト&SNS（外部サイトへ誘導する）: 波線の下にコーラル地。白い見出しを置き、アイコン付きのリンクを縦に並べる
7. フッター（規約・会社情報・著作権表示）: 白地に小さな黒文字で、規約リンク・会社名ロゴ・コピーライトを置く

Imagery

• 果物は背景を抜いた写真にし、果汁が跳ねるしぶきを添える
• 人物写真は明るくやわらかい自然光で撮り、白い服や生活感のある室内を写す
• 利用シーンの写真はパソコン作業・家事・読書など、日常の一瞬を切り取る
• 商品パッケージは正面から撮った切り抜き写真にし、少し傾けて動きを出す
• 装飾には小さな水玉や液体のような形を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも中央寄せの細めのカラム（約60%幅）を保ち、その左右に地の色と波線を全幅で広げる
• PCのFVは横長にし、左に人物、右にコピーと商品を置く
• PCでは特長の果物を見出しの左右に寄せ、商品は横に並べる
• SNSリンクはPCで横3列にする
• PCのフッターは、左に規約リンク、右に会社名を置く2列構成にする

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